Feature: 설정 - 카테고리, 가이드 다시 시작 기능 #114
Conversation
Walkthrough이 풀 리퀘스트는 Supabase와 관련된 카테고리 작업을 위한 새로운 React 훅을 추가하고, 기존의 카테고리 쿼리 및 변형을 수정합니다. Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range and nitpick comments (6)
packages/shared/src/hooks/supabase/useCategoryPatchMutation.ts (1)
16-20: 뮤테이션 구현에 대한 개선 제안현재 구현은 잘 되어 있으나, 다음과 같은 개선사항을 고려해보시면 좋을 것 같습니다:
- 낙관적 업데이트(Optimistic Updates) 구현을 통한 사용자 경험 개선
- 더 구체적인 에러 타입 정의
다음과 같이 개선해 보시는 건 어떨까요?:
export default function useCategoryPatchMutation({ supabaseClient }: UseCategoryPatchMutationProps) { return useMutation<MutationData, MutationError, MutationVariables>({ mutationFn: ({ id, categoryRequest }) => updateCategory(supabaseClient, id, categoryRequest), + onMutate: async ({ id, categoryRequest }) => { + // TODO: Implement optimistic update logic + }, + onError: (error, variables, context) => { + // TODO: Implement error rollback logic + } }); }packages/shared/src/hooks/supabase/index.ts (1)
Line range hint
1-11: 후크 내보내기 구조화 제안현재 내보내기가 알파벳 순으로 되어 있지만, 기능별로 그룹화하면 코드의 가독성이 더 좋아질 것 같습니다.
다음과 같은 구조화를 제안드립니다:
-export { default as useCategoryDeleteMutation } from './useCategoryDeleteMutation'; -export { default as useCategoryPatchMutation } from './useCategoryPatchMutation'; -export { default as useCategoryPostMutation } from './useCategoryPostMutation'; -export { default as useCategoryQuery } from './useCategoryQuery'; -export { default as useCategoryUpsertMutation } from './useCategoryUpsertMutation'; -export { default as useMemoPatchMutation } from './useMemoPatchMutation'; -export { default as useMemoPostMutation } from './useMemoPostMutation'; -export { default as useMemoQuery } from './useMemoQuery'; -export { default as useMemosQuery } from './useMemosQuery'; -export { default as useMemosUpsertMutation } from './useMemosUpsertMutation'; -export { default as useSupabaseUser } from './useSupabaseUser'; +// Category related hooks +export { default as useCategoryQuery } from './useCategoryQuery'; +export { default as useCategoryDeleteMutation } from './useCategoryDeleteMutation'; +export { default as useCategoryPatchMutation } from './useCategoryPatchMutation'; +export { default as useCategoryPostMutation } from './useCategoryPostMutation'; +export { default as useCategoryUpsertMutation } from './useCategoryUpsertMutation'; + +// Memo related hooks +export { default as useMemoQuery } from './useMemoQuery'; +export { default as useMemosQuery } from './useMemosQuery'; +export { default as useMemoPatchMutation } from './useMemoPatchMutation'; +export { default as useMemoPostMutation } from './useMemoPostMutation'; +export { default as useMemosUpsertMutation } from './useMemosUpsertMutation'; + +// User related hooks +export { default as useSupabaseUser } from './useSupabaseUser';packages/web/src/app/[lng]/memos/setting/component/Setting/SettingGuide.tsx (1)
24-26: 접근성 개선이 필요합니다버튼에 적절한 aria-label을 추가하여 스크린 리더 사용자의 접근성을 향상시키는 것이 좋습니다.
-<Button variant="outline" className="col-span-2" onClick={handleRestartGuide}> +<Button + variant="outline" + className="col-span-2" + onClick={handleRestartGuide} + aria-label={t('setting.restartGuide')} +>packages/web/src/app/[lng]/memos/setting/component/Setting/SettingLanguage.tsx (1)
21-22: 언어 옵션이 하드코딩되어 있습니다언어 옵션을 상수나 설정 파일로 분리하여 관리하는 것이 좋습니다.
+const LANGUAGE_OPTIONS = { + ko: '한글', + en: 'English', +} as const; // SelectContent 내부 -<SelectItem value="ko">한글</SelectItem> -<SelectItem value="en">English</SelectItem> +{Object.entries(LANGUAGE_OPTIONS).map(([value, label]) => ( + <SelectItem key={value} value={value}> + {label} + </SelectItem> +))}packages/web/src/app/[lng]/memos/setting/component/Setting/SettingCategoryForm.tsx (2)
87-94: useEffect 내 잠재적인 경쟁 상태를 방지해야 합니다.categories가 변경될 때마다 form 값을 설정하는 것은 사용자가 입력 중인 값을 덮어쓸 수 있습니다.
다음과 같이 초기 로딩 시에만 form 값을 설정하도록 수정하는 것을 제안합니다:
useEffect(() => { if (!categories) return; + // 초기 로딩 시에만 form 값 설정 + const currentValues = getValues('categories'); + if (currentValues.length === 0) { setValue( 'categories', categories.map(category => ({ id: category.id, name: category.name })), ); + } }, [categories, setValue]);
100-116: 카테고리 삭제 시 확인 절차가 필요합니다.카테고리 삭제는 중요한 작업이므로, 사용자에게 확인을 요청하는 것이 좋겠습니다.
삭제 전 확인 다이얼로그를 추가하는 것을 제안합니다:
+ import { useConfirm } from '@src/hooks/use-confirm'; const handleCategoryDelete = (id: number) => { + if (!confirm(t('common.confirmDelete'))) return; deleteCategory( { id }, { onSuccess: () => { queryClient.invalidateQueries({ queryKey: QUERY_KEY.category() }); toast({ title: t('toastTitle.deleteSuccess'), }); }, + onError: (error) => { + toast({ + title: '카테고리 삭제 실패', + description: error.message, + variant: 'destructive', + }); + }, }, ); };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (14)
packages/shared/src/hooks/supabase/index.ts(1 hunks)packages/shared/src/hooks/supabase/useCategoryDeleteMutation.ts(1 hunks)packages/shared/src/hooks/supabase/useCategoryPatchMutation.ts(1 hunks)packages/shared/src/hooks/supabase/useCategoryQuery.ts(1 hunks)packages/shared/src/hooks/supabase/useCategoryUpsertMutation.ts(1 hunks)packages/shared/src/modules/local-storage/LocalStorage.ts(1 hunks)packages/shared/src/utils/Supabase.ts(2 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/SettingCategoryForm.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/SettingGuide.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/SettingLanguage.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/page.tsx(1 hunks)packages/web/src/modules/i18n/locales/en/translation.json(2 hunks)packages/web/src/modules/i18n/locales/ko/translation.json(4 hunks)
🔇 Additional comments (11)
packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx (2)
3-5: 필요한 의존성 설치 확인
@extension/shared/constants의 MOTION_VARIANTS와 framer-motion의 motion을 새로 추가하였습니다. 해당 패키지들이 프로젝트에 설치되어 있고, 버전 호환성이 있는지 확인해주세요.
15-24: 애니메이션 컴포넌트 적용 확인
<motion.section>을 사용하여 설정 페이지에 애니메이션을 적용한 것이 확인됩니다. 애니메이션 설정이 올바르게 적용되었으며, 새로운 컴포넌트들이 정상적으로 렌더링될 것으로 보입니다.
packages/shared/src/modules/local-storage/LocalStorage.ts (1)
13-15: remove 메서드 추가 확인
LocalStorage 클래스에 remove 메서드를 추가하여 로컬 스토리지에서 항목을 제거할 수 있게 되었습니다. 이 구현은 올바르게 작성되었으며, 기능에 문제가 없을 것으로 보입니다.
packages/shared/src/hooks/supabase/useCategoryQuery.ts (2)
4-4: useSuspenseQuery 사용 시 주의사항
useSuspenseQuery로 변경하셨습니다. 이 훅을 사용하면 컴포넌트가 Suspense로 감싸져 있어야 합니다. 그렇지 않으면 데이터 로딩 중 에러가 발생할 수 있으니, 해당 컴포넌트가 Suspense로 감싸져 있는지 확인해주세요.
11-13: supabaseClient의 유효성 확인
supabaseClient를 인자로 받아 사용하고 있습니다. supabaseClient가 유효한 인스턴스인지, 제대로 전달되고 있는지 확인해주세요.
packages/web/src/app/[lng]/memos/setting/page.tsx (1)
11-19: 서버 컴포넌트와 데이터 페칭 구현이 잘 되어있습니다! 👍
서버 컴포넌트를 활용한 데이터 페칭 방식과 HydrationBoundaryWrapper를 통한 클라이언트 상태 관리가 적절하게 구현되어 있습니다.
packages/web/src/modules/i18n/locales/ko/translation.json (3)
18-19: LGTM! 번역이 정확하고 일관성이 있습니다.
"제목"과 "저장" 번역이 영문 버전과 잘 매칭되어 있습니다.
35-38: 성공 메시지들의 일관성이 잘 유지되어 있습니다.
모든 성공 메시지가 "~완료되었어요!" 형식으로 통일되어 있어 사용자 경험이 일관적입니다.
77-82: 카테고리 관련 번역이 명확하고 이해하기 쉽습니다.
설정 섹션의 새로운 번역들이 직관적이고 사용자 친화적입니다.
packages/web/src/modules/i18n/locales/en/translation.json (2)
36-39: 영문 성공 메시지가 한글 버전과 잘 매칭됩니다.
영문 메시지들도 일관된 형식을 따르고 있어 좋습니다.
77-82: 설정 관련 번역이 한글 버전과 잘 대응됩니다.
카테고리와 가이드 관련 번역이 직관적이고 한글 버전과 의미가 잘 매칭됩니다.
| const handleRestartGuide = () => { | ||
| LocalStorage.remove('guide'); | ||
| router.push(PATHS.memos); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
가이드 재시작 시 오류 처리가 필요합니다
LocalStorage 조작이나 라우팅 중 발생할 수 있는 오류에 대한 처리가 필요합니다.
const handleRestartGuide = () => {
- LocalStorage.remove('guide');
- router.push(PATHS.memos);
+ try {
+ LocalStorage.remove('guide');
+ router.push(PATHS.memos);
+ } catch (error) {
+ console.error('가이드 재시작 중 오류 발생:', error);
+ // 사용자에게 오류 알림 표시
+ }
};Committable suggestion skipped: line range outside the PR's diff.
packages/web/src/app/[lng]/memos/setting/component/Setting/SettingLanguage.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/app/[lng]/memos/setting/component/Setting/SettingCategoryForm.tsx
Show resolved
Hide resolved
packages/web/src/app/[lng]/memos/setting/component/Setting/SettingCategoryForm.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/web/src/app/[lng]/memos/components/MemoSidebar/SidebarGroupCategory.tsx (1)
Line range hint
41-47: 버튼의 id 속성도 일관성 있게 변경하는 것이 좋습니다.현재 button 요소의 id로 category.name을 사용하고 있는데, key와 마찬가지로 category.id를 사용하는 것이 더 안정적일 것 같습니다.
다음과 같이 변경을 제안드립니다:
<SidebarMenuItem key={category.id}> <SidebarMenuButton asChild> - <button id={category.name} onClick={handleCategoryClick}> + <button id={category.id} onClick={handleCategoryClick}> <span>{category.name}</span> </button> </SidebarMenuButton> </SidebarMenuItem>이에 따라 handleCategoryClick 핸들러도 수정이 필요할 수 있습니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (7)
packages/shared/src/constants/Supabase.ts(1 hunks)packages/shared/src/utils/Supabase.ts(2 hunks)packages/web/src/app/[lng]/memos/components/MemoSidebar/SidebarGroupCategory.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/SettingCategoryForm.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/SettingLanguage.tsx(1 hunks)packages/web/src/modules/i18n/locales/en/translation.json(2 hunks)packages/web/src/modules/i18n/locales/ko/translation.json(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/web/src/app/[lng]/memos/setting/component/Setting/SettingCategoryForm.tsx
- packages/web/src/app/[lng]/memos/setting/component/Setting/SettingLanguage.tsx
- packages/shared/src/utils/Supabase.ts
- packages/web/src/modules/i18n/locales/en/translation.json
- packages/web/src/modules/i18n/locales/ko/translation.json
🔇 Additional comments (2)
packages/web/src/app/[lng]/memos/components/MemoSidebar/SidebarGroupCategory.tsx (1)
41-41: 카테고리 아이템의 key 속성 변경이 적절합니다.
category.name 대신 category.id를 key로 사용하는 것은 좋은 변경입니다. ID는 고유성이 보장되어 React의 렌더링 최적화에 도움이 됩니다.
packages/shared/src/constants/Supabase.ts (1)
6-6: 상수 추가가 적절해 보입니다!
상수 이름과 값이 기존 패턴을 잘 따르고 있습니다. 다만, Supabase 스키마의 테이블 이름과 일치하는지 확인이 필요합니다.
Supabase 테이블 이름을 확인하기 위해 다음 스크립트를 실행하세요:
✅ Verification successful
Let me generate additional verification to check the table schema definition and other related constants:
schemaCategory 상수가 올바르게 사용되고 있음을 확인했습니다
타입 정의와 Supabase 클라이언트 사용 패턴을 검토한 결과, category 테이블명이 일관되게 사용되고 있으며 CategoryTable 타입과도 정확히 매칭됩니다. 데이터베이스 스키마와 코드베이스가 잘 동기화되어 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify if the category table name matches in other files
# Search for SQL queries or table references to 'category'
rg -i "from\s+['\"]?category['\"]?"
# Search for Supabase related category operations
rg "supabase.*category"
Length of output: 1067
Script:
#!/bin/bash
# Check for table schema definitions
rg -i "create.*table.*category"
# Check the SUPABASE constant object definition
ast-grep --pattern 'export const SUPABASE = {
$$$
} as const'
# Check for any TypeScript types related to category
rg "type.*Category"
Length of output: 1381
Summary by CodeRabbit
릴리스 노트
새로운 기능
useCategoryDeleteMutation,useCategoryPatchMutation,useCategoryUpsertMutation)이 추가되었습니다.SettingCategoryForm)가 추가되었습니다.SettingLanguage)가 도입되었습니다.SettingGuide)가 추가되었습니다.버그 수정
문서화