Feat(Client): 카테고리 수정 팝업 checkbox 추가 및 api 연결#279
Feat(Client): 카테고리 수정 팝업 checkbox 추가 및 api 연결#279jjangminii wants to merge 12 commits intodevelopfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Walkthrough카테고리 생성/수정 흐름에 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant UI as PopupPortal (클라이언트)
participant Popup as Popup (디자인시스템)
participant Hook as useCategoryActions / useCategoryManager
participant API as Axios (/api/v3/categories)
User->>UI: 생성/수정 요청(열기)
UI->>Popup: checkboxOption 전달 (isPublic / shareToJobUsers)
Popup->>User: 입력 UI + 체크박스 표시
User->>Popup: 이름 입력 + 체크박스 선택
Popup->>UI: onCreateConfirm(name, shareToJobUsers) / onEditConfirm(id, name, isPublic)
UI->>Hook: handleCreateCategory(name, isPublic) / handlePatchCategory(id, name, isPublic)
Hook->>API: postCategory(name, isPublic) / patchCategory(id, name, isPublic)
API-->>Hook: 응답
Hook->>UI: 캐시 무효화 및 상태 업데이트
UI-->>User: 팝업 닫기 및 UI 갱신
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
|
✅ Storybook chromatic 배포 확인: |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/shared/components/sidebar/PopupPortal.tsx`:
- Around line 44-50: The effect in PopupPortal (useEffect watching popup)
unconditionally calls setShareToJobUsers(false), which resets the checkbox for
edit flows and overwrites existing visibility; change the logic in the effect to
initialize shareToJobUsers based on popup when popup.kind === 'edit' (e.g., read
the existing visibility flag from popup or popup.shareToJobUsers) and only
default to false for create flows, updating the setShareToJobUsers call in the
useEffect that references popup so edit restores the current value and create
sets false; ensure any other places that set shareToJobUsers on open (calls
around lines where shareToJobUsers/setShareToJobUsers are used, and the confirm
handler that passes the value at line ~95) are consistent with this
initialization.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/client/src/shared/apis/axios.tsapps/client/src/shared/apis/queries.tsapps/client/src/shared/components/sidebar/PopupPortal.tsxapps/client/src/shared/components/sidebar/Sidebar.tsxapps/client/src/shared/components/sidebar/hooks/useCategoryActions.tspackages/design-system/src/components/checkbox/Checkbox.tsxpackages/design-system/src/components/popup/Popup.tsx
There was a problem hiding this comment.
♻️ Duplicate comments (1)
apps/client/src/shared/components/sidebar/PopupPortal.tsx (1)
44-44:⚠️ Potential issue | 🟡 Minor생성 팝업 첫 렌더에서 체크박스 기본값이 잠깐 잘못 보일 수 있습니다.
초기값이
true라서 create 오픈 시 이펙트 반영 전 한 프레임 동안 체크된 상태로 보일 수 있습니다. 기본값을false로 두는 편이 안전합니다.수정 제안 diff
- const [shareToJobUsers, setShareToJobUsers] = useState(true); + const [shareToJobUsers, setShareToJobUsers] = useState(false);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/shared/components/sidebar/PopupPortal.tsx` at line 44, The checkbox initial state shareToJobUsers is set to true causing a flash of checked state on first render; change the useState initialization in PopupPortal (shareToJobUsers, setShareToJobUsers) to start as false and ensure any useEffect or logic that updates shareToJobUsers on open still sets the correct value after the popup opens so the intended default is applied without a visual flash.
🧹 Nitpick comments (1)
apps/client/src/shared/components/sidebar/PopupPortal.tsx (1)
128-136:checkboxOption객체 중복을 상수로 추출해 주세요.create/edit 양쪽에 동일 블록이 반복되어 있어 이후 문구/동작 변경 시 누락 가능성이 있습니다.
리팩터 제안 diff
const showCheckbox = popup.kind === 'create' || popup.kind === 'edit'; + const checkboxOption = showCheckbox + ? { + label: '같은 관심 직무 사용자들에게 공유하기', + isSelected: shareToJobUsers, + onSelectedChange: setShareToJobUsers, + } + : undefined; @@ - checkboxOption={ - showCheckbox - ? { - label: '같은 관심 직무 사용자들에게 공유하기', - isSelected: shareToJobUsers, - onSelectedChange: setShareToJobUsers, - } - : undefined - } + checkboxOption={checkboxOption} @@ - checkboxOption={ - showCheckbox - ? { - label: '같은 관심 직무 사용자들에게 공유하기', - isSelected: shareToJobUsers, - onSelectedChange: setShareToJobUsers, - } - : undefined - } + checkboxOption={checkboxOption}Also applies to: 152-160
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/shared/components/sidebar/PopupPortal.tsx` around lines 128 - 136, Extract the repeated checkboxOption object into a single constant and reuse it in both create and edit usages to avoid duplication; specifically, create a const (e.g., sharedCheckboxOption) built from showCheckbox, shareToJobUsers, and setShareToJobUsers with label '같은 관심 직무 사용자들에게 공유하기' and then pass sharedCheckboxOption where checkboxOption is currently constructed in PopupPortal (the blocks around checkboxOption at lines shown and the similar block at 152-160). Ensure the constant preserves the conditional behavior (undefined when showCheckbox is false).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@apps/client/src/shared/components/sidebar/PopupPortal.tsx`:
- Line 44: The checkbox initial state shareToJobUsers is set to true causing a
flash of checked state on first render; change the useState initialization in
PopupPortal (shareToJobUsers, setShareToJobUsers) to start as false and ensure
any useEffect or logic that updates shareToJobUsers on open still sets the
correct value after the popup opens so the intended default is applied without a
visual flash.
---
Nitpick comments:
In `@apps/client/src/shared/components/sidebar/PopupPortal.tsx`:
- Around line 128-136: Extract the repeated checkboxOption object into a single
constant and reuse it in both create and edit usages to avoid duplication;
specifically, create a const (e.g., sharedCheckboxOption) built from
showCheckbox, shareToJobUsers, and setShareToJobUsers with label '같은 관심 직무
사용자들에게 공유하기' and then pass sharedCheckboxOption where checkboxOption is
currently constructed in PopupPortal (the blocks around checkboxOption at lines
shown and the similar block at 152-160). Ensure the constant preserves the
conditional behavior (undefined when showCheckbox is false).
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/client/src/shared/components/sidebar/OptionsMenuPortal.tsxapps/client/src/shared/components/sidebar/PopupPortal.tsxapps/client/src/shared/components/sidebar/Sidebar.tsxapps/client/src/shared/hooks/useCategoryPopups.tsapps/client/src/shared/types/api.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/client/src/shared/components/sidebar/Sidebar.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/client/src/shared/components/sidebar/Sidebar.tsx (2)
121-121:find콜백에서 변수 섀도잉이 발생합니다.외부 변수
c와find콜백 파라미터c가 동일한 이름을 사용하여 가독성이 저하됩니다.♻️ 변수명 변경 제안
const getCategory = (id: number | null) => { - const c = categories?.categories.find((c) => c.id === id) ?? null; - if (!c) return null; - return { id: c.id, name: c.name, isPublic: (c as any).isPublic ?? true }; + const category = categories?.categories.find((cat) => cat.id === id) ?? null; + if (!category) return null; + return { id: category.id, name: category.name, isPublic: (category as any).isPublic ?? true }; };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/shared/components/sidebar/Sidebar.tsx` at line 121, The code shadows the outer variable c in the expression categories?.categories.find((c) => c.id === id) ?? null;—rename the find callback parameter to a distinct name (e.g., category or cat) to avoid shadowing and improve readability; update the expression to use categories?.categories.find((category) => category.id === id) ?? null so the outer variable and callback param are unambiguous (referencing the find call on categories.categories in Sidebar.tsx).
207-210:isPublic ?? true기본값이getCategory내부 기본값과 중복됩니다.
getCategory함수에서 이미isPublic ?? true를 반환하므로, 여기서isPublic ?? true는 중복입니다.getCategory가null을 반환하면 이 콜백은 호출되지 않으므로isPublic은 항상 정의되어 있습니다.♻️ 중복 기본값 제거
- onEdit={(id, name, isPublic) => - openEdit(id, name, isPublic ?? true) - } + onEdit={(id, name, isPublic) => openEdit(id, name, isPublic!)}또는
openEdit의isPublic파라미터가 optional이라면 그냥 전달해도 됩니다:onEdit={(id, name, isPublic) => openEdit(id, name, isPublic)}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/shared/components/sidebar/Sidebar.tsx` around lines 207 - 210, The onEdit callback redundantly applies a default (isPublic ?? true) even though getCategory already guarantees a defined isPublic; update the onEdit prop to pass isPublic through directly (e.g., onEdit={(id, name, isPublic) => openEdit(id, name, isPublic)}) or remove the nullish-coalescing in that lambda so openEdit receives the original value; locate the onEdit usage in Sidebar.tsx and change the lambda accordingly, referencing getCategory and openEdit.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/shared/components/sidebar/OptionsMenuPortal.tsx`:
- Around line 33-47: The code currently leaves name as an empty string when
neither getCategory nor getCategoryName is provided, causing onEdit/onDelete to
receive empty values; update the logic in the block that reads
getCategory/getCategoryName (the section that sets id, name, isPublic) to
perform an early return (e.g., return null) if both getCategory and
getCategoryName are undefined so you never render or call onEdit/onDelete with
empty name/id; ensure this check happens before any use of name/id/isPublic and
references the existing identifiers getCategory, getCategoryName, id, name,
isPublic, onEdit and onDelete.
---
Nitpick comments:
In `@apps/client/src/shared/components/sidebar/Sidebar.tsx`:
- Line 121: The code shadows the outer variable c in the expression
categories?.categories.find((c) => c.id === id) ?? null;—rename the find
callback parameter to a distinct name (e.g., category or cat) to avoid shadowing
and improve readability; update the expression to use
categories?.categories.find((category) => category.id === id) ?? null so the
outer variable and callback param are unambiguous (referencing the find call on
categories.categories in Sidebar.tsx).
- Around line 207-210: The onEdit callback redundantly applies a default
(isPublic ?? true) even though getCategory already guarantees a defined
isPublic; update the onEdit prop to pass isPublic through directly (e.g.,
onEdit={(id, name, isPublic) => openEdit(id, name, isPublic)}) or remove the
nullish-coalescing in that lambda so openEdit receives the original value;
locate the onEdit usage in Sidebar.tsx and change the lambda accordingly,
referencing getCategory and openEdit.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/client/src/shared/components/sidebar/OptionsMenuPortal.tsxapps/client/src/shared/components/sidebar/Sidebar.tsx
| let id: number | null = categoryId; | ||
| let name = ''; | ||
| let isPublic = false; | ||
|
|
||
| if (getCategory) { | ||
| const category = getCategory(categoryId); | ||
|
|
||
| if (!category) return null; | ||
|
|
||
| id = category.id; | ||
| name = category.name; | ||
| isPublic = category.isPublic; | ||
| } else if (getCategoryName) { | ||
| name = getCategoryName(categoryId); | ||
| } |
There was a problem hiding this comment.
getCategory와 getCategoryName 둘 다 없는 경우 처리가 누락되었습니다.
현재 로직에서 getCategory도 getCategoryName도 제공되지 않으면 name이 빈 문자열로 남게 됩니다. 이 경우 onEdit과 onDelete에 빈 문자열이 전달됩니다.
🛡️ 두 prop 모두 없는 경우 early return 추가 제안
if (getCategory) {
const category = getCategory(categoryId);
if (!category) return null;
id = category.id;
name = category.name;
isPublic = category.isPublic;
} else if (getCategoryName) {
name = getCategoryName(categoryId);
+ } else {
+ return null;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/client/src/shared/components/sidebar/OptionsMenuPortal.tsx` around lines
33 - 47, The code currently leaves name as an empty string when neither
getCategory nor getCategoryName is provided, causing onEdit/onDelete to receive
empty values; update the logic in the block that reads
getCategory/getCategoryName (the section that sets id, name, isPublic) to
perform an early return (e.g., return null) if both getCategory and
getCategoryName are undefined so you never render or call onEdit/onDelete with
empty name/id; ensure this check happens before any use of name/id/isPublic and
references the existing identifiers getCategory, getCategoryName, id, name,
isPublic, onEdit and onDelete.
이건 서버 수정 반영되는대로 바로 바꿔주세요! |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/extension/src/apis/axios.ts (1)
30-37: 동일 인터페이스 중복 선언은 하나로 정리하는 편이 안전합니다.현재 같은 이름의
postCategoriesRequest가 두 번 선언되어 타입 의도 추적이 어렵습니다.♻️ 제안 정리안
-export interface postCategoriesRequest { - categoryName: string; -} - export interface postCategoriesRequest { categoryName: string; isPublic: boolean; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/extension/src/apis/axios.ts` around lines 30 - 37, The file declares the same interface name postCategoriesRequest twice which creates ambiguity; remove the duplicate and merge the properties into a single exported interface named postCategoriesRequest that includes both categoryName: string and isPublic: boolean, replace the two declarations with one consolidated declaration (and update any imports/usages if necessary) so the type is uniquely defined and exported from apps/extension/src/apis/axios.ts.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/shared/components/sidebar/Sidebar.tsx`:
- Around line 120-124: The getCategory helper (and the other occurrence using (c
as any).isPublic ?? true) wrongly defaults missing isPublic to true; change
these to default to false instead—locate getCategory and the other mapping that
sets isPublic, remove the "?? true" behavior and replace with an explicit
boolean coercion or conditional that yields false when isPublic is
null/undefined (e.g., use (typeof (c as any).isPublic === 'boolean' ? (c as
any).isPublic : false) or !!(c as any).isPublic) so undefined values do not
become public.
In `@apps/extension/src/apis/axios.ts`:
- Around line 40-43: The API helper that posts to '/api/v3/categories' currently
returns response.data (inner payload) which breaks callers expecting the full
response shape (e.g., useCategoryManager accessing res.data.categoryId); change
the return to preserve the original response object (return response) or wrap
the payload back into the same contract (e.g., return { data: response.data, ...
} ) so that callers like useCategoryManager can continue to access
res.data.categoryId; locate the post call using
apiRequest.post('/api/v3/categories') and update its return accordingly.
---
Nitpick comments:
In `@apps/extension/src/apis/axios.ts`:
- Around line 30-37: The file declares the same interface name
postCategoriesRequest twice which creates ambiguity; remove the duplicate and
merge the properties into a single exported interface named
postCategoriesRequest that includes both categoryName: string and isPublic:
boolean, replace the two declarations with one consolidated declaration (and
update any imports/usages if necessary) so the type is uniquely defined and
exported from apps/extension/src/apis/axios.ts.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/client/src/shared/apis/axios.tsapps/client/src/shared/apis/queries.tsapps/client/src/shared/components/sidebar/Sidebar.tsxapps/client/src/shared/types/api.tsapps/extension/src/apis/axios.tsapps/extension/src/hooks/useCategoryManager.tsapps/extension/src/pages/MainPop.tsxpackages/design-system/src/components/popup/PopupContainer.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/client/src/shared/types/api.ts
| const getCategory = (id: number | null) => { | ||
| const c = categories?.categories.find((c) => c.id === id) ?? null; | ||
| if (!c) return null; | ||
| return { id: c.id, name: c.name, isPublic: (c as any).isPublic ?? true }; | ||
| }; |
There was a problem hiding this comment.
isPublic 기본값을 true로 강제하면 의도치 않은 공개 전환 위험이 있습니다.
Line 123, Line 208-210의 ?? true 때문에 값이 비어 있는 순간에도 공개로 전파될 수 있습니다. 최소한 true 강제는 제거하고 안전한 기본값(예: false)으로 두는 편이 좋습니다.
🔒 제안 수정안
const getCategory = (id: number | null) => {
- const c = categories?.categories.find((c) => c.id === id) ?? null;
+ const c = categories?.categories.find((category) => category.id === id);
if (!c) return null;
- return { id: c.id, name: c.name, isPublic: (c as any).isPublic ?? true };
+ return { id: c.id, name: c.name, isPublic: c.isPublic ?? false };
};
@@
- onEdit={(id, name, isPublic) =>
- openEdit(id, name, isPublic ?? true)
- }
+ onEdit={(id, name, isPublic) => openEdit(id, name, isPublic)}Also applies to: 208-210
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/client/src/shared/components/sidebar/Sidebar.tsx` around lines 120 -
124, The getCategory helper (and the other occurrence using (c as any).isPublic
?? true) wrongly defaults missing isPublic to true; change these to default to
false instead—locate getCategory and the other mapping that sets isPublic,
remove the "?? true" behavior and replace with an explicit boolean coercion or
conditional that yields false when isPublic is null/undefined (e.g., use (typeof
(c as any).isPublic === 'boolean' ? (c as any).isPublic : false) or !!(c as
any).isPublic) so undefined values do not become public.
| const { data: response } = await apiRequest.post('/api/v3/categories', data); | ||
|
|
||
| return response.data; | ||
| }; |
There was a problem hiding this comment.
응답 반환 형태 변경으로 카테고리 생성 후 처리 흐름이 깨집니다.
Line 40-42에서 현재 response.data(내부 data)만 반환하고 있어, useCategoryManager의 res.data.categoryId 접근이 깨집니다. 기존 계약(상위 응답 객체 반환)을 유지하거나 소비 코드를 함께 수정해야 합니다.
🔧 제안 수정안
export const postCategories = async (data: postCategoriesRequest) => {
- const { data: response } = await apiRequest.post('/api/v3/categories', data);
-
- return response.data;
+ const response = await apiRequest.post('/api/v3/categories', data);
+ return response.data;
};📝 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.
| const { data: response } = await apiRequest.post('/api/v3/categories', data); | |
| return response.data; | |
| }; | |
| export const postCategories = async (data: postCategoriesRequest) => { | |
| const response = await apiRequest.post('/api/v3/categories', data); | |
| return response.data; | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/extension/src/apis/axios.ts` around lines 40 - 43, The API helper that
posts to '/api/v3/categories' currently returns response.data (inner payload)
which breaks callers expecting the full response shape (e.g., useCategoryManager
accessing res.data.categoryId); change the return to preserve the original
response object (return response) or wrap the payload back into the same
contract (e.g., return { data: response.data, ... } ) so that callers like
useCategoryManager can continue to access res.data.categoryId; locate the post
call using apiRequest.post('/api/v3/categories') and update its return
accordingly.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/client/src/shared/apis/queries.ts (1)
222-229: GET 요청에useMutation사용은 의미적으로 부적절합니다.
getCategoryDetail은 데이터를 조회하는 GET 요청이므로useQuery를 사용하는 것이 React Query의 권장 패턴입니다.useMutation은 부수 효과(side-effect)가 있는 작업(POST/PUT/PATCH/DELETE)에 사용해야 합니다.현재 구현도 동작하지만, 캐싱, 자동 리페치, stale 데이터 관리 등
useQuery의 이점을 활용할 수 없습니다.♻️ useQuery로 변경 제안
-export const useGetCategoryDetail = (): UseMutationResult< - CategoryDetailResponse, - AxiosError, - number -> => { - return useMutation({ - mutationFn: (categoryId: number) => getCategoryDetail(categoryId), - }); -}; +export const useGetCategoryDetail = (categoryId: number | null) => { + return useQuery({ + queryKey: ['categoryDetail', categoryId], + queryFn: () => getCategoryDetail(categoryId!), + enabled: categoryId !== null, + }); +};참고: 현재 PR 노트에서 서버 수정이 반영되면 변경이 필요하다고 언급되어 있으므로, 이 리팩토링은 서버 수정과 함께 진행하는 것을 권장합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/shared/apis/queries.ts` around lines 222 - 229, useGetCategoryDetail currently uses useMutation for a GET request; change it to useQuery so React Query can cache and manage stale state. Replace the useMutation-based implementation in useGetCategoryDetail with a useQuery that accepts a categoryId param (or takes it via closure), uses the query key ['categoryDetail', categoryId], sets queryFn to call getCategoryDetail(categoryId), returns a UseQueryResult<CategoryDetailResponse, AxiosError>, and enable the query only when categoryId is valid (e.g., enabled: !!categoryId) so it doesn't run unintentionally.apps/client/src/shared/components/sidebar/hooks/useCategoryActions.ts (1)
32-33:useCategoryActions에서 반환되지만 사용되지 않는 코드 제거하기
Sidebar.tsx에서useGetCategoryDetail을 직접 호출하고 있어,useCategoryActions훅에서 반환하는categoryDetail과handleOpenEditCategory는 실제로 사용되지 않습니다. 이 훅의 반환값에서 불필요한 항목들을 제거하거나, 카테고리 상세 조회 로직을 한 곳에서만 관리하도록 통합하는 것을 권장합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/shared/components/sidebar/hooks/useCategoryActions.ts` around lines 32 - 33, The hook useCategoryActions currently calls useGetCategoryDetail and returns categoryDetail and handleOpenEditCategory which are unused because Sidebar.tsx calls useGetCategoryDetail directly; remove the redundant call and unused return values from useCategoryActions (delete the const { mutate: getCategoryDetail, data: categoryDetail } = useGetCategoryDetail() line and stop returning categoryDetail and handleOpenEditCategory), or alternatively move the detail-fetching logic into useCategoryActions and update Sidebar.tsx to use the hook exclusively—adjust whichever file (useCategoryActions or Sidebar.tsx) so only one place manages useGetCategoryDetail and eliminate the unused symbols to keep the API minimal.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/shared/components/sidebar/Sidebar.tsx`:
- Around line 38-39: Remove the unused destructured variable to fix the TS6133
build error: update the call to useGetCategoryDetail so it only extracts the
used mutate function (e.g., keep "mutate: getCategoryDetail" and drop "data:
categoryDetail"), locating this change where useGetCategoryDetail is invoked in
Sidebar.tsx; ensure no other references to categoryDetail remain before
committing.
---
Nitpick comments:
In `@apps/client/src/shared/apis/queries.ts`:
- Around line 222-229: useGetCategoryDetail currently uses useMutation for a GET
request; change it to useQuery so React Query can cache and manage stale state.
Replace the useMutation-based implementation in useGetCategoryDetail with a
useQuery that accepts a categoryId param (or takes it via closure), uses the
query key ['categoryDetail', categoryId], sets queryFn to call
getCategoryDetail(categoryId), returns a UseQueryResult<CategoryDetailResponse,
AxiosError>, and enable the query only when categoryId is valid (e.g., enabled:
!!categoryId) so it doesn't run unintentionally.
In `@apps/client/src/shared/components/sidebar/hooks/useCategoryActions.ts`:
- Around line 32-33: The hook useCategoryActions currently calls
useGetCategoryDetail and returns categoryDetail and handleOpenEditCategory which
are unused because Sidebar.tsx calls useGetCategoryDetail directly; remove the
redundant call and unused return values from useCategoryActions (delete the
const { mutate: getCategoryDetail, data: categoryDetail } =
useGetCategoryDetail() line and stop returning categoryDetail and
handleOpenEditCategory), or alternatively move the detail-fetching logic into
useCategoryActions and update Sidebar.tsx to use the hook exclusively—adjust
whichever file (useCategoryActions or Sidebar.tsx) so only one place manages
useGetCategoryDetail and eliminate the unused symbols to keep the API minimal.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/client/src/shared/apis/axios.tsapps/client/src/shared/apis/queries.tsapps/client/src/shared/components/sidebar/Sidebar.tsxapps/client/src/shared/components/sidebar/hooks/useCategoryActions.tsapps/client/src/shared/types/api.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/client/src/shared/types/api.ts
| const { mutate: getCategoryDetail, data: categoryDetail } = | ||
| useGetCategoryDetail(); |
There was a problem hiding this comment.
categoryDetail이 선언되었지만 사용되지 않아 빌드가 실패합니다.
파이프라인 오류에서 TS6133: 'categoryDetail' is declared but its value is never read.가 보고되었습니다. 사용하지 않는 변수는 제거해야 합니다.
🔧 수정 제안
- const { mutate: getCategoryDetail, data: categoryDetail } =
- useGetCategoryDetail();
+ const { mutate: getCategoryDetail } = useGetCategoryDetail();📝 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.
| const { mutate: getCategoryDetail, data: categoryDetail } = | |
| useGetCategoryDetail(); | |
| const { mutate: getCategoryDetail } = useGetCategoryDetail(); |
🧰 Tools
🪛 GitHub Actions: ci
[error] 38-38: TS6133: 'categoryDetail' is declared but its value is never read.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/client/src/shared/components/sidebar/Sidebar.tsx` around lines 38 - 39,
Remove the unused destructured variable to fix the TS6133 build error: update
the call to useGetCategoryDetail so it only extracts the used mutate function
(e.g., keep "mutate: getCategoryDetail" and drop "data: categoryDetail"),
locating this change where useGetCategoryDetail is invoked in Sidebar.tsx;
ensure no other references to categoryDetail remain before committing.
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit