✨ feat: 포커스 진입 화면 UI 퍼블리싱 #336

[p1001q]

🚀 관련 이슈

• close ✨ [Feature] 포커스 진입 화면 퍼블리싱 #336

🔑 작업 내용

포커스 진행 화면

• AppShell의 전역 8px padding은 유지하고
  포커스 세션 화면에서만 배경 영역을 보정해 패딩으로 인한 화면 공백 문제를 해결했습니다.
• 테마 선택 화면에서 저장한 최근 테마를 이어서 표시하며, 이미지 로딩 실패 시 기본 배경과 안내 문구를 노출합니다.
• 시작 시각과 현재 시각의 차이로 경과 시간을 계산해
  기록 작성 화면(/report/:bookId/create)을 다녀오는 동안에도 타이머가 계속 흐릅니다.
• 진행 화면의 그룹 FAB·그룹 알림은 런칭 이후 기능으로 이번 범위에서 제외했습니다.

포커스 종료 플로우

• 포커스 종료하기 클릭 시 같은 화면 위에 Bottom Sheet가 열리고, 열려 있는 동안만 타이머가 일시정지됩니다.
• 독서 시간, 현재까지 읽은 페이지, 완독 여부를 입력할 수 있습니다. 읽은 분량은 선택값이며 숫자만 입력됩니다.
• 취소 또는 오버레이 클릭 시 시트를 닫고 타이머를 재개합니다.
• 우상단 X는 취소 버튼과 기능이 중복된다는 디자인 확인에 따라 제외했습니다.
• 정상 종료 시 /focus로 이동하고 포커스를 종료했어요. Toast를 4초간 노출합니다.
  • (미상의 추가 구현한 사안, 괜찮은가 확인 부탁드립니다)

공용 컴포넌트 및 코드 정리

• FAB: 기존 기본 모양을 유지하면서
  실제 button 요소, size, variant, native button attribute를 지원하도록 하위호환 확장했습니다.
• Checkbox: 기존 내부 상태 방식과 부모 제어 방식을 모두 지원하도록 controlled/uncontrolled 구조로 확장했습니다.
• BottomSheet: 375px 미만 viewport overflow 방지와 하단 safe area padding을 보완했습니다.
• Solid, Icon, BookCover: 크기 클래스 충돌을 해소하고 Tailwind v4 canonical class로 정리했습니다.
• EmotionRecordsPage의 기존 FAB에는 아이콘 버튼의 용도를 전달하도록 aria-label을 추가했습니다.
• 포커스 도메인에서만 쓰는 타이머·테마 저장·시간 포맷 유틸과 종료 시트는 pages/focus 하위에 배치했습니다.

📷 스크린샷

테마 선택 → 세션 진행 → 기록 화면 이동 → 종료 시트 → 포커스 메인/Toast 흐름을 로컬 확인했습니다.

🌐 공유 사항 to 리뷰어

리뷰 요청 범위

• AppShell 전역 padding을 변경하지 않고 세션 화면만 보정한 방식
• 기존 FAB 기본 사용처에 영향을 주지 않는 size/variant 기본값과 native button props 전달
• Checkbox의 controlled/uncontrolled 하위호환 동작
• BottomSheet의 w-full max-w-93.75 및 safe area 적용이 다른 사용 화면에 미치는 영향

후속 구현용 미사용 에셋

• book-cover-placeholder.png 는 후속 화면 준비용으로 함께 추가했으며 현재 코드에서는 참조하지 않습니다.

🚨 이슈 사항

• 저장소 전체 npm run lint는 이번 변경과 무관한 기존 파일 오류 29건·경고 1건으로 실패합니다. 이번 변경 파일만 대상으로 한 ESLint는 통과했습니다.
• 프로덕션 빌드는 성공하지만 기존과 동일하게 JavaScript chunk 500kB 초과 경고가 있습니다.
• 진행 중 세션 복구, 중복 시작/종료, 자정 처리, page가 없는 도서 정책과 실패 응답 코드는 API 연동 이슈에서 확인이 필요합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nook	Ready	Preview	Aug 27, 2026 12:58am

[netlify]

✅ Deploy Preview for readingnook ready!

Name	Link
🔨 Latest commit	56cba57
🔍 Latest deploy log	https://app.netlify.com/projects/readingnook/deploys/6a8f8b9f6e165500087c023e
😎 Deploy Preview	https://deploy-preview-342--readingnook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Eunjin03]

고생 많으셨습니다! BottomSheet와 ESLint는 각자 맡은 화면에서 확인해보면 될 것 같습니다~~

[Eunjin03]

기존 props를 제거하셨는데, 이 부분에서 생기는 오류는 없었나요 ??

[p1001q]

답변이 늦었습니다 죄송합니다...!!
기존 props를 삭제한 게 아니라 직접 하나씩 선언하던 방식을
React의 표준 button props 타입을 재사용하는 방식으로 확장한 것입니다!
(React에서 정의해둔 보편적인 HTML button 속성 타입을 FAB Props에 합쳐서 사용하는 방식)

오히려 더 확장했다고 봐주시면 됩니다! 그래서 오류 사항은 발견되지 않았어요~

[p1001q]

불친절 했던 것 같아 설명을 추가해봤습니다! 보시고 건의사항 있으시면 말씀해주세요!

기존에는 FAB에서 사용하는 속성을 아래처럼 하나씩 직접 선언하고 있었습니다

type Props = {
  icon: ReactNode;
  onClick?: () => void;
  className?: string;
};

이번에 FAB의 루트 요소를 div에서 실제 button으로 변경하면서
React에서 기본으로(TypeScript 타입 정의에서) 제공하는 <button> 속성 타입인
ButtonHTMLAttributes<HTMLButtonElement>를 Props에 합성하도록 수정한 겁니당

type Props = {
  icon: ReactNode;
  size?: FabSize;
  variant?: FabVariant;
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;

따라서 기존의 onClick, className도 계속 사용할 수 있어요!
추가로 aria-label, disabled, type, onKeyDown 등
실제 HTML button이 지원하는 속성도 별도 선언 없이 전달할 수 있습니다. 확장 된거에요!

Omit<..., "children">은 기본 button 속성 중 children만 제외한다는 의미입니다.
FAB 내부 콘텐츠는 children이 아니라 필수 icon prop으로 받도록 사용 방식을 통일하기 위해 제외했습니다.

• ButtonHTMLAttributes는 별도 라이브러리가 아니라 React에서 제공하는 TypeScript 타입
• Omit은 TypeScript 기본 유틸리티 타입

런타임 동작이나 번들 크기에는 영향을 주지 않고 타입 검사에만 사용됩니다
기존 기록 화면의 onClick, className 사용처도 그대로 유지되고
전체 TypeScript 빌드와 관련 ESLint 검사로 오류 없는 것 확인했어요!

[Eunjin03]

허걱 이런 방법이 있는지 몰랐네요! 새로운 거 알려주셔서 감사합니다🥹🥹 레전드 친절하셔요...