feat (#16) :: 로그인 페이지 퍼블리싱

.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
 

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.pnpm-store/
 dist
 dist-ssr
 .next

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
 

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 />
+}

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')
 }

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;
   }

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>