feat: 곡 상세 정보 확인 - #59
Conversation
|
Warning Review limit reached
Next review available in: 17 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughPIN 목록 바텀시트가 내부 콘텐츠 컴포넌트로 분리되고, 장소 주소·소유자·거리 정보 표시와 PIN 선택 전달이 추가되었습니다. PIN 카드와 정렬 탭의 조건부 렌더링, 스타일, 접근성 속성도 갱신되었습니다. ChangesPIN 목록 표시 및 선택 흐름
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant User
participant PinListSheet
participant BottomSheet
participant PinListContent
participant PinCard
User->>PinListSheet: 장소 목록 열기
PinListSheet->>BottomSheet: PinListContent 전달
BottomSheet->>PinListContent: 목록 렌더링
PinListContent->>PinCard: PIN 데이터와 onClick 전달
User->>PinCard: PIN 선택
PinCard->>PinListContent: 선택된 PIN 전달
PinListContent->>PinListSheet: onPinClick 호출
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/features/pin/components/SortTabs.tsx (1)
16-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value상호 배타적인 옵션 그룹의 접근성(ARIA) 속성 개선
SortTabs라는 컴포넌트 이름과 시각적 형태를 고려할 때, 상호 배타적인 옵션을 나타내기 위해role="tablist"와role="tab", 그리고aria-selected를 사용하는 것이 웹 접근성 표준(WAI-ARIA)에 더 적합합니다. 현재 사용된role="group"과aria-pressed는 주로 독립적인 토글 버튼(예: 텍스트 굵게/기울임꼴)에 사용됩니다.♻️ 제안하는 리팩토링
<div - role="group" + role="tablist" aria-label="PIN 정렬" className="flex h-10 w-full gap-[3px] rounded-xl bg-pli-black-75 px-[4.5px] py-1" > {OPTIONS.map((option) => { const selected = value === option.value; return ( <button key={option.value} type="button" - aria-pressed={selected} + role="tab" + aria-selected={selected} onClick={() => onChange(option.value)} className={cn(🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/pin/components/SortTabs.tsx` around lines 16 - 34, Update the SortTabs container and option buttons to use the WAI-ARIA tab pattern: change the container role to tablist, each option button role to tab, and replace aria-pressed with aria-selected while preserving the existing selected state and click behavior.src/features/pin/components/PinListSheet.tsx (1)
54-60: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value불필요한 소수점 처리를 더 간결하게 개선
현재 코드는
distance가 1001과 같이 애매한 값일 때 계산된kilometers가1.001이 되어isInteger가false로 평가되며, 결과적으로"1.0"문자열이 반환될 수 있습니다. 결과를Number()로 감싸주면.0과 같은 불필요한 소수점 이하의 0을 자동으로 제거해주므로 코드가 더 간결해지고 엣지 케이스를 안전하게 처리할 수 있습니다.♻️ 제안하는 리팩토링
if (normalizedDistance >= 1000) { const kilometers = normalizedDistance / 1000; return { - value: Number.isInteger(kilometers) ? String(kilometers) : kilometers.toFixed(1), + value: String(Number(kilometers.toFixed(1))), unit: 'km', }; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/pin/components/PinListSheet.tsx` around lines 54 - 60, Update the kilometers formatting in the normalizedDistance branch to round to one decimal place and wrap the result with Number, removing unnecessary trailing “.0” without the current Number.isInteger conditional. Preserve the existing km unit and value output behavior for whole and fractional distances.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/features/pin/components/PinListSheet.tsx`:
- Around line 54-60: Update the kilometers formatting in the normalizedDistance
branch to round to one decimal place and wrap the result with Number, removing
unnecessary trailing “.0” without the current Number.isInteger conditional.
Preserve the existing km unit and value output behavior for whole and fractional
distances.
In `@src/features/pin/components/SortTabs.tsx`:
- Around line 16-34: Update the SortTabs container and option buttons to use the
WAI-ARIA tab pattern: change the container role to tablist, each option button
role to tab, and replace aria-pressed with aria-selected while preserving the
existing selected state and click behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 01d7f074-45e3-4ab2-92ef-ed4d2edeb37b
📒 Files selected for processing (4)
src/features/pin/components/PinCard.tsxsrc/features/pin/components/PinListSheet.tsxsrc/features/pin/components/SortTabs.tsxsrc/types/pin.ts
|
(디자인이 수정될 수 있어서 draft) |
767dd04 to
614f35a
Compare
GitHub Actions
Inactive
This branch was successfully deployed
2 participants
변경 내용
핀을 클릭했을 때 나오는 곡 상세 정보 확인 바텀시트의 내용을 작성합니다.
관련 이슈
Closes #33
변경 사항
테스트
스크린샷 (UI 변경시)
체크리스트
pnpm format)pnpm lint:fix)코드 품질 확인
PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:
Summary by CodeRabbit
새로운 기능
개선 사항