디자인 시스템¶

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가 아닌 토큰 클래스만 사용.
공용 컴포넌트(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 본인 마이페이지 등 동일 화면의 상태 분기는 디자인이 시안으로 명시(예: 후기 노출/비노출, 선생님 프로필 프리뷰 vs 마이페이지).

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