[Chore/#5] WDS(@wanteddev/wds) 디자인 시스템 초기 설정

[xeoxxn]

#️⃣연관된 이슈

• Closes WDS(@wanteddev/wds) 디자인 시스템 초기 설정 #5

🎯 해결하려는 문제가 무엇인가요?

Wanted Design System(WDS)을 프로젝트에 도입하기 위한 초기 설정이 없는 상태였다. 패키지는 설치돼 있었지만 레지스트리 설정, Provider 적용, 폰트 로드가 빠져 있었다.

❓ 왜 해결해야 하나요?

이후 화면 작업에서 WDS 컴포넌트를 쓰려면 ThemeProvider와 전역 스타일, 폰트가 먼저 세팅돼 있어야 한다.

⭐ 어떻게 해결했나요?

@wanteddev/wds README의 React 섹션을 따라 적용했다.

• .npmrc에 GitHub Packages 레지스트리(@wanteddev) 등록
• main.tsx에서 ThemeProvider로 App 감싸고 @wanteddev/wds/global.css 로드
• index.html에 Pretendard 폰트 CDN 링크 추가

🧩 이 PR의 한계 & 트레이드오프

Emotion 캐시 커스터마이징(SCSS/styled-components 병행 시 필요한 CacheProvider)은 아직 다른 CSS-in-JS를 쓰지 않아 추가하지 않았다. 필요해지면 README의 Pretend 옵션 섹션을 참고해 추가한다.

⛓️ 기존 기능에 미치는 영향

전역 스타일(global.css)과 폰트가 추가되므로 기존 화면의 타이포그래피에 영향을 줄 수 있다. 현재는 화면이 없어 영향 범위 없음.

🔀 Edge Case & 실패 시나리오

없음 (Provider 초기 설정 단계).

📋 검토한 대안과 선택 이유

styled-components 등 다른 CSS-in-JS 병행 계획이 없어 기본 ThemeProvider만 적용하고, CacheProvider(prepend 옵션)는 도입하지 않았다.

💬 리뷰 포인트

• main이 아니라 chore/#3-initial-setup(PR [Chore/#3] 초기 설정 정비 (pnpm·Biome·Tailwind·폴더 구조) #4)을 base로 잡았다 — pnpm/Tailwind/Biome/폴더 구조 등 선행 변경이 main에 아직 없기 때문. main에는 그 PR이 먼저 머지된 뒤 반영된다.

🤖 Generated with Claude Code

https://claude.ai/code/session_013WuSVrxYqSoDxasZSt5TT1