<aside>

Work progress

0단계: 기획 및 준비

• [x] 프로젝트 목적 정리
• [x] 아이디어 선정 및 차별성 정리
• [x] 기획 문서 작성
  • [x] Figma로 화면 설계 / 사용자 플로우 구성
  • [x] 각 페이지 및 컴포넌트 정의, 인터랙션 흐름 설계
• [x] 기술 스택 선정 및 이유 문서화
• [x] 초기 설정
  • [x] 깃헙 성정
    • [x] ISSUE, PR
    • [x] BRANCH
    • [x] COMMIT 컨벤션
    • [x] 마일스톤
    • [x] 태그
  • [x] 패키지 매니저 선정 이유 (pnpm 추천)
  • [x] Eslint, Prettier 설정 및 공유 규칙 정의
  • [x] 절대경로 설정 (tsconfig.json paths, vite alias)
  • [x] 테일윈드 설정
  • [x] 디렉토리 아키텍처 정리
  • [x] 컴포넌트 패턴 결정

1단계: 0차 MVP (정적 페이지)

• [x] 프로젝트 디자인 패턴

  • [x] 프로젝트 공통 폰트 사전 정의
  • [x] 프로젝트 칼라 정의

• [x] 깃헙 세팅하기

  • [x] Issue/PR 템플릿, 커밋 컨벤션, 마일스톤 작성

• [x] 공통 컴포넌트 분리 기준 정의(동일한 버튼이라도 다르게 해야하는지)

  • 역할이 같고 UI/UX가 같다면 → 하나로 묶는다
  • 역할이 다르면 UI/UX가 같아도 나눈다. → wrapper로 감싸서
  • variant만 바꾸고 래퍼로 감싸서 역할별 컴포넌트를 분리한다

• [x] 버셀 베포

• [x] 코드레빗 설정파일 수정

• [x] 버튼, 인풋, 카드, 폰트, 컬러 시스템 등 설계 및 문서화

• [ ] 공통 컴포넌트 개발 시작

  1. 초기 설정 및 디자인 시스템 준비

  • [x] Tailwind config 기반으로 color, spacing, radius, font 정리
  • [x] 디자인 시스템의 기준 정의 (variant, size, state 등)
  • [x] npx shadcn-ui@latest init 및 필요한 기본 컴포넌트 설치

  ---

  2. Typography 컴포넌트부터 구현

  • [x] 타이포그라피란
  • [x] 텍스트 계층 정의: Display, H1, H2, Body, Label, Muted, Caption
  • [x] as="h1" 등의 tag 선택 가능하도록 구현
  • [x] 텍스트 스타일(색상, 정렬, 굵기 등) props로 전달 가능하게

  ---

  3. Button 컴포넌트 커스터마이징

  • [x] button.tsx 내부 구조 분석 (cva variant, size 이해)
  • [x] variant 확장: primary, secondary, ghost, danger, outline, black
  • [ ] size 확장: sm, md, lg, iconOnly, fullWidth
  • [ ] Wrapper 컴포넌트 작성 (예: <PrimaryButton />)
  • [ ] 버튼 인터페이스 통일: loading, icon, disabled, aria

  버튼 속성 테스트

  • [ ] loading
    • [ ] loading 상태에서 버튼이 disabled 되는지 확인
    • [ ] spinner 아이콘이 렌더링되는지 확인 (data-testid, role로 접근)
    • [ ] aria-busy="true" 속성 부여 확인
  • [ ] icon
    • [ ] icon props로 전달된 컴포넌트가 렌더링되는지 확인
    • [ ] icon 위치 조절(left, right) 여부 테스트
    • [ ] 아이콘만 있는 버튼(iconOnly) 렌더링 및 포커싱 테스트
  • [x] disabled
    • [x] disabled 상태일 때 클릭 이벤트 발생 여부 테스트
    • [ ] aria-disabled="true" 포함 여부
    • [ ] tab 키로 focus가 안 가는지 확인 (tabindex=-1 등)
  • [ ] aria
    • [ ] aria-label, aria-describedby, aria-pressed 등 작동 확인
    • [ ] aria-busy, aria-disabled 등 상태별 속성 반영 확인
    • [ ] 시각적 정보가 없는 요소도 스크린리더에 읽히는지 확인

  ---

  4. Badge / Tag 컴포넌트

  • [x] badge.tsx 기반으로 스타일 분석
  • [x] variant 확장: success, error, warning, info, neutral
  • [x] padding, border-radius, text-size 커스터마이징

  ---

  5. Card / ListItem 컴포넌트

  • [ ] card.tsx 구조 기반으로 공통 카드 분리
  • [ ] props 구성: title, desc, thumbnail, actions
  • [ ] 인터랙션 정의: hover, focus-visible 등
  • [ ] 카드 변형 예시: ProjectCard, DataCard, ListItemCard
  • [ ] 콘텐츠 삽입은 slot 또는 children 기반 설계
  • [ ] 스토리북 구성: 다양한 카드 조합 및 형태 확인

  ---

  6. FormField 컴포넌트

  • [ ] <FormField>: Label + Input + Error + Helper Text 기본 구조 정의
  • [ ] 파생 컴포넌트: <LabeledInput>, <Textarea>, <SelectField>
  • [ ] htmlFor, aria-*, role="alert" 등 접근성 고려
  • [ ] 상태 정의: focus, error, disabled, readOnly
  • [ ] validation 메시지, 조건부 렌더링 적용
  • [ ] 스토리북에서 각각의 상태 확인

  ---

  7. Layout 컴포넌트

  • [ ] <AppLayout>: header + main + footer 기본 레이아웃
  • [ ] <PageHeader>: 타이틀, 설명, CTA 구성
  • [ ] <Section>: 배경/패딩 구분 가능한 Wrapper 컴포넌트
  • [ ] 페이지마다 공통 레이아웃이 잘 적용되는지 샘플 페이지로 확인

• [ ] 접근성 및 UX 고려사항 초기 점검

• [ ] 페이지 개발

• [ ] 애니메이션

• [ ] 정적 페이지 성능 측정

• [ ] 리팩토링 기준 정의

• [ ] 에러 처리 전략 시작

2단계: 1차 MVP (Supabase 연동)

• [ ] Supabase 사용 이유 정리
• [ ] 연동 작업
• [ ] React Query 도입 전후 비교 측정 </aside>