Feat/component/filter/DEVING-35

[Lee-Dong-Seok]

📝 주요 작업 내용

드롭다운 trigger구현
드롭다운 contents와 trigger 병합
사용위치: 토글, 필터, GNB 프로필 이미지
ex) 본인이 작성한 내용에 대한 상세 설명

📺 스크린샷

(선택사항)

🔗 참고 사항

코드가 많이 더럽습니다..
preview/dropdown상단에 사용법 있습니다!!
ex) 의논할 점, 리뷰어가 알 필요가 있는 추가 정보나 문서, 참고 링크를 포함.

💬 리뷰 요구사항

ex) 중점적으로 리뷰해줬으면 하는 부분

📃 관련 이슈

ex) #이슈 번호
DEVING-35

Summary by CodeRabbit

• New Features

  • 드롭다운 컴포넌트가 대폭 개선되어, 새로운 정렬 옵션(최신, 오래된, 좋아요)과 추가 메뉴 항목(마이페이지, 로그아웃)이 제공됩니다.
  • 다양한 드롭다운 사용 예제가 도입되어 사용자 경험이 한층 향상되었습니다.

• Style

  • 반응형 디자인을 위한 새로운 화면 크기 기준이 추가되어, 다양한 디바이스에서 최적의 UI를 구현합니다.
  • UI 색상 포맷이 수정되어 시각적 일관성이 강화되었습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
moim-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 20, 2025 10:26am
moim-fe-1kc6	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 20, 2025 10:26am

[coderabbitai]

Walkthrough

이번 PR은 여러 파일에 걸쳐 다양한 수정 사항을 포함합니다.

• .husky/pre-commit 파일의 끝에 개행 문자가 추가되었습니다.
• package.json에서는 prepare 스크립트를 "husky install"에서 "husky"로 변경하고, @svgr/webpack 의존성을 추가하며, lint-staged 버전을 업데이트하는 등의 변경이 이루어졌습니다.
• src/app/preview/dropdown/page.tsx 파일에서는 드롭다운 컴포넌트의 변수 이름, 옵션 값 및 UI 예제가 업데이트되었습니다.
• src/components/common/Dropdown.tsx 파일에서는 드롭다운 관련 인터페이스와 선택 로직이 강화되었습니다.
• tailwind.config.ts 파일에서 새로운 반응형 브레이크포인트와 색상 포맷 수정이 적용되었습니다.

Changes

파일	변경 요약
.husky/pre-commit	파일 끝에 개행 문자를 추가함
package.json	prepare 스크립트를 "husky install"에서 "husky"로 변경, @svgr/webpack 의존성 추가, lint-staged 버전 업데이트 및 종속성 재정리
src/app/preview/dropdown/page.tsx	드롭다운 컴포넌트 개선: 변수명(menus → menuOptions) 변경, filterOptions 업데이트, 드롭다운 예제 UI 재구성 및 불필요 코드 제거
src/components/common/Dropdown.tsx	드롭다운 인터페이스 개선: IDropdownOption 인터페이스 추가, 기존 IDropdownProps 인터페이스 수정, 상태 관리 및 옵션 선택 로직 개선, 렌더링 로직 업데이트
tailwind.config.ts	theme.extend 내에 screens 속성 추가(브레이크포인트 md와 lg 정의) 및 BG_2 색상 값을 올바른 hex 형식(#1B1B1D)으로 수정

Sequence Diagram(s)

sequenceDiagram
    participant 사용자 as 사용자
    participant DD as Dropdown 컴포넌트
    participant 핸들러 as onChange/handleSelect

    사용자->>DD: 드롭다운 옵션 선택
    DD->>DD: 상태 업데이트 (선택 값 변경)
    DD->>핸들러: onChange 콜백 실행 및 옵션에 따른 액션 호출
    핸들러-->>DD: 실행 결과 반영

Loading

Possibly related PRs

• Feat/component/gnb/DEVING-15 #13: @svgr/webpack 의존성 추가와 관련하여 SVG 파일 처리 기능 개선을 위한 PR과 직접 연결됨.

Suggested labels

✨ feat, 🔧 chore, 🐛 fix, 💄 style, AI Review, ♻️ refactor

Suggested reviewers

• clyde-yoonjae
• dbswl701

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

src/components/common/Dropdown.tsx (2)

15-28: IDropdownProps 인터페이스가 재사용성을 높이도록 잘 설계되었습니다.
variant, size, contentClassName, imageProps 등 다양한 사용 사례를 고려해 준 점이 좋습니다. 다만, trigger 대신 placeholder라는 명칭을 사용하면 의도가 좀 더 직관적으로 전달될 수 있습니다.

---

45-50: selectedOption과 sizeClasses 할당이 명확합니다.
다만, sizeClasses에 Tailwind 설정 자체를 활용하는 방법도 고려해볼 수 있습니다. 예: className 조합 시 w-나 h- 값을 조건부로 적용.

package.json (2)

17-17: @radix-ui/react-slot 종속성 재정렬 관련
@radix-ui/react-slot 종속성이 동일 버전(^1.1.2)임에도 불구하고 재정렬되어 추가되었습니다. 의도하신 변경 사항이라면 괜찮으나, 변경 목적을 주석 등으로 명시하면 가독성 및 관리 측면에서 도움이 될 것 같습니다.

---

30-30: 새로운 devDependency 추가: @svgr/webpack
새로운 devDependency인 @svgr/webpack가 버전 ^8.1.0으로 추가되었습니다. SVG 파일 처리와 관련된 빌드 작업에 사용될 것으로 보이며, 관련 문서나 사용 예제가 프로젝트 내에 업데이트 되었는지 확인해주시면 좋겠습니다.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bbde56e and 10dae34.

⛔ Files ignored due to path filters (2)

• package-lock.json is excluded by !**/package-lock.json
• src/assets/icon/profile.svg is excluded by !**/*.svg

📒 Files selected for processing (5)

• .husky/pre-commit (1 hunks)
• package.json (3 hunks)
• src/app/preview/dropdown/page.tsx (1 hunks)
• src/components/common/Dropdown.tsx (1 hunks)
• tailwind.config.ts (2 hunks)

✅ Files skipped from review due to trivial changes (1)

• .husky/pre-commit

🔇 Additional comments (19)

src/components/common/Dropdown.tsx (8)

1-7: 임포트 구문 전체가 정상적으로 보입니다.
라이브러리 의존성이 잘 구성되어 있고, 사용 목적에 맞게 불러온 것으로 판단됩니다.

---

9-13: IDropdownOption 인터페이스 정의가 간결하고 명확합니다.
옵션의 구조가 직관적으로 잘 드러나며, 추후 확장에도 유연해 보입니다.

---

31-41: 컴포넌트 프로퍼티 구조 분해가 이해하기 쉽게 잘 작성되었습니다.
defaultValue, variant, size 등 디폴트값 설정이 합리적이며, 유지보수에도 용이합니다.

---

42-43: 드롭다운 열림/닫힘 상태(isOpen)와 선택된 값(selectedValue)을 로컬 상태로 관리하는 구현이 적절합니다.
별도의 Redux나 Context를 사용하지 않고 간단히 해결 가능한 부분이라 유지 보수성에 좋습니다.

---

52-56: handleSelect 함수는 선택 시 필요한 모든 처리를 누락 없이 잘 수행합니다.
상태 업데이트, 부모 콜백, 옵션별 콜백을 모두 호출하도록 구성된 점이 일관성을 유지하기에 좋습니다.

---

58-91: renderTriggerContent 내부 분기 로직이 직관적이며, 다양한 variant를 유연하게 커버합니다.
이미지 드롭다운(variant="image")과 일반 타입별 처리가 전체적으로 깔끔합니다.

---

94-142: DropdownMenuPrimitive 활용과 스타일 정의가 안정적으로 보입니다.
<DropdownMenuPrimitive.Content> 내부에서 옵션을 map 처리하는 부분은 깔끔하며, ARIA 접근성도 Radix UI가 지원하므로 별도 고려 사항이 적어 보입니다.

---

145-147: 마무리 구조가 간단 명료합니다.
컴포넌트가 확실히 종료되고, default export로 잘 노출됩니다.

src/app/preview/dropdown/page.tsx (7)

3-44: 문서 주석 및 profile.svg 임포트가 명확하게 작성되었습니다.
댓글에 다양한 사용 예시와 옵션 설명이 잘 포함되어 있어, 팀원들이 기능을 빠르게 파악할 수 있을 것 같습니다.

---

49-55: filterOptions 배열이 명확하고, 실제 사용 사례에 따라 구성되었습니다.
‘최신순’, ‘오래된순’, ‘좋아요순’ 등 실제 서비스에서 자주 활용되는 필터명이므로 직관적입니다.

---

56-72: menuOptions에 액션이 포함된 점이 특징적이며, 알림(Modal) 또는 라우팅으로 확장하기에도 용이합니다.
onSelect 콜백에서 alert를 사용하는 예시가 직관적입니다.

---

75-91: 기본 드롭다운 예시 섹션이 잘 구조화되어 있습니다.
size="l"과 size="s" 예시를 함께 보여줘서, 디자이너나 QA가 테스트하기 좋습니다.

---

93-117: ‘선택 상태가 있는 드롭다운’ 예시에서 상태 관리 흐름이 명확합니다.
selectedFilter 상태를 외부에서 직접 관리하고, 컴포넌트에 주입하는 방식이 재사용에 유리합니다.

---

119-133: 이미지 드롭다운 예시가 실제 프로필 이미지를 교체하여 사용하기 쉽게 작성되었습니다.
imageProps를 통해 width, height 등도 커스텀 가능하여 편의성이 높습니다.

---

135-145: 커스텀 스타일 예시로 인해 다양한 UI 요구 사항을 해결할 수 있음을 잘 보여줍니다.
className과 contentClassName 조합이 유연하여 프로젝트별 디자인 스펙을 적용하기 용이합니다.

tailwind.config.ts (2)

13-16: 새로운 반응형 브레이크포인트(md: '376px', lg: '745px') 추가가 잘 처리되었습니다.
세분화된 단말 사이즈에 맞춰 반응형을 유연하게 확장할 수 있어 보입니다.

---

35-35: BG_2 컬러에 #이 포함되어 정확한 HEX 포맷으로 수정되었습니다.
이제 컬러가 올바르게 렌더링될 것이며, 유지 보수에도 용이합니다.

package.json (2)

12-12: prepare 스크립트 변경 확인 필요
prepare 스크립트가 기존의 "husky install"에서 "husky"로 변경되었습니다. 이 변경이 하스키 초기화 방식에 미치는 영향을 반드시 검토해주시고, 관련 훅들이 올바르게 작동하는지 확인 부탁드립니다.

---

52-52: lint-staged 버전 업그레이드 점검
lint-staged 버전이 ^15.2.0에서 ^15.4.3으로 업그레이드되었습니다. 이 버전 변경에 따른 API 차이나 호환성 문제가 없는지 검토해 주시기 바랍니다.