[FEAT] 디자인 시스템 구축 및 메인 페이지 적용 (#50)

[dyeon-dev]

🔍 PR 요약

피그마에 정의된 시멘틱 태그 등을 TailwindCSS 디자인 토큰 코드로 정의

🧾 관련 이슈

• close [FEAT] 디자인토큰 구축 #50

🛠️ 주요 변경 사항

apps/web/src/index.css

• Color
  • Blue Scale Primitives: blue-01 ~ blue-07 컬러 팔레트 정의
  • 메인 컬러: Green Scale, Pink Scale 팔레트 정의
  • 티어 컬러: Bronze ~ Master 팔레트 정의
  • 이외 컬러: Etc 팔레트 정의
• Light/Dark Color
  • Semantic Tokens (Themed) 정의: base-primary, bg-layer-1 등의 의미론적 변수를 사용하여 Light/Dark 모드 전환 시 자동으로 색상이 변경되도록 설정
  • 예: bg-layer-1은 라이트 모드에서 blue-02(#E2E8F0), 다크 모드에서 blue-07(#0F172A)가 된다.
• Text
  • 글씨체: 기본 Pretendard로 설정
  • 글씨 크기: text-xs ~ text-4xl
  • 글씨 간격: 이에 맞춘 line-height
• Radius
  • 테두리 각도: 1.5rem; /* 24px */ 으로 설정

apps/web/src/hooks/useTheme.ts 추가

• Light/Dark 상태를 localStorage에 저장하여 유지하는 로직을 훅으로 분리

apps/web/src/pages/MainPage.tsx

• 메인페이지에 디자인 시스템 적용한 코드로 변경

📸 스크린샷 (선택)

  /* Global Defaults */
  font-family: var(--font-sans);
  background-color: var(--bg-layer-1);
  color: var(--color-ink);
  border-color: var(--color-border-soft);

• 라이트 모드

• 다크모드

🧠 의도 및 배경

• 초기 디자인 시스템을 정의하여 향후 프론트엔드 개발 시 공통된 시스템을 적용하여 UI 일관성 및 코드 통일성을 높이기 위함

💬 리뷰 요구사항(선택)

추가적으로 디자인 시스템 구축할만한 것이 있다면 말씀해주세요!

[eeekeee]

고생 많으셨습니다!

[cchaeyoung]

수고하셨습니다~!!