Feature/#14 example components

docs/DESIGN_SYSTEM.md

@@ -85,6 +85,15 @@
 - 일반 본문 기본값은 `Body Small` 이상을 우선합니다.
 - Figma token명이 바뀌면 CSS utility class 변경 전에 이 문서를 먼저 갱신합니다.
 
+
+### Fixed visual contracts for issue #14
+
+2026-06-23 기준, `LibraryBookCard`와 `PortfolioResumeSheet`는 범용 variant 시스템이 아니라 Figma 예시 화면을 코드로 고정한 초기 shared UI입니다.
+
+- `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`에 둡니다.
+
 ### Spacing
 
 TODO: spacing scale을 정리한다.

package.json

@@ -8,7 +8,8 @@
     "build": "next build",
     "lint": "eslint .",
     "start": "next start",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "test:unit": "rm -rf /tmp/repo-v2-unit && tsc --ignoreConfig --types node --module NodeNext --moduleResolution NodeNext --target ES2022 --outDir /tmp/repo-v2-unit --rootDir . tests/unit/internalHref.test.ts src/shared/lib/internalHref.ts && node --test /tmp/repo-v2-unit/tests/unit/*.test.js"
   },
   "dependencies": {
     "next": "^16.2.7",

src/app/(public)/[portfolioSlug]/page.tsx

@@ -2,16 +2,14 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { isReservedPortfolioSlug, normalizePortfolioSlug } from '@/shared/lib/portfolioSlug'
+import { getSamplePortfolioResume, samplePortfolioResume } from '@/shared/fixtures/examples/publicExamples'
+import { PortfolioResumeSheet } from '@/shared/ui'
 
 import styles from '../publicRoute.module.css'
 
-const mockPortfolio = {
-  name: '오혜민',
-  headline: '문제를 구조화하고 끝까지 구현하는 소프트웨어 메이커',
-  school: '대덕소프트마이스터고등학교',
-  skills: ['Product Thinking', 'Frontend', 'AI Native Workflow'],
+function getPortfolioDisplayName(decodedSlug: string) {
+  return decodedSlug === '오혜민' ? samplePortfolioResume.name : decodedSlug
 }
-
 type PortfolioPageProps = {
   params: Promise<{
     portfolioSlug: string
@@ -27,9 +25,11 @@ export async function generateMetadata({ params }: PortfolioPageProps): Promise<
 
   const decodedSlug = normalizePortfolioSlug(portfolioSlug)
 
+  const displayName = getPortfolioDisplayName(decodedSlug)
+
   return {
-    title: `${decodedSlug} 포트폴리오`,
-    description: `${decodedSlug} 학생의 공개 포트폴리오`,
+    title: `${displayName} 포트폴리오`,
+    description: `${displayName} 학생의 공개 포트폴리오`,
   }
 }
 
@@ -41,32 +41,13 @@ export default async function PortfolioPage({ params }: PortfolioPageProps) {
   }
 
   const decodedSlug = normalizePortfolioSlug(portfolioSlug)
-  const displayName = decodedSlug === mockPortfolio.name ? mockPortfolio.name : decodedSlug
+  const displayName = getPortfolioDisplayName(decodedSlug)
+  const portfolio = getSamplePortfolioResume(displayName)
 
   return (
     <main>
-      <div className={styles.pageShell}>
-        <section className={styles.heroCard} aria-labelledby="portfolio-title">
-          <span className={styles.eyebrow}>Public Portfolio</span>
-          <h1 id="portfolio-title" className={styles.heroTitle}>
-            {displayName}
-          </h1>
-          <p className={styles.heroDescription}>{mockPortfolio.headline}</p>
-          <div className={styles.infoGrid} aria-label="포트폴리오 요약">
-            <article className={styles.infoCard}>
-              <h2>School</h2>
-              <p>{mockPortfolio.school}</p>
-            </article>
-            <article className={styles.infoCard}>
-              <h2>Slug</h2>
-              <p>/{decodedSlug}</p>
-            </article>
-            <article className={styles.infoCard}>
-              <h2>Skills</h2>
-              <p>{mockPortfolio.skills.join(' · ')}</p>
-            </article>
-          </div>
-        </section>
+      <div className={styles.resumePageShell}>
+        <PortfolioResumeSheet {...portfolio} />
       </div>
     </main>
   )

src/app/(public)/page.tsx

@@ -1,5 +1,8 @@
 import Link from 'next/link'
 
+import { samplePortfolioHref, sampleResumeBookHref } from '@/shared/fixtures/examples/publicExamples'
+import { LibraryBookCard } from '@/shared/ui'
+
 import styles from './publicRoute.module.css'
 
 export default function HomePage() {
@@ -15,14 +18,31 @@ export default function HomePage() {
             Repo는 학생의 이력서와 포트폴리오를 정리하고, 공개 URL을 통해 성장 기록을 보여주기 위한 서비스입니다.
           </p>
           <div className={styles.actionRow}>
-            <Link className={`${styles.actionLink} ${styles.primaryActionLink}`} href="/오혜민">
+            <Link className={`${styles.actionLink} ${styles.primaryActionLink}`} href={samplePortfolioHref}>
               공개 포트폴리오 예시
             </Link>
-            <Link className={styles.actionLink} href="/resume-books/sample">
+            <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>
   )

src/app/(public)/publicRoute.module.css

@@ -68,32 +68,85 @@
   background: var(--brand);
 }
 
-.infoGrid {
+.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;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   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);
 }
 
-.infoCard {
-  min-height: 148px;
+.libraryBookGrid {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  gap: 20px;
   padding: 24px;
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  background: var(--surface);
+  border-radius: 28px;
+  background: var(--repo-gray-100);
 }
 
-.infoCard h2,
-.infoCard h3 {
-  margin: 0 0 10px;
-  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);
+@media (max-width: 820px) {
+  .exampleSection {
+    grid-template-columns: 1fr;
+  }
+
+  .libraryBookGrid {
+    justify-content: start;
+    width: fit-content;
+  }
 }
 
-.infoCard p {
-  margin: 0;
-  color: var(--text-muted);
-  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);
+@media (max-width: 560px) {
+  .libraryBookGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .pageShell {
+    width: min(100% - 32px, 1120px);
+    padding: 48px 0;
+  }
+
+  .heroCard,
+  .exampleSection {
+    padding: 28px;
+    border-radius: 24px;
+  }
+}
+
+
+.resumePageShell {
+  display: grid;
+  justify-items: center;
+  width: min(100%, 920px);
+  margin: 0 auto;
+  padding: 24px 20px 48px;
+  background: var(--repo-gray-600);
 }

src/dev/ComponentPreview.module.css

@@ -214,3 +214,23 @@
   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);
+}

src/dev/ComponentPreview.tsx

@@ -3,7 +3,23 @@
 import type { SVGProps, ReactNode } from 'react'
 import { useState } from 'react'
 
-import { Button, Checkbox, CheckboxOption, Dropdown, Feedback, FeedbackBalloon, Input, Logo, Switch, Tag, Toast } from '@/shared/ui'
+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'
 
@@ -183,6 +199,27 @@ export function ComponentPreview() {
       </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

src/shared/fixtures/examples/publicExamples.ts

@@ -0,0 +1,27 @@
+import type { InternalHref } from '@/shared/lib/internalHref'
+
+export const samplePortfolioHref = '/오혜민' satisfies InternalHref
+export const sampleResumeBookHref = '/resume-books/sample' satisfies InternalHref
+
+export const samplePortfolioResume = {
+  name: '홍길동',
+  majorStatus: '전공미정',
+  headline: '안녕하세요 저는 디자이너가 되고 싶은 인간입니다',
+  intro:
+    '새벽잠실너무 졸립니다. 밀 적지.. 한줄소개는 이런식으로 쭉쭉 들어갑니다.\n줄넘김 가능합니다. 자기소개자기소개자기소개까지 소개까지 소개까지소개까지... 최대 4줄이면 충분하겠지만..\n줄이 이런식으로\n길어지면 폼도 자동으로 늘어납니다.',
+  studentNumber: '2415',
+  department: '인공지능소프트웨어과',
+  email: 'mare2mare6@gmail.com',
+  skills: ['Figma', 'illustrator', 'photoshop'],
+  activities: [
+    { dateLabel: '2025.12.25', description: '제 1회 SCSC 온라인 해커톤 2위' },
+    { dateLabel: '2025.07.18', description: '2025 교내 해커톤 우수상' },
+  ],
+}
+
+export function getSamplePortfolioResume(displayName: string) {
+  return {
+    ...samplePortfolioResume,
+    name: displayName,
+  }
+}