[REFACTOR] 일간 통계 디자인 수정사항 반영 #300
Conversation
WalkthroughThis update modifies mock JSON data for daily and weekly statistics, adjusts styling and layout for several components on the Day and Week Statistics pages, and enhances the display logic for empty states and feedback. New styled components are introduced, and typography, spacing, and image usage are refined throughout the relevant UI components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DayStatisticsPage
participant DayCategoryAchievement
participant DayFeedback
User->>DayStatisticsPage: Visits Day Statistics Page
DayStatisticsPage->>DayCategoryAchievement: Render with categories
DayCategoryAchievement-->>DayStatisticsPage: Rendered (with index, badge, count or empty state)
DayStatisticsPage->>DayFeedback: Render with feedbacks
DayFeedback-->>DayStatisticsPage: Rendered (with mood image, mood text, memo or empty state)
sequenceDiagram
participant User
participant WeekStatisticsPage
participant WeekCategoryList
User->>WeekStatisticsPage: Visits Week Statistics Page
WeekStatisticsPage->>WeekCategoryList: Render with categoryRanking
alt categoryRanking not empty
WeekCategoryList-->>WeekStatisticsPage: Rendered list of WeekCategoryItem
else
WeekCategoryList-->>WeekStatisticsPage: Rendered empty state message
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Possibly related PRs
Suggested labels
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
CodeRabbit Configuration File (
|
![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 (3)
frontend/src/pages/DayStatisticsPage/components/DayTimeOverview/DayTimeOverview.styled.ts (1)
10-12: Use theme radius token instead of a magic-numberHard-coding
1.2rembreaks consistency if the design-system radius changes. Considerborder-radius: ${({ theme }) => theme.radii.md};(or an equivalent token) to stay DRY and future-proof.frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryList.styled.ts (1)
15-23: Promote empty-state component re-use
CategoryListEmptyduplicates styling already introduced for the daily view (DayCategoryAchievementEmpty). Extract a shared “EmptyStateMessage” styled component to avoid divergence and simplify maintenance.frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/DayCategoryAchievement.styled.ts (1)
47-55: DRY up empty-state styles
DayCategoryAchievementEmptyrepeats the same centering & spacing rules seen in other components (e.g.,CategoryListEmpty). Extracting a shared styled component (or a mixin) will cut duplication and keep future tweaks in one place.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
frontend/src/mocks/data/statistics/dayStatistics.json(2 hunks)frontend/src/mocks/data/statistics/weekStatistics.json(1 hunks)frontend/src/pages/DayStatisticsPage/DayStatisticsPage.styled.ts(1 hunks)frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/DayCategoryAchievement.styled.ts(2 hunks)frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/index.tsx(1 hunks)frontend/src/pages/DayStatisticsPage/components/DayFeedback/DayFeedback.styled.ts(3 hunks)frontend/src/pages/DayStatisticsPage/components/DayFeedback/index.tsx(2 hunks)frontend/src/pages/DayStatisticsPage/components/DayTimeOverview/DayTimeOverview.styled.ts(1 hunks)frontend/src/pages/LandingPage/components/ServiceGuide/GuideSlide/GuideSlide.styled.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/WeekCategoryItem.styled.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryList.styled.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/index.tsx (1)
frontend/src/types/filter.ts (1)
CategoryType(2-2)
frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/DayCategoryAchievement.styled.ts (1)
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/WeekCategoryItem.styled.ts (2)
CategoryIndex(23-26)CategoryCount(34-37)
🔇 Additional comments (22)
frontend/src/pages/LandingPage/components/ServiceGuide/GuideSlide/GuideSlide.styled.ts (1)
25-28: Verify image responsiveness after switching to%width
width: 65%scales with the container but removes the previousmax-widthsafeguard. On wide screens this could stretch the asset or impact clarity. Please confirm:
- Aspect ratio remains intact (
object-fit/ explicit height not needed?).- The image never exceeds its intended pixel size.
If issues appear, combine
width: 65%with a reasonablemax-width.frontend/src/mocks/data/statistics/weekStatistics.json (1)
26-34: Confirm consumer logic handles new / negative fieldsThe added keys (
totalTodoCount,lastWeekDiff,totalAvailableTime,moodCounts) look good syntactically. Ensure the UI:
- Formats negative
lastWeekDiffcorrectly (e.g., prefixes “-” vs. “↓470 분”).- Gracefully handles an empty or single-entry
moodCountsarray.No action needed here if already covered by unit tests.
frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/DayCategoryAchievement.styled.ts (2)
10-13: Typography upgrade looks correctSwitching to the medium font variant aligns with other PR changes.
37-40: Check index colour contrast
CategoryIndexusesgray300; with large text this may still fall below WCAG AA if the background is white. Please run a quick contrast check and pick a darker shade if necessary.frontend/src/pages/DayStatisticsPage/DayStatisticsPage.styled.ts (1)
18-20: Good spacing adjustments for better visual hierarchy.The reduced gap (4rem → 3.2rem) creates tighter spacing between elements, while the added bottom padding (8rem) provides better scrolling experience and prevents content cutoff. These refinements align well with UI polish objectives.
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/WeekCategoryItem.styled.ts (1)
24-25: Enhanced typography for better visual prominence.The lighter color (gray300) and larger font size (title28) improve the visibility and readability of category indices. These changes create better visual hierarchy and align with the design system updates.
frontend/src/pages/DayStatisticsPage/components/DayFeedback/index.tsx (2)
3-11: Well-implemented mood image enhancement.The addition of mood images with proper mapping improves the visual feedback experience. The image imports are clean and the
MOOD_IMAGESrecord provides a maintainable way to associate mood states with their corresponding images.
33-38: Good structure for mood display with image and text.The new
DayFeedbackMoodContainerproperly groups the mood image and text together. The alt text usage supports accessibility, and the layout enhances the visual hierarchy of the feedback display.frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/index.tsx (1)
18-24: Excellent empty state implementation.The conditional rendering properly handles the case when no categories exist, showing a user-friendly message "수행한 목표가 없어요". This improves the UX by providing clear feedback instead of showing an empty list, and follows standard React patterns.
frontend/src/pages/DayStatisticsPage/components/DayCategoryAchievement/index.tsx (2)
16-16: Improved title for better clarity.The title change from "목표별 수행 개수" to "수행한 목표" is more concise and user-friendly, making it consistent with the weekly statistics component.
17-31: Comprehensive enhancement with empty state and indexed categories.The implementation adds several valuable improvements:
- Conditional rendering provides proper empty state handling
- Category index numbers improve readability and provide ranking context
- New container structure organizes the layout better
- Empty state message is consistent with other components
- All changes enhance UX while maintaining existing functionality
frontend/src/mocks/data/statistics/dayStatistics.json (3)
3-5: New fields added to support enhanced statistics features.The addition of
memberCreateDateandtotalTodoCountfields, along with the updatedtotalUsageTimevalue, appear to support enhanced daily statistics functionality. The changes align with the PR's objective of reflecting design modifications.
8-9: Feedback mood and memo updated for testing.The change from "DISSATISFIED" to "MODERATE" mood with an updated memo provides better test coverage for different mood states in the UI.
22-36: Mock data aligns with DayStatistics modelAll changes to
categoryTodoCountsinfrontend/src/mocks/data/statistics/dayStatistics.jsonmatch theDayStatisticsinterface infrontend/src/api/statistics.ts—which definescategoryasstringandcountasnumberwith no enum constraints. The removal of"OTHERS"and"READING", reordering of"HOBBY", and adjusted counts are purely mock-data refinements and won’t violate the API contract.• DayStatistics.categoryTodoCounts:
– category: string
– count: numberNo enum or union type is enforced on categories in the front end. Changes look correct.
frontend/src/pages/DayStatisticsPage/components/DayFeedback/DayFeedback.styled.ts (8)
11-11: Typography improved with medium weight font.The change to medium weight font improves visual hierarchy and consistency across the component.
18-27: Enhanced scrollbar handling and alignment.The alignment change to
flex-startand comprehensive scrollbar hiding across different browsers (webkit, Firefox, IE/Edge) improves the component's visual consistency and cross-browser compatibility.
33-33: Minimum height added for consistent item sizing.The
min-height: 12remensures consistent feedback item dimensions, improving visual alignment in the list.
44-48: New mood container component for better layout.The
DayFeedbackMoodContainerprovides proper spacing and alignment for mood-related elements, supporting the enhanced design with mood images.
51-51: Mood text typography enhanced.The change to
headline17Medimproves the visual prominence of mood information.
55-59: New mood image component added.The
DayFeedbackMoodImagecomponent with fixed dimensions and circular shape provides consistent visual representation of mood states.
62-62: Memo text styling improved.The medium weight font enhances readability and maintains typography consistency.
71-74: Empty state styling enhanced.The change from fixed height to
flex-grow: 1and medium weight font improves the empty state's visual integration and typography consistency.
Issue Number
close #299
As-Is
To-Be
Check List
Test Screenshot
(Optional) Additional Description
Summary by CodeRabbit
New Features
Style
Bug Fixes