✨ feat: 포커스 도서 선택 화면 UI 퍼블리싱 #337

[p1001q]

🚀 관련 이슈

• close ✨ [Feature] 포커스 도서 선택 화면 퍼블리싱 #337

🔑 작업 내용

도서 선택 화면

• /focus/select 도서 선택 UI 구현
• 독서 전·독서 중·완독 도서 단일 목록 표시
• 도서 선택 시 /focus/theme 이동
• 사이트 Footer 노출을 위한 route layout 분리
• 포커스 전용 정렬 구현
• 정렬용 FocusLibraryBookItem 타입 및 mock 데이터 추가

검색 및 최근 검색어

• idle·searching·results 상태 분리
• Enter·검색 아이콘 클릭 시 검색 실행
• 검색 결과 1권·0권 상태 구현
• 검색 결과를 목록 정렬과 분리해 mock 원본 순서 유지
• 최근 검색어 최대 10개 최신순 저장·중복 제거·개별 삭제
• 긴 검색어 7자 분량 말줄임 표시 > 임시로 구현
• 표시와 관계없이 원본 검색어로 재검색·삭제
• 검색 제출 후 헤더 < → X 전환
• clear 버튼 클릭 시 검색 종료 및 기본 목록 복귀

---

✅ 공용 컴포넌트 변경 ✅

/focus/select Footer 노출을 위한 route layout 변경
/focus/select만 NoFooterLayout 적용 대상에서 제외해 Footer 노출
다른 라우트 및 공용 layout 컴포넌트 변경 없음

SearchField

• 필요 이유

  • 빈 검색창 focus 상태에서도 clear 버튼 노출 필요
  • clear 버튼에서 값 삭제와 검색 종료를 함께 처리할 필요

• 변경 내용

  • showClearOnFocus, onClear, maxLength 옵션 추가
  • custom onClear 실행 후 input blur 처리
  • 기존 16px/400/24px 타이포를 동일한 text-body-16-r 토큰으로 치환
  • caret direct hex를 동일 색상의 caret-gray-50 토큰으로 치환
  • 동일한 Figma 실측값을 유지하며 중복 width/height를 size-* 문법으로 정리

• 변경 결과

  • 화면별 clear 동작과 입력 길이 설정 가능
  • 기존 사용처의 기본 동작·렌더링 유지

RecentKeywordSection

• 필요 이유

  • 긴 검색어 Chip으로 인한 레이아웃 초과 방지
  • input blur가 검색어 선택·삭제 click보다 먼저 실행되는 문제 방지
  • 기존 2줄 높이 제한으로 최대 10개 검색어 중 일부가 가려지는 문제 해결

• 변경 내용

  • maxTextLength 옵션 추가
  • showAllKeywords 옵션 추가
  • 표시용 말줄임 처리 추가
  • input focus 보존 처리를 최근 검색어 Chip에만 적용

• 변경 결과

  • 화면별 검색어 표시 길이 설정 가능
  • 포커스 화면에서만 높이·overflow 제한을 해제해 최대 10개 전체 노출
  • prop을 전달하지 않는 기존 사용처의 2줄 제한 유지

  기록 도메인 담당하신 분 정책서 보면 10개 공개인데 해당 부분 확인해보심 좋을 거 같습니다!

  • 클릭·삭제 시 원본 검색어 유지
  • 공용 Chip의 다른 사용처에는 focus 동작 변경 없음

Chip

• 6px padding을 동일한 py-1.5로 치환
• 8px radius를 동일한 rounded-lg로 치환
• 공용 Chip 전체에 적용됐던 mouse down 처리를 제거하고 최근 검색어 영역으로 범위 한정
• none·icon variant의 기존 크기·타이포·색상 유지

---

📷 스크린샷

가장 오래된 검색어 사라짐

🌐 공유 사항 to 리뷰어

중점 확인 요청

• SearchField optional prop 추가 후 기존 검색 화면 동작 유지 여부
• 최근 검색어 영역에만 한정한 input focus 보존 처리
• 포커스 전용 정렬과 검색 결과 순서 분리

검증

• 변경 파일 ESLint 통과
• npm run build 통과
• git diff --check 통과
• 신규 direct hex 및 Tailwind v3 alias 없음
• SearchField 타이포·caret·아이콘 computed style 동일 확인
• 기존 Chip variant 크기·타이포·padding·radius 동일 확인
• 기본 목록·Footer·정렬 Bottom Sheet 확인
• 검색 결과 1권·0권 확인
• 최근 검색어 말줄임·삭제·재검색 확인
• 긴 검색어 10개 전체 노출 및 5줄 wrapping 확인
• 도서 선택 후 /focus/theme 이동 확인

🚨 이슈 사항

• 전체 npm run lint: 기존 파일 오류 25건으로 실패
• 이번 PR 변경 파일 ESLint: 통과
• production build: 성공
• JavaScript chunk 500kB 초과 경고 발생
• 서재 목록 자체가 비어 있는 상태는 코드 분기만 구현, 브라우저 수동 검증 미진행

[netlify]

✅ Deploy Preview for readingnook ready!

Name	Link
🔨 Latest commit	966be5d
🔍 Latest deploy log	https://app.netlify.com/projects/readingnook/deploys/6a93fd2eaeb12000081eb712
😎 Deploy Preview	https://deploy-preview-361--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.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
nook	Ready	Preview	Aug 30, 2026 9:51am

[suzy0928]

수고 많으셨습니다!

[Eunjin03]

고생 많으셨습니다~~

[seoyeon0103]

완전 수고많으셨습니다. 머지 할게요~!