ttipo
e5de79a669
.design/surinz 홈 아트보드를 프런트엔드로 옮긴다. 디자인 토큰 - assets/styles/tokens.css: 아트보드의 색·치수·라운드를 CSS 변수로 정리. 화면 코드에서는 여기 없는 값을 새로 만들지 않는다 - index.html: Pretendard 한글 동적 서브셋 연결 레이아웃 - AppHeader: 히어로가 화면 밖으로 나가면 돋보기와 그림자를 켠다. 모바일 서랍 - SearchHero / SearchSheet: 데스크톱 640px 카드, 모바일 전체 화면 - AppFooter 섹션 일곱 이벤트(스크롤 스냅) · 검색 랭킹 · 게임 랭킹 · 커뮤니티 · 서든어택 소식 · 서린즈 소식 · 지금 방송 중. 게임 랭킹은 데스크톱에서 세 갈래를 나란히, 태블릿 이하에서는 useMediaQuery 로 갈래 세그먼트 하나씩으로 바꾼다. 랭크전은 티어 이미지와 RP 를 한 칸에 붙여 둔다. 섹션별 상태 useSectionResource 가 섹션마다 로딩·성공·비어있음·실패를 따로 들고, SectionBoundary 가 분기한다. 한 섹션이 실패해도 그 섹션만 다시 부른다. 실패 문구는 화면에서 짓지 않고 useApi 의 에러 코드 맵에서 가져온다 — 이를 위해 resolveErrorMessage 를 export 하고, 요청 단위 silentError 를 더해 섹션 실패가 전역 알림을 띄우지 않게 했다. 백엔드에 홈 API 가 없어 mocks/home.fixtures.ts 로 화면을 먼저 세운다. 연동은 composables/useHome.ts 의 로더 일곱 개만 바꾸면 된다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DNo7LSAWohdk6vpEhmtqLY
frontend
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VS Code + Vue (Official) (and disable Vetur).
Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- Firefox:
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit