[feature] 카테고리 선택 상태 Context 전역 관리로 변경 및 페이지 이동 시 상태 유지#512
[feature] 카테고리 선택 상태 Context 전역 관리로 변경 및 페이지 이동 시 상태 유지#512seongwon030 merged 11 commits intodevelop-fefrom
Conversation
- 카테고리 선택 상태(selectedCategory)를 Context로 전역 관리하도록 CategoryContext.tsx 구현 - 페이지 이동 시에도 카테고리 선택 상태가 유지되도록 구조 개선
- CategoryButtonList에서 카테고리 선택 시 setSelectedCategory(Context)로 상태 관리 - 페이지 이동 후에도 선택 상태가 유지되도록 구조 개
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning
|
| 파일/경로 | 변경 요약 |
|---|---|
| frontend/src/context/CategoryContext.tsx | CategoryContext 및 CategoryProvider, useCategory 훅 신규 생성 |
| frontend/src/App.tsx | 라우팅 구조를 CategoryProvider로 래핑하도록 수정 |
| frontend/src/pages/MainPage/MainPage.tsx | 카테고리 상태를 로컬에서 컨텍스트 기반으로 변경 |
| frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx | 컨텍스트의 setSelectedCategory 사용 및 버튼 클릭 로직 수정 |
Sequence Diagram(s)
sequenceDiagram
participant App
participant CategoryProvider
participant BrowserRouter
participant MainPage
participant CategoryButtonList
App->>CategoryProvider: 전체 라우터 구조 래핑
CategoryProvider->>BrowserRouter: 자식 컴포넌트로 라우터 전달
BrowserRouter->>MainPage: 메인 페이지 렌더링
MainPage->>CategoryContext: useCategory()로 상태 접근
MainPage->>CategoryButtonList: props 없이 렌더링
CategoryButtonList->>CategoryContext: useCategory()로 setSelectedCategory 사용
CategoryButtonList->>CategoryContext: 카테고리 선택 시 setSelectedCategory 호출
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| CategoryContext 제작 (MOA-41) | ✅ | |
| 메인페이지 카테고리 로컬 상태를 전역 Context로 변경 (MOA-41) | ✅ |
Assessment against linked issues: Out-of-scope changes
(해당 변경사항 내에서 범위를 벗어난 변경사항은 발견되지 않았습니다.)
"""
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/context/CategoryContext.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/context/CategoryContext.tsx
⏰ 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: Cursor BugBot
- GitHub Check: run
- GitHub Check: run
✨ Finishing Touches
- 📝 Generate Docstrings
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.
🪧 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.Explain this complex logic.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin 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 explain its main purpose.@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.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
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 pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere 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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
frontend/src/pages/MainPage/MainPage.tsx (1)
53-53: 💡 Verification agent🧩 Analysis chain
CategoryButtonList와의 상태 동기화를 확인하세요.
CategoryButtonList가 이제useCategory훅을 직접 사용하고 있는데, 여기서setSelectedCategory를onCategorySelectprop으로 전달하는 것이 중복될 수 있습니다.다음 스크립트로
CategoryButtonList에서 상태 업데이트가 중복되고 있는지 확인해보세요:
🏁 Script executed:
#!/bin/bash # CategoryButtonList에서 setSelectedCategory가 두 번 호출되는지 확인 rg -A 10 -B 5 "setSelectedCategory.*onCategorySelect" --type tsxLength of output: 94
CategoryButtonList 컴포넌트에서 훅과 prop 호출을 함께 사용하고 있는지 확인하기 위해, 아래 스크립트를 실행해 주세요.
🏁 Script executed:
#!/bin/bash # 1) CategoryButtonList 컴포넌트 파일 위치 찾기 COMPONENT_FILE=$(rg -l "CategoryButtonList" --glob "*.tsx" | head -n1) # 2) useCategory 훅 사용 부분 확인 echo "— useCategory 훅 사용 위치 —" rg -A5 -B5 "useCategory" "$COMPONENT_FILE" # 3) onCategorySelect prop 사용 부분 확인 echo "— onCategorySelect prop 사용 위치 —" rg -A5 -B5 "onCategorySelect" "$COMPONENT_FILE"Length of output: 1639
CategoryButtonList 컴포넌트 내부에서
useCategory훅과onCategorySelectprop이 모두 사용되는지 확인하기 위해 아래 스크립트를 실행해 주세요.
🏁 Script executed:
#!/bin/bash # 1) CategoryButtonList 컴포넌트 파일 위치 찾기 COMPONENT_FILE=$(rg -l "CategoryButtonList" --glob "*CategoryButtonList.tsx" | head -n1) echo "Found: $COMPONENT_FILE" # 2) 컴포넌트 선언부 및 props 확인 echo "---- Component Signature ----" rg -A5 -B0 "CategoryButtonList" "$COMPONENT_FILE" | head -n20 # 3) useCategory 훅 사용 위치 확인 echo "---- useCategory Hook Usage ----" rg -A5 -B5 "useCategory" "$COMPONENT_FILE" # 4) onCategorySelect prop 처리 위치 확인 echo "---- onCategorySelect Prop Handling ----" rg -A5 -B5 "onCategorySelect" "$COMPONENT_FILE"Length of output: 3712
중복된 카테고리 상태 업데이트 제거
CategoryButtonList 컴포넌트에서
useCategory훅의setSelectedCategory와 부모로부터 전달받은onCategorySelect(같은 함수)가 모두 호출되어 동일한 상태 업데이트가 두 번 발생합니다. 하나의 방식만 사용하도록 수정하세요.
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx
handleCategoryClick내부에서두 호출이 중복됨setSelectedCategory(category.id); onCategorySelect(category.id);frontend/src/pages/MainPage/MainPage.tsx
<CategoryButtonList onCategorySelect={setSelectedCategory} />부분제거할 코드 예시:
--- a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx @@ const handleCategoryClick = (category: Category) => { - setSelectedCategory(category.id); onCategorySelect(category.id);또는
--- a/frontend/src/pages/MainPage/MainPage.tsx - <CategoryButtonList onCategorySelect={setSelectedCategory} /> + <CategoryButtonList />훅 사용 또는 prop 전달 중 하나만 남겨 중복 호출을 제거해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/src/App.tsx(2 hunks)frontend/src/context/CategoryContext.tsx(1 hunks)frontend/src/pages/MainPage/MainPage.tsx(2 hunks)frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx (1)
frontend/src/context/CategoryContext.tsx (1)
useCategory(11-11)
frontend/src/pages/MainPage/MainPage.tsx (1)
frontend/src/context/CategoryContext.tsx (1)
useCategory(11-11)
frontend/src/App.tsx (2)
frontend/src/context/CategoryContext.tsx (1)
CategoryProvider(13-24)frontend/src/context/AdminClubContext.tsx (1)
AdminClubProvider(12-24)
🔇 Additional comments (7)
frontend/src/context/CategoryContext.tsx (1)
1-24: 전역 카테고리 상태 관리 구현이 올바릅니다.React Context 패턴을 정확히 따르고 있으며, TypeScript 타입 정의와 기본값 설정이 적절합니다.
useCategory훅을 통한 편리한 접근 방식도 좋습니다.frontend/src/pages/MainPage/MainPage.tsx (2)
3-3: Context 훅 import가 올바릅니다.전역 카테고리 상태 관리를 위한
useCategory훅 import가 적절합니다.
22-22: 로컬 상태에서 전역 상태로의 전환이 올바릅니다.
useState대신useCategory훅을 사용하여 전역 상태를 관리하도록 변경된 것이 적절합니다.frontend/src/App.tsx (2)
5-5: CategoryProvider import가 올바릅니다.전역 카테고리 상태를 제공하기 위한 provider import가 적절합니다.
28-95: Provider 래핑이 올바르게 구현되었습니다.
CategoryProvider로 라우터를 감싸서 모든 하위 컴포넌트에서 카테고리 상태에 접근할 수 있도록 한 것이 적절합니다. Provider들의 중첩 순서도 올바릅니다.frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx (2)
11-11: Context 훅 import가 올바릅니다.전역 카테고리 상태 접근을 위한
useCategory훅 import가 적절합니다.
66-66: 전역 상태 접근이 올바릅니다.
useCategory훅을 통해setSelectedCategory함수에 접근하는 것이 적절합니다.
frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx
Outdated
Show resolved
Hide resolved
- useCategory 훅에서 CategoryContext가 undefined일 경우 에러를 던지도록 처리 - Provider로 감싸지 않은 경우 실수를 빠르게 인지할 수 있도록 안전성 강화
- 카테고리 선택 시 localStorage에 값 저장 - 페이지 이동, 새로고침, 다른 탭에서도 선택 상태가 유지되도록 useEffect 및 storage 이벤트 핸들러 추가
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
다소 불편했던 부분이었는데, 전역 상태로 해결한 점 좋았습니다.
수고 많으셨습니다!
- 카테고리 선택값을 sessionStorage에 저장하도록 수정 - 창/탭을 닫으면 값이 자동으로 삭제되어 더 일시적인 상태 관리 가능
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
2 participants
#️⃣연관된 이슈
📝작업 내용
ContextAPI로 카테고리 상태 관리하기
CategoryContext.tsx컨텍스트 제작 79a5637MainPage.tsx의 카테고리 로컬 상태를useCategory()로 대체하여 전역 상태로 변경 65a5cffApp.tsx에 CategoryProvider 추가 9c5d471CategoryButtonList.tsx에서 카테고리 버튼 클릭시 전역으로 전달 58d9e8f7.6 추가 변경
관리자 페이지에서도 상태 유지하기
동작 화면
2025-06-10.16.17.02.mov
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
Summary by CodeRabbit