diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6bbf838..6f42725 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -32,6 +32,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
       - name: Lint
         run: pnpm lint
 
diff --git a/.gitignore b/.gitignore
index ef313fc..ca6c905 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.pnpm-store/
 dist
 dist-ssr
 .next
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
index 27ab729..67ed411 100644
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -92,7 +92,7 @@
 
 - `LibraryBookCard`는 도서관/레주메북 진입용 160×220 책 커버 카드입니다. 현재 커버는 `public/assets/library-book-cover.svg` 고정 asset을 사용하며, 이 파일명/경로는 issue #14 초기 카드 계약입니다. 카드 종류가 늘어나면 `cover` 또는 `variant` 계약을 별도 결정합니다.
 - `PortfolioResumeSheet`는 학생 포트폴리오 첫 자기소개/이력서 시트입니다. 사용자 지정 기준에 따라 이름은 `Title Small`, 전공 상태는 `Body Tiny`, 학번/학과/email 메타는 `Body very Tiny`를 사용합니다. `resume small` / `resume major` token은 PDF/고밀도 출력 기준이 확정될 때 별도 적용 여부를 결정합니다.
-- 공개 route와 `ComponentPreview`에서 쓰는 예시 데이터는 실제 API mock이 아니라 화면 확인용 fixture이므로 `src/shared/fixtures/examples/publicExamples.ts`에 둡니다.
+- 공개 포트폴리오 route에서 쓰는 예시 데이터는 실제 API mock이 아니라 화면 확인용 fixture이므로 `src/shared/fixtures/examples/publicExamples.ts`에 둡니다.
 
 ### Spacing
 
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..b928c23
--- /dev/null
+++ b/src/app/(auth)/login/page.tsx
@@ -0,0 +1,11 @@
+import type { Metadata } from 'next'
+
+import { AuthLoginPage } from '@/features/auth/ui'
+
+export const metadata: Metadata = {
+  title: '로그인',
+}
+
+export default function LoginPage() {
+  return <AuthLoginPage />
+}
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index 6ae6edb..eca846e 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -1,49 +1,5 @@
-import Link from 'next/link'
-
-import { samplePortfolioHref, sampleResumeBookHref } from '@/shared/fixtures/examples/publicExamples'
-import { LibraryBookCard } from '@/shared/ui'
-
-import styles from './publicRoute.module.css'
+import { redirect } from 'next/navigation'
 
 export default function HomePage() {
-  return (
-    <main>
-      <div className={styles.pageShell}>
-        <section className={styles.heroCard} aria-labelledby="home-title">
-          <span className={styles.eyebrow}>Repo</span>
-          <h1 id="home-title" className={styles.heroTitle}>
-            대덕소프트마이스터고 학생을 위한 포트폴리오 플랫폼
-          </h1>
-          <p className={styles.heroDescription}>
-            Repo는 학생의 이력서와 포트폴리오를 정리하고, 공개 URL을 통해 성장 기록을 보여주기 위한 서비스입니다.
-          </p>
-          <div className={styles.actionRow}>
-            <Link className={`${styles.actionLink} ${styles.primaryActionLink}`} href={samplePortfolioHref}>
-              공개 포트폴리오 예시
-            </Link>
-            <Link className={styles.actionLink} href={sampleResumeBookHref}>
-              레주메북 예시
-            </Link>
-          </div>
-        </section>
-
-        <section className={styles.exampleSection} aria-labelledby="home-example-title">
-          <div className={styles.exampleSectionHeader}>
-            <span className={styles.eyebrow}>Examples</span>
-            <h2 id="home-example-title" className={styles.exampleTitle}>
-              바로 확인하는 포트폴리오와 레주메북 예시
-            </h2>
-            <p className={styles.exampleDescription}>
-              실제 데이터 연동 전에도 공개 포트폴리오와 레주메북의 진입 카드를 같은 컴포넌트 패턴으로 확인합니다.
-            </p>
-          </div>
-
-          <div className={styles.libraryBookGrid}>
-            <LibraryBookCard href={samplePortfolioHref} title="2022" batchLabel="9기" gradeLabel="2학년" actionLabel="포트폴리오 열람" />
-            <LibraryBookCard href={sampleResumeBookHref} title="2022" batchLabel="9기" gradeLabel="2학년" actionLabel="레주메북 열람" />
-          </div>
-        </section>
-      </div>
-    </main>
-  )
+  redirect('/login')
 }
diff --git a/src/app/(public)/publicRoute.module.css b/src/app/(public)/publicRoute.module.css
index 59e4c35..060d88e 100644
--- a/src/app/(public)/publicRoute.module.css
+++ b/src/app/(public)/publicRoute.module.css
@@ -42,100 +42,13 @@
   line-height: var(--repo-font-body-large-line-height);
 }
 
-.actionRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.actionLink {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  padding: 0 18px;
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  background: var(--surface-muted);
-  font-size: var(--repo-font-title-tiny-size);
-  font-weight: var(--repo-font-title-tiny-weight);
-  line-height: var(--repo-font-title-tiny-line-height);
-}
-
-.primaryActionLink {
-  color: var(--repo-text-black);
-  border-color: var(--brand);
-  background: var(--brand);
-}
-
-.exampleSection {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  gap: 48px;
-  align-items: center;
-  margin-top: 24px;
-  padding: 40px;
-  border: 1px solid var(--border);
-  border-radius: 32px;
-  background: var(--surface);
-}
-
-.exampleSectionHeader {
-  display: grid;
-  gap: 16px;
-  max-width: 560px;
-}
-
-.exampleTitle {
-  margin: 0;
-  font-size: var(--repo-font-title-medium-size);
-  font-weight: var(--repo-font-title-medium-weight);
-  line-height: var(--repo-font-title-medium-line-height);
-  letter-spacing: -0.04em;
-}
-
-.exampleDescription {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: var(--repo-font-body-medium-size);
-  font-weight: var(--repo-font-body-medium-weight);
-  line-height: var(--repo-font-body-medium-line-height);
-}
-
-.libraryBookGrid {
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  gap: 20px;
-  padding: 24px;
-  border-radius: 28px;
-  background: var(--repo-gray-100);
-}
-
-@media (max-width: 820px) {
-  .exampleSection {
-    grid-template-columns: 1fr;
-  }
-
-  .libraryBookGrid {
-    justify-content: start;
-    width: fit-content;
-  }
-}
-
-@media (max-width: 560px) {
-  .libraryBookGrid {
-    grid-template-columns: 1fr;
-  }
-}
-
 @media (max-width: 480px) {
   .pageShell {
     width: min(100% - 32px, 1120px);
     padding: 48px 0;
   }
 
-  .heroCard,
-  .exampleSection {
+  .heroCard {
     padding: 28px;
     border-radius: 24px;
   }
diff --git a/src/app/(public)/resume-books/[bookId]/page.tsx b/src/app/(public)/resume-books/[bookId]/page.tsx
index a724695..b11b3da 100644
--- a/src/app/(public)/resume-books/[bookId]/page.tsx
+++ b/src/app/(public)/resume-books/[bookId]/page.tsx
@@ -18,7 +18,7 @@ export default async function ResumeBookPage({ params }: ResumeBookPageProps) {
             {bookId} 레주메북
           </h1>
           <p className={styles.heroDescription}>
-            학년/전공/주제별 학생 포트폴리오를 모아보는 레주메북 화면의 Next.js route placeholder입니다.
+            학년/전공/주제별 학생 포트폴리오를 모아보는 레주메북 화면입니다.
           </p>
         </section>
       </div>
diff --git a/src/app/dev/component-preview/page.tsx b/src/app/dev/component-preview/page.tsx
deleted file mode 100644
index 8dc2452..0000000
--- a/src/app/dev/component-preview/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { notFound } from 'next/navigation'
-
-import { ComponentPreview } from '@/dev/ComponentPreview'
-
-export default function ComponentPreviewPage() {
-  if (process.env.NODE_ENV !== 'development') {
-    notFound()
-  }
-
-  return <ComponentPreview />
-}
diff --git a/src/dev/ComponentPreview.module.css b/src/dev/ComponentPreview.module.css
deleted file mode 100644
index 45216d0..0000000
--- a/src/dev/ComponentPreview.module.css
+++ /dev/null
@@ -1,236 +0,0 @@
-.preview {
-  display: grid;
-  gap: 72px;
-  min-height: 100vh;
-  padding: 32px 36px 80px;
-  color: var(--repo-text-black);
-  background: var(--repo-gray-600);
-}
-
-.section {
-  display: grid;
-  gap: 28px;
-  width: fit-content;
-}
-
-.sectionTitle {
-  margin: 0;
-  color: var(--repo-text-black);
-  font-size: var(--repo-font-title-s-medium-size);
-  font-weight: var(--repo-font-title-s-medium-weight);
-  line-height: var(--repo-font-title-s-medium-line-height);
-}
-
-.buttonFrameWrap {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 28px;
-  align-items: center;
-}
-
-.stateLabels {
-  display: grid;
-  gap: 56px;
-  padding-top: 75px;
-}
-
-.stateLabel {
-  margin: 0;
-  color: var(--repo-text-black);
-  font-size: var(--repo-font-title-small-size);
-  font-weight: var(--repo-font-title-small-weight);
-  line-height: var(--repo-font-title-small-line-height);
-}
-
-.buttonFrame,
-.inputFrame {
-  display: grid;
-  width: fit-content;
-  border: 2px dashed #9747FF;
-  border-radius: 8px;
-}
-
-.buttonFrame {
-  gap: 28px;
-  padding: 32px 38px 28px;
-}
-
-.buttonGrid {
-  display: grid;
-  grid-template-columns: repeat(4, max-content);
-  gap: 38px 52px;
-  align-items: center;
-}
-
-.column {
-  display: grid;
-  gap: 28px;
-  justify-items: center;
-}
-
-.columnTitle {
-  margin: 0;
-  color: var(--repo-text-black);
-  font-size: var(--repo-font-title-tiny-size);
-  font-weight: var(--repo-font-title-tiny-weight);
-  line-height: var(--repo-font-title-tiny-line-height);
-}
-
-.buttonStack {
-  display: grid;
-  gap: 28px;
-}
-
-.buttonPreviewHover.buttonPreviewHover {
-  background: var(--repo-bg-main-lighter);
-}
-
-.groupLabels {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-top: -4px;
-  color: var(--repo-text-black);
-  font-size: var(--repo-font-title-tiny-size);
-  font-weight: var(--repo-font-title-tiny-weight);
-  line-height: var(--repo-font-title-tiny-line-height);
-  text-align: center;
-}
-
-.inputFrame {
-  gap: 38px;
-  width: 353px;
-  padding: 52px 56px;
-}
-
-.logoFrame {
-  display: grid;
-  gap: 48px;
-  width: fit-content;
-  padding: 64px 96px;
-  border: 2px dashed #9747FF;
-  border-radius: 8px;
-}
-
-.checkboxFrame {
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  gap: 56px;
-  width: fit-content;
-  padding: 48px 56px;
-  border: 2px dashed #9747FF;
-  border-radius: 8px;
-}
-
-.checkboxGroup {
-  display: grid;
-  gap: 20px;
-  align-content: start;
-}
-
-.previewLabel {
-  margin: 0;
-  color: var(--repo-text-black);
-  font-size: var(--repo-font-title-tiny-size);
-  font-weight: var(--repo-font-title-tiny-weight);
-  line-height: var(--repo-font-title-tiny-line-height);
-}
-
-.inlineControl {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--repo-gray-50);
-  font-size: var(--repo-font-body-small-size);
-  font-weight: var(--repo-font-body-small-weight);
-  line-height: var(--repo-font-body-small-line-height);
-}
-
-.switchFrame {
-  display: grid;
-  gap: 48px;
-  justify-items: center;
-  width: 320px;
-  padding: 56px 0;
-  border: 2px dashed #9747FF;
-  border-radius: 32px;
-}
-
-.switchInteractiveRow {
-  display: inline-flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.switchStateText {
-  min-width: 24px;
-  color: var(--repo-text-black);
-  font-size: var(--repo-font-body-small-size);
-  font-weight: var(--repo-font-body-small-weight);
-  line-height: var(--repo-font-body-small-line-height);
-}
-
-.feedbackFrame {
-  display: grid;
-  gap: 32px;
-  width: fit-content;
-  padding: 40px 48px;
-  border: 2px dashed #9747FF;
-  border-radius: 8px;
-}
-
-.feedbackBalloonFrame {
-  width: 560px;
-  min-height: 156px;
-  padding: 46px 96px;
-  border: 2px dashed #9747FF;
-  border-radius: 20px;
-}
-
-.toastFrame {
-  display: grid;
-  gap: 56px;
-  width: fit-content;
-  padding: 56px 84px;
-  border: 2px dashed #9747FF;
-  border-radius: 20px;
-}
-
-.dropdownFrame {
-  display: grid;
-  gap: 42px;
-  justify-items: center;
-  width: fit-content;
-  padding: 56px 76px;
-  border: 2px dashed #9747FF;
-  border-radius: 20px;
-}
-
-.tagFrame {
-  display: grid;
-  gap: 32px;
-  justify-items: center;
-  width: fit-content;
-  padding: 42px 64px;
-  border: 2px dashed #9747FF;
-  border-radius: 20px;
-}
-
-.libraryBookFrame {
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  gap: 32px;
-  width: fit-content;
-  padding: 48px 56px;
-  border: 2px dashed #9747FF;
-  border-radius: 20px;
-  background: var(--repo-gray-600);
-}
-
-
-.portfolioResumeSheetFrame {
-  width: fit-content;
-  padding: 32px;
-  border: 2px dashed #9747FF;
-  border-radius: 20px;
-  background: var(--repo-gray-600);
-}
diff --git a/src/dev/ComponentPreview.tsx b/src/dev/ComponentPreview.tsx
deleted file mode 100644
index 7930c1b..0000000
--- a/src/dev/ComponentPreview.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-'use client'
-
-import type { SVGProps, ReactNode } from 'react'
-import { useState } from 'react'
-
-import { samplePortfolioResume, samplePortfolioHref, sampleResumeBookHref } from '@/shared/fixtures/examples/publicExamples'
-
-import {
-  Button,
-  Checkbox,
-  CheckboxOption,
-  Dropdown,
-  Feedback,
-  FeedbackBalloon,
-  Input,
-  Logo,
-  LibraryBookCard,
-  PortfolioResumeSheet,
-  Switch,
-  Tag,
-  Toast,
-} from '@/shared/ui'
-
-import styles from './ComponentPreview.module.css'
-
-export function ComponentPreview() {
-  const [interactiveCheckboxChecked, setInteractiveCheckboxChecked] = useState(false)
-  const [interactiveOptionChecked, setInteractiveOptionChecked] = useState(false)
-  const [interactiveSwitchChecked, setInteractiveSwitchChecked] = useState(false)
-  const [feedbackExpanded, setFeedbackExpanded] = useState(false)
-  const [selectedGrade, setSelectedGrade] = useState('all')
-
-  return (
-    <main className={styles.preview}>
-      <section aria-labelledby="button-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="button-preview-title">
-          Button
-        </h1>
-
-        <div className={styles.buttonFrameWrap}>
-          <div className={styles.stateLabels} aria-hidden="true">
-            <p className={styles.stateLabel}>기본</p>
-            <p className={styles.stateLabel}>호버</p>
-            <p className={styles.stateLabel}>비활성</p>
-          </div>
-
-          <div>
-            <div className={styles.buttonFrame}>
-              <div className={styles.buttonGrid}>
-                <PreviewColumn title="Filled">
-                  <Button>버튼</Button>
-                  <Button className={styles.buttonPreviewHover}>버튼</Button>
-                  <Button disabled>버튼</Button>
-                </PreviewColumn>
-
-                <PreviewColumn title="Bordered dark">
-                  <Button variant="bordered-dark">버튼</Button>
-                  <Button className={styles.buttonPreviewHover} variant="bordered-dark">
-                    버튼
-                  </Button>
-                  <Button disabled variant="bordered-dark">
-                    버튼
-                  </Button>
-                </PreviewColumn>
-
-                <PreviewColumn title="Filled icon">
-                  <Button iconRight="plus">버튼</Button>
-                  <Button className={styles.buttonPreviewHover} iconRight="plus">
-                    버튼
-                  </Button>
-                  <Button disabled iconRight="plus">
-                    버튼
-                  </Button>
-                </PreviewColumn>
-
-                <PreviewColumn title="Bordered dark icon">
-                  <Button iconRight="right-arrow" variant="bordered-dark">
-                    버튼
-                  </Button>
-                  <Button className={styles.buttonPreviewHover} iconRight="right-arrow" variant="bordered-dark">
-                    버튼
-                  </Button>
-                  <Button disabled iconRight="right-arrow" variant="bordered-dark">
-                    버튼
-                  </Button>
-                </PreviewColumn>
-              </div>
-            </div>
-
-            <div className={styles.groupLabels}>
-              <span>아이콘 off</span>
-              <span>아이콘 on</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section aria-labelledby="checkbox-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="checkbox-preview-title">
-          Checkbox
-        </h1>
-
-        <div className={styles.checkboxFrame}>
-          <div className={styles.checkboxGroup}>
-            <p className={styles.previewLabel}>Primitive</p>
-            <Checkbox checked={false} onCheckedChange={() => undefined} aria-label="unchecked checkbox" />
-            <Checkbox checked onCheckedChange={() => undefined} aria-label="checked checkbox" />
-            <label className={styles.inlineControl}>
-              <Checkbox
-                checked={interactiveCheckboxChecked}
-                onCheckedChange={setInteractiveCheckboxChecked}
-                aria-label="interactive checkbox"
-              />
-              <span>{interactiveCheckboxChecked ? 'checked' : 'unchecked'}</span>
-            </label>
-            <Checkbox checked={false} disabled onCheckedChange={() => undefined} aria-label="disabled unchecked checkbox" />
-            <Checkbox checked disabled onCheckedChange={() => undefined} aria-label="disabled checked checkbox" />
-          </div>
-
-          <div className={styles.checkboxGroup}>
-            <p className={styles.previewLabel}>Checkbox Option</p>
-            <CheckboxOption checked={false} onCheckedChange={() => undefined}>
-              선택지
-            </CheckboxOption>
-            <CheckboxOption checked onCheckedChange={() => undefined}>
-              선택지
-            </CheckboxOption>
-            <CheckboxOption checked={interactiveOptionChecked} onCheckedChange={setInteractiveOptionChecked}>
-              클릭 가능한 선택지
-            </CheckboxOption>
-            <CheckboxOption checked={false} disabled onCheckedChange={() => undefined}>
-              비활성 선택지
-            </CheckboxOption>
-            <CheckboxOption checked disabled onCheckedChange={() => undefined}>
-              비활성 선택지
-            </CheckboxOption>
-          </div>
-        </div>
-      </section>
-
-      <section aria-labelledby="switch-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="switch-preview-title">
-          Switch
-        </h1>
-
-        <div className={styles.switchFrame}>
-          <Switch checked={false} onCheckedChange={() => undefined} aria-label="off 상태 스위치" />
-          <Switch checked onCheckedChange={() => undefined} aria-label="on 상태 스위치" />
-          <div className={styles.switchInteractiveRow}>
-            <Switch
-              checked={interactiveSwitchChecked}
-              onCheckedChange={setInteractiveSwitchChecked}
-              aria-label="클릭 가능한 스위치"
-            />
-            <span className={styles.switchStateText}>{interactiveSwitchChecked ? 'on' : 'off'}</span>
-          </div>
-          <Switch checked={false} disabled onCheckedChange={() => undefined} aria-label="disabled off 상태 스위치" />
-          <Switch checked disabled onCheckedChange={() => undefined} aria-label="disabled on 상태 스위치" />
-        </div>
-      </section>
-
-      <section aria-labelledby="feedback-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="feedback-preview-title">
-          Feedback
-        </h1>
-
-        <div className={styles.feedbackFrame}>
-          <Feedback
-            createdAtLabel="1일 전"
-            expanded={false}
-            onExpandedChange={() => undefined}
-            title="피드백 제목"
-          />
-          <Feedback
-            content="피드백에 대한 상세 내용"
-            createdAtLabel="1일 전"
-            expanded
-            onExpandedChange={() => undefined}
-            title="피드백 제목"
-          />
-          <Feedback
-            content="클릭하면 열리고 닫히는 피드백입니다."
-            createdAtLabel="방금 전"
-            expanded={feedbackExpanded}
-            onExpandedChange={setFeedbackExpanded}
-            title="인터랙션 확인"
-          />
-        </div>
-      </section>
-
-      <section aria-labelledby="feedback-balloon-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="feedback-balloon-preview-title">
-          Feedback Balloon
-        </h1>
-
-        <div className={styles.feedbackBalloonFrame}>
-          <FeedbackBalloon title="피드백 내용이 길어지면 이 자리에서 자연스럽게 줄바꿈됩니다" />
-        </div>
-      </section>
-
-
-      <section aria-labelledby="portfolio-resume-sheet-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="portfolio-resume-sheet-preview-title">
-          Portfolio Resume Sheet
-        </h1>
-
-        <div className={styles.portfolioResumeSheetFrame}>
-<PortfolioResumeSheet {...samplePortfolioResume} />
-        </div>
-      </section>
-
-      <section aria-labelledby="library-book-card-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="library-book-card-preview-title">
-          Library Book Card
-        </h1>
-
-        <div className={styles.libraryBookFrame}>
-          <LibraryBookCard href={samplePortfolioHref} title="2022" batchLabel="9기" gradeLabel="2학년" actionLabel="포트폴리오 열람" />
-          <LibraryBookCard href={sampleResumeBookHref} title="2022" batchLabel="9기" gradeLabel="2학년" actionLabel="레주메북 열람" />
-        </div>
-      </section>
-
-      <section aria-labelledby="tag-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="tag-preview-title">
-          Tag
-        </h1>
-
-        <div className={styles.tagFrame}>
-          <Tag onRemove={() => undefined}>태그</Tag>
-          <Tag onRemove={() => undefined} tone="light">
-            태그
-          </Tag>
-          <Tag>태그</Tag>
-          <Tag tone="light">태그</Tag>
-        </div>
-      </section>
-
-      <section aria-labelledby="dropdown-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="dropdown-preview-title">
-          Dropdown
-        </h1>
-
-        <div className={styles.dropdownFrame}>
-          <Dropdown defaultOpen onValueChange={setSelectedGrade} options={gradeOptions} value={selectedGrade} />
-          <Dropdown onValueChange={setSelectedGrade} options={gradeOptions} value={selectedGrade} />
-        </div>
-      </section>
-
-      <section aria-labelledby="toast-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="toast-preview-title">
-          Toast
-        </h1>
-
-        <div className={styles.toastFrame}>
-          <Toast variant="error">오류 메시지</Toast>
-          <Toast variant="success">확인 메시지</Toast>
-        </div>
-      </section>
-
-      <section aria-labelledby="logo-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="logo-preview-title">
-          Logo
-        </h1>
-
-        <div className={styles.logoFrame}>
-          <Logo />
-          <Logo tone="dark" />
-        </div>
-      </section>
-
-      <section aria-labelledby="input-preview-title" className={styles.section}>
-        <h1 className={styles.sectionTitle} id="input-preview-title">
-          Input
-        </h1>
-
-        <div className={styles.inputFrame}>
-          <Input placeholder="내용을 입력해주세요." rightIcon={<EyeIcon />} />
-          <Input placeholder="내용을 입력해주세요." />
-          <Input
-            error
-            errorMessage="에러메시지를 띄워줍니다."
-            placeholder="내용을 입력해주세요."
-            rightIcon={<EyeIcon />}
-          />
-          <Input error errorMessage="에러메시지를 띄워줍니다." placeholder="내용을 입력해주세요." />
-          <Input error placeholder="내용을 입력해주세요." />
-        </div>
-      </section>
-    </main>
-  )
-}
-
-const gradeOptions = [
-  { label: '전체', value: 'all' },
-  { label: '1학년', value: 'grade-1' },
-  { label: '2학년', value: 'grade-2' },
-  { label: '3학년', value: 'grade-3' },
-]
-
-type PreviewColumnProps = {
-  children: ReactNode
-  title: string
-}
-
-function PreviewColumn({ children, title }: PreviewColumnProps) {
-  return (
-    <div className={styles.column}>
-      <h2 className={styles.columnTitle}>{title}</h2>
-      <div className={styles.buttonStack}>{children}</div>
-    </div>
-  )
-}
-
-function EyeIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M2.5 12C4.7 7.8 8 5.7 12 5.7C16 5.7 19.3 7.8 21.5 12C19.3 16.2 16 18.3 12 18.3C8 18.3 4.7 16.2 2.5 12Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
-      <path
-        d="M12 14.7C13.4912 14.7 14.7 13.4912 14.7 12C14.7 10.5088 13.4912 9.3 12 9.3C10.5088 9.3 9.3 10.5088 9.3 12C9.3 13.4912 10.5088 14.7 12 14.7Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
-    </svg>
-  )
-}
diff --git a/src/features/auth/ui/AuthLoginPage.module.css b/src/features/auth/ui/AuthLoginPage.module.css
new file mode 100644
index 0000000..98ed2de
--- /dev/null
+++ b/src/features/auth/ui/AuthLoginPage.module.css
@@ -0,0 +1,331 @@
+.page {
+  position: relative;
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  overflow: hidden;
+  padding: 96px 32px 64px;
+  color: var(--repo-gray-50);
+  background: linear-gradient(180deg, var(--repo-bg-main-lighter) 0%, var(--repo-gray-950) 100%);
+}
+
+.page::before {
+  position: absolute;
+  inset: 0;
+  content: '';
+  background:
+    radial-gradient(circle at 50% 42%, rgb(255 255 255 / 18%) 0 1px, transparent 1px 7px),
+    radial-gradient(ellipse at 50% 42%, rgb(255 255 255 / 16%) 0, transparent 35%);
+  background-size: 7px 7px, 100% 100%;
+  mask-image: radial-gradient(ellipse 44% 35% at 50% 42%, black 0 52%, transparent 76%);
+  pointer-events: none;
+}
+
+.header {
+  position: absolute;
+  top: 18px;
+  left: 68px;
+  right: 68px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logoLink {
+  display: inline-flex;
+  border-radius: 8px;
+}
+
+.loginPill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 106px;
+  min-height: 36px;
+  padding: 8px 18px;
+  border-radius: 999px;
+  color: var(--repo-gray-50);
+  background: rgb(17 17 17 / 28%);
+  font-size: var(--repo-font-body-tiny-size);
+  font-weight: 600;
+  line-height: var(--repo-font-body-tiny-line-height);
+  letter-spacing: 0;
+}
+
+.loginIcon {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+.authCard {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 324px) minmax(0, 450px);
+  width: min(774px, 100%);
+  min-height: 448px;
+  border-radius: 11px;
+  overflow: hidden;
+  box-shadow: 0 18px 34px rgb(0 0 0 / 34%);
+  transition:
+    grid-template-columns 220ms ease,
+    width 220ms ease;
+}
+
+.teacherLayout {
+  grid-template-columns: minmax(0, 432px) minmax(0, 310px);
+  width: min(742px, 100%);
+}
+
+.brandPanel {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  grid-column: 1;
+  grid-row: 1;
+  min-height: 448px;
+  padding: 33px 27px 42px;
+  background: var(--repo-bg-main-lighter);
+  transition:
+    opacity 180ms ease,
+    transform 220ms ease;
+}
+
+.brandIntro {
+  display: grid;
+  align-content: start;
+  justify-items: start;
+}
+
+.divider {
+  width: 41px;
+  height: 1px;
+  margin: 18px 0 22px;
+  background: var(--repo-bg-main-point);
+}
+
+.welcome {
+  margin: 0;
+  color: var(--repo-gray-50);
+  font-size: var(--repo-font-body-tiny-size);
+  font-weight: 600;
+  line-height: var(--repo-font-body-tiny-line-height);
+  letter-spacing: 0;
+}
+
+.description {
+  margin: 9px 0 0;
+  color: var(--repo-gray-400);
+  font-size: var(--repo-font-body-very-tiny-size);
+  font-weight: var(--repo-font-body-very-tiny-weight);
+  line-height: var(--repo-font-body-very-tiny-line-height);
+  letter-spacing: 0;
+}
+
+.switchButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 28px;
+  padding: 0;
+  border: 0;
+  color: var(--repo-gray-400);
+  background: transparent;
+  font-size: var(--repo-font-body-tiny-size);
+  font-weight: var(--repo-font-body-tiny-weight);
+  line-height: var(--repo-font-body-tiny-line-height);
+  letter-spacing: 0;
+  cursor: pointer;
+}
+
+.switchButton:hover {
+  color: var(--repo-gray-50);
+}
+
+.switchIcon {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+.formPanel {
+  display: grid;
+  grid-column: 2;
+  grid-row: 1;
+  place-items: center;
+  min-height: 448px;
+  padding: 64px 64px 70px;
+  color: var(--repo-text-black);
+  background: var(--repo-gray-50);
+  transition:
+    opacity 180ms ease,
+    transform 220ms ease;
+}
+
+.teacherLayout .brandPanel {
+  grid-column: 2;
+  animation: panelFadeInFromRight 220ms ease both;
+}
+
+.teacherLayout .formPanel {
+  grid-column: 1;
+  animation: panelFadeInFromLeft 220ms ease both;
+}
+
+.studentLayout .brandPanel {
+  animation: panelFadeInFromLeft 220ms ease both;
+}
+
+.studentLayout .formPanel {
+  animation: panelFadeInFromRight 220ms ease both;
+}
+
+.form {
+  display: grid;
+  width: min(322px, 100%);
+  align-content: start;
+}
+
+.title {
+  margin: 0 0 31px;
+  text-align: center;
+  color: var(--repo-text-black);
+  font-size: var(--repo-font-title-small-size);
+  font-weight: var(--repo-font-title-small-weight);
+  line-height: var(--repo-font-title-small-line-height);
+  letter-spacing: 0;
+}
+
+.fieldGroup {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+  margin: 0 0 14px;
+}
+
+.label {
+  color: var(--repo-text-black);
+  font-size: var(--repo-font-body-tiny-size);
+  font-weight: var(--repo-font-body-tiny-weight);
+  line-height: var(--repo-font-body-tiny-line-height);
+  letter-spacing: 0;
+}
+
+.passwordIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.submitButton {
+  width: 100%;
+  margin-top: 58px;
+}
+
+@media (max-width: 820px) {
+  .page {
+    min-height: 100svh;
+    padding: 88px 20px 40px;
+  }
+
+  .header {
+    top: 20px;
+    left: 24px;
+    right: 24px;
+  }
+
+  .authCard,
+  .teacherLayout {
+    grid-template-columns: 1fr;
+    width: min(430px, 100%);
+  }
+
+  .brandPanel {
+    min-height: 252px;
+    padding: 28px 24px;
+  }
+
+  .formPanel {
+    min-height: 430px;
+    padding: 44px 28px 52px;
+  }
+
+  .studentLayout .brandPanel {
+    grid-column: 1;
+    order: 2;
+  }
+
+  .studentLayout .formPanel {
+    grid-column: 1;
+    order: 1;
+  }
+
+  .teacherLayout .brandPanel {
+    grid-column: 1;
+    order: 2;
+  }
+
+  .teacherLayout .formPanel {
+    grid-column: 1;
+    order: 1;
+  }
+}
+
+@media (max-width: 420px) {
+  .page {
+    padding-inline: 16px;
+  }
+
+  .loginPill {
+    min-width: auto;
+    padding-inline: 14px;
+  }
+
+  .formPanel {
+    padding-inline: 22px;
+  }
+}
+
+@keyframes panelFadeInFromLeft {
+  from {
+    opacity: 0.82;
+    transform: translateX(-12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes panelFadeInFromRight {
+  from {
+    opacity: 0.82;
+    transform: translateX(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .authCard,
+  .brandPanel,
+  .formPanel {
+    transition: none;
+  }
+
+  .brandPanel,
+  .formPanel,
+  .studentLayout .brandPanel,
+  .studentLayout .formPanel,
+  .teacherLayout .brandPanel,
+  .teacherLayout .formPanel {
+    animation: none;
+  }
+}
diff --git a/src/features/auth/ui/AuthLoginPage.tsx b/src/features/auth/ui/AuthLoginPage.tsx
new file mode 100644
index 0000000..92d7b4c
--- /dev/null
+++ b/src/features/auth/ui/AuthLoginPage.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+
+import { Button, Icon, Input, Logo } from '@/shared/ui'
+
+import styles from './AuthLoginPage.module.css'
+
+type LoginRole = 'student' | 'teacher'
+
+type LoginContent = {
+  description: string
+  switchLabel: string
+  title: string
+}
+
+const LOGIN_CONTENT: Record<LoginRole, LoginContent> = {
+  student: {
+    description: 'DSM학생들을 위한 이력서 관리 플랫폼, Repo',
+    switchLabel: '선생님으로 전환하기',
+    title: '학생 로그인',
+  },
+  teacher: {
+    description: 'DSM선생님을 위한 이력서 관리 플랫폼, Repo',
+    switchLabel: '학생으로 전환하기',
+    title: '선생님 로그인',
+  },
+}
+
+const oppositeRole: Record<LoginRole, LoginRole> = {
+  student: 'teacher',
+  teacher: 'student',
+}
+
+export function AuthLoginPage() {
+  const [role, setRole] = useState<LoginRole>('student')
+  const [showPassword, setShowPassword] = useState(false)
+  const content = LOGIN_CONTENT[role]
+  const nextRole = oppositeRole[role]
+  const layoutClassName = role === 'student' ? styles.studentLayout : styles.teacherLayout
+  const passwordType = showPassword ? 'text' : 'password'
+  const passwordToggleLabel = showPassword ? '비밀번호 숨기기' : '비밀번호 보이기'
+  const passwordIconName = showPassword ? 'eye' : 'eye-off'
+
+  const formPanel = (
+    <section className={styles.formPanel} aria-labelledby="login-title">
+      <form className={styles.form} aria-label={content.title}>
+        <h1 className={styles.title} id="login-title">
+          {content.title}
+        </h1>
+
+        <div className={styles.fieldGroup}>
+          <label className={styles.label} htmlFor="login-email">
+            이메일
+          </label>
+          <Input id="login-email" name="email" placeholder="이메일을 입력해주세요." type="email" />
+        </div>
+
+        <div className={styles.fieldGroup}>
+          <label className={styles.label} htmlFor="login-password">
+            비밀번호
+          </label>
+          <Input
+            id="login-password"
+            name="password"
+            onRightIconClick={() => setShowPassword((currentValue) => !currentValue)}
+            placeholder="비밀번호를 입력해주세요."
+            rightIcon={<Icon className={styles.passwordIcon} name={passwordIconName} />}
+            rightIconAriaLabel={passwordToggleLabel}
+            type={passwordType}
+          />
+        </div>
+
+        <Button className={styles.submitButton} disabled type="submit">
+          로그인
+        </Button>
+      </form>
+    </section>
+  )
+
+  const brandPanel = (
+    <aside className={styles.brandPanel} aria-label="Repo 소개">
+      <div className={styles.brandIntro}>
+        <Logo />
+        <span className={styles.divider} aria-hidden="true" />
+        <p className={styles.welcome}>Repo에 오신 것을 환영해요!</p>
+        <p className={styles.description}>{content.description}</p>
+      </div>
+
+      <button className={styles.switchButton} onClick={() => setRole(nextRole)} type="button">
+        <span>{content.switchLabel}</span>
+        <Icon className={styles.switchIcon} name="chevron-right" />
+      </button>
+    </aside>
+  )
+
+  return (
+    <main className={styles.page}>
+      <header className={styles.header}>
+        <Link className={styles.logoLink} href="/" aria-label="Repo 홈">
+          <Logo />
+        </Link>
+        <Link className={styles.loginPill} href="/login" aria-current="page">
+          <Icon className={styles.loginIcon} name="login" />
+          <span>로그인</span>
+        </Link>
+      </header>
+
+      <div className={`${styles.authCard} ${layoutClassName}`}>
+        {brandPanel}
+        {formPanel}
+      </div>
+    </main>
+  )
+}
diff --git a/src/features/auth/ui/index.ts b/src/features/auth/ui/index.ts
new file mode 100644
index 0000000..04e3eb0
--- /dev/null
+++ b/src/features/auth/ui/index.ts
@@ -0,0 +1 @@
+export { AuthLoginPage } from './AuthLoginPage'
diff --git a/src/shared/ui/Icon/Icon.tsx b/src/shared/ui/Icon/Icon.tsx
index 27a4654..7ef246b 100644
--- a/src/shared/ui/Icon/Icon.tsx
+++ b/src/shared/ui/Icon/Icon.tsx
@@ -1,21 +1,94 @@
-import type { SVGProps } from 'react';
+import type { SVGProps } from 'react'
 
-export type IconName = 'plus' | 'right-arrow';
+export type IconName = 'chevron-right' | 'eye' | 'eye-off' | 'login' | 'plus' | 'right-arrow'
 
 type IconProps = Omit<SVGProps<SVGSVGElement>, 'children'> & {
-  name: IconName;
-};
+  name: IconName
+}
 
 export function Icon({ name, 'aria-hidden': ariaHidden = true, focusable = false, ...props }: IconProps) {
+  if (name === 'chevron-right') {
+    return <ChevronRightIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />
+  }
+
+  if (name === 'eye') {
+    return <EyeIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />
+  }
+
+  if (name === 'eye-off') {
+    return <EyeOffIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />
+  }
+
+  if (name === 'login') {
+    return <LoginIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />
+  }
+
   if (name === 'plus') {
-    return <PlusIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />;
+    return <PlusIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />
   }
 
   if (name === 'right-arrow') {
-    return <RightArrowIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />;
+    return <RightArrowIcon aria-hidden={ariaHidden} focusable={focusable} {...props} />
   }
 
-  return null;
+  return null
+}
+
+function ChevronRightIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6 3.5L10.5 8L6 12.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
+    </svg>
+  )
+}
+
+function EyeIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M1.33 8.65C1.11 8.24 1.11 7.76 1.33 7.35C2.62 4.97 5.11 3.33 8 3.33C10.89 3.33 13.38 4.97 14.67 7.35C14.89 7.76 14.89 8.24 14.67 8.65C13.38 11.03 10.89 12.67 8 12.67C5.11 12.67 2.62 11.03 1.33 8.65Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M8 10.15A2.15 2.15 0 1 0 8 5.85A2.15 2.15 0 0 0 8 10.15Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  )
+}
+
+function EyeOffIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.52 9.52A2.15 2.15 0 0 1 6.48 6.48M12.54 11.18C11.22 12.12 9.67 12.67 8 12.67C5.11 12.67 2.62 11.03 1.33 8.65C1.11 8.24 1.11 7.76 1.33 7.35C1.9 6.3 2.71 5.39 3.67 4.69M6.61 3.51C7.06 3.39 7.52 3.33 8 3.33C10.89 3.33 13.38 4.97 14.67 7.35C14.89 7.76 14.89 8.24 14.67 8.65C14.42 9.11 14.13 9.54 13.8 9.93M2 2L14 14"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  )
+}
+
+function LoginIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.33 5.33L12 8M12 8L9.33 10.67M12 8H5.33M7.33 3.33H4C3.26 3.33 2.67 3.93 2.67 4.67V11.33C2.67 12.07 3.26 12.67 4 12.67H7.33"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.6"
+      />
+    </svg>
+  )
 }
 
 function PlusIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
@@ -23,7 +96,7 @@ function PlusIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
     <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path d="M8 2V14M2 8H14" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
     </svg>
-  );
+  )
 }
 
 function RightArrowIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
@@ -31,5 +104,5 @@ function RightArrowIcon(props: Omit<SVGProps<SVGSVGElement>, 'children'>) {
     <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path d="M5 2L11 8L5 14" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
     </svg>
-  );
+  )
 }
diff --git a/src/shared/ui/Input/Input.tsx b/src/shared/ui/Input/Input.tsx
index 0a1447f..1a83470 100644
--- a/src/shared/ui/Input/Input.tsx
+++ b/src/shared/ui/Input/Input.tsx
@@ -7,10 +7,19 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> & {
   error?: boolean
   errorMessage?: string
   onRightIconClick?: () => void
+  rightIconAriaLabel?: string
   rightIcon?: ReactNode
 }
 
-export function Input({ error = false, errorMessage, id, onRightIconClick, rightIcon, ...props }: InputProps) {
+export function Input({
+  error = false,
+  errorMessage,
+  id,
+  onRightIconClick,
+  rightIcon,
+  rightIconAriaLabel = '입력창 오른쪽 아이콘',
+  ...props
+}: InputProps) {
   const generatedId = useId()
   const inputId = id ?? generatedId
   const hasError = error || Boolean(errorMessage)
@@ -32,7 +41,7 @@ export function Input({ error = false, errorMessage, id, onRightIconClick, right
         {rightIcon ? (
           onRightIconClick ? (
             <button
-              aria-label="입력창 오른쪽 아이콘"
+              aria-label={rightIconAriaLabel}
               className={styles.iconButton}
               onClick={onRightIconClick}
               type="button"
diff --git a/tests/e2e/auth-login.spec.ts b/tests/e2e/auth-login.spec.ts
new file mode 100644
index 0000000..3e75a51
--- /dev/null
+++ b/tests/e2e/auth-login.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('auth login route', () => {
+  test('renders the student login view and switches to teacher login', async ({ page }) => {
+    await page.goto('/login')
+
+    await expect(page.getByRole('heading', { name: '학생 로그인' })).toBeVisible()
+    await expect(page.getByLabel('이메일')).toBeVisible()
+    const passwordInput = page.getByLabel('비밀번호', { exact: true })
+
+    await expect(passwordInput).toBeVisible()
+    await expect(passwordInput).toHaveAttribute('type', 'password')
+    await page.getByRole('button', { name: '비밀번호 보이기' }).click()
+    await expect(passwordInput).toHaveAttribute('type', 'text')
+    await expect(page.getByRole('button', { name: '비밀번호 숨기기' })).toBeVisible()
+    await expect(page.getByRole('button', { name: '로그인' })).toBeDisabled()
+
+    await page.getByRole('button', { name: '선생님으로 전환하기' }).click()
+
+    await expect(page.getByRole('heading', { name: '선생님 로그인' })).toBeVisible()
+    await expect(page.getByText('DSM선생님을 위한 이력서 관리 플랫폼, Repo')).toBeVisible()
+    await expect(page.getByRole('button', { name: '학생으로 전환하기' })).toBeVisible()
+  })
+})
diff --git a/tests/e2e/public-routes.spec.ts b/tests/e2e/public-routes.spec.ts
index 5b5bf7c..dc7b486 100644
--- a/tests/e2e/public-routes.spec.ts
+++ b/tests/e2e/public-routes.spec.ts
@@ -1,15 +1,11 @@
 import { expect, test } from '@playwright/test'
 
 test.describe('public route smoke', () => {
-  test('renders the public home route', async ({ request }) => {
-    const response = await request.get('/')
+  test('redirects the public home route to login', async ({ page }) => {
+    await page.goto('/')
 
-    expect(response.status()).toBe(200)
-    await expect(response).toBeOK()
-    const body = await response.text()
-
-    expect(body).toContain('대덕소프트마이스터고 학생을 위한 포트폴리오 플랫폼')
-    expect(body).toContain('공개 포트폴리오 예시')
+    await expect(page).toHaveURL(/\/login$/)
+    await expect(page.getByRole('heading', { name: '학생 로그인' })).toBeVisible()
   })
 
   test('renders a Korean public portfolio slug', async ({ request }) => {