+
+
+ {label}
+
+
+
+
+ );
+}
+
+export default AuthBottomAction;
diff --git a/src/features/auth/components/AuthBrandHeader.tsx b/src/features/auth/components/AuthBrandHeader.tsx
new file mode 100644
index 0000000..24275fe
--- /dev/null
+++ b/src/features/auth/components/AuthBrandHeader.tsx
@@ -0,0 +1,14 @@
+import streamLogo from "@/assets/icons/auth/stream-logo.svg";
+import streamWordmark from "@/assets/icons/auth/stream-wordmark.svg";
+
+// Figma: Login Brand Header (nodeId 3685:113326) — 심볼(48) + stream 워드마크, 간격 6.
+function AuthBrandHeader() {
+ return (
+
+ 
+ 
+
+ );
+}
+
+export default AuthBrandHeader;
diff --git a/src/features/auth/components/AuthKConnectButton.tsx b/src/features/auth/components/AuthKConnectButton.tsx
new file mode 100644
index 0000000..0f962f4
--- /dev/null
+++ b/src/features/auth/components/AuthKConnectButton.tsx
@@ -0,0 +1,32 @@
+import { Typography } from "@wanteddev/wds";
+
+import kConnectLogo from "@/assets/icons/auth/k-connect-logo.svg";
+
+interface AuthKConnectButtonProps {
+ isLoading: boolean;
+ onClick: () => void;
+}
+
+// Figma: 로그인 Action Area > K-CONNECT 버튼 (nodeId 3147:135414) — Stream 로컬 버튼이다.
+// K-CONNECT 브랜드색(#004F9F)이라 WDS ActionAreaButton의 primary 색으로는 만들 수 없고, 모서리 12px·
+// 높이 57px(위아래 18px + 줄 높이 24px 안에 로고 28px)도 WDS 버튼 크기 스케일에 없다.
+function AuthKConnectButton({ isLoading, onClick }: AuthKConnectButtonProps) {
+ return (
+
+ );
+}
+
+export default AuthKConnectButton;
diff --git a/src/features/auth/components/AuthLoginCarousel.tsx b/src/features/auth/components/AuthLoginCarousel.tsx
new file mode 100644
index 0000000..868f7a3
--- /dev/null
+++ b/src/features/auth/components/AuthLoginCarousel.tsx
@@ -0,0 +1,98 @@
+import { Typography } from "@wanteddev/wds";
+import { useRef, useState } from "react";
+
+import illustrationCircle from "@/assets/icons/auth/illustration-circle.svg";
+import AuthPaginationDots from "@/features/auth/components/AuthPaginationDots";
+import { LOGIN_SLIDES } from "@/features/auth/constants/auth";
+import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
+
+// Figma: Login Feature Content (nodeId 3658:113307) — 일러스트 320×240 + 문구, 아래에 페이지네이션 닷.
+// 화면설계서 2번: 자동 전환은 없고 사용자가 스와이프로 다음·이전 슬라이드로 넘기며, 닷으로 현재 순서를
+// 보여 준다. 문구와 닷 사이는 Figma가 28px로 보이지만 Login Copy 프레임이 50px로 고정돼 문구(54px)가 4px 넘치는
+// 값이라, 실제 문구 끝에서 닷까지는 24px이다. 스와이프는 네이티브 가로 스크롤 + scroll-snap이라 따로 제스처 코드를 두지 않는다.
+function AuthLoginCarousel() {
+ const scrollerRef = useRef
+
+ );
+}
+
+export default AuthLoginCarousel;
diff --git a/src/features/auth/components/AuthOnboardingHeading.tsx b/src/features/auth/components/AuthOnboardingHeading.tsx
new file mode 100644
index 0000000..5df353a
--- /dev/null
+++ b/src/features/auth/components/AuthOnboardingHeading.tsx
@@ -0,0 +1,35 @@
+import { Typography } from "@wanteddev/wds";
+import type { ReactNode } from "react";
+
+interface AuthOnboardingHeadingProps {
+ /** "1 / 2"처럼 전체 단계 중 현재 단계(페이지 인디케이터, 화면설계서 2·5번) */
+ step: string;
+ /** 줄바꿈이 있는 제목은 줄마다 요소로 넘긴다 */
+ children: ReactNode;
+}
+
+// Figma: Onboarding Copy (nodeId 3658:112629) — 단계 표시 + 제목(Heading 1/Bold 22px).
+function AuthOnboardingHeading({ step, children }: AuthOnboardingHeadingProps) {
+ return (
+
+ {/* 일러스트 뒤 은은한 파란 빛(Figma Illustration Background Circle) — 223×138 타원 둘레로 번지는
+ 623×538 이미지라 슬라이드 스크롤 영역 안에 두면 잘려서, 모든 슬라이드가 같은 자리를 쓰는 점을 이용해
+ 스크롤 영역 밖에 한 번만 그린다. 화면 폭을 넘는 부분만 잘라 가로 스크롤이 생기지 않게 한다. */}
+
+
+
+ 
+
+
+
+ {LOGIN_SLIDES.map((slide) => (
+
+
+ 
+
+ ))}
+
+
+ {slide.title}
+
+
+ {slide.description}
+
+
+
+
+ {step}
+
+
+ {children}
+
+
+ );
+}
+
+export default AuthOnboardingHeading;
diff --git a/src/features/auth/components/AuthPaginationDots.tsx b/src/features/auth/components/AuthPaginationDots.tsx
new file mode 100644
index 0000000..847d744
--- /dev/null
+++ b/src/features/auth/components/AuthPaginationDots.tsx
@@ -0,0 +1,37 @@
+interface AuthPaginationDotsProps {
+ totalPages: number;
+ /** 0부터 센다 */
+ currentPage: number;
+ onSelect: (page: number) => void;
+}
+
+// Figma: Pagination/Dots (nodeId 3658:113073) — Stream 로컬 컴포넌트다. 이름은 WDS `PaginationDots`와
+// 같지만 크기가 달라서 쓰지 않았다: Figma 닷은 지름 6px·간격 6px(중심 간격 12px)인데, WDS는 `small`이
+// 8px·간격 8px(16px), `medium`이 10px이고 닷 크기를 CSS 변수로만 바꿀 수 있어 내부 오버라이드가 된다.
+// 현재 닷은 Label/Normal, 나머지는 같은 색의 16% 불투명도다.
+function AuthPaginationDots({
+ totalPages,
+ currentPage,
+ onSelect,
+}: AuthPaginationDotsProps) {
+ return (
+
+ );
+}
+
+export default AuthPaginationDots;
diff --git a/src/features/auth/components/AuthTermsAgreementRow.tsx b/src/features/auth/components/AuthTermsAgreementRow.tsx
new file mode 100644
index 0000000..4f2fe70
--- /dev/null
+++ b/src/features/auth/components/AuthTermsAgreementRow.tsx
@@ -0,0 +1,68 @@
+import { Checkbox, Typography } from "@wanteddev/wds";
+import { useId } from "react";
+
+import arrowRightIcon from "@/assets/icons/auth/arrow-right.svg";
+
+interface AuthTermsAgreementRowProps {
+ label: string;
+ checked: boolean;
+ onCheckedChange: (checked: boolean) => void;
+ /** 있으면 오른쪽에 화살표가 붙고 눌러서 약관 상세로 간다 — "전체 동의하기" 행에는 없다 */
+ onOpenDetail?: () => void;
+ /** 전체 동의 행은 글자가 SemiBold(Body 2/Bold), 개별 약관 행은 Regular다 */
+ isBold?: boolean;
+}
+
+// Figma: Control/Checkbox 행 — 전체 동의하기(nodeId 3658:112647), 개별 약관 행(3658:112650 외).
+// WDS Checkbox는 label prop이 없고 `