UI 작업(컴포넌트 추가/수정, 화면 구현, 스타일 변경, 레이아웃 작업 등 React Native/Expo 프론트엔드 작업)을 할 때 반드시 실행. dear-baby의 디자인 시스템 문서와 theme 토큰, 공통 컴포넌트를 참고하도록 강제해 일관된 UI를 유지합니다. UI, 스타일, 컴포넌트, 색상, 폰트, 여백, 버튼, 카드 등 시각적 요소와 관련된 모든 작업에 사용하세요.
dear-baby 앱의 UI 작업을 할 때는 반드시 아래 절차를 따릅니다. 디자인 토큰을 우회하거나 하드코딩된 스타일을 작성하지 마세요.
UI 관련 변경을 시작하기 전에 다음 파일들을 먼저 읽어서 현재 시스템을 파악합니다.
docs/design-system/README.md — 디자인 원칙(Warmth, Softness, Emotional)docs/design-system/colors.md — 컬러 팔레트와 사용 규칙docs/design-system/typography.md — 타입 스케일과 폰트 패밀리docs/design-system/tokens.md — Spacing, Radius, Elevation 토큰docs/design-system/components.md — 컴포넌트 스펙docs/design-system/patterns.md — UI/UX 패턴app/src/theme/colors.tsapp/src/theme/typography.tsapp/src/theme/spacing.tsapp/src/theme/radius.tsapp/src/theme/shadows.tsapp/src/theme/fonts.tsapp/src/theme/index.ts — 통합 exportButton, Card, Text, Badge, FAB, IconCircle작업과 관련된 카테고리의 파일만 읽으면 됩니다. (예: 색상 작업이면 colors.md + colors.ts)
theme/colors.ts에서 import하여 사용 (예: colors.primary, colors.text.primary)theme/spacing.ts의 space.* 토큰 사용theme/radius.ts의 토큰 사용theme/shadows.ts의 preset 사용<Text variant="..."> 컴포넌트로 처리 (typography 변형 사용)#FAF6F1처럼 hex 코드를 직접 작성 (토큰에 없으면 먼저 토큰에 추가 후 사용)padding: 17 같은 임의 숫자 (spacing 토큰 사용)borderRadius: 13 같은 임의 값 (radius 토큰 사용)fontFamily, fontSize를 개별 스타일에서 직접 지정 (typography 토큰 사용)shadowColor, elevation을 직접 작성 (shadows preset 사용)디자인 문서에 없는 값이 필요하면 임의로 추가하지 말고 다음 순서를 따릅니다.
docs/design-system/*.md 문서와 app/src/theme/*.ts 코드를 함께 업데이트app/src/components/에 추가하고 index.ts에 exportButton, Card 패턴과 일관되게 설계 (variant, size 등)patterns.md의 감성 카피 규칙 확인구현 전후로 다음을 확인합니다.
radius.md 이상), 부드러운 그림자UI 작업 완료 시 사용자에게 다음을 간단히 보고합니다.