Feature: History API를 활용하여 Shallow Routing #146
Conversation
|
Warning Rate limit exceeded@guesung has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 11 minutes and 8 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. 📒 Files selected for processing (1)
워크스루이 풀 리퀘스트는 메모 애플리케이션의 날짜 및 시간 처리 방식을 변경합니다. Day.js 라이브러리의 상대 시간 플러그인을 제거하고, 메모 대화 상자의 상호작용 방식을 개선했습니다. 새로운 컴포넌트 변경 사항
관련 가능성 있는 PR
시퀀스 다이어그램sequenceDiagram
participant User
participant MemoGrid
participant MemoItem
participant MemoDialog
participant InitDayjs
User->>MemoGrid: 메모 항목 클릭
MemoGrid->>MemoItem: 대화 상자 ID 설정
MemoItem->>MemoDialog: 메모 ID 전달
MemoDialog->>InitDayjs: 언어 설정
InitDayjs-->>MemoDialog: Day.js 초기화
MemoDialog->>User: 애니메이션된 대화 상자 표시
토끼의 시 🐰
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 comments (1)
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx (1)
시간 표시 형식 불일치 확인됨
현재 구현된
dayjs(memo.created_at).fromNow()방식은 번역 파일의 형식과 일치하지 않습니다. 번역 파일에서는{{time}}플레이스홀더를 사용하는 단순 시간 형식을 기대하고 있습니다.
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx:fromNow()사용을 번역 파일과 일치하도록 수정이 필요합니다.🔗 Analysis chain
Line range hint
95-101: 시간 표시 형식을 재검토해 주세요.translation 파일에서 "ago" 관련 문구가 제거되었다고 하는데, 여기서는 여전히
fromNow()를 사용하고 있습니다. 번역과 실제 구현이 일치하도록 수정이 필요합니다.다음 스크립트로 번역 파일의 변경사항을 확인해 보겠습니다:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check translation files for lastUpdated key changes rg -A 1 '"lastUpdated"' packages/web/src/modules/i18n/locales/Length of output: 387
Script:
#!/bin/bash # Check the implementation of time formatting in MemoCardFooter ast-grep --pattern 'time dateTime={$_} className={$_}' packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx rg -B 5 -A 5 'fromNow\(\)' packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsxLength of output: 314
Script:
#!/bin/bash # Check the complete implementation of MemoCardFooter cat packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx # Search for dayjs usage rg "dayjs|fromNow" packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsxLength of output: 263
Script:
#!/bin/bash # Find the correct path first fd -t f "index.tsx" -e tsx | grep "MemoCardFooter" # Then use the path with proper quoting fd -t f "index.tsx" -e tsx | grep "MemoCardFooter" | xargs cat # Search for dayjs usage in the found file fd -t f "index.tsx" -e tsx | grep "MemoCardFooter" | xargs rg "dayjs|fromNow"Length of output: 3877
🧹 Nitpick comments (4)
packages/web/src/app/[lng]/(auth)/memos/_components/MemoView/MemoItem.tsx (2)
41-44: History API 구현이 적절합니다만, 타입 안전성 개선이 필요합니다.History state 타입이 명시적으로 정의되어 있지 않아 타입 안전성이 보장되지 않습니다.
다음과 같이 타입을 명시적으로 정의하는 것을 추천드립니다:
interface MemoHistoryState { openedMemoId: number; } // 사용시: history.pushState<MemoHistoryState>( { openedMemoId: Number(id) }, '', searchParams.getUrl() );
Line range hint
67-76: 메모이제이션 최적화 개선 필요현재 메모이제이션 비교 로직이 불필요하게 제한적입니다. isHovered나 lng과 같은 props도 비교에 포함되어야 합니다.
다음과 같이 모든 관련 props를 비교하는 것을 추천드립니다:
(prevProps, nextProps) => { return ( prevProps.memo.id === nextProps.memo.id && prevProps.isSelected === nextProps.isSelected && prevProps.memo.memo === nextProps.memo.memo && prevProps.memo.category === nextProps.memo.category && prevProps.lng === nextProps.lng && prevProps.isSelecting === nextProps.isSelecting ); }packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx (1)
72-75: History API를 활용한 Shallow Routing이 잘 구현되었습니다.
router.replace대신history.pushState를 사용하여 브라우저 히스토리를 관리하는 방식이 적절합니다. 다만, 타입 안정성을 위해 state 객체의 타입을 명시하는 것이 좋을 것 같습니다.- history.pushState({ openedMemoId: null }, '', searchParams.getUrl()); + interface HistoryState { + openedMemoId: number | null; + } + history.pushState<HistoryState>({ openedMemoId: null }, '', searchParams.getUrl());packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx (1)
Line range hint
3-14: import 구문 정렬이 필요합니다.ESLint 규칙에 따라 import 구문을 정렬해 주세요.
'use client'; + import { MouseEvent, PropsWithChildren } from 'react'; + import dayjs from 'dayjs'; + import { HeartIcon } from 'lucide-react'; + import { useRouter } from 'next/navigation'; + + import { useMemoPatchMutation } from '@extension/shared/hooks'; + import { useSearchParams } from '@extension/shared/modules/search-params'; + import { GetMemoResponse } from '@extension/shared/types'; + import { cn } from '@extension/shared/utils'; + import { Badge, Button, CardFooter, toast, ToastAction } from '@src/components/ui'; + import { LanguageType } from '@src/modules/i18n'; + import useTranslation from '@src/modules/i18n/client'; - import { useMemoPatchMutation } from '@extension/shared/hooks'; - import { useSearchParams } from '@extension/shared/modules/sear 8000 ch-params'; - import { GetMemoResponse } from '@extension/shared/types'; - import { cn } from '@extension/shared/utils'; - import { Badge, Button, CardFooter, toast, ToastAction } from '@src/components/ui'; - import { LanguageType } from '@src/modules/i18n'; - import useTranslation from '@src/modules/i18n/client'; - import { HeartIcon } from 'lucide-react'; - import { useRouter } from 'next/navigation'; - import { MouseEvent, PropsWithChildren } from 'react'; - import MemoOption from './MemoOption'; - import dayjs from 'dayjs';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx(1 hunks)packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx(4 hunks)packages/web/src/app/[lng]/(auth)/memos/_components/MemoView/MemoGrid.tsx(4 hunks)packages/web/src/app/[lng]/(auth)/memos/_components/MemoView/MemoItem.tsx(2 hunks)packages/web/src/app/[lng]/layout.tsx(2 hunks)packages/web/src/app/_components/InitDayjs.tsx(1 hunks)packages/web/src/app/_components/index.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)
🧰 Additional context used
🪛 eslint
packages/web/src/app/_components/index.ts
[error] 1-4: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/app/_components/InitDayjs.tsx
[error] 3-9: Run autofix to sort these imports!
(simple-import-sort/imports)
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx
[error] 3-14: Run autofix to sort these imports!
(simple-import-sort/imports)
packages/web/src/app/[lng]/layout.tsx
[error] 1-6: Run autofix to sort these imports!
(simple-import-sort/imports)
packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx
[error] 10-10: 'AnimatePresence' is defined but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (10)
packages/web/src/app/_components/index.ts (1)
4-4: InitDayjs 컴포넌트 내보내기가 추가되었습니다.컴포넌트 내보내기가 올바르게 구현되었습니다.
🧰 Tools
🪛 eslint
[error] 1-4: Run autofix to sort these exports!
(simple-import-sort/exports)
packages/web/src/app/[lng]/layout.tsx (1)
25-26: InitDayjs 컴포넌트 배치가 적절합니다.모든 프로바이더 이후에 InitDayjs 컴포넌트를 배치한 것이 올바른 구현입니다.
packages/web/src/app/[lng]/(auth)/memos/_components/MemoDialog/index.tsx (2)
18-21: 인터페이스가 적절하게 정의되었습니다.다이얼로그 상태 관리를 위한 props가 명확하게 정의되어 있습니다.
97-134: 애니메이션이 적절하게 구현되었습니다.Framer Motion을 사용한 레이아웃 애니메이션이 잘 구현되어 있습니다. 각 섹션별로
layoutId를 부여하여 부드러운 전환 효과를 제공합니다.packages/web/src/app/[lng]/(auth)/memos/_components/MemoView/MemoGrid.tsx (3)
176-181: 초기 다이얼로그 상태 설정이 적절합니다.URL 파라미터를 통한 초기 상태 설정이 잘 구현되어 있습니다.
183-192: 브라우저 히스토리 관리가 잘 구현되었습니다.
popstate이벤트 리스너를 통한 브라우저 히스토리 관리가 적절하게 구현되어 있습니다. 컴포넌트 언마운트 시 이벤트 리스너를 정리하는 것도 잘 처리되어 있습니다.
253-253: 상태 관리 및 다이얼로그 렌더링이 적절합니다.
setDialogMemoId를 props로 전달하고 조건부 렌더링을 통해 다이얼로그를 표시하는 방식이 잘 구현되어 있습니다.Also applies to: 259-259
packages/web/src/modules/i18n/locales/ko/translation.json (1)
24-24: 번역이 적절하게 수정되었습니다.시간 표시 형식이 단순화되어 더 명확해졌습니다.
packages/web/src/modules/i18n/locales/en/translation.json (1)
24-24: 상대적 시간 표시에서 절대적 시간 표시로의 변경이 적절해 보입니다.변경된 내용이 명확하고 일관성이 있습니다. 한국어 번역 파일에서도 동일한 변경이 이루어졌는지 확인이 필요합니다.
다음 스크립트를 실행하여 한국어 번역 파일의 일관성을 확인하겠습니다:
✅ Verification successful
번역 일관성이 확인되었습니다.
영문과 한글 번역 모두 절대적 시간 표시 방식으로 적절하게 변경되었으며, 각 언어의 자연스러운 어순을 잘 반영하고 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: 한국어 번역 파일에서 lastUpdated 키의 값을 확인합니다. rg -U --json "lastUpdated" packages/web/src/modules/i18n/locales/ko/translation.json | jq -r '.data.lines.text'Length of output: 160
packages/web/src/app/[lng]/(auth)/memos/_components/MemoCardFooter/index.tsx (1)
Line range hint
31-36: 라우팅 구현이 잘 되었습니다.History API를 활용한 Shallow Routing이 적절하게 구현되었습니다.
scroll: false옵션을 통해 불필요한 스크롤 동작을 방지한 것이 좋습니다.
Summary by CodeRabbit
새로운 기능
버그 수정
문서화