[REFACTOR] 주간 통계 페이지 디자인 수정사항 반영 #295
Conversation
WalkthroughThis update refactors the weekly statistics page's UI and mock data to align with new design specifications. It modifies date formatting, restructures mock data, adjusts component layouts and styles, introduces new styled components, and updates logic for mood data normalization and today marker display. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WeekStatisticsMain
participant WeekDayList
participant WeekDayItem
participant WeekCategoryList
participant MoodDataNormalizer
User->>WeekStatisticsMain: Visit Weekly Statistics Page
WeekStatisticsMain->>MoodDataNormalizer: Normalize moodCounts
MoodDataNormalizer-->>WeekStatisticsMain: moodCounts (all categories)
WeekStatisticsMain->>WeekDayList: Render weekDays
WeekDayList->>WeekDayItem: For each day, render Day
WeekDayItem->>WeekDayItem: Display TodayMarker if today
WeekStatisticsMain->>WeekCategoryList: Render categories with new title
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
🔭 Outside diff range comments (1)
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayItem/index.tsx (1)
21-27: Normalize thetodaytimestamp to midnight to avoid edge-case mis-classification
todaykeeps the current hours/minutes whilecurrentDateis set to 00:00.
If the user opens the page precisely at 00:00,currentDate > todaywill befalsefor tomorrow, unintentionally enabling navigation to a future date for ~1 second.
Align both sides by zeroingtodayas well:- const today = new Date(); + const today = new Date(); + today.setHours(0, 0, 0, 0);
🧹 Nitpick comments (4)
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayList.styled.ts (1)
21-24: Prefer semantic heading element over bare div
WeekDateRangerepresents a section title/date range and would benefit accessibility/searchability if rendered ash3(or appropriate heading level) instead of a genericdiv.-export const WeekDateRange = styled.div` +export const WeekDateRange = styled.h3`frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryList.styled.ts (1)
9-13: Use heading tag for list title
Similar to the previous comment,CategoryListTitleis effectively a section heading. Switching fromdivtoh3/ h4improves semantic structure and screen-reader navigation at virtually zero cost.-export const CategoryListTitle = styled.div` +export const CategoryListTitle = styled.h3`frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayItem/index.tsx (1)
37-52: Minor accessibility touch-ups
- When
<S.DayButton>isdisabled, it is automatically removed from tab order, but visually nothing indicates it’s inactive. Consider addingaria-disabledor style feedback for keyboard users.Iconappears decorative; addaria-hiddento prevent redundant screen-reader narration if not already handled inside the component.frontend/src/mocks/data/statistics/weekStatistics.json (1)
4-25: Consider using more recent mock dates.The mock data uses July 2025 dates, which appears to be the current timeframe. Consider whether these dates should be more dynamic or relative to the current date for better testing scenarios.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
frontend/src/mocks/data/statistics/weekStatistics.json(1 hunks)frontend/src/pages/WeekStatisticsPage/WeekStatisticsPage.utils.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/WeekCategoryItem.styled.ts(2 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/index.tsx(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)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayItem/WeekDayItem.styled.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayItem/index.tsx(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayList.styled.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/index.tsx(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekOverview/WeekOverview.styled.ts(4 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekOverview/index.tsx(0 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekStatisticsMain.styled.ts(1 hunks)frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekOverview/index.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/index.tsx (1)
frontend/src/pages/WeekStatisticsPage/WeekStatisticsPage.utils.ts (1)
getWeekDateRange(36-43)
🔇 Additional comments (18)
frontend/src/pages/WeekStatisticsPage/WeekStatisticsPage.utils.ts (1)
42-42: Date format simplification looks good.The updated date format provides a cleaner, more concise representation while maintaining Korean day-of-week labels. This change aligns well with the design refactoring objectives.
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekOverview/WeekOverview.styled.ts (3)
9-9: Border-radius adjustment improves visual consistency.The reduced border-radius from 2.8rem to 1.6rem creates a more subtle, refined appearance that likely aligns better with the overall design system.
42-42: Typography hierarchy improvements look good.The color change from gray400 to gray900 for CompareTitle and the font upgrade from body15Med to headline17Med for CompareValue enhance readability and establish better visual hierarchy.
Also applies to: 46-46
62-62: Mood section styling updates enhance user experience.The increased gap spacing (0.8rem to 1.6rem) and typography improvements (label13Med to label14Med, body16 to heading20) create better visual separation and hierarchy in the mood display section.
Also applies to: 74-76, 79-81
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekStatisticsMain.styled.ts (1)
13-13: Confirm bottom padding necessity on WeekStatisticsPageI didn’t find any fixed or floating elements within the WeekStatisticsPage components (e.g., no local bottom-fixed nav, modal, or floating button) that would strictly require an 8rem bottom gap. Please double-check that:
- This padding is intended to accommodate a global bottom navigation or overlay on this page.
- It doesn’t introduce excessive whitespace on pages or viewports where no bottom overlay is present.
If this spacing is for a global layout element, consider adding a brief comment in the styled file to clarify its purpose.
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/index.tsx (1)
79-79: Good use of styled component for consistent styling.Replacing the plain div with the styled
S.WeekDateRangecomponent ensures consistent styling for the date range display and aligns well with the updated date format from the utils file.frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/index.tsx (1)
17-17: Good addition of section title for better UX.Adding the "수행한 목표" (Completed Goals) title improves the information architecture and makes the interface more self-explanatory for users.
frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/index.tsx (1)
19-21: Element order change LGTM
Re-ordering<S.CategoryTime>after<CategoryBadge>does not affect logic and better matches the new visual hierarchy.frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekCategoryList/WeekCategoryItem/WeekCategoryItem.styled.ts (1)
28-32: Style tweak looks good
Darker text color and smaller body font make the usage time consistent with other typography. No issues found.frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/index.tsx (3)
12-16: Well-structured default mood data constant.The
DEFAULT_MOOD_DATAconstant provides a clear contract for expected mood categories and ensures consistent data structure. The use ofas constprevents accidental mutations.
18-27: Excellent data normalization implementation.The
normalizeMoodDatafunction effectively handles missing mood data by ensuring all predefined categories are present with appropriate fallback values. The logic is clean and defensive.
52-52: Improved data consistency with normalization.Using
normalizeMoodDataensures the mood data structure is consistent regardless of what the server returns, preventing potential runtime errors from missing mood categories.frontend/src/mocks/data/statistics/weekStatistics.json (2)
3-3: memberCreateDate format verifiedThe new
memberCreateDatevalue ("YYYY-MM-DD") is ISO-8601 compliant and is parsed correctly by the frontend components (e.g. new Date(memberCreateDate) in WeekDayList, WeekDayItem, DayDate). No changes are required.
27-58: No Action Needed: categoryTodoCounts structure and ordering are correctThe mock data in
weekStatistics.jsonmatches the expected props for both components:
- Week API & mocks define each entry as
{ category: string; count: number; usageTime: number }, matchingWeekCategoryList’scategoryRankingshape.- Day API & mocks use
{ category: string; count: number }as expected byDayCategoryAchievement.- The array order reflects server-side ranking (descending
usageTime) and is intentionally consumed in display order.frontend/src/pages/WeekStatisticsPage/components/WeekStatisticsMain/WeekDayList/WeekDayItem/WeekDayItem.styled.ts (4)
18-23: Good addition of semantic container components.The
IconContainerprovides consistent layout for icons with fixed height and centered content, improving visual consistency.
25-40: Improved Day component with cleaner prop interface.Removing the
$isTodayprop simplifies the component interface while addingposition: relativesupports the new absolutely positionedTodayMarker. The color logic is now focused solely on the disabled state.
42-47: Consistent container styling for usage time.The
UsageTimeContainermirrors theIconContainerstyling, providing layout consistency across the component.
54-62: Well-positioned today marker component.The
TodayMarkeris properly positioned as an absolute element with centered alignment. The green color provides good visual distinction for the current day.
Issue Number
close #294
As-Is
To-Be
Check List
Test Screenshot
(Optional) Additional Description
Summary by CodeRabbit
New Features
Style
Bug Fixes
Chores
Refactor
Revert