Feature: 세팅 페이지 구현 #100
Feature: 세팅 페이지 구현 #100
Conversation
This reverts commit e7121d3.
|
Caution Review failedThe pull request is closed. Walkthrough이 풀 리퀘스트에서는 여러 파일에 대한 변경 사항이 포함되어 있습니다. 새로운 상수 Changes
Possibly related PRs
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint (1.23.1)
packages/web/src/app/[lng]/login/page.tsxOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/packages/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 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: 21
🧹 Outside diff range and nitpick comments (23)
packages/web/src/app/[lng]/memos/setting/page.tsx (1)
5-5: 의미론적 HTML 요소 사용 및 접근성 개선이 필요합니다의미 없는
div대신main또는section과 같은 의미론적 HTML 요소를 사용하고, 적절한 ARIA 속성을 추가하는 것이 좋습니다.다음과 같이 수정해주세요:
- <div> + <main aria-label="설정">packages/web/src/constants/Path.ts (2)
1-10: 타입 안전성 개선이 필요합니다경로 상수의 타입 안전성을 높이기 위해 as const 어서션과 함께 타입 정의를 추가하는 것이 좋습니다.
+type PathsType = { + readonly root: '/' + readonly error: '/error' + readonly login: '/login' + readonly memos: '/memos' + readonly memosWish: '/memos?wish=true' + readonly memosSetting: '/memos/setting' + readonly callbackAuth: '/auth/callback' + readonly callbackEmail: '/auth/callback-email' +} -export const PATHS = { +export const PATHS: PathsType = { root: '/', error: '/error', login: '/login', memos: '/memos', memosWish: '/memos?wish=true', memosSetting: '/memos/setting', - allbackoAuth: '/auth/callback', + callbackAuth: '/auth/callback', callbackEmail: '/auth/callback-email' -}; +} as const;
12-12: 인증이 필요한 페이지 배열의 타입 안전성 개선이 필요합니다
NEED_AUTH_PAGES배열의 타입을 명시적으로 정의하여 타입 안전성을 높이는 것이 좋습니다.-export const NEED_AUTH_PAGES = [PATHS.memos, PATHS.memosSetting]; +export const NEED_AUTH_PAGES: readonly (keyof typeof PATHS)[] = ['memos', 'memosSetting'] as const;packages/web/src/app/i18n/settings.ts (1)
2-2:as const어서션 추가는 좋은 개선사항입니다!
as const어서션을 추가함으로써 다음과 같은 이점이 있습니다:
- 언어 배열이 읽기 전용으로 변경되어 실수로 수정되는 것을 방지합니다
- 타입스크립트가 더 정확한 타입 추론을 할 수 있게 됩니다
Language타입과 함께 사용하여 타입 안정성이 향상됩니다추가로 고려해볼 사항:
- 향후 지원 언어가 추가될 경우를 대비하여 언어 코드에 대한 문서화를 추가하는 것이 좋을 것 같습니다
- 각 언어 코드가 실제 유효한 ISO 639-1 코드인지 확인하는 유효성 검사를 추가하는 것을 고려해보세요
packages/web/src/components/Footer.tsx (1)
10-12: 접근성 개선을 위한 제안Chrome Extension 링크의 구현은 잘 되었습니다만, 접근성 향상을 위해 약간의 개선을 제안드립니다.
다음과 같이
aria-label을 추가하는 것을 고려해보세요:- <Link className="link link-hover" href={URL_CHROME_STORE}> + <Link className="link link-hover" href={URL_CHROME_STORE} aria-label="Chrome 웹 스토어에서 확장 프로그램 설치하기"> Chrome Extension </Link>packages/web/src/app/[lng]/memos/page.tsx (1)
12-15: 로딩 상태 관리를 위한 Suspense 경계 추가를 고려해보세요.HydrationBoundaryWrapper 내부의 컴포넌트들에 대한 로딩 상태 처리가 없습니다. Suspense를 사용하여 더 나은 사용자 경험을 제공할 수 있습니다.
다음과 같이 Suspense를 추가해보세요:
+ import { Suspense } from 'react'; return ( <HydrationBoundaryWrapper queryKey={QUERY_KEY.memos()} queryFn={() => getMemo(supabaseClient)}> + <Suspense fallback={<div>메모를 불러오는 중...</div>}> <MemoView lng={lng} /> + </Suspense> + <Suspense fallback={null}> <MemoDialog lng={lng} /> + </Suspense> </HydrationBoundaryWrapper> );packages/web/src/components/ui/label.tsx (2)
9-11: 스타일 변형 옵션 추가를 고려해보세요.현재 기본 스타일만 정의되어 있습니다. 다양한 사용 사례를 지원하기 위해 크기나 색상 등의 변형을 추가하면 좋을 것 같습니다.
예시 구현:
const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", + { + variants: { + size: { + default: "text-sm", + large: "text-base", + small: "text-xs" + }, + variant: { + default: "text-gray-900", + secondary: "text-gray-500" + } + }, + defaultVariants: { + size: "default", + variant: "default" + } + } )
13-24: 접근성 관련 문서화가 필요합니다.컴포넌트 구현은 잘 되어있지만, 접근성 관련 사용법에 대한 JSDoc 문서화를 추가하면 좋을 것 같습니다.
다음과 같은 문서화를 추가해보세요:
+/** + * 접근성이 고려된 레이블 컴포넌트입니다. + * @example + * <Label htmlFor="email">이메일</Label> + * <input id="email" type="email" /> + * + * @note + * - 항상 폼 요소와 함께 사용하고 htmlFor 속성을 지정해주세요. + * - 시각적으로 숨겨야 하는 경우 className으로 sr-only를 사용하세요. + */ const Label = React.forwardRef<packages/web/src/app/[lng]/memos/components/MemoSidebarTrigger/index.tsx (2)
9-9: 인터페이스에 문서화를 추가하면 좋겠습니다.다른 개발자들의 이해를 돕기 위해
MemoSidebarTriggerProps인터페이스에 JSDoc 문서를 추가하는 것이 좋겠습니다.다음과 같이 문서화를 추가해보세요:
+/** + * MemoSidebarTrigger 컴포넌트의 속성을 정의합니다. + * @extends LanguageType - 현재 설정된 언어 정보를 포함합니다. + */ interface MemoSidebarTriggerProps extends LanguageType {}
22-23: 키보드 단축키 표시를 플랫폼별로 최적화하면 좋겠습니다.현재 Control/Command + B로 표시된 단축키를 사용자의 운영체제에 따라 동적으로 표시하는 것이 좋겠습니다.
다음과 같이 개선해보세요:
-<p>Control/Command + B</p> +<p>{ + typeof window !== 'undefined' && navigator.platform.toLowerCase().includes('mac') + ? '⌘ + B' + : 'Ctrl + B' +}</p>packages/web/src/app/i18n/locales/ko/translation.json (1)
34-34: 사용자 친화적인 표현으로 개선을 제안드립니다."사이드바 토글" 대신 "사이드바 열기/닫기"로 변경하면 일반 사용자가 더 이해하기 쉬울 것 같습니다.
- "sideBar": "사이드바 토글" + "sideBar": "사이드바 열기/닫기"packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx (1)
1-27: 테스트 코드 작성이 필요합니다컴포넌트의 안정성을 보장하기 위해 다음 사항들에 대한 테스트 코드 작성이 필요합니다:
- 언어 변경 기능
- 초기 언어 값 렌더링
- 접근성 검증
테스트 코드 작성을 도와드릴까요?
packages/web/src/hooks/useLanguage.ts (1)
6-7: 상수 이름과 철자를 수정해주세요.다음과 같은 개선사항이 있습니다:
REGEXR_PATHNAME_LANGAUGE에 철자 오류가 있습니다 ('LANGUAGE'로 수정 필요)- 상수 이름에서
REGEXR보다는REGEX가 더 일반적인 표현입니다다음과 같이 수정을 제안합니다:
-const REGEXR_PATHNAME_WITHOUT_LANGUAGE = /^\/\w+(.+)/; -const REGEXR_PATHNAME_LANGAUGE = /^\/(\w+)\/.+/; +const REGEX_PATHNAME_WITHOUT_LANGUAGE = /^\/\w+(.+)/; +const REGEX_PATHNAME_LANGUAGE = /^\/(\w+)\/.+/;packages/web/src/app/[lng]/memos/components/Header/RefreshButton.tsx (1)
Line range hint
21-23: 가이드 상태 관리 개선 제안현재 로컬 스토리지를 직접 조작하는 방식은 상태 관리의 일관성을 해칠 수 있습니다. 커스텀 훅으로 분리하는 것을 고려해보세요.
다음과 같은 구현을 제안드립니다:
// useGuideState.ts export const useGuideState = () => { const setGuideSeen = () => { window.localStorage.setItem(IS_USER_SEEN_GUIDE, 'true'); }; const isGuideSeen = () => { return window.localStorage.getItem(IS_USER_SEEN_GUIDE) === 'true'; }; return { setGuideSeen, isGuideSeen }; }; // RefreshButton 컴포넌트에서: const { setGuideSeen } = useGuideState(); const handleRefreshClick = async () => { driverObj.moveNext(); setGuideSeen(); // ... 나머지 로직 };packages/web/src/app/i18n/locales/en/translation.json (1)
33-34: 툴팁 텍스트의 일관성 개선이 필요합니다.다른 메시지들과의 일관성을 위해 다음과 같이 수정하는 것이 좋겠습니다:
"tooltip": { - "sideBar": "toggle the sidebar" + "sideBar": "Toggle the Sidebar." }변경 사유:
- 문장의 첫 글자를 대문자로 시작
- "Sidebar"를 대문자로 표기
- 문장 끝에 마침표 추가
packages/web/src/app/[lng]/layout.tsx (2)
5-5: import 구문 재정렬 검토 필요import 구문이 일관성 있게 정렬되어 있지 않습니다. 다음과 같은 순서로 정렬하는 것이 좋습니다:
- 외부 라이브러리
- Next.js 관련
- React 관련
- 내부 모듈
- 스타일 관련
다음과 같이 수정하는 것을 제안합니다:
import '@extension/ui/dist/global.css'; import { Header, QueryProvider, ThemeProvider } from '@src/components'; import { Toaster } from '@src/components/ui/toaster'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { dir } from 'i18next'; import type { Metadata } from 'next'; -import localFont from 'next/font/local'; import { PropsWithChildren } from 'react'; +import localFont from 'next/font/local'; import './globals.css';Also applies to: 7-7
Line range hint
1-51: 성능 최적화 제안전반적인 레이아웃 구조는 잘 구성되어 있으나, 몇 가지 성능 최적화를 제안드립니다:
- ThemeProvider와 QueryProvider를 별도의 클라이언트 컴포넌트로 분리
- 메타데이터를 동적으로 생성하도록 개선
다음과 같은 구조로 분리하는 것을 제안합니다:
// providers.tsx 'use client'; export function Providers({ children }: PropsWithChildren) { return ( <ThemeProvider attribute="class" defaultTheme="system"> <QueryProvider> {children} {process.env.NODE_ENV === 'development' && ( <ReactQueryDevtools initialIsOpen={false} /> )} </QueryProvider> </ThemeProvider> ); }그리고 layout.tsx에서:
-<ThemeProvider attribute="class" defaultTheme="system"> - <QueryProvider> - <Header lng={lng} /> - {children} - <ReactQueryDevtools initialIsOpen={false} /> - </QueryProvider> -</ThemeProvider> +<Providers> + <Header lng={lng} /> + {children} +</Providers>packages/web/src/middleware.ts (1)
Line range hint
15-18: 인증 경로 처리 로직 개선 제안현재 인증 경로 확인 로직이 문자열 포함 여부로만 처리되고 있습니다. 더 견고한 구현을 위해 다음 사항들을 고려해보세요:
- 정확한 경로 매칭을 위한 패턴 사용
- 허용된 경로 목록 중앙화
- 에러 처리 추가
+const EXCLUDED_PATHS = { + AUTH: '/auth', + NEXT: '/_next', +} as const; + +function isExcludedPath(pathname: string): boolean { + return Object.values(EXCLUDED_PATHS).some(path => pathname.startsWith(path)); +} + if ( !languages.some(language => request.nextUrl.pathname.startsWith(`/${language}`)) && - !request.nextUrl.pathname.startsWith('/_next') && - !request.nextUrl.pathname.includes('/auth') + !isExcludedPath(request.nextUrl.pathname) ) {packages/web/src/utils/middleware.ts (1)
Line range hint
1-45: 전반적인 미들웨어 구현이 견고해 보입니다.인증이 필요한 페이지에 대한 접근 제어와 세션 관리가 잘 구현되어 있습니다. 다만, 다음 사항들을 고려해보시면 좋겠습니다:
- 리다이렉션 시 현재 URL을 state로 저장하여 로그인 후 원래 페이지로 돌아갈 수 있도록 하는 기능
- 에러 발생 시 사용자 친화적인 에러 처리
packages/web/src/app/[lng]/memos/layout.tsx (2)
24-38: 데이터 페칭 시의 로딩 상태와 에러 처리를 개선하면 좋겠습니다.현재 구현에 다음 기능들을 추가하면 사용자 경험이 개선될 것 같습니다:
- 카테고리 데이터 로딩 중 상태 표시
- 데이터 페칭 실패 시 에러 처리
다음과 같은 개선을 제안드립니다:
<SidebarProvider defaultOpen={defaultOpen}> - <HydrationBoundaryWrapper queryKey={QUERY_KEY.category()} queryFn={() => getCategory(supabaseClient)}> + <HydrationBoundaryWrapper + queryKey={QUERY_KEY.category()} + queryFn={() => getCategory(supabaseClient)} + LoadingComponent={<div>카테고리 로딩 중...</div>} + ErrorComponent={({ error }) => ( + <div>카테고리를 불러오는 중 오류가 발생했습니다: {error.message}</div> + )} + > <MemoSidebar lng={lng} /> <MemoSidebarTrigger lng={lng} /> </HydrationBoundaryWrapper>
1-38: 아키텍처 관점에서의 제안사항현재 구현은 잘 되어있지만, 다음과 같은 아키텍처적 개선을 고려해보시면 좋겠습니다:
- 인증 로직을 별도의 미들웨어나 HOC로 분리하여 재사용성 향상
- 사이드바 상태 관리를 전역 상태 관리 도구(예: Zustand)로 마이그레이션하여 쿠키 의존성 감소
- 에러 바운더리 컴포넌트 추가로 애플리케이션 안정성 향상
packages/web/src/utils/supabase.server.ts (1)
51-53: 에러 처리 개선을 제안드립니다현재 구현은 정상적으로 작동하지만, 사용자 경험 향상을 위해 에러 메시지를 함께 전달하는 것이 좋을 것 같습니다.
다음과 같은 개선을 고려해보세요:
- if (error) redirect(PATHS.error); + if (error) { + const errorMessage = encodeURIComponent(error.message); + redirect(`${PATHS.error}?message=${errorMessage}`); + }packages/web/src/app/[lng]/memos/components/MemoView/MemoOption.tsx (1)
22-40: import 구문 최적화 제안import 구문들이 잘 구성되어 있지만, 관련된 import들을 그룹화하면 코드 가독성이 더욱 향상될 것 같습니다.
다음과 같이 수정하는 것을 제안드립니다:
- import { - useCategoryQuery, - useMemoPatchMutation, - useMemoPostMutation, - useMemoQuery, - useSearchParamsRouter, - } from '@extension/shared/hooks'; - import { useMemoDeleteMutation } from '@src/hooks'; + // Query/Mutation hooks + import { + useCategoryQuery, + useMemoPatchMutation, + useMemoPostMutation, + useMemoQuery, + useSearchParamsRouter, + useMemoDeleteMutation, + } from '@extension/shared/hooks'; - import { useRouter, useSearchParams } from 'next/navigation'; - import { PATHS } from '@src/constants'; - import { ToastAction } from '@src/components/ui/toast'; - import { useQueryClient } from '@tanstack/react-query'; - import { QUERY_KEY } from '@extension/shared/constants'; + // Navigation & Constants + import { useRouter, useSearchParams } from 'next/navigation'; + import { PATHS } from '@src/constants'; + import { QUERY_KEY } from '@extension/shared/constants'; + + // UI Components + import { ToastAction } from '@src/components/ui/toast'; + + // Query Client + import { useQueryClient } from '@tanstack/react-query';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (35)
packages/shared/src/constants/Supabase.ts(1 hunks)packages/shared/src/constants/Url.ts(1 hunks)packages/shared/src/hooks/supabase/useMemoPostMutation.ts(1 hunks)packages/shared/src/utils/Supabase.ts(1 hunks)packages/web/package.json(1 hunks)packages/web/src/app/[lng]/layout.tsx(2 hunks)packages/web/src/app/[lng]/memos/components/Header/RefreshButton.tsx(1 hunks)packages/web/src/app/[lng]/memos/components/Header/index.tsx(2 hunks)packages/web/src/app/[lng]/memos/components/MemoSidebar/index.tsx(2 hunks)packages/web/src/app/[lng]/memos/components/MemoSidebarTrigger/index.tsx(2 hunks)packages/web/src/app/[lng]/memos/components/MemoView/MemoOption.tsx(3 hunks)packages/web/src/app/[lng]/memos/layout.tsx(1 hunks)packages/web/src/app/[lng]/memos/page.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/SettingHeader/index.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/index.ts(1 hunks)packages/web/src/app/[lng]/memos/setting/page.tsx(1 hunks)packages/web/src/app/[lng]/setting/page.tsx(0 hunks)packages/web/src/app/i18n/locales/en/translation.json(2 hunks)packages/web/src/app/i18n/locales/ko/translation.json(1 hunks)packages/web/src/app/i18n/server.js(1 hunks)packages/web/src/app/i18n/settings.ts(1 hunks)packages/web/src/app/i18n/type.ts(1 hunks)packages/web/src/components/Footer.tsx(2 hunks)packages/web/src/components/ui/label.tsx(1 hunks)packages/web/src/constants/Page.ts(0 hunks)packages/web/src/constants/Path.ts(1 hunks)packages/web/src/constants/index.ts(1 hunks)packages/web/src/hooks/index.ts(1 hunks)packages/web/src/hooks/useLanguage.ts(1 hunks)packages/web/src/hooks/useMemoDeleteMutation.ts(2 hunks)packages/web/src/middleware.ts(2 hunks)packages/web/src/utils/middleware.ts(2 hunks)packages/web/src/utils/supabase.client.ts(2 hunks)packages/web/src/utils/supabase.server.ts(4 hunks)
💤 Files with no reviewable changes (2)
- packages/web/src/app/[lng]/setting/page.tsx
- packages/web/src/constants/Page.ts
✅ Files skipped from review due to trivial changes (5)
- packages/shared/src/constants/Supabase.ts
- packages/shared/src/constants/Url.ts
- packages/web/src/app/[lng]/memos/setting/component/index.ts
- packages/web/src/app/i18n/server.js
- packages/web/src/constants/index.ts
🔇 Additional comments (33)
packages/web/src/hooks/index.ts (1)
2-2: 내보내기 구문이 올바르게 추가되었습니다.
barrel 파일에 useLanguage 훅의 내보내기가 적절하게 추가되었습니다. 기존 내보내기 스타일과 일관성이 유지되어 있습니다.
훅 파일의 존재 여부를 확인하기 위해 다음 스크립트를 실행합니다:
✅ Verification successful
useLanguage 훅이 정상적으로 구현되어 있습니다
useLanguage 훅이 다음과 같이 올바르게 구현되어 있음을 확인했습니다:
- URL 경로에서 언어 코드를 추출하여 상태 관리
- 언어 변경 시 라우팅 처리 기능 제공
- 타입 안전성이 보장된 구현
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: useLanguage 훅 파일의 존재 여부 확인
# useLanguage.ts 파일 검색
fd "useLanguage.ts" packages/web/src/hooks
Length of output: 80
Script:
#!/bin/bash
# Description: useLanguage 훅의 구현 확인
# useLanguage.ts 파일의 내용 확인
cat packages/web/src/hooks/useLanguage.ts
Length of output: 1020
packages/web/src/app/[lng]/memos/setting/component/SettingHeader/index.tsx (1)
1-7: 컴포넌트 구현이 깔끔합니다
서버 컴포넌트로 적절히 구현되었으며, UI 구성이 간단명료합니다. Label 컴포넌트의 재사용과 스타일링도 잘 되어있습니다.
packages/web/src/app/i18n/type.ts (2)
3-3: 타입 별칭이 잘 정의되었습니다!
Language 타입 별칭을 통해 지원되는 언어들을 중앙에서 관리할 수 있게 되었습니다.
6-6: 타입 안전성이 향상되었습니다.
LanguageType의 lng 속성이 새로운 Language 타입을 사용하도록 변경되어 타입 안전성이 개선되었습니다.
languages 배열의 타입 단언을 확인하기 위해 다음 스크립트를 실행합니다:
✅ Verification successful
타입 안전성이 향상되었음을 확인했습니다
Language 타입이 languages 배열의 요소 타입으로 정의되어 있고, languages 배열이 as const로 선언되어 있어 타입 안전성이 보장됩니다. 이는 LanguageType의 lng 속성이 정확히 허용된 언어 값만 받을 수 있음을 의미합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: settings.ts 파일에서 languages 배열의 타입 단언을 확인합니다.
# languages 배열이 'as const'로 선언되었는지 확인
ast-grep --pattern 'languages = $_ as const'
Length of output: 46
Script:
#!/bin/bash
# Language 타입과 languages 배열의 정의를 찾습니다
rg -A 5 "type Language" packages/web/src/app/i18n/
rg "languages\s*=" packages/web/src/app/i18n/
Length of output: 625
packages/web/src/components/Footer.tsx (1)
1-1: 상수 중앙화 구현이 잘 되었습니다!
URL 상수를 공유 상수 파일로 분리하여 중앙 집중화한 것은 매우 좋은 접근 방식입니다. 이는 유지보수성을 향상시키고 URL 관리를 더욱 효율적으로 만들어줍니다.
packages/web/src/app/[lng]/memos/page.tsx (1)
1-6: 불필요한 import문이 잘 정리되었습니다!
사이드바와 인증 관련 기능이 제거되면서 import문이 깔끔하게 정리되었고, 메모 기능에 필요한 것들만 남아있어 코드의 가독성이 향상되었습니다.
packages/web/src/components/ui/label.tsx (2)
1-8: 코드 구조가 깔끔하고 적절합니다!
필요한 의존성들이 잘 정리되어 있으며, 'use client' 지시문의 위치도 적절합니다.
26-26: 내보내기가 올바르게 구현되었습니다!
명확한 named export를 사용하여 컴포넌트를 내보내고 있습니다.
packages/web/src/utils/supabase.client.ts (1)
1-1: 상수 가져오기 변경이 적절합니다!
공유 상수를 사용하여 스키마 이름을 중앙 집중화하는 것은 좋은 접근 방식입니다.
packages/web/src/app/[lng]/memos/components/MemoSidebarTrigger/index.tsx (2)
1-8: 서버 컴포넌트 설정이 적절합니다!
i18n을 위한 서버 컴포넌트 설정과 필요한 의존성들이 올바르게 구성되어 있습니다.
11-12: 번역 구현이 잘 되어있습니다!
비동기 컴포넌트와 번역 기능이 올바르게 구현되어 있습니다.
packages/web/src/app/i18n/locales/ko/translation.json (1)
33-34: 툴팁 섹션이 적절하게 추가되었습니다.
새로운 툴팁 섹션의 구조와 위치가 적절합니다.
packages/web/src/hooks/useMemoDeleteMutation.ts (2)
16-16: 구현이 개선되었습니다
삭제된 메모 데이터를 반환하도록 수정된 것은 좋은 변경사항입니다. 이를 통해 삭제 작업 후 추가적인 처리가 필요한 경우에 유용하게 활용할 수 있습니다.
Line range hint 19-26: 타입 안정성이 향상되었습니다
useMutation에 명시적인 타입 파라미터를 추가한 것은 좋은 개선사항입니다:
MemoSupabaseResponse: 성공 응답 타입Error: 에러 타입number: 입력 파라미터(메모 ID) 타입
이를 통해 타입 안정성이 향상되고 코드의 의도가 더 명확해졌습니다.
packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx (1)
1-7: 🛠️ Refactor suggestion
타입 안정성 개선이 필요합니다
Language 타입이 명시적으로 사용되지 않고 있습니다. 컴포넌트의 타입 안정성을 높이기 위해 다음과 같은 개선이 필요합니다.
'use client';
import { Language } from '@src/app/i18n/type';
import { Label } from '@src/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@src/components/ui/select';
-import { useLanguage } from '@src/hooks';
+import type { useLanguage } from '@src/hooks';
+
+type SettingProps = {
+ className?: string;
+};Likely invalid or redundant comment.
packages/web/src/hooks/useLanguage.ts (1)
9-14: 훅 초기화가 올바르게 구현되었습니다.
상태 관리와 라우터 설정이 타입 안전성을 유지하면서 잘 구현되었습니다.
packages/web/src/app/[lng]/memos/components/Header/RefreshButton.tsx (2)
5-6: 가져오기 구문이 잘 정리되었습니다!
i18n 관련 가져오기 구문들이 논리적으로 잘 그룹화되어 있습니다.
Line range hint 24-26: 쿼리 무효화 처리 검증 필요
쿼리 무효화 후 사용자 피드백이 잘 구현되어 있습니다. 다만, 쿼리 실패 시의 에러 처리가 누락되어 있습니다.
다음과 같은 에러 처리를 추가하는 것을 추천드립니다:
const handleRefreshClick = async () => {
try {
driverObj.moveNext();
setGuideSeen();
await queryClient.invalidateQueries({ queryKey: QUERY_KEY.memos() });
toast({ title: t('toastMessage.refresh') });
} catch (error) {
toast({
title: t('toastMessage.error'),
variant: 'destructive'
});
}
};packages/web/src/app/i18n/locales/en/translation.json (1)
22-22: 문법적으로 더 자연스러운 표현으로 변경되었습니다.
카테고리 변경 텍스트가 영어 문법에 맞게 개선되었습니다.
packages/web/src/app/[lng]/layout.tsx (1)
Line range hint 37-37: RTL/LTR 지원 추가 확인 필요
dir(lng) 함수를 통해 RTL/LTR 지원이 추가되었습니다. 이는 아랍어나 히브리어와 같은 RTL 언어 지원을 위한 좋은 개선사항입니다.
현재 지원되는 언어 목록과 RTL 지원이 필요한 언어가 있는지 확인이 필요합니다:
packages/web/src/middleware.ts (1)
19-19: URL 검색 매개변수 처리 개선 👍
리다이렉션 시 request.nextUrl.search를 포함하여 쿼리 파라미터를 보존하는 것은 좋은 개선사항입니다. 사용자 컨텍스트를 유지하면서 더 나은 사용자 경험을 제공할 수 있습니다.
packages/web/src/utils/middleware.ts (1)
1-1: 경로 상수 가져오기 추가에 대해 긍정적입니다.
하드코딩된 문자열을 제거하고 중앙 집중화된 경로 상수를 사용하는 것은 좋은 접근 방식입니다.
packages/shared/src/hooks/supabase/useMemoPostMutation.ts (2)
Line range hint 1-35: 에러 처리와 타입 안전성이 잘 구현되어 있습니다.
- NoMemosError를 통한 명확한 에러 처리
- TypeScript 타입 정의를 통한 타입 안전성 확보
- React Query의 올바른 사용
28-28: 배열 연결 순서 변경이 사용자 경험에 미치는 영향을 확인해주세요.
배열 연결 순서가 변경되어 새로운 메모가 목록의 시작 부분에 추가되도록 수정되었습니다. 이는 사용자 인터페이스에서 메모의 표시 순서에 영향을 미칠 수 있습니다.
다음 스크립트를 실행하여 메모 목록 컴포넌트에서 이 순서가 올바르게 처리되는지 확인하세요:
✅ Verification successful
배열 연결 순서 변경은 적절한 수정입니다.
메모는 이미 Supabase 쿼리에서 created_at 기준으로 내림차순 정렬되어 있으며, 새 메모를 배열 앞쪽에 추가하는 것이 이 정렬 순서와 일치합니다. 메모 그리드 컴포넌트는 정렬된 순서대로 메모를 표시하므로, 이 변경은 사용자 경험을 개선하는데 도움이 됩니다.
packages/shared/src/utils/Supabase.ts: 메모가created_at기준 내림차순으로 정렬됨MemoGrid컴포넌트: 받은 메모 배열 순서대로 표시MemoForm: 새 메모 작성 시 즉시 목록 상단에 표시됨
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 메모 목록 컴포넌트에서 정렬 로직 확인
rg -A 10 "memo.*sort|memo.*order" --type ts --type tsx
Length of output: 84
Script:
#!/bin/bash
# 메모 관련 컴포넌트와 로직 검색
rg -A 10 "memo.*sort|memo.*order" --type typescript
# 메모 목록 관련 컴포넌트 파일 검색
fd -e ts -e tsx . packages/shared/src/components | xargs rg -l "memo"
# useMemoPostMutation 사용 위치 검색
rg "useMemoPostMutation" --type typescript -A 5
Length of output: 2943
Script:
#!/bin/bash
# 메모 컴포넌트에서 정렬 관련 코드 검색
rg -t ts -t tsx "memo.*sort|memo.*order" packages/web/src/app/\[lng\]/memos/components/
# MemoView 컴포넌트 내용 확인
cat packages/web/src/app/\[lng\]/memos/components/MemoView/index.tsx
# useMemoPostMutation이 사용되는 컴포넌트 검색
rg -t ts -t tsx "useMemoPostMutation" packages/web/src/app/
Length of output: 1320
Script:
#!/bin/bash
# 사이드 패널의 메모 작성 컴포넌트 확인
cat pages/side-panel/src/components/MemoForm.tsx
# 메모 그리드 컴포넌트 확인
cat packages/web/src/app/\[lng\]/memos/components/MemoView/MemoGrid.tsx
# 메모 정렬 관련 코드 검색 (확장된 패턴)
rg -g "*.{ts,tsx}" "(sort.*memo|order.*memo|memo.*sort|memo.*order)"
Length of output: 6252
packages/web/package.json (1)
17-17: Radix UI 라벨 컴포넌트 의존성 추가 검토
새로운 @radix-ui/react-label 의존성 추가가 기존 Radix UI 컴포넌트들과 일관성이 있어 적절해 보입니다. 다만, 다른 Radix UI 패키지들과의 버전 호환성을 확인하시는 것이 좋겠습니다.
다음 스크립트를 실행하여 Radix UI 패키지들 간의 버전 호환성을 확인하세요:
✅ Verification successful
Radix UI 패키지 버전 호환성 확인 완료
@radix-ui/react-label v2.1.0 추가는 기존 Radix UI 패키지들과 호환됩니다. 현재 프로젝트에서 사용 중인 다른 Radix UI 컴포넌트들도 대부분 v1.x ~ v2.x 버전대를 사용하고 있으며, 특히 react-dropdown-menu(v2.1.2)와 react-select(v2.1.2)와 같은 v2.x 컴포넌트들과 잘 호환될 것으로 예상됩니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Radix UI 패키지들의 버전 호환성 확인
# 모든 Radix UI 패키지의 현재 버전 출력
echo "설치된 Radix UI 패키지 버전:"
jq '.dependencies | with_entries(select(.key | startswith("@radix-ui")))' package.json
# npm registry에서 최신 버전 정보 확인
echo "\n최신 안정 버전 (@radix-ui/react-label):"
curl -s https://registry.npmjs.org/@radix-ui/react-label/latest | jq '.version'
Length of output: 311
Script:
#!/bin/bash
# Check package.json in the web directory specifically
echo "packages/web/package.json의 Radix UI 패키지 버전:"
cat packages/web/package.json | jq '.dependencies | with_entries(select(.key | startswith("@radix-ui")))'
# Find all package.json files and check for Radix UI dependencies
echo "\n전체 프로젝트의 Radix UI 패키지 사용현황:"
fd package.json --type f --exec sh -c 'echo "=== {} ==="; cat {} | jq -c ".dependencies | with_entries(select(.key | startswith(\"@radix-ui\"))) // {}"'
Length of output: 13491
packages/web/src/app/[lng]/memos/layout.tsx (1)
1-13: 코드가 깔끔하고 잘 구성되어 있습니다!
임포트문이 잘 구성되어 있고, LayoutProps 인터페이스가 적절하게 정의되어 있습니다.
packages/shared/src/utils/Supabase.ts (1)
19-19: 데이터 반환 동작이 일관성 있게 개선되었습니다.
다른 데이터 조작 함수들(insert, update, upsert)과 마찬가지로 .select()를 추가하여 삭제된 레코드를 반환하도록 수정한 것이 좋습니다.
프론트엔드에서의 사용 방식 변경이 필요한지 확인하겠습니다:
✅ Verification successful
.select() 추가는 기존 타입 시스템과 완벽하게 호환됩니다.
프론트엔드 코드 분석 결과, deleteMemo 함수는 이미 MemoSupabaseResponse 타입을 반환하도록 설계되어 있으며, 모든 mutation 훅에서 동일한 응답 타입을 사용하고 있습니다. .select()를 추가해도 기존 코드에 영향을 주지 않습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: deleteMemo 함수의 사용 패턴을 확인합니다.
# deleteMemo 함수 호출 부분 검색
rg -A 3 "deleteMemo\("
Length of output: 331
Script:
#!/bin/bash
# Check the implementation of useMemoDeleteMutation to see how it handles the response
cat packages/web/src/hooks/useMemoDeleteMutation.ts
# Also check for any type definitions related to MemoSupabaseResponse
rg "MemoSupabaseResponse" -A 3
Length of output: 7399
packages/web/src/app/[lng]/memos/components/MemoSidebar/index.tsx (2)
21-21: 하드코딩된 URL을 상수로 대체한 것은 좋은 개선입니다.
URL을 PATHS 상수로 중앙 집중화한 것은 유지보수성을 향상시키는 좋은 리팩토링입니다. 향후 URL 구조가 변경되더라도 한 곳에서만 수정하면 되므로 관리가 용이해집니다.
Also applies to: 26-26, 31-31
Line range hint 1-1: 'use server' 지시문의 필요성을 검토해주세요.
이 컴포넌트가 서버 액션을 사용하지 않는 것으로 보입니다. 불필요한 'use server' 지시문은 제거하는 것이 좋습니다.
다음 스크립트로 서버 액션 사용 여부를 확인해보겠습니다:
packages/web/src/utils/supabase.server.ts (2)
3-3: 상수 관리 개선이 잘 이루어졌습니다!
경로 상수를 중앙 집중화하여 관리하는 방식으로 변경한 것이 코드 유지보수성을 향상시킵니다.
64-64: 세션 정리 검증이 필요합니다
로그아웃 시 모든 세션 데이터가 정상적으로 정리되는지 확인이 필요합니다.
✅ Verification successful
Let me verify if there are any other session-related data that needs to be cleaned up.
세션 정리가 올바르게 구현되어 있습니다
로그아웃 시 다음과 같은 세션 정리가 모두 적절하게 처리되고 있습니다:
- Supabase auth 세션 종료 (
signOut()) - 액세스 토큰 쿠키 삭제
- 리프레시 토큰 쿠키 삭제
추가적인 세션 데이터나 인증 관련 저장소가 발견되지 않았으므로 현재 구현이 안전합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 세션 관련 데이터 정리 로직 확인
# 세션 관련 쿠키 및 로컬 스토리지 정리 코드 검색
rg -A 5 "signOut|clearSession|removeItem.*token"
Length of output: 495
Script:
#!/bin/bash
# Check for any other session or auth related storage/cleanup
rg -A 5 "session|auth.*clear|clear.*auth|storage.*clear|clear.*storage"
# Check for any other cookie keys being used
rg "COOKIE_KEY_"
Length of output: 5270
packages/web/src/app/[lng]/memos/components/Header/index.tsx (1)
17-17: 경로 상수 가져오기 추가에 대해 승인합니다.
하드코딩된 경로를 중앙 집중화된 상수로 관리하는 것은 좋은 접근 방식입니다.
packages/web/src/app/[lng]/memos/components/MemoView/MemoOption.tsx (1)
125-125: Select 컴포넌트의 기본값 설정 검토 필요
현재 Select 컴포넌트의 기본값이 빈 문자열로 설정되어 있어, 사용자에게 혼란을 줄 수 있습니다.
현재 카테고리 값을 기본값으로 설정하는 것이 더 적절해 보입니다:
✅ Verification successful
Select 컴포넌트의 빈 문자열 기본값은 의도된 설계입니다
코드 분석 결과, Select 컴포넌트의 빈 문자열 기본값은 다음과 같은 이유로 적절합니다:
- Select 컴포넌트는 placeholder를 통해
option.changeCategory번역 텍스트를 표시하여 사용자에게 카테고리 변경 동작을 명확히 안내합니다. - 빈 문자열 기본값은 사용자가 새로운 카테고리를 선택하기 전까지 현재 카테고리를 유지하면서, 변경 의도를 명확히 표현할 수 있게 합니다.
handleCategoryChange함수는 사용자가 실제로 카테고리를 선택했을 때만 동작하여 안전한 상태 관리가 가능합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 메모의 현재 카테고리 ID를 기본값으로 사용하는지 확인
# Test: Select 컴포넌트에서 현재 메모의 카테고리를 기본값으로 사용하는 패턴 검색
rg "defaultValue={(\w+\.category_id|String\(\w+\.category_id\))}"
Length of output: 224
Script:
#!/bin/bash
# Let's check the MemoOption component implementation to understand the context better
rg -A 10 "const MemoOption" packages/web/src/app/\[lng\]/memos/components/MemoView/MemoOption.tsx
# Also check how category is being handled
rg -B 5 -A 5 "handleCategoryChange" packages/web/src/app/\[lng\]/memos/components/MemoView/MemoOption.tsx
# Check if there's any category prop being passed
rg -B 5 "MemoOption.*Props" packages/web/src/app/\[lng\]/memos/components/MemoView/MemoOption.tsx
Length of output: 1458
Script:
#!/bin/bash
# Let's check if there's any memo data being fetched that might contain category information
rg -B 5 -A 10 "const.*memo.*=" packages/web/src/app/\[lng\]/memos/components/MemoView/MemoOption.tsx
# Also check for any category-related queries or data fetching
rg -B 3 -A 3 "useQuery.*category" packages/web/src/app/\[lng\]/memos/components/MemoView/MemoOption.tsx
Length of output: 208
| import { Label } from '@src/components/ui/label'; | ||
|
|
||
| export default async function SettingHeader() { | ||
| return <Label className="flex justify-center py-10 text-xl">설정</Label>; |
There was a problem hiding this comment.
하드코딩된 텍스트를 i18n으로 대체해주세요
다국어 지원을 위해 하드코딩된 "설정" 텍스트를 i18n 번역 시스템을 통해 처리하는 것이 좋습니다. 현재 구현은 한국어만 지원하고 있습니다.
다음과 같이 수정하는 것을 제안드립니다:
- return <Label className="flex justify-center py-10 text-xl">설정</Label>;
+ return <Label className="flex justify-center py-10 text-xl">{t('settings')}</Label>;추가로 번역 키를 사용하기 위해 상단에 다음 import를 추가해주세요:
import { useTranslation } from '@/app/i18n';There was a problem hiding this comment.
@guesung 수정해주셔서 감사합니다!
(^‿^)/
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| <SidebarFooter> | ||
| <Link href={PATHS.memosSetting} className="mb-2 ml-2 cursor-pointer"> | ||
| <SettingsIcon size={16} /> | ||
| </Link> | ||
| </SidebarFooter> */} | ||
| </SidebarFooter> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
설정 페이지 링크의 접근성 개선이 필요합니다.
설정 아이콘만으로는 스크린 리더 사용자가 이 링크의 목적을 이해하기 어려울 수 있습니다.
다음과 같이 접근성을 개선하는 것을 추천드립니다:
- <Link href={PATHS.memosSetting} className="mb-2 ml-2 cursor-pointer">
+ <Link
+ href={PATHS.memosSetting}
+ className="mb-2 ml-2 cursor-pointer"
+ aria-label="설정"
+ >
<SettingsIcon size={16} />
</Link>📝 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.
| <SidebarFooter> | |
| <Link href={PATHS.memosSetting} className="mb-2 ml-2 cursor-pointer"> | |
| <SettingsIcon size={16} /> | |
| </Link> | |
| </SidebarFooter> */} | |
| </SidebarFooter> | |
| <SidebarFooter> | |
| <Link | |
| href={PATHS.memosSetting} | |
| className="mb-2 ml-2 cursor-pointer" | |
| aria-label="설정" | |
| > | |
| <SettingsIcon size={16} /> | |
| </Link> | |
| </SidebarFooter> |
There was a problem hiding this comment.
@ guesung, 수정 사항을 반영해주셔서 감사합니다!
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| @@ -28,7 +29,7 @@ async function HeaderLeft({ lng }: LanguageType) { | |||
| const { t } = await useTranslation(lng); | |||
|
|
|||
| return ( | |||
| <Link href="/memos"> | |||
| <Link href={PATHS.memos}> | |||
There was a problem hiding this comment.
💡 Codebase verification
경로 관리 패턴 검토 결과
검증 결과, 몇몇 파일에서 여전히 하드코딩된 '/memos' 경로가 사용되고 있습니다:
auth/callback/route.ts[lng]/page.tsxauth/callback-email/route.ts[lng]/login/page.tsx
이러한 파일들에서도 PATHS.memos 상수를 사용하도록 변경하는 것이 일관성 있는 경로 관리를 위해 권장됩니다.
🔗 Analysis chain
하드코딩된 경로를 PATHS 상수로 교체한 것을 승인합니다.
경로 관리를 중앙화하여 유지보수성이 향상되었습니다. 다만, 다른 컴포넌트에서도 동일한 방식으로 경로가 관리되고 있는지 확인이 필요합니다.
다른 컴포넌트에서의 경로 사용 패턴을 확인하기 위한 스크립트입니다:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 설명: 하드코딩된 '/memos' 문자열 사용 여부 확인
# '/memos'를 직접 사용하는 다른 컴포넌트 검색
rg -t tsx -t ts "'/memos'" --glob '!**/constants/**'
Length of output: 88
Script:
#!/bin/bash
# 하드코딩된 '/memos' 문자열 검색 (확장자 수정)
rg "'/memos'" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts' -t tsx -t ts --glob '!**/constants/**'
# PATHS 상수 사용 패턴 확인
rg "PATHS\.memos" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts' -t tsx -t ts
# Link 컴포넌트의 href 속성 사용 패턴 확인
ast-grep --pattern 'Link $$$href={$_}$$$'
Length of output: 1250
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
packages/web/src/app/[lng]/memos/setting/component/SettingHeader/index.tsx (1)
7-12: 컴포넌트 구조가 잘 설계되었습니다
- LanguageType을 확장하여 타입 안전성이 보장됩니다
- 이전 리뷰에서 지적된 하드코딩된 텍스트 이슈가 i18n으로 적절하게 해결되었습니다
- className을 통한 스타일링이 일관되게 적용되어 있습니다
다만, 한 가지 제안사항이 있습니다:
Label 컴포넌트에 semantic HTML을 위해 'heading' 역할을 부여하는 것이 좋을 것 같습니다:
- return <Label className="flex justify-center py-10 text-xl">{t('setting.header')}</Label>; + return <Label asChild><h1 className="flex justify-center py-10 text-xl">{t('setting.header')}</h1></Label>;packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx (2)
24-25: 언어 텍스트의 국제화가 필요합니다언어 선택 옵션의 텍스트를 번역 시스템을 통해 관리하는 것이 좋습니다.
- <SelectItem value="ko">한글</SelectItem> - <SelectItem value="en">English</SelectItem> + <SelectItem value="ko">{t('languages.korean')}</SelectItem> + <SelectItem value="en">{t('languages.english')}</SelectItem>
16-29: 컴포넌트의 재사용성 개선이 필요합니다현재 구현은 section 태그에 하드코딩된 className을 사용하고 있습니다. 컴포넌트의 재사용성을 높이기 위해 className을 props로 받아 처리하는 것이 좋습니다.
- <section className="grid gap-6"> + <section className={cn("grid gap-6", className)}>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (5)
packages/web/src/app/[lng]/memos/layout.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/component/SettingHeader/index.tsx(1 hunks)packages/web/src/app/[lng]/memos/setting/page.tsx(1 hunks)packages/web/src/app/i18n/locales/ko/translation.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/web/src/app/[lng]/memos/layout.tsx
- packages/web/src/app/[lng]/memos/setting/page.tsx
- packages/web/src/app/i18n/locales/ko/translation.json
🔇 Additional comments (3)
packages/web/src/app/[lng]/memos/setting/component/SettingHeader/index.tsx (1)
1-5: 서버 컴포넌트 구현이 올바르게 되었습니다
'use server' 지시문과 필요한 의존성들이 적절하게 import 되어 있습니다. 서버 사이드 번역을 위해 올바른 useTranslation 훅을 사용하고 있습니다.
packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx (2)
1-9: 코드가 깔끔하고 잘 구성되어 있습니다!
import 문과 인터페이스 정의가 명확하게 되어있습니다.
11-13:
setLanauageRouter에 오타가 있습니다
setLanauageRouter를 setLanguageRouter로 수정해야 합니다. 이는 런타임 에러를 방지하기 위해 필수적입니다.
- const { language, setLanauageRouter } = useLanguage();
+ const { language, setLanguageRouter } = useLanguage();
packages/web/src/app/[lng]/memos/setting/component/Setting/index.tsx
Outdated
Show resolved
Hide resolved
Summary by CodeRabbit
릴리스 노트
새 기능
SUPABASE_SCHEMA_MEMO추가.Setting컴포넌트 및SettingHeader컴포넌트 추가.handleDeleteMemo업데이트.useLanguage훅 추가로 언어 상태 관리 기능 향상.변경 사항
URL_CHROME_STORE의 URL을 더 읽기 쉬운 형식으로 업데이트.memo스키마를 상수로 변경하여 유연성 증가.버그 수정