[Gomyeunghan]

관련 이슈

• 없음 (0단계 뼈대 작업)

작업 내용

• 모바일 레이아웃: viewport-fit=cover, 최대 너비 480px 컨테이너(max-w-app), min-h-dvh. 넓은 화면에서는 바깥에 surface-deep 배경이 보인다.
• 안전 영역: 헤더 위쪽, 탭바 아래쪽, 헤더가 없는 화면(로그인)에 env(safe-area-inset-*) 여백을 둔다. 앱 껍데기는 SafeAreaView로 WebView를 감싸고 있어서, 앱 안에서는 이 값이 0이 되고 여백이 두 번 생기지 않는다.
• 하단 탭바 (shared/layout/tab-bar.tsx): Figma "내비게이션 페이지별 탭"(112:3185)을 따른다. 순서는 내 챌린지 · 모집 중 · 채팅 · 마이페이지이고 아이콘은 JDS house/search/message-square-more/user-round. (tabs) 라우트 그룹 레이아웃에만 붙는다.
• 헤더 (shared/layout/app-header.tsx): JDS LocalNavigation을 root·nested 두 가지로 쓴다. 뒤로가기는 router.back()이고, 앱 안 기록이 없으면 router.replace("/")로 홈에 보낸다.
• 앱 안 기록 판단 (shared/navigation/history.ts): history.length는 앱에 들어오기 전 기록까지 센다. WebView 첫 화면에서는 돌아갈 곳이 없어서 이 값을 쓸 수 없다. 그래서 pushState/replaceState를 감싸 history.state에 앱 안 이동 위치를 저장한다. Next도 같은 함수를 감싸지만 서로 이어서 호출해 충돌하지 않는다.
• 라우트 뼈대 (빈 화면, API 초안의 복수형 경로에 맞춤)

경로	화면
/	내 챌린지 (탭)
/challenges	모집 중 (탭)
/chats	채팅 목록 (탭)
/my	마이페이지 (탭)
/login, /onboarding	로그인, 닉네임·약관 동의
/notifications	알림
/invite/[code]	초대 링크 진입
/challenges/new/daily, /challenges/new/project	챌린지 만들기
/challenges/[id]	상세 (?tab=intro|feed|members)
/challenges/[id]/certifications/new	오늘 인증하기
/challenges/[id]/records, /challenges/[id]/results	챌린지 전체 기록, 기록 대시보드
/challenges/[id]/chat	채팅방 (챌린지당 1개)
/challenges/[id]/manage/certifications, /challenges/[id]/manage/requests	인증 관리, 참여 신청 관리

• docs/webview-app-guide.md의 딥링크 예시를 /challenges/...로 수정했다.
• 마이페이지 하위 화면, 인증 상세·댓글, 챌린지 설정·팀원 관리는 이번 범위에서 뺐다.

확인 사항

• PR 제목이 커밋 컨벤션(type(scope): 제목)을 따른다
• pnpm lint / pnpm typecheck / pnpm build가 통과한다
• 모바일 화면(375px)에서 확인했다. 브라우저에서 확인한 항목:
  • 탭 이동과 선택 표시
  • 탭 → 상세 → 뒤로가기
  • 상세 경로로 바로 들어온 뒤 뒤로가기 → 홈으로 이동
  • 새로고침 뒤에도 기록 위치 유지
• iOS 시뮬레이터(웹뷰) 확인. Windows에서 작업해서 아직 못 했고, Mac에서 확인이 필요하다.
• 새 환경 변수 없음

리뷰어에게

• 헤더 좌우 여백 20px: Figma는 감싸는 프레임에 padding 20px을 주고 LocalNavigation을 stretched(자체 여백 0)로 둔다. 코드는 stretched를 끄고 JDS 기본 여백(margin-lg = 20px)을 써서, 보이는 결과는 같다.
• 탭 선택 색은 Figma 변수 feedback/positive/alphaInverse/subtlest와 positive/inverse/neutral에 해당하는 JDS CSS 변수를 그대로 쓴다.

🤖 Generated with Claude Code

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 33968c73-1ee9-49c5-9550-719c5f6dd2bf

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}