Feature/calendar #112
Feature/calendar #112
Conversation
|
Caution Review failedThe pull request is closed. Walkthrough이 풀 리퀘스트는 Changes
Possibly related PRs
Warning Rate limit exceeded@guesung has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 9 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
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
🧹 Outside diff range and nitpick comments (9)
packages/web/src/components/ui/toggle-group.tsx (6)
3-8: import 문을 정렬하고 코드 스타일을 일관성 있게 유지해주세요.현재 import 문에서 알파벳 순서대로 정렬되어 있지 않으며, 작은따옴표와 세미콜론의 사용이 일관되지 않습니다. 코드의 가독성과 유지 보수를 위해 import 문을 정렬하고 작은따옴표와 세미콜론을 일관되게 사용해주세요.
적용할 변경 사항:
+import * as React from 'react'; +import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'; +import { type VariantProps } from 'class-variance-authority'; +import { cn } from '@src/utils'; +import { toggleVariants } from '@src/components/ui/toggle';🧰 Tools
🪛 eslint
[error] 3-8: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 3-3: Replace
"react"with'react';(prettier/prettier)
[error] 4-4: Replace
"@radix-ui/react-toggle-group"with'@radix-ui/react-toggle-group';(prettier/prettier)
[error] 5-5: Replace
"class-variance-authority"with'class-variance-authority';(prettier/prettier)
[error] 7-7: Replace
"@src/utils"with'@src/utils';(prettier/prettier)
[error] 8-8: Replace
"@src/components/ui/toggle"with'@src/components/ui/toggle';(prettier/prettier)
1-1: 'use client' 선언에 세미콜론과 작은따옴표를 사용해주세요.JSX 파일에서는 'use client' 선언 시 작은따옴표를 사용하고 세미콜론으로 문장을 종료해야 합니다.
적용할 변경 사항:
-"use client" +'use client';🧰 Tools
🪛 eslint
[error] 1-1: Replace
"use·client"with'use·client';(prettier/prettier)
13-14: Context의 기본값에 작은따옴표와 세미콜론을 추가해주세요.
variant와size의 기본값에 작은따옴표를 사용하고, 객체 선언 후 세미콜론을 추가해주세요.적용할 변경 사항:
- size: "default", - variant: "default", + size: 'default', + variant: 'default', +};🧰 Tools
🪛 eslint
[error] 13-13: Replace
"default"with'default'(prettier/prettier)
[error] 14-14: Replace
"default"with'default'(prettier/prettier)
22-26: 컴포넌트 속성들을 한 줄로 정리해주세요.
ToggleGroupPrimitive.Root컴포넌트의 속성들을 한 줄로 작성하여 코드의 길이를 줄이고 가독성을 높일 수 있습니다.적용할 변경 사항:
- <ToggleGroupPrimitive.Root - ref={ref} - className={cn("flex items-center justify-center gap-1", className)} - {...props} - > + <ToggleGroupPrimitive.Root ref={ref} className={cn('flex items-center justify-center gap-1', className)} {...props}>🧰 Tools
🪛 eslint
[error] 22-26: Replace
⏎····ref={ref}⏎····className={cn("flex·items-center·justify-center·gap-1",·className)}⏎····{...props}⏎··with·ref={ref}·className={cn('flex·items-center·justify-center·gap-1',·className)}·{...props}(prettier/prettier)
27-29: 불필요한 개행을 제거해주세요.
{children}을 감싸는 불필요한 개행을 제거하여 코드의 길이를 줄일 수 있습니다.적용할 변경 사항:
- <ToggleGroupContext.Provider value={{ variant, size }}> - {children} - </ToggleGroupContext.Provider> + <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>🧰 Tools
🪛 eslint
[error] 27-29: Replace
⏎······{children}⏎····with{children}(prettier/prettier)
31-61: 세미콜론과 작은따옴표를 일관되게 사용해주세요.코드 전반에 걸쳐 세미콜론과 작은따옴표 사용이 일관되지 않습니다. 다음과 같이 수정해주세요.
적용할 변경 사항:
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName +ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName; ... -ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName +ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName; ... -export { ToggleGroup, ToggleGroupItem } +export { ToggleGroup, ToggleGroupItem };🧰 Tools
🪛 eslint
[error] 31-31: Insert
;(prettier/prettier)
[error] 33-33: Insert
;(prettier/prettier)
[error] 37-38: Delete
⏎···(prettier/prettier)
[error] 40-40: Insert
;(prettier/prettier)
[error] 50-50: Insert
,(prettier/prettier)
[error] 52-53: Delete
⏎····(prettier/prettier)
[error] 56-56: Insert
;(prettier/prettier)
[error] 57-57: Insert
;(prettier/prettier)
[error] 59-59: Insert
;(prettier/prettier)
[error] 61-61: Insert
;(prettier/prettier)
packages/web/src/app/[lng]/memos/components/MemoView/index.tsx (1)
Line range hint
31-47: 성능 최적화를 위한 제안필터링된 메모와 조건부 렌더링 로직을 최적화할 수 있습니다:
+ const filteredMemos = useMemo(() => + memos + ?.filter(memo => !!isWish === !!memo.isWish) + ?.filter(memo => (category ? memo.category?.name === category : true)), + [memos, isWish, category] + ); - {view === 'calendar' ? ( - <MemoCalendar lng={lng} memos={filteredMemos} /> - ) : ( - <MemoGrid memos={filteredMemos} gridKey={category + isWish} lng={lng} /> - )} + const MemoComponent = view === 'calendar' ? MemoCalendar : MemoGrid; + <MemoComponent + lng={lng} + memos={filteredMemos} + {...(view !== 'calendar' && { gridKey: category + isWish })} + />packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx (2)
26-26: 사용되지 않는 번역 변수가 있습니다.
t변수가 선언되었지만 사용되지 않고 있습니다. 필요하지 않다면 제거해주세요.🧰 Tools
🪛 eslint
[error] 26-26: 't' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
51-74: 성능 최적화를 위한 제안캘린더 컴포넌트의 성능을 개선할 수 있는 몇 가지 사항이 있습니다:
Calendar컴포넌트를memo로 감싸서 불필요한 리렌더링을 방지할 수 있습니다.- 이벤트 핸들러들을 모두
useCallback으로 감싸주세요.+const MemoizedCalendar = memo(Calendar); return ( <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} className="h-[780px] w-[1000px]"> - <Calendar + <MemoizedCalendar // ... props /> </motion.div> );
📜 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 (13)
package.json(1 hunks)packages/shared/src/modules/search-params/constant.ts(1 hunks)packages/shared/src/modules/search-params/type.ts(1 hunks)packages/web/package.json(3 hunks)packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx(1 hunks)packages/web/src/app/[lng]/memos/components/MemoView/ToggleView.tsx(1 hunks)packages/web/src/app/[lng]/memos/components/MemoView/index.tsx(2 hunks)packages/web/src/app/[lng]/memos/components/index.ts(1 hunks)packages/web/src/app/[lng]/memos/page.tsx(3 hunks)packages/web/src/components/ui/toggle-group.tsx(1 hunks)packages/web/src/components/ui/toggle.tsx(1 hunks)packages/web/src/modules/i18n/locales/en/translation.json(1 hunks)packages/web/src/modules/i18n/locales/ko/translation.json(1 hunks)
🧰 Additional context used
🪛 eslint
packages/web/src/components/ui/toggle-group.tsx
[error] 1-1: Replace "use·client" with 'use·client';
(prettier/prettier)
[error] 3-8: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 3-3: Replace "react" with 'react';
(prettier/prettier)
[error] 4-4: Replace "@radix-ui/react-toggle-group" with '@radix-ui/react-toggle-group';
(prettier/prettier)
[error] 5-5: Replace "class-variance-authority" with 'class-variance-authority';
(prettier/prettier)
[error] 7-7: Replace "@src/utils" with '@src/utils';
(prettier/prettier)
[error] 8-8: Replace "@src/components/ui/toggle" with '@src/components/ui/toggle';
(prettier/prettier)
[error] 10-12: Replace ⏎··VariantProps<typeof·toggleVariants>⏎ with VariantProps<typeof·toggleVariants>
(prettier/prettier)
[error] 13-13: Replace "default" with 'default'
(prettier/prettier)
[error] 14-14: Replace "default" with 'default'
(prettier/prettier)
[error] 15-15: Insert ;
(prettier/prettier)
[error] 19-20: Delete ⏎···
(prettier/prettier)
[error] 22-26: Replace ⏎····ref={ref}⏎····className={cn("flex·items-center·justify-center·gap-1",·className)}⏎····{...props}⏎·· with ·ref={ref}·className={cn('flex·items-center·justify-center·gap-1',·className)}·{...props}
(prettier/prettier)
[error] 27-29: Replace ⏎······{children}⏎···· with {children}
(prettier/prettier)
[error] 31-31: Insert ;
(prettier/prettier)
[error] 33-33: Insert ;
(prettier/prettier)
[error] 37-38: Delete ⏎···
(prettier/prettier)
[error] 40-40: Insert ;
(prettier/prettier)
[error] 50-50: Insert ,
(prettier/prettier)
[error] 52-53: Delete ⏎····
(prettier/prettier)
[error] 56-56: Insert ;
(prettier/prettier)
[error] 57-57: Insert ;
(prettier/prettier)
[error] 59-59: Insert ;
(prettier/prettier)
[error] 61-61: Insert ;
(prettier/prettier)
packages/web/src/components/ui/toggle.tsx
[error] 1-1: Replace "use·client" with 'use·client';
(prettier/prettier)
[error] 3-7: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 3-3: Replace "react" with 'react';
(prettier/prettier)
[error] 4-4: Replace "@radix-ui/react-toggle" with '@radix-ui/react-toggle';
(prettier/prettier)
[error] 5-5: Replace "class-variance-authority" with 'class-variance-authority';
(prettier/prettier)
[error] 7-7: Replace "@src/utils" with '@src/utils';
(prettier/prettier)
[error] 10-10: Replace "inline-flex·items-center·justify-center·gap-2·rounded-md·text-sm·font-medium·transition-colors·hover:bg-muted·hover:text-muted-foreground·focus-visible:outline-none·focus-visible:ring-1·focus-visible:ring-ring·disabled:pointer-events-none·disabled:opacity-50·data-[state=on]:bg-accent·data-[state=on]:text-accent-foreground·[&_svg]:pointer-events-none·[&_svg]:size-4·[&_svg]:shrink-0" with 'inline-flex·items-center·justify-center·gap-2·rounded-md·text-sm·font-medium·transition-colors·hover:bg-muted·hover:text-muted-foreground·focus-visible:outline-none·focus-visible:ring-1·focus-visible:ring-ring·disabled:pointer-events-none·disabled:opacity-50·data-[state=on]:bg-accent·data-[state=on]:text-accent-foreground·[&_svg]:pointer-events-none·[&_svg]:size-4·[&_svg]:shrink-0'
(prettier/prettier)
[error] 14-14: Replace "bg-transparent" with 'bg-transparent'
(prettier/prettier)
[error] 15-16: Replace ⏎··········"border·border-input·bg-transparent·shadow-sm·hover:bg-accent·hover:text-accent-foreground" with ·'border·border-input·bg-transparent·shadow-sm·hover:bg-accent·hover:text-accent-foreground'
(prettier/prettier)
[error] 19-19: Replace "h-9·px-2·min-w-9" with 'h-9·px-2·min-w-9'
(prettier/prettier)
[error] 20-20: Replace "h-8·px-1.5·min-w-8" with 'h-8·px-1.5·min-w-8'
(prettier/prettier)
[error] 21-21: Replace "h-10·px-2.5·min-w-10" with 'h-10·px-2.5·min-w-10'
(prettier/prettier)
[error] 25-25: Replace "default" with 'default'
(prettier/prettier)
[error] 26-26: Replace "default" with 'default'
(prettier/prettier)
[error] 28-28: Insert ,
(prettier/prettier)
[error] 29-29: Insert ;
(prettier/prettier)
[error] 33-34: Delete ⏎···
(prettier/prettier)
[error] 36-40: Replace ⏎····ref={ref}⏎····className={cn(toggleVariants({·variant,·size,·className·}))}⏎····{...props}⏎· with ·ref={ref}·className={cn(toggleVariants({·variant,·size,·className·}))}·{...props}
(prettier/prettier)
[error] 41-41: Insert ;
(prettier/prettier)
[error] 43-43: Insert ;
(prettier/prettier)
[error] 45-45: Insert ;
(prettier/prettier)
packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx
[error] 26-26: 't' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (13)
packages/web/src/components/ui/toggle-group.tsx (2)
17-31: ToggleGroup 컴포넌트의 구현이 명확하고 재사용 가능하게 잘 작성되었습니다.
Context를 사용하여 자식 컴포넌트에 variant와 size를 전달하는 구조가 효율적입니다. ForwardRef와 VariantProps를 적절히 활용하여 컴포넌트의 유연성을 높였습니다.
🧰 Tools
🪛 eslint
[error] 19-20: Delete ⏎···
(prettier/prettier)
[error] 22-26: Replace ⏎····ref={ref}⏎····className={cn("flex·items-center·justify-center·gap-1",·className)}⏎····{...props}⏎·· with ·ref={ref}·className={cn('flex·items-center·justify-center·gap-1',·className)}·{...props}
(prettier/prettier)
[error] 27-29: Replace ⏎······{children}⏎···· with {children}
(prettier/prettier)
[error] 31-31: Insert ;
(prettier/prettier)
35-57: ToggleGroupItem 컴포넌트의 구현이 적절합니다.
Context를 활용하여 부모로부터 전달된 variant와 size를 수신하고, 필요한 경우 props로 덮어쓸 수 있도록 구현한 점이 인상적입니다.
🧰 Tools
🪛 eslint
[error] 37-38: Delete ⏎···
(prettier/prettier)
[error] 40-40: Insert ;
(prettier/prettier)
[error] 50-50: Insert ,
(prettier/prettier)
[error] 52-53: Delete ⏎····
(prettier/prettier)
[error] 56-56: Insert ;
(prettier/prettier)
[error] 57-57: Insert ;
(prettier/prettier)
packages/shared/src/modules/search-params/constant.ts (1)
1-1: SEARCH_PARAMS_KEYS에 'view' 키를 추가한 것이 적절합니다.
'view' 파라미터를 추가하여 검색 기능을 확장하고, 새로운 뷰 타입을 지원할 수 있게 되었습니다.
packages/shared/src/modules/search-params/type.ts (1)
3-3: SearchParamViewType 타입 추가가 적절합니다.
'grid'와 'calendar'를 포함하는 뷰 타입을 정의하여 코드의 타입 안정성을 향상시켰습니다.
packages/web/src/app/[lng]/memos/components/index.ts (1)
6-6: CalendarView 컴포넌트를 export하여 모듈 접근성을 높였습니다.
새로운 MemoCalendar 컴포넌트를 외부에서 사용할 수 있도록 올바르게 내보냈습니다.
packages/web/src/app/[lng]/memos/page.tsx (3)
4-4: SearchParamViewType을 import하여 뷰 타입을 정확하게 사용하고 있습니다.
타입스크립트의 타입 정의를 활용하여 코드의 안정성과 가독성을 높였습니다.
17-17: searchParams에 'view' 파라미터를 추가한 것이 적절합니다.
'view'를 선택적으로 받아 다양한 뷰를 지원할 수 있게 되었습니다.
26-26: MemoView 컴포넌트에 'view' 속성을 전달하여 뷰 전환을 구현했습니다.
searchParams로부터 받은 'view' 값을 MemoView에 전달하여 사용자의 선택에 따라 뷰를 변경할 수 있게 되었습니다.
packages/web/src/app/[lng]/memos/components/MemoView/ToggleView.tsx (1)
1-33: 잘 구현된 토글 뷰 컴포넌트입니다!
컴포넌트가 다음과 같은 좋은 사례들을 포함하고 있습니다:
- 타입 안전성이 보장된 props 인터페이스
- URL 기반 상태 관리로 브라우저 히스토리 지원
- i18n을 통한 다국어 지원
- aria-label을 통한 접근성 고려
packages/web/src/components/ui/toggle.tsx (1)
1-45: 코드 포맷팅 및 접근성 개선이 필요합니다
- 따옴표 스타일 통일이 필요합니다:
- "use client"
+ 'use client';- 접근성 개선을 위해
aria-pressed속성 추가를 권장합니다:
<TogglePrimitive.Root
ref={ref}
className={cn(toggleVariants({ variant, size, className }))}
+ aria-pressed="false"
{...props}
/>토글 컴포넌트의 접근성을 검증하기 위해 다음 스크립트를 실행하세요:
🧰 Tools
🪛 eslint
[error] 1-1: Replace "use·client" with 'use·client';
(prettier/prettier)
[error] 3-7: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 3-3: Replace "react" with 'react';
(prettier/prettier)
[error] 4-4: Replace "@radix-ui/react-toggle" with '@radix-ui/react-toggle';
(prettier/prettier)
[error] 5-5: Replace "class-variance-authority" with 'class-variance-authority';
(prettier/prettier)
[error] 7-7: Replace "@src/utils" with '@src/utils';
(prettier/prettier)
[error] 10-10: Replace "inline-flex·items-center·justify-center·gap-2·rounded-md·text-sm·font-medium·transition-colors·hover:bg-muted·hover:text-muted-foreground·focus-visible:outline-none·focus-visible:ring-1·focus-visible:ring-ring·disabled:pointer-events-none·disabled:opacity-50·data-[state=on]:bg-accent·data-[state=on]:text-accent-foreground·[&_svg]:pointer-events-none·[&_svg]:size-4·[&_svg]:shrink-0" with 'inline-flex·items-center·justify-center·gap-2·rounded-md·text-sm·font-medium·transition-colors·hover:bg-muted·hover:text-muted-foreground·focus-visible:outline-none·focus-visible:ring-1·focus-visible:ring-ring·disabled:pointer-events-none·disabled:opacity-50·data-[state=on]:bg-accent·data-[state=on]:text-accent-foreground·[&_svg]:pointer-events-none·[&_svg]:size-4·[&_svg]:shrink-0'
(prettier/prettier)
[error] 14-14: Replace "bg-transparent" with 'bg-transparent'
(prettier/prettier)
[error] 15-16: Replace ⏎··········"border·border-input·bg-transparent·shadow-sm·hover:bg-accent·hover:text-accent-foreground" with ·'border·border-input·bg-transparent·shadow-sm·hover:bg-accent·hover:text-accent-foreground'
(prettier/prettier)
[error] 19-19: Replace "h-9·px-2·min-w-9" with 'h-9·px-2·min-w-9'
(prettier/prettier)
[error] 20-20: Replace "h-8·px-1.5·min-w-8" with 'h-8·px-1.5·min-w-8'
(prettier/prettier)
[error] 21-21: Replace "h-10·px-2.5·min-w-10" with 'h-10·px-2.5·min-w-10'
(prettier/prettier)
[error] 25-25: Replace "default" with 'default'
(prettier/prettier)
[error] 26-26: Replace "default" with 'default'
(prettier/prettier)
[error] 28-28: Insert ,
(prettier/prettier)
[error] 29-29: Insert ;
(prettier/prettier)
[error] 33-34: Delete ⏎···
(prettier/prettier)
[error] 36-40: Replace ⏎····ref={ref}⏎····className={cn(toggleVariants({·variant,·size,·className·}))}⏎····{...props}⏎· with ·ref={ref}·className={cn(toggleVariants({·variant,·size,·className·}))}·{...props}
(prettier/prettier)
[error] 41-41: Insert ;
(prettier/prettier)
[error] 43-43: Insert ;
(prettier/prettier)
[error] 45-45: Insert ;
(prettier/prettier)
packages/web/package.json (1)
24-25: 의존성이 적절하게 추가되었습니다!
새로운 캘린더 기능을 위한 의존성들이 올바르게 추가되었습니다.
Also applies to: 39-39, 51-51
packages/web/src/modules/i18n/locales/ko/translation.json (1)
86-88: 번역이 자연스럽게 추가되었습니다!
그리드와 캘린더 보기에 대한 한글 번역이 명확하고 일관성 있게 추가되었습니다.
packages/web/src/modules/i18n/locales/en/translation.json (1)
86-88: 번역이 명확하고 일관성이 있습니다.
뷰 타입에 대한 새로운 번역이 적절하게 추가되었습니다. 그리드 뷰와 캘린더 뷰의 번역이 직관적이고 이해하기 쉽습니다.
다만, 한가지 제안드립니다:
- 한국어 번역 파일(
ko/translation.json)에도 동일한 키가 추가되었는지 확인해주세요.
✅ Verification successful
번역이 모든 언어 파일에 올바르게 추가되었습니다.
한국어 번역 파일에 새로운 키들이 적절하게 추가되어 있는 것을 확인했습니다. 그리드 뷰와 캘린더 뷰에 대한 번역이 자연스럽게 되어있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 한국어 번역 파일에서 새로운 키 확인
rg '"grid"|"calendar"' packages/web/src/modules/i18n/locales/ko/
Length of output: 229
packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
📜 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 (7)
package.json(1 hunks)packages/web/src/app/[lng]/globals.css(1 hunks)packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx(1 hunks)packages/web/src/app/[lng]/memos/components/MemoView/ToggleView.tsx(1 hunks)packages/web/src/app/[lng]/memos/components/MemoView/index.tsx(2 hunks)packages/web/src/modules/i18n/locales/en/translation.json(2 hunks)packages/web/src/modules/i18n/locales/ko/translation.json(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- package.json
- packages/web/src/app/[lng]/memos/components/MemoView/ToggleView.tsx
- packages/web/src/modules/i18n/locales/en/translation.json
- packages/web/src/modules/i18n/locales/ko/translation.json
🔇 Additional comments (6)
packages/web/src/app/[lng]/memos/components/MemoView/index.tsx (3)
4-4: 타입과 컴포넌트 임포트가 잘 구성되어 있습니다.
코드가 깔끔하게 구성되어 있으며, 필요한 타입과 컴포넌트들이 적절히 임포트되어 있습니다.
Also applies to: 17-17
36-42: 메모 총 개수 표시와 뷰 토글 UI가 잘 구현되어 있습니다.
사용자 경험을 개선하기 위한 UI 요소들이 적절히 배치되어 있습니다. 메모 개수 표시와 뷰 전환 기능이 직관적으로 구현되어 있습니다.
43-47: 뷰 전환 로직이 명확하게 구현되어 있습니다.
조건부 렌더링을 통한 뷰 전환이 깔끔하게 구현되어 있습니다. 그리드와 캘린더 뷰 간의 전환이 자연스럽게 이루어질 것으로 예상됩니다.
packages/web/src/app/[lng]/globals.css (1)
97-115: 다크 모드 스타일링이 잘 구현되어 있습니다.
다크 모드에서의 캘린더 컴포넌트 스타일링이 체계적으로 구현되어 있습니다. 배경색, 텍스트 색상 등이 다크 모드에 맞게 잘 조정되어 있습니다.
packages/web/src/app/[lng]/memos/components/MemoView/MemoCalendar.tsx (2)
38-45: 메모 날짜 처리에 대한 유효성 검사가 필요합니다.
이전 리뷰 코멘트와 동일한 이슈가 여전히 존재합니다. 날짜 파싱에 대한 에러 처리가 필요합니다.
128-143: 국제화(i18n) 처리가 잘 구현되어 있습니다.
캘린더 컴포넌트의 모든 텍스트가 i18n을 통해 적절히 처리되어 있습니다. 다국어 지원이 체계적으로 구현되어 있습니다.
| // @ts-expect-error: TODO: fix this | ||
| date: ({ day }) => { |
There was a problem hiding this comment.
TypeScript 타입 에러를 무시하고 있습니다.
@ts-expect-error 주석으로 타입 에러를 무시하고 있습니다. 이는 향후 타입 안정성 문제를 일으킬 수 있습니다.
타입 정의를 올바르게 수정하여 타입 에러를 해결하는 것을 권장드립니다.
PR의 목적
작업 목록
PR 체크리스트
Summary by CodeRabbit
새로운 기능
MemoCalendar컴포넌트 추가.ToggleView컴포넌트 추가.버그 수정
문서화