Feature: 드롭다운 스타일 사안 반영#227
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough정렬/필터 UI가 단일 탭 기반에서 두 개의 드롭다운(정렬, 필터)로 분리되었습니다. 관련 컴포넌트와 스타일이 추가/개편되었고, 페이지 상태와 쿼리 파라미터가 selectedTab → selectedFilter로 변경되며 정렬 기본값이 LATEST로 수정되었습니다. 공용 Dropdown 컴포넌트는 좌측 정렬과 선택 상태 표시를 지원합니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant ST as SelectTabSection
participant DD as Dropdown (Filter/Sort)
participant P as Page (Explore/My-Capsule)
participant Q as useInfiniteQuery
U->>ST: 드롭다운 트리거 클릭
ST->>DD: DropdownContent 표시(align: left/right)
U->>DD: 항목 선택
DD->>ST: onSelect(value, type)
ST->>P: handleFilter(value) 또는 handleSort(value)
P->>P: setState(selectedFilter/selectedSort)
P->>Q: capsuleLists(selectedSort, selectedFilter)
Q-->>P: 데이터 업데이트
P-->>U: 리스트 렌더링 갱신
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
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 |
|
This pull request (commit
|
🚀 Storybook 배포📖 Storybook: https://683d91ab23651aa0b399e435-hscsstyswd.chromatic.com/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
app/(main)/explore/_components/select-tab-section/select-tab-section.css.ts (1)
16-26: 코드 중복 확인 필요
leftContainer와rightContainer스타일이app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts와 완전히 동일합니다. 공통 스타일은shared/styles디렉토리로 추출하는 것을 고려해보세요.다음 스크립트로 두 파일 간 중복 스타일을 확인할 수 있습니다:
#!/bin/bash # Description: Check for duplicate styles between explore and my-capsule select-tab-section CSS files echo "=== Explore select-tab-section.css.ts ===" cat "app/(main)/explore/_components/select-tab-section/select-tab-section.css.ts" echo -e "\n=== My-capsule select-tab-section.css.ts ===" cat "app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts"app/(main)/my-capsule/_components/select-tab-section/index.tsx (2)
36-42: undefined 처리 고려 필요
selectedFilterLabel과selectedSortLabel이find()로 파생되므로 매칭되는 옵션이 없을 경우undefined가 될 수 있습니다. Trigger에서 렌더링 시 빈 값이나 기본 플레이스홀더를 표시하도록 처리하는 것을 권장합니다.다음과 같이 fallback 값을 추가할 수 있습니다:
- const selectedFilterLabel = filterOptions.find( - (option) => option.value === selectedFilter, - )?.label; + const selectedFilterLabel = filterOptions.find( + (option) => option.value === selectedFilter, + )?.label ?? "필터 선택"; - const selectedSortLabel = sortOptions.find( - (option) => option.value === selectedSort, - )?.label; + const selectedSortLabel = sortOptions.find( + (option) => option.value === selectedSort, + )?.label ?? "정렬 선택";
17-84: 코드 중복 확인 필요이 컴포넌트의 구조가
app/(main)/explore/_components/select-tab-section/index.tsx와 거의 동일합니다. 공통 로직(레이블 파생, 드롭다운 렌더링)을 재사용 가능한 유틸리티나 공통 컴포넌트로 추출하는 것을 고려해보세요.다음 스크립트로 두 파일의 유사도를 확인할 수 있습니다:
#!/bin/bash # Description: Compare the structure of explore and my-capsule select-tab-section components echo "=== My-capsule component ===" cat "app/(main)/my-capsule/_components/select-tab-section/index.tsx" echo -e "\n=== Explore component ===" cat "app/(main)/explore/_components/select-tab-section/index.tsx"app/(main)/explore/_components/select-tab-section/index.tsx (1)
32-38: undefined 처리 고려 필요
selectedFilterLabel과selectedSortLabel이find()로 파생되므로 매칭되는 옵션이 없을 경우undefined가 될 수 있습니다. Trigger에서 렌더링 시 빈 값이나 기본 플레이스홀더를 표시하도록 처리하는 것을 권장합니다.다음과 같이 fallback 값을 추가할 수 있습니다:
- const selectedFilterLabel = filterOptions.find( - (option) => option.value === selectedFilter, - )?.label; + const selectedFilterLabel = filterOptions.find( + (option) => option.value === selectedFilter, + )?.label ?? "필터 선택"; - const selectedSortLabel = sortOptions.find( - (option) => option.value === selectedSort, - )?.label; + const selectedSortLabel = sortOptions.find( + (option) => option.value === selectedSort, + )?.label ?? "정렬 선택";
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
shared/assets/icon/down.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
app/(main)/explore/_components/select-tab-section/index.tsx(1 hunks)app/(main)/explore/_components/select-tab-section/select-tab-section.css.ts(3 hunks)app/(main)/explore/page.tsx(3 hunks)app/(main)/my-capsule/_components/select-tab-section/index.tsx(1 hunks)app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts(2 hunks)app/(main)/my-capsule/page.tsx(3 hunks)shared/ui/dropdown/dropdown.css.ts(4 hunks)shared/ui/dropdown/index.tsx(5 hunks)
🧰 Additional context used
🧬 Code graph analysis (7)
app/(main)/explore/_components/select-tab-section/index.tsx (1)
shared/types/api/capsule.ts (2)
CapsuleSortType(82-82)CAPSULE_SORT(75-80)
app/(main)/my-capsule/_components/select-tab-section/index.tsx (1)
shared/types/api/capsule.ts (4)
MyCapsuleFilterType(91-92)CapsuleSortType(82-82)CAPSULE_SORT(75-80)MY_CAPSULE_FILTER(84-89)
app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts (4)
app/(main)/explore/_components/select-tab-section/select-tab-section.css.ts (6)
leftContainer(16-20)rightContainer(22-26)chipWrapper(28-37)dropdown(39-42)dropdownTrigger(44-56)dropdownContent(58-60)shared/styles/tokens/screen.ts (1)
screen(9-27)shared/styles/base/theme.css.ts (1)
themeVars(14-14)shared/styles/tokens/color.ts (1)
colorTheme(1-71)
shared/ui/dropdown/index.tsx (1)
shared/utils/cn.ts (1)
cn(3-5)
app/(main)/explore/page.tsx (2)
shared/types/api/capsule.ts (2)
CapsuleSortType(82-82)CAPSULE_SORT(75-80)shared/api/queries/capsule.ts (1)
capsuleQueryOptions(36-79)
app/(main)/my-capsule/page.tsx (2)
shared/types/api/capsule.ts (4)
MyCapsuleFilterType(91-92)MY_CAPSULE_FILTER(84-89)CapsuleSortType(82-82)CAPSULE_SORT(75-80)shared/api/queries/capsule.ts (1)
capsuleQueryOptions(36-79)
app/(main)/explore/_components/select-tab-section/select-tab-section.css.ts (2)
app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts (4)
leftContainer(16-20)rightContainer(22-26)dropdownTrigger(44-56)dropdownContent(59-61)shared/styles/tokens/color.ts (1)
colorTheme(1-71)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: deploy
- GitHub Check: test
- GitHub Check: storybook-deploy
🔇 Additional comments (14)
app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts (2)
1-26: 레이아웃 구조가 explore 페이지와 일관되게 구현되었습니다.좌우 컨테이너와 필요한 테마 import가 올바르게 추가되었습니다.
39-61: 드롭다운 스타일이 올바르게 구현되었습니다.relative 포지셔닝과 새로운 트리거/콘텐츠 스타일이 explore 페이지와 일관되게 적용되었습니다.
app/(main)/my-capsule/page.tsx (2)
21-30: 상태 관리와 쿼리 호출이 올바르게 업데이트되었습니다.selectedTab → selectedFilter로 이름이 변경되었고, 기본 정렬이 LATEST로 설정되어 explore 페이지와 일관성을 유지합니다.
48-69: 핸들러와 props가 새로운 네이밍 규칙에 맞게 올바르게 업데이트되었습니다.app/(main)/explore/page.tsx (1)
16-56: explore 페이지가 my-capsule 페이지와 일관되게 업데이트되었습니다.상태 이름, 기본 정렬, 핸들러 네이밍이 모두 올바르게 변경되었습니다. selectedFilter의 타입이 string으로 유연하게 처리된 점도 적절합니다.
shared/ui/dropdown/dropdown.css.ts (2)
53-71: 좌측 정렬 드롭다운과 아이템 레이아웃이 올바르게 구현되었습니다.dropdownContentLeft는 transformOrigin과 함께 좌측 정렬을 지원하며, justifyContent: space-between은 선택 표시를 위한 공간을 확보합니다.
82-93: 선택 상태 스타일이 테마 변수를 활용하여 일관되게 구현되었습니다.shared/ui/dropdown/index.tsx (2)
3-3: align prop이 올바르게 구현되어 좌우 정렬을 지원합니다.기본값 "right"를 통해 하위 호환성을 유지하며, 타입 제약도 적절합니다.
Also applies to: 120-139
148-181: 선택 상태 표시 기능이 올바르게 구현되었습니다.isSelected prop과 CheckIcon을 통해 선택된 항목을 명확하게 표시하며, space-between 레이아웃과 잘 조화됩니다.
app/(main)/explore/_components/select-tab-section/select-tab-section.css.ts (2)
1-2: LGTM!테마 변수와 색상 토큰 import가 새로운 드롭다운 스타일링에 적절하게 사용되었습니다.
44-56: 드롭다운 트리거 최소 너비(11rem) 검토 필요
explore 컴포넌트(전체·참여가능·오픈된 캡슐·마감된 캡슐), my-capsule 컴포넌트(전체·좋아요·내가 만든 캡슐·참여 중인 캡슐), 정렬 옵션(최신 순·오픈 임박 순·편지 마감 순) 등 모든 라벨 렌더링 시 11rem이 충분한지 UI에서 확인하고, 필요 시minWidth조정 또는width: auto적용을 권장합니다.app/(main)/my-capsule/_components/select-tab-section/index.tsx (2)
10-15: LGTM!Props 인터페이스가 명확하게 정의되어 있고, 타입 안정성이 확보되었습니다.
MyCapsuleFilterType과CapsuleSortType사용이 적절합니다.
21-21: 좋은 개선입니다!
selectedSort에 기본값CAPSULE_SORT.LATEST를 설정한 것은 좋은 방어 코드입니다.app/(main)/explore/_components/select-tab-section/index.tsx (1)
17-17: LGTM!
selectedSort에 기본값CAPSULE_SORT.LATEST를 설정한 것은 좋은 방어 코드입니다.
2 participants
📌 Summary
📚 Tasks
📸 Screenshot
2025-10-01.11.34.27.mov
2025-10-01.11.34.48.mov
Summary by CodeRabbit