Feature: 리팩토링 #127
Feature: 리팩토링 #127
Conversation
워크스루이 풀 리퀘스트는 메모 애플리케이션의 다양한 컴포넌트와 유틸리티에 대한 광범위한 리팩토링과 기능 개선을 포함하고 있습니다. 주요 변경 사항은 메모 쿼리 및 선택 로직의 개선, 오류 처리 메커니즘 강화, UI 컴포넌트의 상호작용 개선, 그리고 몇몇 설정 파일의 구조 조정에 중점을 두고 있습니다. 변경 사항
시퀀스 다이어그램sequenceDiagram
participant User
participant SearchForm
participant MemoView
participant useMemosQuery
participant Supabase
User->>SearchForm: 검색어 입력
SearchForm->>MemoView: 검색 파라미터 전달
MemoView->>useMemosQuery: 메모 쿼리 요청
useMemosQuery->>Supabase: 데이터 필터링 요청
Supabase-->>useMemosQuery: 필터링된 메모 반환
useMemosQuery-->>MemoView: 메모 데이터 제공
MemoView->>User: 메모 목록 렌더링
관련 가능성 있는 PR
시
📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🔇 Additional comments (6)pages/options/tailwind.config.js (2)
pages/side-panel/tailwind.config.js (2)
packages/web/tailwind.config.ts (2)
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
|
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (33)
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoOptionHeader.tsx (2)
17-17: 함수 시그니처 변경 점검
selectedMemoIds,lng,closeMemoOption를 파라미터로 사용하도록 변경된 내용이 적절합니다. 다만 관련된 다른 부분에서selectedMemos를 여전히 사용 중인지 확인해 보세요.
32-32: UI 표시에서 카운트 사용
selectedMemoIds.length로 선택된 메모 개수를 표시하는 로직이 깔끔합니다. 다만 사용자 입장에서 개수가 0일 때에는 null 처리되므로 숫자가 보이지 않을 것이니, UX 관점에서 이 로직이 적절한지 다시 한 번 고려해 보세요.packages/web/src/app/[lng]/(auth)/memos/components/MemoCardHeader/index.tsx (1)
28-31: **버튼 UI와 동작 **버튼이
isHovered || isSelected일 때만 보이도록 하여, UX 측면에서 필요할 때만 노출되는 방식이 깔끔합니다. 다만, 버튼을 키보드로도 접근 가능해야 한다면, Tab 포커스 시에도 보이도록 처리하는 방안을 검토해보세요.- const isShowingSelectButton = isHovered || isSelected; + const isShowingSelectButton = isHovered || isSelected /* || focusState 등 추가 고려 */;packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoGrid.tsx (3)
19-24: 인덱스 범위 예외 처리를 고려해 주세요.
memos[nextGroupKey * MEMO_UNIT + i]가 범위를 벗어나면undefined가 반환될 수 있습니다. 코드를 보완해 안전장치를 추가하는 것이 좋겠습니다.
37-37: Setter 함수 이름 오탈자 확인 부탁드립니다.
setGridMemoItemsItems보다는setGridMemoItems처럼 더 명확한 이름을 사용하면 가독성이 향상됩니다.
150-161:key속성 충돌 가능성 검토 권장
key={key + gridKey}방식은 문자열 결합 결과가 우연히 같아질 가능성이 낮지만, 명시적으로key={${gridKey}-${key}}같이 관리하면 충돌 위험을 더 줄이고 의도를 드러내기 좋습니다.pages/side-panel/src/components/MemoHeader.tsx (5)
4-4: 불필요한 import를 제거하세요.
delay변수가 현재 사용되지 않으므로, import 구문을 제거하여 유지보수성과 코드 가독성을 향상시키는 것을 권장드립니다.🧰 Tools
🪛 eslint
[error] 4-4: 'delay' is defined but never used.
(@typescript-eslint/no-unused-vars)
8-8: 사용되지 않는 import가 있습니다.
useQuery와useSuspenseQuery모두 이 파일에서 사용되지 않으므로 제거해주세요. 불필요한 의존성을 줄이면 코드의 복잡도가 낮아집니다.🧰 Tools
🪛 eslint
[error] 8-8: 'useQuery' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 8-8: 'useSuspenseQuery' is defined but never used.
(@typescript-eslint/no-unused-vars)
13-31: ErrorBoundary와 Suspense의 중첩 구조를 단순화해보세요.
MemoHeader컴포넌트 내부에서ErrorBoundary와Suspense를 각각 두 번씩 사용하여 UI를 감싸고 있습니다. 구조가 중첩될수록 추후 유지보수가 어려울 수 있으므로, 공통 요소를 합치는 방안을 고려해보세요.
33-53: SVG 아이콘 대신 적절한 태그로 접근성을 개선하세요.
<ExternalLinkIcon>에role="button"을 부여했는데, 접근성 측면에서는button또는a태그를 활용해 클릭 이벤트를 처리하는 방식을 권장합니다. 이를 통해 스크린 리더 등에서 더 친숙한 컨트롤로 인식할 수 있습니다.
55-67: 툴팁에 좀 더 구체적인 정보를 제공해보세요.현재
title속성이tab?.index만 표시하고 있어, 사용자 입장에서는 직관적이지 않을 수 있습니다. 탭 인덱스 대신 탭 이름이나 의미 있는 정보를 제공하면 사용성이 더 좋아질 수 있습니다.packages/shared/src/modules/extension-bridge/ExtensionBridge.ts (2)
101-116: 정적 메서드에서의this사용
responsePageContent내부에서this.getCategory(url)및this._getContent(url, category)를 호출하는 부분은 동작에는 문제가 없지만, 정적 메서드에서this를 사용하면 가독성과 유지보수에 혼동을 줄 수 있습니다.가능하다면 아래와 같이
ExtensionBridge.getCategory(url)형태로 클래스명을 명시하거나, 정적 메서드를 좀 더 구조적으로 분리하는 것을 권장합니다.- const category = this.getCategory(url); - const content = await this._getContent(url, category); + const category = ExtensionBridge.getCategory(url); + const content = await ExtensionBridge._getContent(url, category);🧰 Tools
🪛 Biome (1.9.4)
[error] 103-103: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.(lint/complexity/noThisInStatic)
[error] 104-104: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.(lint/complexity/noThisInStatic)
120-125: 정적 메서드에서의this사용 (2)
_getContent내부에서this._getContentFromYoutube,this._getContentFromWeb를 호출하는 로직도 위와 동일하게, 정적 메서드에서this사용 시 혼동이 발생할 수 있습니다.아래와 같은 형태로 변경을 고려해 보세요:
- return await this._getContentFromYoutube(url); - return this._getContentFromWeb(); + return await ExtensionBridge._getContentFromYoutube(url); + return ExtensionBridge._getContentFromWeb();🧰 Tools
🪛 Biome (1.9.4)
[error] 121-121: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.(lint/complexity/noThisInStatic)
[error] 122-122: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.(lint/complexity/noThisInStatic)
packages/shared/src/utils/index.ts (1)
13-13: Time 모듈 전체 export
export * from './Time';구문을 통해Time.ts의 모든 export를 한 번에 노출시키는 점은 좋습니다. 다만, lint 규칙에서 exports 순서를 자동 정렬하라고 할 수 있으니, 필요 시 자동 정렬을 고려하세요.🧰 Tools
🪛 eslint
[error] 1-13: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/app/[lng]/(auth)/memos/components/index.ts (1)
6-7: 새로운 SearchForm 관련 컴포넌트 추가
SearchFormProvider와SearchForm을 추가 export하여 외부에서 쉽게 사용 가능하게 변경되었습니다. lint에서 export 순서를 정렬하라는 지적은 주로 코드 스타일 문제이므로, 필요 시 개선을 고려하세요.🧰 Tools
🪛 eslint
[error] 1-7: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/components/index.ts (1)
Line range hint
1-7: export 문 정렬을 권장합니다.
ESLint에서 제안된 것처럼 export 구문을 정렬하면 가독성과 유지보수성이 향상됩니다.🧰 Tools
🪛 eslint
[error] 1-7: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/app/[lng]/(auth)/memos/components/SearchFormProvider/index.tsx (1)
12-21: 추가적인 유효성 검증 로직을 고려해 보세요.
useForm훅에서defaultValues만 설정되어 있습니다. 특히 검색 쿼리나 선택 값에 대한 필수 검사 등을 통해 사용자 입력에 대한 안정성을 강화할 수 있습니다.packages/shared/src/modules/extension-bridge/types.ts (2)
14-21: 에러 코드에 대한 활용 사례를 늘려보세요.
에러 종류가 늘어날 가능성에 대비해, 에러 코드를 분기 처리하는 헬퍼 함수를 구현하면 유지보수에 도움이 될 수 있습니다.
23-26: 페이지 콘텐츠를 확장 가능하게 설계할 수 있습니다.
PageContent인터페이스가 간단하지만, 이후 요구사항 확장 시 더 다양한 속성(예: 태그, 작성일, 작성자 정보 등)을 고려할 수 있도록 인터페이스를 유연하게 설계해주세요.pages/side-panel/src/utils/Url.ts (1)
Line range hint
18-22: URL 생성 로직에 대한 확장성을 검토해 보세요.
isWish외에도 다른 부가적인 검색 파라미터가 필요한 경우를 대비하여, 향후 함수 오버로드나 객체 파라미터 확장 방식 등을 고려해볼 수 있습니다.packages/web/src/app/[lng]/(auth)/memos/components/Header/RefreshButton.tsx (1)
25-25: 메모 재조회 요청 추가
ExtensionBridge.requestRefetchTheMemos()호출을 통해 확장 프로그램 쪽 재조회 로직을 쉽게 연계할 수 있습니다. 에러 핸들링이 필요한 경우 try/catch를 추가 고려해주세요.packages/web/src/app/[lng]/(auth)/memos/page.tsx (1)
31-39: 검색 폼 컨텍스트 적용
SearchFormProvider로 검색 관련 상태를 관리하고, 내부에SearchForm과MemoView를 배치한 구조가 좋습니다. 이로 인해 검색 상태를 쉽게 공유할 수 있어 확장성 및 유지보수성이 향상될 것으로 보입니다.pages/side-panel/src/components/SummaryHeader.tsx (2)
7-8: 미사용 import
Suspense가 현재 사용되지 않는 것으로 보입니다. 필요하지 않다면 제거해주세요.🧰 Tools
🪛 eslint
[error] 1-8: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 8-8: 'Suspense' is defined but never used.
(@typescript-eslint/no-unused-vars)
20-21: 새로운 핸들러로 클릭 로직 분리
refetchSummary호출을 함수로 감싸 가독성이 높아졌습니다. 필요한 경우 에러 처리 로직을 추가 consider 해보세요.packages/web/src/app/[lng]/(auth)/memos/components/SearchForm/index.tsx (1)
3-8: 임포트 순서 자동 정렬 권장
ESLint에서 임포트 정렬을 권장하므로,simple-import-sort/imports룰에 따라 자동 정렬을 적용하시면 코드 가독성이 향상됩니다. 더불어Control타입이 사용되지 않으므로 제거를 고려해 보세요.-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@extension/ui'; -import { Input } from '@src/components/ui'; -import { LanguageType } from '@src/modules/i18n'; -import useTranslation from '@src/modules/i18n/client'; -import { Control, Controller, useFormContext } from 'react-hook-form'; -import { SearchFormValues } from '../SearchFormProvider'; +import { LanguageType } from '@src/modules/i18n'; +import useTranslation from '@src/modules/i18n/client'; +import { Controller, useFormContext } from 'react-hook-form'; +import { Input } from '@src/components/ui'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@extension/ui'; +import { SearchFormValues } from '../SearchFormProvider';🧰 Tools
🪛 eslint
[error] 3-8: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 7-7: 'Control' is defined but never used.
(@typescript-eslint/no-unused-vars)
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/index.tsx (2)
3-16: 임포트 순서 자동 정렬 권장
ESLint에서 임포트 정렬을 권장하므로,simple-import-sort/imports룰에 따라 자동 정렬을 한 번 수행해 주시면 좋을 것 같습니다.🧰 Tools
🪛 eslint
[error] 3-16: Run autofix to sort these imports!
(simple-import-sort/imports)
48-50:view상태별 조건부 렌더링 확인
view === 'grid'와'calendar'에 따라 적절히 다른 컴포넌트를 표시합니다. 향후view값이 늘어날 경우를 대비한 기본 혹은 에러 뷰 핸들링도 고려해보실 수 있겠습니다.packages/shared/src/ 8000 hooks/supabase/useMemosQuery.ts (1)
1-7: 임포트 순서 자동 정렬 제안
ESLint 권장사항에 따라 임포트문을 정렬하면 가독성이 향상될 수 있습니다.🧰 Tools
🪛 eslint
[error] 1-7: Run autofix to sort these imports!
(simple-import-sort/imports)
packages/web/src/app/[lng]/(auth)/memos/components/Header/index.tsx (1)
10-10: 컴포넌트 미사용에 대한 주의
Button 컴포넌트가 가져와졌지만 실제로 사용되지 않아 ESLint 경고가 발생할 수 있습니다. 사용되지 않는다면 제거하거나 추후 사용할 계획이 있으면 주석으로 명시해 주세요.🧰 Tools
🪛 eslint
[error] 10-10: 'Button' is defined but never used.
(@typescript-eslint/no-unused-vars)
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/MemoOption.tsx (1)
67-70: Undo 기능 처리
ToastAction 내부에서 삭제된 메모들을 다시 복원하는 로직이 유용합니다. 사용자가 Undo 버튼을 누르지 않은 상태에서 새로고침 등의 이슈가 생길 경우 상황을 어떻게 처리할지 고민해 보셔도 좋겠습니다.packages/web/src/app/[lng]/(auth)/memos/components/MemoSidebar/SidebarGroupCategory.tsx (2)
29-31: 카테고리 클릭 시 URL 업데이트
버튼 클릭 시 전달받은 category 문자열로 URL 파라미터를 변경하고, router.push로 화면을 갱신하는 로직이 사용자의 UX를 개선합니다. 다만, 화면 이동 과정에서 스크롤 위치를 어떻게 처리할지 고민해 보실 수 있습니다.
42-46: 버튼 배경 조건부 클래스
현재 카테고리와 선택된 카테고리가 일치하면 배경색이 적용되도록 하여 UI 가시성이 좋습니다. 동일한 로직을 재사용할 일이 있으면 별도의 유틸 함수나 컴포넌트로 추출하는 것도 고려해 보세요.packages/web/src/modules/i18n/locales/en/translation.json (1)
Line range hint
1-594: 번역 키 문서화를 제안합니다.현재 translation.json 파일이 매우 크고 구조화되어 있습니다. 향후 유지보수를 위해 번역 키의 구조와 용도를 문서화하는 것이 좋을 것 같습니다.
프로젝트 루트에
i18n-keys.md파일을 생성하여 다음과 같이 문서화하는 것을 제안합니다:# 국제화(i18n) 키 구조 ## 공통 키 (common) - 애플리케이션 전반에 걸쳐 사용되는 일반적인 텍스트 ## 헤더 섹션 (header) - 상단 네비게이션 바에 표시되는 텍스트 - update: 업데이트 로그 표시 텍스트 (이전 키: updateLog) [이하 섹션별 설명 계속...]
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (35)
-
.gitignore(1 hunks) -
.node-version(1 hunks) -
package.json(1 hunks) -
packages/shared/src/constants/Path.ts(1 hunks) -
packages/shared/src/hooks/supabase/useMemosQuery.ts(1 hunks) -
packages/shared/src/modules/extension-bridge/ExtensionBridge.ts(2 hunks) -
packages/shared/src/modules/extension-bridge/types.ts(1 hunks) -
packages/shared/src/utils/Time.ts(1 hunks) -
packages/shared/src/utils/index.ts(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/Header/RefreshButton.tsx(2 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/Header/index.tsx(2 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/MemoOption.tsx(3 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/index.tsx(3 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardHeader/index.tsx(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoSidebar/SidebarGroupCategory.tsx(2 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoSidebar/index.tsx(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoGrid.tsx(5 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoItem.tsx(2 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoOptionHeader.tsx(2 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/index.tsx(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/SearchForm/index.tsx(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/SearchFormProvider/index.tsx(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/components/index.ts(1 hunks) -
packages/web/src/app/[lng]/(auth)/memos/page.tsx(2 hunks) -
packages/web/src/app/[lng]/memos/components/MemoView/index.tsx(0 hunks) -
packages/web/src/components/Footer.tsx(0 hunks) -
packages/web/src/components/index.ts(1 hunks) -
packages/web/src/middleware.ts(1 hunks) -
packages/web/src/modules/i18n/locales/en/translation.json(1 hunks) -
packages/web/src/modules/i18n/locales/ko/translation.json(1 hunks) -
pages/side-panel/src/SidePanel.tsx(1 hunks) -
pages/side-panel/src/components/MemoForm.tsx(1 hunks) -
pages/side-panel/src/components/MemoHeader.tsx(1 hunks) -
pages/side-panel/src/components/SummaryHeader.tsx(3 hunks) -
pages/side-panel/src/utils/Url.ts(1 hunks)
💤 Files with no reviewable changes (2)
- packages/web/src/components/Footer.tsx
- packages/web/src/app/[lng]/memos/components/MemoView/index.tsx
✅ Files skipped from review due to trivial changes (3)
- .node-version
- .gitignore
- pages/side-panel/src/components/MemoForm.tsx
🧰 Additional context used
🪛 eslint
packages/shared/src/utils/index.ts
[error] 1-13: Run autofix to sort these exports!
(simple-import-sort/exports)
pages/side-panel/src/components/MemoHeader.tsx
[error] 4-4: 'delay' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 8-8: 'useQuery' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 8-8: 'useSuspenseQuery' is defined but never used.
(@typescript-eslint/no-unused-vars)
packages/web/src/app/[lng]/(auth)/memos/components/Header/index.tsx
[error] 10-10: 'Button' is defined but never used.
(@typescript-eslint/no-unused-vars)
packages/web/src/app/[lng]/(auth)/memos/components/index.ts
[error] 1-7: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/app/[lng]/(auth)/memos/components/SearchForm/index.tsx
[error] 3-8: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 7-7: 'Control' is defined but never used.
(@typescript-eslint/no-unused-vars)
packages/shared/src/hooks/supabase/useMemosQuery.ts
[error] 1-7: Run autofix to sort these imports!
(simple-import-sort/imports)
packages/web/src/components/index.ts
[error] 1-7: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/index.tsx
[error] 3-16: Run autofix to sort these imports!
(simple-import-sort/imports)
pages/side-panel/src/components/SummaryHeader.tsx
[error] 8-8: 'Suspense' is defined but never used.
(@typescript-eslint/no-unused-vars)
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoGrid.tsx
[error] 114-114: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🪛 Biome (1.9.4)
packages/shared/src/modules/extension-bridge/ExtensionBridge.ts
[error] 103-103: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.
(lint/complexity/noThisInStatic)
[error] 104-104: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.
(lint/complexity/noThisInStatic)
[error] 121-121: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.
(lint/complexity/noThisInStatic)
[error] 122-122: Using this in a static context can be confusing.
this refers to the class.
Unsafe fix: Use the class name instead.
(lint/complexity/noThisInStatic)
🔇 Additional comments (70)
pages/side-panel/src/SidePanel.tsx (1)
31-31: MemoHeader에 대한 에러 처리 제거에 대한 의도 확인 요청
MemoHeader가 더 이상 ErrorBoundary로 감싸지 않아, 내부 예외 발생 시 사이드 패널 전체 흐름이 깨질 수 있습니다. 해당 변경이 의도적이라면 후속적으로 발생할 수 있는 에러 처리 방법(별도의 ErrorBoundary 사용 등)을 고려하시기 바랍니다.
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoOptionHeader.tsx (3)
12-12: selectedMemoIds로 변경한 점을 확인하세요.
기존에 selectedMemos 대신 selectedMemoIds: number[]로 간소화함으로써 컴포넌트 간 데이터 전달이 더 명확해졌습니다. 다만 다른 컴포넌트나 훅에서 이 필드를 사용하고 있다면, 해당 부분도 모두 함께 수정되었는지 확인이 필요합니다.
20-20: 빈 배열 처리
selectedMemoIds.length === 0일 때 null을 반환함으로써 컴포넌트를 렌더링하지 않는 로직이 간단하고 명확합니다. 해당 분기에 대한 테스트를 통해 의도된 동작인지 확인해 보길 권장드립니다.
35-35: MemoOption으로 memoIds 전달
이전에는 memos 전체 객체를 주고받았을 가능성이 큰데, 이제 ID만 전달해 더욱 가벼워졌습니다. 이 로직이 MemoOption 컴포넌트 내 처리와 일관성 있게 동작하는지 최종적으로 확인을 권장합니다.
package.json (1)
116-116: Node.js 버전 변경에 대한 검토가 필요합니다.
유연한 버전 요구사항(>=18.12.0)에서 고정된 버전(20.17.0)으로 변경되었습니다. 이는 다음과 같은 영향을 미칠 수 있습니다:
- CI/CD 파이프라인 수정이 필요할 수 있습니다
- 팀원들의 개발 환경 업데이트가 필요합니다
- 호스팅 환경의 Node.js 버전 호환성 확인이 필요합니다
유연한 버전 요구사항을 유지하는 것을 고려해보시기 바랍니다.
✅ Verification successful
Node.js 버전 설정이 적절합니다
.nvmrc 파일에서도 동일한 Node.js 버전(v20.17.0)을 사용하고 있으며, CI/CD 워크플로우가 이 .nvmrc 파일을 참조하도록 올바르게 구성되어 있습니다. 따라서 package.json의 엔진 버전을 고정값으로 설정한 것은 프로젝트의 일관성을 유지하는데 도움이 됩니다.
- CI/CD 워크플로우에서
node-version-file: '.nvmrc'를 사용하여 Node.js 버전을 관리하고 있습니다 - 프로젝트의 타입스크립트 설정(
@types/node)도 Node.js 20.x 버전과 호환됩니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# CI/CD 환경에서 사용 중인 Node.js 버전 확인
gh workflow list
gh workflow view $(gh workflow list --json id,name | jq -r '.[] | select(.name | contains("CI") or contains("Build") or contains("Deploy")) | .id' | head -1)
Length of output: 893
Script:
#!/bin/bash
# Check Node.js version in workflow files
fd -e yml -e yaml . .github/workflows/ --exec cat {} \; 2>/dev/null
# Check for any Node.js setup steps in workflow files
rg -A 3 "actions/setup-node" .github/workflows/
Length of output: 4501
Script:
#!/bin/bash
# Check for .nvmrc file content
cat .nvmrc 2>/dev/null
# Check for any other Node.js version references
rg "node" package.json
Length of output: 207
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoItem.tsx (4)
15-16: **selectMemoItem 함수 정의 추가에 대한 확인 **
새로운 프로퍼티 selectMemoItem: (id: number) => void;가 추가되어서 메모를 선택하는 기능이 명확하게 드러납니다. 이 변경은 컴포넌트 구조를 직관적으로 개선하는 것으로 보입니다.
23-25: **Props 구조 변경 검토 **
selectMemoItem, isSelecting, isSelected, isHovered와 같은 프로퍼티를 구조분해 할당으로 받음으로써 코드가 좀 더 읽기 쉽게 분리되었습니다. 필요한 정보만 명확히 가져오는 접근 방식이므로 유지보수에 유리해 보입니다.
45-45: **MemoCardFooter에 isSelecting과 isHovered 전달 **
기존 isOptionShown을 없애고, isHover 여부와 isSelecting 상태를 분리하여 전달하는 패턴으로 변경된 것으로 보입니다. props가 명확해짐에 따라, 푸터가 보여지는 조건을 세분화할 수 있어 유지보수와 기능 추가에 유리합니다.
43-43: **MemoCardHeader 사용 시 selectMemoItem 전달 **
MemoCardHeader에 selectMemoItem을 전달함으로써, 메모 선택 로직이 해당 컴포넌트로 위임되었습니다. 정상 작동하려면 memo.id가 올바르게 전달되는지 확인해보세요.
✅ Verification successful
Let me verify the implementation of MemoCardHeader further to ensure the memo selection logic is properly implemented.
Let me check the GetMemoResponse type to ensure it includes the id property.
Let me check the MemoService implementation to verify the structure.
Let me check the MemoTable type to confirm the id field.
MemoCardHeader 컴포넌트의 메모 선택 기능이 올바르게 구현되어 있습니다
검증 결과:
-
MemoCardHeader컴포넌트는memo.id를 올바르게 전달받고 있습니다 -
handleMemoSelect함수에서selectMemoItem(memo.id)를 정상적으로 호출하고 있습니다 -
GetMemoResponse타입은 Supabase의 메모 테이블 응답을 기반으로 하며, 필수id필드를 포함하고 있습니다
메모 선택 로직이 정상적으로 작동할 것으로 예상됩니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# MemoCardHeader에서 selectMemoItem 호출 부분이 제대로 작동하는지 확인
rg --context 5 'handleMemoSelect'
Length of output: 2489
Script:
#!/bin/bash
# Check MemoCardHeader props interface and memo type
ast-grep --pattern 'interface MemoCardHeaderProps {
$$$
}'
Length of output: 682
Script:
#!/bin/bash
# Check GetMemoResponse type definition
rg --type-add 'ts:*.{ts,tsx}' --type ts 'type GetMemoResponse' -A 10
Length of output: 200
Script:
#!/bin/bash
# Check MemoService implementation
rg --type-add 'ts:*.{ts,tsx}' --type ts 'class MemoService' -A 20
Length of output: 1754
Script:
#!/bin/bash
# Check MemoTable and MemoRow types
rg --type-add 'ts:*.{ts,tsx}' --type ts 'type MemoTable|type MemoRow' -A 10
Length of output: 955
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardHeader/index.tsx (2)
11-11: **selectMemoItem 프로퍼티 추가 **
onSelect 대신 selectMemoItem으로 변경되어, 메모 선택 시점에 id를 직접 넘기는 방식으로 구조가 개선되었습니다.
16-21: **handleMemoSelect 함수 추가 **
selectMemoItem?.(memo.id); 형태로 선택 로직을 캡슐화했습니다. 이로써 로직이 간결해졌으며, null 병합 연산자를 사용해 안전성을 높인 점이 좋습니다.
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/index.tsx (6)
23-24: **isSelecting, isHovered 프로퍼티 도입 **
isOptionShown을 분리하여 isSelecting과 isHovered로 세분화한 것은 다양한 상태를 보다 명확히 표현한다는 점에서 합리적입니다.
27-27: **컴포넌트 시그니처 변경 **
함수 파라미터로 isSelecting, isHovered를 받도록 하여, 컴포넌트 내부 상태 결정 로직이 간단해졌습니다.
33-34: **isShowingOption 계산 방식 변경 **
isHovered && !isSelecting 조건으로 변경되어, “호버 중이나 선택 모드가 아닐 때”라는 의도가 분명합니다.
95-95: **옵션 부분의 opacity 처리 **
!isShowingOption 시 opacity-0를 적용해, 시각적으로 옵션 표시를 제어하고 있습니다. 원하는 로직대로 동작한다면 적절한 활용입니다.
107-107: **MemoOption에 memoIds={[memo.id]} **
기존에 배열 형태로 memos={[memo]}를 전달하는 대신 memoIds로 변경하여, ID 기반 처리가 가능해졌습니다. 이는 데이터 전달 구조가 가벼워져서 확장성도 좋아 보입니다.
111-113: **날짜 처리 로직과 dateTime 속성 **
memo.created_at ?? ''로 안전하게 처리하여, undefined나 null일 경우에도 속성이 비어 있게 설정했습니다. isShowingOption 값이 true일 때 날짜가 사라지는 UX도 의도한 것 같으므로 확인만 해주세요.
packages/shared/src/modules/extension-bridge/ExtensionBridge.ts (17)
5-5: 새로 추가된 import 확인
ExtensionError, ExtensionErrorCode, PageContent 등의 import 처리가 정상적으로 보이며, 코드 내에서 의도대로 잘 활용되고 있습니다.
🧰 Tools
🪛 eslint
[error] 1-5: Run autofix to sort these imports!
(simple-import-sort/imports)
8-23: 오류 처리 로직 점검
requestGetSidePanelOpen 메서드 내의 try/catch 구문이 적절히 배치되어 있고, 에러 시 ExtensionError를 던지는 부분이 명확히 정의되어 있습니다.
27-38: 응답 처리 정상 동작 확인
responseGetSidePanelOpen 메서드에서 Runtime.onMessageExternal 이벤트를 통해 정상적으로 응답하는 로직이 들어 있으며, 오류 처리도 동일하게 일관성 있게 구현되었습니다.
40-45: 사이드패널 오픈 요청 로직<
8000
br>
requestOpenSidePanel에서 Runtime.sendMessage를 사용하는 부분과 에러 처리 모두 깔끔합니다.
49-61: 사이드패널 오픈 응답 로직
responseOpenSidePanel 메서드에서 메시지 리스너를 등록하고, chrome.sidePanel.open을 호출해 사이드패널을 열어주는 동작이 필요에 맞게 잘 짜여 있습니다.
63-68: 탭 정보 요청 로직
requestGetTabs에서 Runtime.sendMessage를 사용하는 부분이 간결하고, 에러 처리도 일관적입니다.
72-79: 탭 정보 응답 로직
responseGetTabs에서 실제 탭 목록을 가져와(Tab.get()) 응답으로 보내주는 흐름이 올바르게 구현되어 있습니다.
82-87: 페이지 컨텐츠 요청 로직
requestPageContent에서 Tab.sendMessage를 활용해 페이지 컨텐츠를 비동기로 가져오는 방식이 적절하며, 에러 처리도 일관성 있습니다.
90-90: YouTube 주소 검사 메서드
private static checkYoutube 함수가 정규식을 사용해 유튜브 URL 여부를 판별하는 로직이 간단하고 명확합니다.
129-134: YouTube 자막 가져오기
_getContentFromYoutube에서 YoutubeTranscript.fetchTranscript 사용 후 에러를 ExtensionError로 래핑하는 흐름이 일관적이고 안정적입니다.
138-142: 웹 컨텐츠 가져오기
_getContentFromWeb 메서드도 동일하게 try/catch가 반영되어 일관적인 에러 처리가 보장됩니다.
145-152: 메모 리스트 갱신 요청
requestRefetchTheMemos에서 chrome.runtime.sendMessage를 통해 확장 프로그램에 메시지를 보내는 로직이 정상적으로 처리되고 있고, 에러도 적절히 핸들링됩니다.
156-164: 메모 리스트 갱신 응답
responseRefetchTheMemos에서 Runtime.onMessageExternal을 사용해 콜백을 등록하는 로직이 간결하며, 예외를 ExtensionError로 묶는 패턴도 유지되고 있습니다.
167-172: 사이드패널 업데이트 요청
requestUpdateSidePanel이 Runtime.sendMessage를 호출하고 에러 시 ExtensionError를 던지는 구조가 다른 메서드들과 동일한 형식을 띕니다.
176-184: 사이드패널 업데이트 응답
responseUpdateSidePanel에서 Runtime.onMessage를 통한 업데이트 처리 콜백 등록이 일관적이고, 에러도 동일한 형태로 처리되어 있습니다.
187-192: 확장 프로그램 매니페스트 요청
requestGetExtensionManifest가 chrome.runtime.sendMessage를 호출하며 콜백 함수를 통해 매니페스트를 받는 구조가 정상적으로 동작할 것으로 보입니다.
196-207: 확장 프로그램 매니페스트 응답
responseGetExtensionManifest에서 매니페스트를 가져와 onMessageExternal 리스너로 반환하는 부분도 문제없이 구현되었습니다.
packages/shared/src/utils/Time.ts (1)
1-1: 지연 함수 추가
delay 함수가 3초 뒤에 resolve되는 Promise를 반환하도록 구현되었습니다. 비동기 로직에서 적절히 사용될 수 있어 보입니다.
packages/shared/src/constants/Path.ts (1)
8-8: 경로 키 변경
updates에서 update로 변경되어 URL 경로가 '/update'가 된 점을 확인했습니다. 기존에 updates를 참조하는 부분이 있다면 모두 정상적으로 업데이트되었는지 확인하시기 바랍니다.
packages/web/src/app/[lng]/(auth)/memos/components/SearchFormProvider/index.tsx (1)
6-10: 타입 정의가 명확하고 직관적입니다.
SearchTargetType과 SearchFormValues 인터페이스 구성이 적절하며, 타입 안정성을 높이는 데 도움이 됩니다.
packages/shared/src/modules/extension-bridge/types.ts (1)
3-12: 에러 처리 로직이 간결하고 명확합니다.
ExtensionError 클래스를 통해 에러 코드를 구분하고 로깅 및 처리 절차를 일원화할 수 있어 보입니다.
pages/side-panel/src/utils/Url.ts (1)
10-16: 검색 매개변수의 초기화 로직이 깔끔합니다.
불필요한 인자를 제거하고 new SearchParams()를 사용해 가독성과 유지보수성을 높였습니다.
packages/web/src/middleware.ts (3)
8-9: 변수 분리로 가독성 향상
pathname 변수를 별도로 분리하여 request.nextUrl를 반복 접근하지 않아도 되어 코드 가독성이 좋아졌습니다.
10-11: 언어 경로 판별 로직
언어 경로 판단 시 languages.some(...)를 활용하는 접근이 적절합니다. 별다른 이슈는 없어 보입니다.
18-18: 리다이렉트 URL 구성 단순화
pathname 등 필요한 값을 변수화해 URL을 구성하는 부분이 명확해졌습니다.
packages/web/src/app/[lng]/(auth)/memos/page.tsx (1)
12-12: SearchForm, SearchFormProvider 임포트
새로운 검색 폼 관련 컴포넌트를 임포트하여 페이지 구성이 더욱 유연해졌습니다.
pages/side-panel/src/components/SummaryHeader.tsx (3)
10-13: 카테고리 텍스트 변환 분리
getCategoryText 함수를 별도로 분리하여 가독성과 재사용성이 높아졌습니다.
18-19: 카테고리 텍스트 재활용
categoryText 변수를 사전에 생성하여 JSX에서 중복되는 로직을 없앤 점이 깔끔합니다.
42-42: 새로고침 버튼 명확성
handleRefreshClick로 요약을 새로고침하는 명확한 UI 제공이 좋습니다.
packages/web/src/app/[lng]/(auth)/memos/components/SearchForm/index.tsx (4)
1-2: 'use client' 선언 정상 동작 확인
이 라인은 Next.js 환경에서 클라이언트 컴포넌트임을 명시적으로 선언해주므로 적절해 보입니다. 추가 조치 사항은 없어 보입니다.
10-10: SearchFormProps 인터페이스 변경 확인
control 속성이 제거되어 더 간단해졌네요. 특별한 문제 없으면 승인 가능합니다.
12-12: 함수 시그니처 변경사항 확인
SearchForm이 control 대신 useFormContext를 통해 폼 컨트롤을 확장성 있게 사용할 수 있도록 개선되었습니다.
14-14: useFormContext 활용 우수
useFormContext<SearchFormValues>()로부터 control을 잘 받아와서 내부 Controller와 연동 중입니다. 문제 없이 동작할 것으로 보입니다.
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/index.tsx (3)
18-22: MemoViewProps 인터페이스 정의
LanguageType과 함께 선택적 필드를 활용하여 다양한 검색 조건을 처리할 수 있게 구성되어 있습니다. 적절한 설계로 보입니다.
24-33: 쿼리와 폼 연동 로직 적절
useFormContext를 이용해 searchQuery, searchTarget을 추적하고, useMemosQuery로 바로 전달하므로 데이터 흐름이 명확합니다.
37-47: UI 컴포넌트 구조 이해
사용자에게 전체 메모 수를 표시하고, RefreshButton과 ToggleView를 제공하여 UX 개선에 기여합니다. 각 요소가 명확히 구분되어 있으며 유지보수에 유리해 보입니다.
packages/shared/src/hooks/supabase/useMemosQuery.ts (4)
9-9: QueryFnData 타입 정의
MemoService 반환 타입을 기반으로 타입을 분리해두어 개발자가 빠르게 파악할 수 있습니다. 구조가 명확해서 좋습니다.
13-18: UseMemosQueryProps 인터페이스
검색, 필터, 카테고리 등을 커스텀 가능하도록 설계되어 있어 범용성이 높습니다.
20-47: 쿼리 필터 로직 개선
-
searchQueryLower를 활용해 조건부 필터를 유연하게 적용하는 구조가 깔끔합니다. -
getChoseong함수로 초성 검색까지 지원하므로 한글 검색에 대한 확장성이 확보됩니다. - 카테고리, 위시 여부, 검색 대상을 한꺼번에 처리하는 방식이 유지보수에 용이해 보입니다.
53-53: memos 반환 구조
query.data ?? []로 기본 빈 배열을 반환해, undefined 예외와 같은 상황을 잘 방지하고 있습니다.
packages/web/src/app/[lng]/(auth)/memos/components/MemoSidebar/index.tsx (1)
69-69: 사이드바 설정 툴팁 추가
설정 페이지로 이동하기 위한 링크와 툴팁을 제공하여 사용자 편의성이 높아졌습니다.
packages/web/src/app/[lng]/(auth)/memos/components/Header/index.tsx (2)
45-46: 문구 변경 확인
PATHS.update로 변경되고, 번역 키도 update로 맞춰진 점이 반영되었습니다. 기존과 동일한 기능이라면 정상 동작에 문제 없으나, 관련된 라우팅이나 번역 키 사용 부분이 모두 수정되었는지 확인이 필요합니다.
53-53: useTranslation 호출 위치 재배치
useTranslation 훅이 상단으로 이동하여 코드 가독성이 좋아졌습니다. async/await로 동작하는 부분이므로, 필요한 곳에서 동기적으로 번역 내용을 사용하기에 적합해 보입니다.
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/MemoOption.tsx (5)
36-36: 프로퍼티 타입 변경 확인
memoIds가 number 배열로 정의되어 있습니다. 기존에 memo 객체를 받던 로직과 달라졌으므로, 이 파일 외에 메모 관련 로직도 동일하게 수정되었는지 확인이 필요합니다.
40-40: 기본값 설정
memoIds에 기본값으로 빈 배열을 적용하여 안전하게 방어 코드를 추가해주신 점이 좋습니다. 메모가 없을 때에도 컴포넌트가 정상적으로 동작할 것으로 보입니다.
50-52: 선택된 메모 필터링 로직
memos에서 memoIds를 기준으로 필터링하여 selectedMemos를 생성합니다. 이 로직의 성능이나 빈 배열 처리에 문제가 없는지 검토해 주세요.
53-55: 카테고리 일관성 체크
선택된 메모들의 category_id가 모두 같을 경우에만 defaultCategoryId를 설정하는 로직은 합리적입니다. 카테고리가 다른 메모들을 동시에 수정할 때 의도한 동작인지 확인해 보세요.
61-65: 메모 삭제 후 확장 브리지 호출
ExtensionBridge.requestRefetchTheMemos()가 성공적으로 메모 삭제 후 재동기화를 해주는 것으로 보입니다. 비동기 처리를 잘 해주셨지만, 확장 프로그램 간 통신 과정에서 에러 발생 시 예외 처리가 필요한지 점검해 주세요.
packages/web/src/app/[lng]/(auth)/memos/components/MemoSidebar/SidebarGroupCategory.tsx (3)
16-16: 불필요한 import 정리 제안
React에서 MouseEventHandler를 제거한 것은 사용되지 않기에 불필요한 import를 줄이는 적절한 리팩토링입니다.
19-19: useSearchParams 훅 도입
category 필터 처리를 URL 파라미터로 수행하기 위해 useSearchParams를 사용하는 접근이 깔끔합니다.
🧰 Tools
🪛 eslint
[error] 3-19: Run autofix to sort these imports!
(simple-import-sort/imports)
25-27: 현재 카테고리 추출
searchParams.get('category')를 활용해 현재 카테고리를 얻는 과정이 간결합니다. catetory가 없는 경우의 처리가 필요한지 확인만 해주세요.
packages/web/src/modules/i18n/locales/ko/translation.json (1)
33-33: 번역 키 변경
"header.updateLog"에서 "header.update"로 키가 변경됨에 따라 UI에도 "업데이트 소식"이 간결하게 표시됩니다. 다른 파일에서 updateLog를 참조하는 로직이 남아있지 않은지 확인이 필요합니다.
packages/web/src/modules/i18n/locales/en/translation.json (1)
34-34: 키 이름 변경 확인이 필요합니다.
키 이름이 "updateLog"에서 "update"로 변경되었습니다. 이는 리팩토링의 일환으로 보이며 한국어 로케일 파일과 일관성이 유지되었습니다.
다음 스크립트를 실행하여 애플리케이션 전체에서 이 키의 사용을 확인하겠습니다:
✅ Verification successful
번역 키 변경이 올바르게 적용되었습니다
번역 파일 분석 결과, "update" 키가 영어와 한국어 번역 파일 모두에서 일관되게 사용되고 있으며, 각각 "Update Log"와 "업데이트 소식"으로 적절하게 번역되어 있습니다. 또한 ExtensionDialog 컴포넌트에서 사용되는 'update' 타입은 다른 맥락에서 사용되는 것으로 확인되어 이번 변경과는 무관합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 설명: "updateLog" 또는 "update" 키의 사용을 검색합니다.
# 모든 타입스크립트/자바스크립트 파일에서 키 사용 확인
rg -g '*.{ts,tsx,js,jsx}' "('updateLog'|\"updateLog\"|'update'|\"update\")" packages/web/src/
# 다른 번역 파일에서도 동일한 변경이 이루어졌는지 확인
fd -g "translation.json" packages/web/src/modules/i18n/locales/
Length of output: 501
Script:
#!/bin/bash
# 설명: 번역 파일의 내용을 확인하고 "update" 키의 사용을 검사합니다.
# 영어와 한국어 번역 파일의 내용 확인
echo "=== English translation file ==="
cat packages/web/src/modules/i18n/locales/en/translation.json
echo -e "\n=== Korean translation file ==="
cat packages/web/src/modules/i18n/locales/ko/translation.json
# ExtensionDialog 컴포넌트에서 번역 키 사용 확인
echo -e "\n=== ExtensionDialog usage ==="
rg -A 5 -B 5 "('update'|\"update\")" packages/web/src/app/components/ExtensionDialog/
Length of output: 22241
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoGrid.tsx
6D40
Show resolved
Hide resolved
packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoGrid.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardHeader/index.tsx (1)
15-19: handleMemoSelect 함수를 인라인으로 처리하는 것을 고려해보세요현재 구현은 정확하지만, handleMemoSelect 함수가 단순 래퍼 역할만 하고 있습니다. 코드를 더 간결하게 만들기 위해 onClick 핸들러에 직접 구현하는 것을 고려해보세요.
- const handleMemoSelect = () => { - selectMemoItem?.(memo.id); - }; - return ( <CardHeader className="relative py-4 font-normal"> <Button variant="outline" size="sm" - > + => selectMemoItem?.(memo.id)}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
package.json(0 hunks)packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/index.tsx(3 hunks)packages/web/src/app/[lng]/(auth)/memos/components/MemoCardHeader/index.tsx(1 hunks)packages/web/src/app/[lng]/(auth)/memos/components/MemoDialog/index.tsx(1 hunks)packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoItem.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- package.json
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/web/src/app/[lng]/(auth)/memos/components/MemoCardFooter/index.tsx
- packages/web/src/app/[lng]/(auth)/memos/components/MemoView/MemoItem.tsx
🔇 Additional comments (2)
packages/web/src/app/[lng]/(auth)/memos/components/MemoCardHeader/index.tsx (1)
10-10: Props 인터페이스가 개선되었습니다
이벤트 기반 콜백에서 ID 기반 함수로의 변경은 컴포넌트의 책임을 더 명확하게 만들었습니다. 타입 안정성도 향상되었습니다.
packages/web/src/app/[lng]/(auth)/memos/components/MemoDialog/index.tsx (1)
93-93: MemoCardFooter 컴포넌트 변경 사항 점검
isOptionShown 프롭이 제거되고, 이제 memo와 lng만 전달하고 있습니다. MemoCardFooter 내부 로직이 새 프롭 구조에 맞춰 정상 동작하는지 확인해 보세요. 현재 적용된 형태로는 큰 문제는 없어 보이며, 레이아웃이나 렌더링에 이상이 없는지 확인 후 계속 진행해도 좋겠습니다.
Summary by CodeRabbit
릴리즈 노트
새로운 기능
개선 사항
버그 수정
기타 변경 사항