콘텐츠로 이동
✍️ 수정가능누구나 고쳐도 됩니다. 고치면 하단 frontmatter의 갱신일·작성자·변경요약을 남겨 주세요.작성 Claude · 2026-06-04 · v12 재편·raw 컴파일·인간화

디자인 시스템

Figma "디에듀 Design 2.0"이 디자인의 single source of truth이고, FE는 이를 FSD shared/components의 Dumb 컴포넌트와 토큰화된 Tailwind 클래스로 옮긴다. 디자이너가 브랜드 톤을 추출하고 운용하는 기준이 바로 여기다.

토큰

  • 명명: 색/텍스트/라인이 시맨틱 토큰으로 추출 — text-text-main, bg-gray-scale-white, border-line-line1, bg-background-gray, text-system-warning. 컴포넌트는 raw hex가 아닌 토큰 클래스만 사용.
  • 토큰 한 곳 변경이 전 화면에 전파 → 브랜드 톤 추출·운용의 단일 레버.

컴포넌트 구조 (FSD)

  • 공용 Dumb 컴포넌트: 도메인 모르는 순수 UI(버튼/모달/인풋/카드/드롭다운)는 shared/components. 비즈니스 로직·도메인 타입 금지, props로만 수신.
  • 컴파운드 패턴: 범용 UI는 Root + Sub를 한 파일에 정의하고 Root만 export(DropdownMenu.Trigger/.Content/.Item). variant는 class-variance-authority(cva), Radix Primitives 기반.
  • 도메인 위젯: 강결합 UI(Tabs, Filter, MemberProfile.Avatar/.RoleBadge)는 features/[domain]/components에 컴파운드로, feature 밖 export 금지. generic해지면 shared/components로 승격.

상태별 시안 책임

동일 화면의 상태 분기(모집 여부·프리뷰 vs 마이페이지, 후기 노출/비노출)는 디자인이 시안으로 명시. 상태 정의 프레임은 interaction-ia-patterns.

현행 변경 흐름 (4/16 기준)

사이드바·푸터 개편(게시판·로그아웃) / 수업 둘러보기 카드 2종(선생님 프로필·스터디룸) / 선생님 프로필 프리뷰 분리 / 모집 여부별 스터디룸 프리뷰 / 선생님 마이페이지(태그 입력) 재정의.

디자인 작업은 커밋 타입 design(스타일/CSS)으로 추적하고, 진행 상황은 critique의 업무일지에서 관리한다.

열린 질문

  • 모바일 전용 디자인 시스템(폰트·컴포넌트 추가) 범위 — 반응형 우선순위 확정 후 결정(반응형 정책).
  • 다크모드/테마 토큰 확장 미정.

관련