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
23 lines
792 B
HTML
23 lines
792 B
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="서든어택 전적 검색 · 랭킹 · 커뮤니티 — 서린즈" />
|
|
<!--
|
|
Pretendard — 한글 동적 서브셋. 자체 호스팅이 필요해지면
|
|
pretendard 패키지를 설치해 이 링크를 걷어내면 된다.
|
|
-->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
|
/>
|
|
<title>서린즈</title>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|