[Fix/#77] 빌릴게 QA 반영 수정 (토스트·타임피커·반납 화면 여백·카테고리 필터)

[xeoxxn]

#️⃣연관된 이슈

• Closes 빌릴게 반납 완료 토스트가 공용 ScreenToast보다 얇게 보임 #77
• Closes 빌릴게 카테고리 필터가 목록을 실제로 거르지 않음 #83

🎯 해결하려는 문제가 무엇인가요?

빌릴게 QA 과정에서 나온 네 가지 UI/기능 불일치를 한 번에 정리한다.

1. 반납 완료 토스트가 공용 ScreenToast보다 얇게 보임
2. 대여 시작 시간 휠 피커의 행(오전/오후, 시, 분) 간격이 Figma보다 좁아 보임
3. 반납 화면 상단 여백·물품 카드 간격 QA 반영
4. 카테고리 필터 칩을 눌러도 목록이 실제로 걸러지지 않음

❓ 왜 해결해야 하나요?

1은 BililgeReturnToast가 WDS Toast를 쓰는 ScreenToast와 달리 직접 만든 마크업이라 패딩·높이가 달라 생긴 차이다. 2는 디자인 QA 페이지(nodeId 2849:56598)에서 실제 스크린샷에 빨간 화살표로 표시된 지적이고, Figma 실측 결과 행 간 pitch가 31px인데 코드는 24px을 쓰고 있었다. 3은 QA 확인 후 반영한 미세 여백 조정이다. 4는 목업 데이터(BILILGE_ITEMS)에 카테고리 정보 자체가 없어서 필터링이 애초에 불가능한 구조였다 — 사용자가 카테고리를 눌러도 결과가 안 바뀌니 기능이 고장난 것처럼 보인다.

⭐ 어떻게 해결했나요?

• (커밋 1) BililgeReturnSection에서 BililgeReturnToast 대신 ScreenToast(variant="positive")를 재사용하도록 교체하고, WDS Toast가 자체적으로 처리하는 자동 닫힘·접근성(role/aria-live)에 맞춰 기존 수동 타이머·messageKey 로직을 정리했다. 안 쓰게 된 BililgeReturnToast.tsx는 삭제했다.
• (커밋 2) BililgeRentalSheet의 세 WheelPicker(오전/오후·시·분) optionItemHeight를 24 → 31로 맞췄다. Figma의 줄 간 pitch(선택 줄 26px + gap 6px + 비선택 줄 24px을 반씩 걸쳐 계산 ≈31px)를 실측해 반영했다.
• (커밋 3) 반납 화면 상단 패딩(pt-6→pt-7)과 물품 카드 간격(gap-3→gap-2)을 QA 반영해 조정했다.
• (커밋 4) BililgeItem에 category: BililgeCategory 필드를 추가하고, 목업 데이터 19개 물품 전부에 분류를 채웠다. Figma에는 카테고리별 그룹핑이 따로 정의돼 있지 않아(필터 칩 UI만 존재) 물품명 기준으로 임의 분류했다.
• (커밋 5) BililgeListScreen에서 선택된 category가 "전체"가 아니면 BILILGE_ITEMS를 item.category로 필터링하도록 연결했다. BililgeCategoryFilter의 "필터링 없이 선택 상태만 표시" 주석도 실제 동작에 맞게 갱신했다.

🧩 이 PR의 한계 & 트레이드오프

• 2는 @ncdai/react-wheel-picker가 3D 원근 휠이라 optionItemHeight가 화면상 간격에 1:1로 반영되지 않는다(중심 행 주변 원근 압축). 실측상 24→31 조정으로 체감 간격이 Figma에 훨씬 가까워졌지만, 라이브러리 구조상 완전히 동일한 31px는 아니다.
• 4는 카테고리 분류가 Figma나 API 기준이 아니라 물품명 기반 임의 판단이라, 실제 카테고리 분류 기준이 정해지면 조정이 필요할 수 있다.

⛓️ 기존 기능에 미치는 영향

• ScreenToast는 기존 실패 토스트(EventsApplicationScreen)에서 이미 쓰고 있는데, variant prop 기본값이 "negative"라 기존 호출부는 변경 없이 그대로 동작한다.
• BililgeItem.category가 새 필수 필드지만 bililgeItems.ts 밖에서 BililgeItem을 직접 생성하는 곳은 없어 타입 에러 없음.

🔀 Edge Case & 실패 시나리오

• 지금 카테고리 분류 기준으로는 모든 카테고리에 최소 1개 이상 물품이 있어 빈 목록 케이스는 없다. 추후 실 데이터 연동 시 빈 카테고리가 생기면 별도 empty state 처리가 필요할 수 있다.

📋 검토한 대안과 선택 이유

• 토스트는 새 컴포넌트를 만들지 않고 이미 variant prop으로 일반화된 ScreenToast를 재사용했다 — 중복 구현을 피하기 위함.
• 카테고리는 BililgeItem에 직접 필드를 추가하는 대신 별도 매핑 테이블도 고려했지만, 목업 데이터가 배열 하나라 필드 하나 추가가 더 단순하고 실 API 응답 형태(보통 아이템 자체에 카테고리 포함)에도 더 가깝다.

💬 리뷰 포인트

• [c] 타임피커 optionItemHeight=31이 실제로 QA가 원하는 만큼 넓어 보이는지 확인 부탁드립니다(위 한계 참고).
• [c] 물품별 카테고리 분류(예: 밴드/알콜스왑을 상비약으로 묶은 것)가 실제 의도와 맞는지 확인 부탁드립니다.

Summary by CodeRabbit

• New Features
  • Rental lists now show items matching the selected category; selecting “전체” shows all items.
• Updates
  • Adjusted the period, hour, and minute picker options for improved sizing.
  • Updated spacing in the return section.
  • Return confirmations continue to show a positive completion toast.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: a7031abe-e11b-4257-90af-4fadf1aa8b85

📥 Commits

Reviewing files that changed from the base of the PR and between 7fba91e and 3b43708.

📒 Files selected for processing (3)

• src/features/bililge/BililgeListScreen.tsx
• src/features/bililge/components/BililgeCategoryFilter.tsx
• src/features/bililge/constants/bililgeItems.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The rental sheet increases the option-item height for its period, hour, and minute pickers. The rental list filters items by category. The return section replaces its custom completion toast with ScreenToast, removes custom timer logic, and adjusts spacing.

Changes

Rental picker sizing

Layer / File(s)	Summary
Shared option-item height src/features/bililge/components/BililgeRentalSheet.tsx	The period, hour, and minute pickers use a shared option-item height of 31 instead of 24.

Rental item category filtering

Layer / File(s)	Summary
Category data and list filtering src/features/bililge/constants/bililgeItems.ts, src/features/bililge/BililgeListScreen.tsx, src/features/bililge/components/BililgeCategoryFilter.tsx	BililgeItem now requires a category, and each mock item has one. The list shows all items when the selected category is "전체" and otherwise shows matching items. The filter component displays selection state and forwards onChange.

Return completion toast

Layer / File(s)	Summary
ScreenToast integration and return layout src/features/bililge/components/BililgeReturnSection.tsx, src/features/bililge/components/BililgeReturnToast.tsx	The confirmation flow uses ScreenToast with a positive variant. The section removes custom timer handling and the custom toast component. The section’s top padding and return-item list gap also change.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 3b437

This change adjusts UI spacing, swaps the return toast for the shared component, and makes the category filter work on mock data. No merge-blocking risk was found.

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	직접 연결된 이슈는 #77뿐이며, 이슈 범위는 반납 완료 토스트 교체와 관련 로직 정리입니다. 이 PR은 이 범위와 연결되지 않은 BililgeRentalSheet의 세 WheelPicker 행 높이 변경, BililgeReturnSection의 상단 패딩과 카드 간격 변경, 목업 카테고리 데이터와 카테고리 필터 동작 추가를 포함합니다. 제공된 …	토스트 변경과 관련 로직만 이 PR에 유지하십시오. 휠 피커, 반납 화면 간격, 카테고리 데이터 및 필터 변경은 해당 코딩 요구를 정의한 직접 연결 이슈가 있는 별도 PR로 분리하십시오.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The description links issues #77 and #83 and connects the requested fixes to the implementation changes. Issue #77 is directly supported by the provided objectives.
Out of Scope Changes check	✅ Passed	The changes remain within the stated scope: toast replacement, wheel-picker sizing, return-screen spacing, and category filtering.
Linked Issues check	✅ Passed	이슈 #77의 코딩 요구를 충족합니다. BililgeReturnSection은 BililgeReturnToast 대신 ScreenToast를 variant="positive"와 함께 사용합니다. BililgeReturnToast 파일은 삭제되었습니다. 컴포넌트는 수동 타이머, timeout 상수, 언마운트 정리 로직을 사용하지 않습니다. …
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files.
Title check	✅ Passed	제목은 토스트, 타임피커, 반납 화면 여백, 카테고리 필터 등 주요 QA 수정 내용을 구체적으로 요약합니다.
Description check	✅ Passed	설명은 템플릿의 모든 필수 섹션을 포함하며, 해결하려는 문제와 구현 방식, 한계, 영향 범위, 예외 상황, 대안, 리뷰 포인트를 구체적으로 설명합니다.

Full details: Out of Scope Changes check

Explanation

직접 연결된 이슈는 #77뿐이며, 이슈 범위는 반납 완료 토스트 교체와 관련 로직 정리입니다. 이 PR은 이 범위와 연결되지 않은 BililgeRentalSheet의 세 WheelPicker 행 높이 변경, BililgeReturnSection의 상단 패딩과 카드 간격 변경, 목업 카테고리 데이터와 카테고리 필터 동작 추가를 포함합니다. 제공된 이슈 #77에는 이 변경들의 코딩 요구가 없습니다.

• Fix all pre-merge checks with AI

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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