Fix(client): 리마인드 시간 24시간 내에서만 카드 뜨도록 수정#171
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough리마인드 목록을 다음 24시간 내 remindAt만 표시하도록 필터링하고, RemindCard의 남은 시간 계산에서 기존 +24시간 오프셋을 제거했으며, Badge에 왼쪽 아이콘(leftIcon) 옵션과 countNum 조건부 렌더링을 추가했습니다. 공개 API 시그니처 변경은 없습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as 사용자
participant P as Remind 페이지
participant S as 서버/데이터
participant C as RemindCard
participant B as Badge
U->>P: 리마인드 페이지 진입
P->>S: 기사 목록 요청
S-->>P: articles 반환
P->>P: remindAt ∈ (now, now+24h]로 필터링
P->>B: 각 배지 렌더 (leftIcon 포함)
P->>C: 필터된 카드 렌더
rect rgba(220,245,230,0.25)
note over C: RemindCard는 timeRemaining만 사용해 남은 시간 계산
loop 매 초
C->>C: 남은 시간 갱신 (0이면 종료)
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/design-system/src/components/card/RemindCard.tsx (1)
30-32: 로직 변경이 올바르게 구현되었습니다.24시간 오프셋 제거로 실제 리마인드 시간까지의 남은 시간을 정확히 표시하게 되었습니다. 다만, 주석 처리된 기존 코드(line 31)는 제거하는 것이 코드 정리에 도움이 됩니다.
다음 diff를 적용하여 주석 처리된 코드를 제거하세요:
- // const endTime = new Date(timeRemaining).getTime() + 24 * 60 * 60 * 1000; const endTime = new Date(timeRemaining).getTime();apps/client/src/pages/remind/Remind.tsx (1)
58-69: 24시간 필터링 로직이 정확하게 구현되었습니다.리마인드 시간이 현재 시점 이후이면서 24시간 이내인 아티클만 노출하도록 필터링하는 로직이 요구사항을 올바르게 충족합니다. 다만, 주석 처리된 기존 코드(line 58)는 제거하는 것이 좋습니다.
다음 diff를 적용하여 주석 처리된 코드를 제거하세요:
- // const articlesToDisplay = data?.pages.flatMap((page) => page.articles) ?? []; - const articlesToDisplay =
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/client/src/pages/remind/Remind.tsx(1 hunks)packages/design-system/src/components/card/RemindCard.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (1)
apps/client/src/pages/remind/Remind.tsx (1)
111-129: 배지 카운트 일관성 확인 필요Badge 컴포넌트(
packages/design-system/src/components/badge/Badge.tsx라인 36–50)에서 전달받은countNum을 그대로 렌더링하고 있어, 24시간 필터링된 카드 개수와 배지 숫자가 다를 수 있습니다. 이 동작이 의도된 것인지 확인하고, 배지 카운트에도 동일한 필터를 적용해야 한다면 API 응답 또는 클라이언트 측에서 필터링된 카운트를 사용하도록 로직을 조정해주세요.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/client/src/pages/remind/Remind.tsx(3 hunks)packages/design-system/src/components/badge/Badge.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/client/src/pages/remind/Remind.tsx
🧰 Additional context used
🪛 GitHub Actions: ci
packages/design-system/src/components/badge/Badge.tsx
[error] 1-1: TS6133: 'Icon' is declared but its value is never read. (during build) Command: 'tsc -b && vite build'.
🪛 GitHub Check: lint
packages/design-system/src/components/badge/Badge.tsx
[warning] 1-1:
'Icon' is defined but never used
🔇 Additional comments (3)
packages/design-system/src/components/badge/Badge.tsx (3)
7-7: LGTM!
leftIconprop이 optional로 올바르게 추가되었고,React.ReactNode타입은 다양한 아이콘 컴포넌트를 수용하기에 적합합니다. 기존 API와의 하위 호환성도 유지됩니다.
38-38: LGTM!
leftIconprop이 컴포넌트에 올바르게 추가되었고, 텍스트 앞에 렌더링되어 의미론적으로도 적절합니다. React가 falsy 값을 자동으로 처리하므로 조건부 렌더링 없이도 안전합니다.Also applies to: 44-44
48-52: LGTM!
countNum에 대한 조건부 렌더링 추가는 좋은 개선입니다. 카운트가 0이거나 없을 때 불필요한 배지를 표시하지 않아 UI가 더 깔끔해집니다.
| text="안 읽음" | ||
| countNum={unreadArticleCount} | ||
| // countNum={unreadArticleCount} | ||
| onClick={() => handleBadgeClick('notRead')} | ||
| isActive={activeBadge === 'notRead'} | ||
| /> | ||
| <Badge | ||
| text="읽음" | ||
| countNum={readArticleCount} | ||
| // countNum={readArticleCount} | ||
| onClick={() => handleBadgeClick('read')} |
3 participants
📌 Related Issues
📄 Tasks
리마인드 시간 24시간 내에서만 remind card ui가 뜨도록 로직 수정했습니다.
⭐ PR Point (To Reviewer)
기존에 card 내부에 있던 로직을
map메서드 사용하는remind페이지로 올렸습니다.📷 Screenshot
Summary by CodeRabbit