Feat/component/filter/DEVING-35 #19

Lee-Dong-Seok · 2025-02-20T10:49:20Z

📝 주요 작업 내용

드롭다운 trigger와 contents 병합
filter 기능과 스타일 커스텀 구현

📺 스크린샷

🔗 참고 사항

코드가 많이 더럽습니다 죄송합니다..

preview/dropdown/page.tsx에 설명 있습니다.. 참고해주세용..!

💬 리뷰 요구사항

📃 관련 이슈

DEVING-35

Summary by CodeRabbit

New Features
- 드롭다운 메뉴 인터페이스가 개선되어 프로필 아이콘, 이미지 지원 및 동적 상태 관리 기능이 추가되었습니다.
- 필터링과 메뉴 옵션(예: 마이페이지, 로그아웃 등)이 업데이트되어 사용자 경험이 향상되었습니다.
Chores
- 개발 환경 개선을 위해 사소한 코드 정리와 새로운 개발 의존성이 추가되었습니다.

vercel · 2025-02-20T10:49:26Z

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

Name	Status	Preview	Comments	Updated (UTC)
moim-fe	❌ Failed (Inspect)			Feb 20, 2025 3:49pm
moim-fe-1kc6	❌ Failed (Inspect)			Feb 20, 2025 3:49pm

coderabbitai · 2025-02-20T10:49:28Z

Walkthrough

이번 변경사항에서는 pre-commit 스크립트와 package.json에 소폭 modification이 이루어졌습니다. .husky/pre-commit 파일에는 파일 끝에 줄바꿈 문자가 추가되었으며, package.json에는 개발용 의존성으로 @svgr/webpack이 추가되었습니다. 또한, dropdown 컴포넌트와 관련된 두 파일(src/app/preview/dropdown/page.tsx, src/components/common/Dropdown.tsx)에서 UI와 상태 관리, 문서화, 인터페이스 변경 등의 개선사항이 적용되었습니다.

Changes

File(s)	Change Summary
`.husky/pre-commit`	파일 끝에 줄바꿈(newline) 추가. `npx lint-staged` 명령어는 기존과 동일하게 동작.
`package.json`	`devDependencies`에 `@svgr/webpack": "^8.1.0"` 의존성이 추가됨.
`src/.../dropdown/page.tsx`, `src/.../Dropdown.tsx`	dropdown 기능 개선: 페이지에서 상태 관리 및 메뉴 옵션("mypage", "logout") 추가, SVG 아이콘 임포트와 문서화 보완; 공통 Dropdown 컴포넌트에서 인터페이스와 렌더링 로직 변경.

Sequence Diagram(s)

sequenceDiagram
    participant U as 사용자
    participant P as 페이지 (page.tsx)
    participant D as Dropdown 컴포넌트
    participant M as 메뉴 옵션

    U->>P: 드롭다운 트리거 클릭
    P->>D: 드롭다운 렌더링 요청
    D->>U: 옵션(아이콘, 메뉴 등) 표시
    U->>D: 옵션 선택 (예: "mypage" 또는 "logout")
    D->>P: 선택 상태 업데이트 (setSelectedFilter 호출)
    P->>M: 선택 옵션에 따른 액션 실행 (alert 등)

Possibly related PRs

Feat/component/filter/DEVING-35 #18: dropdown 페이지와 공통 Dropdown 컴포넌트의 구조와 기능 변경이 유사하여 관련성이 큽니다.
Feat/component/gnb/DEVING-15 #13: package.json에 @svgr/webpack 의존성 추가와 관련된 수정으로 코드 수준의 변경이 공유됩니다.

Suggested labels

🐛 fix, 💄 style, ♻️ refactor

Suggested reviewers

lee1nna
clyde-yoonjae

Poem

나는 작은 토끼, 키보드를 두드리네,
코드 숲을 뛰놀며 새로운 길을 열었네.
한 줄의 변경이 모여 큰 숲을 이루고,
드롭다운도 춤추며 사용자와 대화하네.
개발의 아침, 햇살처럼 빛나는 변화여,
우리 모두의 발자취에 꽃길이 피어나길!

✨ 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.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

dbswl701

필터랑 토글이랑 분리 부탁드립니다.
시안 상 토글은 트리거 요소의 색상이 변하지 않고, 필터는 색상이 변합니다.

수정 후 머지 충돌나는 부분도 해결 부탁드립니다.

고생하셨습니다!!! 👍👍👍

codecov · 2025-02-20T11:10:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

github-actions · 2025-02-20T11:10:08Z

CI Status Report

검사 결과

Lint: ✅ success
Format: ✅ success
Type Check: ❌ failure
Tests: ✅ success
Build: ❌ failure

❌ 일부 검사가 실패했습니다.

…ING-35

github-actions · 2025-02-20T15:49:42Z

CI Status Report

검사 결과

Lint: ✅ success
Format: ✅ success
Type Check: ❌ failure
Tests: ✅ success
Build: ❌ failure

❌ 일부 검사가 실패했습니다.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/components/common/Dropdown.tsx (1)
33-39: 클래스 계산 로직이 가독성이 조금 떨어질 수 있습니다.
className?.includes('w-[460px]')으로 특정 사이즈를 판별하는 로직은 유지보수나 확장 시에 오동작을 일으킬 가능성이 있습니다. 별도 boolean 상태 prop이나 분리된 props로 구분하는 방안을 고려해 보세요.
-    variant !== 'default' &&
-    variant !== 'image' &&
-    !className?.includes('w-[460px]');
+    variant !== 'default' &&
+    variant !== 'image' &&
+    !hasWideSize // 별도 boolean props로 대체
src/app/preview/dropdown/page.tsx (1)
47-47: 변수 사용 여부 확인
selectedFilter는 상태로 선언만 되어 있고 실제로 UI나 로직에서 사용되지 않아 린트 경고가 발생하고 있습니다. 네이밍을 _selectedFilter로 바꾸거나, 실제 로직에 활용하도록 고려해 보세요.
-  const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
+  const [_selectedFilter, setSelectedFilter] = useState<string | null>(null);
🧰 Tools

🪛 GitHub Check: check

[warning] 47-47:
'selectedFilter' is assigned a value but never used. Allowed unused vars must match /^_/u

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bb582fc and 833012c.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (4)

.husky/pre-commit (1 hunks)
package.json (1 hunks)
src/app/preview/dropdown/page.tsx (1 hunks)
src/components/common/Dropdown.tsx (1 hunks)

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

.husky/pre-commit

🧰 Additional context used

🪛 GitHub Check: check

src/app/preview/dropdown/page.tsx

[warning] 47-47:
'selectedFilter' is assigned a value but never used. Allowed unused vars must match /^_/u

[failure] 130-130:
Type 'FC<SVGProps>' is not assignable to type 'string | StaticImport'.

🪛 GitHub Actions: PR Check

src/app/preview/dropdown/page.tsx

[error] 130-130: Type error: Type 'FC<SVGProps>' is not assignable to type 'string | StaticImport'.

🔇 Additional comments (6)

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

9-13: 인터페이스 정의가 명료합니다.
IDropdownOption 인터페이스가 옵션별로 필요한 속성을 잘 캡슐화해주고 있습니다. 확장성 있게 구성되어 있어 보입니다.

15-27: 프로퍼티 추가·변경 확인
IDropdownProps에 새로 추가된 options, variant, onChange 등은 실제 사용을 명확히 해주며 컴포넌트 재사용성을 높이는 데 도움이 됩니다. 기존보다 훨씬 유연하게 커스터마이징 가능해 보입니다.

50-54: handleSelect 콜백 구조가 잘 설계되었습니다.
옵션 선택 시 뷰 상태 반영(setSelectedValue)과 외부 콜백(onChange), 그리고 옵션 단위 온셀렉트까지 각각 구분해서 호출해 주는 로직이 명확합니다.

92-95: CSS 접근성을 검토해 보세요.
bg-Cgray200 text-Cgray400 색상 대비가 충분하지 않으면 시인성이 떨어질 수 있습니다. 접근성(WCAG AA) 측면에서 텍스트 대비를 한번 더 확인해 보시는 걸 권장합니다.

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

100-121: 사용 예제 문서화가 훌륭합니다.
주석을 통해 상세한 예시와 옵션 설명이 제공되어 있어, 다른 개발자가 쉽게 드롭다운 컴포넌트를 적용할 수 있을 것으로 보입니다.

package.json (1)

31-31: SVG 로더 설정 확인
"@svgr/webpack": "^8.1.0"가 devDependencies로 추가되었으나, Next.js와 함께 사용할 때에는 추가 설정(예: next.config.js)이 필요할 수 있습니다. 해당 설정이 누락되면 SVG import 시 사용 의도대로 동작하지 않을 수 있으니 확인해 보세요.

coderabbitai · 2025-02-21T01:08:01Z

src/app/preview/dropdown/page.tsx

+          options={menuOptions}
+          variant="image"
+          imageProps={{
+            src: profile,


⚠️ Potential issue

이미지 소스 타입 에러 발생
profile가 SVG React 컴포넌트로 판단되어 Image 컴포넌트에 전달될 때 타입 불일치가 발생합니다. @svgr/webpack 사용 시, ?url 쿼리로 실제 경로 문자열을 불러오거나 다른 방식을 사용하도록 구성해야 합니다.

아래와 같은 형태로 수정하여 Image에 URL을 전달해 보세요:

-import profile from '@/assets/icon/profile.svg'; +import profileUrl from '@/assets/icon/profile.svg?url'; ... imageProps={{ - src: profile, + src: profileUrl, width: 40, height: 40, ... }}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

src: profile,

- import profile from '@/assets/icon/profile.svg';

+ import profileUrl from '@/assets/icon/profile.svg?url';

...

imageProps={{

- src: profile,

+ src: profileUrl,

width: 40,

height: 40,

...

}}

🧰 Tools

🪛 GitHub Check: check

[failure] 130-130:
Type 'FC<SVGProps>' is not assignable to type 'string | StaticImport'.

🪛 GitHub Actions: PR Check

[error] 130-130: Type error: Type 'FC<SVGProps>' is not assignable to type 'string | StaticImport'.

Lee-Dong-Seok added 3 commits February 19, 2025 14:15

드롭다운 구현

e8b11cd

feat(DEVING-35): 드롭다운 트리거 컨텐츠 병합 및 사이즈 커스텀 구현

10dae34

chore(DEVING-35): dev브랜치와 통일

fef3a35

dbswl701 requested changes Feb 20, 2025

View reviewed changes

vercel bot temporarily deployed to Preview – moim-fe February 20, 2025 11:09 Inactive

vercel bot had a problem deploying to Preview – moim-fe-1kc6 February 20, 2025 11:10 Failure

github-actions bot added ✨ feat 🔧 chore labels Feb 20, 2025

style(DEVING-35): 토글 드랍다운 수정 및 DEFAULTVALUE 제거

fb624bf

Lee-Dong-Seok force-pushed the feat/component/Filter/DEVING-35 branch from 835a959 to fb624bf Compare February 20, 2025 15:21

vercel bot temporarily deployed to Preview – moim-fe February 20, 2025 15:22 Inactive

vercel bot deployed to Preview – moim-fe-1kc6 February 20, 2025 15:23 View deployment

Merge branch 'feat/component/DEVING-9' into feat/component/Filter/DEV…

833012c

…ING-35

vercel bot temporarily deployed to Preview – moim-fe February 20, 2025 15:49 Inactive

vercel bot had a problem deploying to Preview – moim-fe-1kc6 February 20, 2025 15:49 Failure

Lee-Dong-Seok added the AI Review label Feb 21, 2025

github-actions bot added the 💄 style label Feb 21, 2025

coderabbitai bot reviewed Feb 21, 2025

View reviewed changes

Lee-Dong-Seok closed this Feb 21, 2025

coderabbitai bot mentioned this pull request Feb 21, 2025

Feat/component/Dropdownfilter/DEVING-43 #23

Merged

Lee-Dong-Seok deleted the feat/component/Filter/DEVING-35 branch February 21, 2025 05:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/component/filter/DEVING-35 #19

Feat/component/filter/DEVING-35 #19

Uh oh!

Lee-Dong-Seok commented Feb 20, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Feb 20, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 20, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

dbswl701 left a comment

Uh oh!

codecov bot commented Feb 20, 2025

Uh oh!

github-actions bot commented Feb 20, 2025

Uh oh!

github-actions bot commented Feb 20, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Feb 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-            src: profile,
+- import profile from '@/assets/icon/profile.svg';
++ import profileUrl from '@/assets/icon/profile.svg?url';
+...
+ imageProps={{
+-  src: profile,
++  src: profileUrl,
+   width: 40,
+   height: 40,
+   ...
+ }}

Feat/component/filter/DEVING-35 #19

Feat/component/filter/DEVING-35 #19

Uh oh!

Conversation

Lee-Dong-Seok commented Feb 20, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 주요 작업 내용

📺 스크린샷

🔗 참고 사항

💬 리뷰 요구사항

📃 관련 이슈

Summary by CodeRabbit

Uh oh!

vercel bot commented Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

dbswl701 left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Feb 20, 2025

Codecov Report

Uh oh!

github-actions bot commented Feb 20, 2025

CI Status Report

검사 결과

Uh oh!

github-actions bot commented Feb 20, 2025

CI Status Report

검사 결과

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Lee-Dong-Seok commented Feb 20, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Feb 20, 2025 •

edited

Loading

coderabbitai bot commented Feb 20, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)