Fix(client): category edit query string sync#141
Merged
constantly-dev merged 1 commit intodevelopfrom Sep 21, 2025
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughSidebar에 react-router-dom 네비게이션을 도입하고, 카테고리 생성/수정 성공 시 대시보드 카테고리 캐시 무효화, 팝업 닫기, 탭 전환 및 해당 카테고리로 이동을 수행하는 내부 흐름을 추가/정비했습니다. 토스트 리셋 useEffect의 위치를 재배치하고, useSidebarNav의 setActiveTab을 통합했습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant SB as Sidebar
participant MQ as React Query (mutations)
participant RN as Router (useNavigate)
participant SN as SidebarNav State
rect rgb(240,248,255)
Note over U,SB: 카테고리 생성/수정 트리거
U->>SB: Create/Patch category
SB->>MQ: mutate (create/patch)
MQ-->>SB: onSuccess(id)
end
rect rgb(245,255,245)
SB->>MQ: invalidateQueries(dashboardCategories)
SB->>SB: close popup / clear inputs
SB->>SN: setActiveTab("mybookmark")
SB->>SB: selectCategory(id)
SB->>RN: navigate(/my-bookmarks?categoryId=id)
end
rect rgb(255,250,240)
Note right of SB: popup 상태 변화 시<br/>toast 상태 리셋(useEffect)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
constantly-dev
changed the title
constantly-dev
changed the title
|
✅ Storybook chromatic 배포 확인: |
![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
🧹 Nitpick comments (3)
apps/client/src/shared/components/sidebar/Sidebar.tsx (3)
45-46: 탭 키 문자열 상수화/타입 유니온 권장
'mybookmark'등 문자열 리터럴 오타 리스크가 있습니다. Nav 탭 값을 공용 상수 또는 타입 유니온(예:type NavTab = 'remind' | 'mybookmark' | 'level')으로 강제하는 것을 권장합니다.
66-70: URL 쿼리 인코딩 및 상태 의존성 제거(이동 함수 개선 제안)
- 현재
newCategoryName을 직접 문자열 보간하여 URL에 넣습니다. 공백/특수문자 인코딩 이슈가 있으므로createSearchParams로 안전하게 구성하세요.moveNewCategory가 외부 상태(newCategoryName)에 의존합니다. 호출 시점에 값이 비어 있으면 잘못된 URL이 생성될 수 있으므로, 이름을 인자로 받아 사용하거나 내부에서 안전하게 fallback 하도록 바꾸는 것을 권장합니다.적용 예시:
-const moveNewCategory = (id: number) => { - navigate(`/my-bookmarks?id=${id}&category=${newCategoryName}`); - setActiveTab('mybookmark'); - setSelectedCategoryId(id); -}; +const moveNewCategory = (id: number, name?: string) => { + const category = (name ?? newCategoryName) || ''; + navigate({ + pathname: '/my-bookmarks', + search: createSearchParams({ + id: String(id), + ...(category ? { category } : {}), + }).toString(), + }); + setActiveTab('mybookmark'); + setSelectedCategoryId(id); +};추가로, 상단 import도 다음과 같이 보완해주세요:
-import { useNavigate } from 'react-router-dom'; +import { useNavigate, createSearchParams } from 'react-router-dom';
66-70: 카테고리 생성 성공 시에도 동일 내비게이션 필요 여부 확인생성 플로우(
handleCreateCategory)에서는 현재moveNewCategory가 호출되지 않습니다. 생성 직후 해당 카테고리로 이동해야 한다면,onSuccess에서 API 응답의id/name을 받아moveNewCategory(created.id, created.name)로 호출하도록 쿼리 훅 반환 타입을 확인해주세요.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/client/src/shared/components/sidebar/Sidebar.tsx(5 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.065Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
⏰ 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). (1)
- GitHub Check: storybook
🔇 Additional comments (2)
apps/client/src/shared/components/sidebar/Sidebar.tsx (2)
22-29: Router 컨텍스트 보장 필요
useNavigate도입으로 Sidebar는 반드시<Router>컨텍스트 하에서만 렌더되어야 합니다. 스토리북/테스트에서도MemoryRouter등으로 감싸는지 확인해주세요.
119-122: 토스트 리셋 useEffect 배치/의존성 적절합니다팝업 상태 변화에 맞춘 토스트 리셋으로 UX 플리커를 줄입니다. LGTM.
Comment on lines
89
to
94
| onSuccess: () => { | ||
| setNewCategoryName(''); | ||
| queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] }); | ||
| setNewCategoryName(''); | ||
| close(); | ||
| moveNewCategory(id); | ||
| }, |
There was a problem hiding this comment.
버그: newCategoryName을 비운 뒤 이동하여 category 파라미터가 사라집니다
onSuccess에서 setNewCategoryName('') 호출 후 moveNewCategory(id)를 호출하고 있어 URL의 category가 빈 문자열이 됩니다. 순서 변경 또는 이름 인자 전달이 필요합니다.
- onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
- setNewCategoryName('');
- close();
- moveNewCategory(id);
- },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
+ // URL 파라미터 보존을 위해 먼저 이동(이름 전달)
+ moveNewCategory(id, newCategoryName);
+ setNewCategoryName('');
+ close();
+ },📝 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
| onSuccess: () => { | |
| setNewCategoryName(''); | |
| queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] }); | |
| setNewCategoryName(''); | |
| close(); | |
| moveNewCategory(id); | |
| }, | |
| onSuccess: () => { | |
| queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] }); | |
| // URL 파라미터 보존을 위해 먼저 이동(이름 전달) | |
| moveNewCategory(id, newCategoryName); | |
| setNewCategoryName(''); | |
| close(); | |
| }, |
🤖 Prompt for AI Agents
In apps/client/src/shared/components/sidebar/Sidebar.tsx around lines 89 to 94,
calling setNewCategoryName('') before moveNewCategory(id) clears the name used
to build the URL/category param and results in an empty category; either call
moveNewCategory(id) before clearing newCategoryName, or change moveNewCategory
to accept an explicit name argument and pass the new category name (not the
state) so you can safely clear state afterwards.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
이전에 사이드바에서 카테고리를 수정하면 대시보드와 쿼리 스트링에 해당 수정된 카테고리가 바로 반영이 안된다는 문제가 있었어요.
사이드바에 있는 카테고리는 invalidate 처리가 되어 있어서 바로 반영이 되지만, 이외 UI나 쿼리 스트링에는 따로 해당 처리가 안되어 있었기 때문에 로직을 추가했어요.
이와 같이 새로운 카테고리를 담은 쿼리 스트링을 포함한 주소로 라우팅을 해주고, tab과 카테고리 설정도 해주었어요.
사실 위 문제에 대한 직접적인 해결은 navigate만 해주면 되지만, 카테고리를 수정하면 그 카테고리로 이동되는게 UX적으로 자연스럽다고 생각해서 아래 2줄을 추가해줬어요.
이를 수정하는
mutate함수의onSuccess에 아래와 같이 추가해서 문제를 해결했어요.Summary by CodeRabbit
New Features
Bug Fixes
Refactor