From 240fbe01245b72867be65a281f1d8140f1b48d42 Mon Sep 17 00:00:00 2001 From: 00kang Date: Sat, 25 Oct 2025 23:46:24 +0900 Subject: [PATCH 1/8] Style:#317 - apply app background and full-height to --- src/app/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7f7a48de..ce948891 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -62,7 +62,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo return ( - + {children} From 310c1b72c8eeba6edd027e16d214e4920f485aed Mon Sep 17 00:00:00 2001 From: 00kang Date: Sat, 25 Oct 2025 23:47:33 +0900 Subject: [PATCH 2/8] Feat:#317 - center page content and add md rail offset --- src/app/(main)/dashboard/page.tsx | 38 ++++++++++++++++--------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx index 75c10991..6a4f37e9 100644 --- a/src/app/(main)/dashboard/page.tsx +++ b/src/app/(main)/dashboard/page.tsx @@ -5,30 +5,32 @@ import GoalListDashboardSection from '@/components/goals/GoalListDashboardSectio import HeatmapSection from '@/components/heatmaps/HeatmapSection'; import ScheduleSection from '@/components/schedule/ScheduleSection'; import TimerWidget from '@/components/timer/TimerWidget'; -import { cn } from '@/lib/utils'; export default function DashboardPage() { return ( -
- {/* 모바일/태블릿: 세로 스택 */} -
- - - - -
- - {/* PC: 복합 레이아웃 */} -
-
+
+
+ {/* 모바일/태블릿: 세로 스택 */} +
-
- - -
+ + +
- + {/* PC: 복합 레이아웃 */} +
+
+ + +
+ + +
+
+ + +
From f3fb5c6967c744828a1f0e78872c5cb68081fd74 Mon Sep 17 00:00:00 2001 From: 00kang Date: Sat, 25 Oct 2025 23:48:04 +0900 Subject: [PATCH 3/8] Refactor:#317 - use fixed overlay panel and persistent md rail --- src/components/sidebar/Sidebar.tsx | 174 ++++++++++++----------- src/components/sidebar/SidebarHeader.tsx | 2 +- 2 files changed, 94 insertions(+), 82 deletions(-) diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 0f6e6edf..774ccca8 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -31,94 +31,106 @@ export default function Sidebar() { const { isOpen, setIsOpen } = useSidebar(); const { openGoalModal } = useModalStore(); - return isOpen ? ( -
-
- -
- -
-
- -
- -
- -
- -
- }> - }> - - - -
- -
- -
-
- -
- ) : ( + return ( <> + {/* 오버레이 */}
-
- 로고 이미지 -
- - -
- -
-
-
- 로고 이미지 -
- FlowIt +
+ +
+ +
+ +
+ +
+ +
+ +
+ }> + }> + + + +
+ +
+ +
+ +
+ ) : ( + <> +
+
+ 로고 이미지 +
+ + +
- -
+
+
+
+ 로고 이미지 +
+ FlowIt +
+ + +
+ + )} ); } diff --git a/src/components/sidebar/SidebarHeader.tsx b/src/components/sidebar/SidebarHeader.tsx index 6ce82964..9c85a4e9 100644 --- a/src/components/sidebar/SidebarHeader.tsx +++ b/src/components/sidebar/SidebarHeader.tsx @@ -16,7 +16,7 @@ export default function SidebarHeader({ setIsOpen }: SidebarHeaderProps) { }; return ( -
+
로고 이미지 From 45a92a49d7563691663685651e15378314f3e49a Mon Sep 17 00:00:00 2001 From: 00kang Date: Sat, 25 Oct 2025 23:48:55 +0900 Subject: [PATCH 4/8] Style:#317 - center cards on small and release centering on lg --- src/components/ui/Card.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx index 6e5dfc45..a0a7d8a7 100644 --- a/src/components/ui/Card.tsx +++ b/src/components/ui/Card.tsx @@ -9,11 +9,12 @@ const cardVariants = cva('rounded-20 flex flex-col gap-16 px-14 py-20 md:px-20', gray: 'bg-cardContainer', }, size: { - auto: 'w-fit', - heatmap: 'h-625 w-full min-w-343 md:h-600 md:max-w-636 lg:h-548 lg:max-w-536', - calendar: 'w-full min-w-343 md:max-w-636 lg:h-368 lg:max-w-536', - schedule: 'h-auto min-h-140 min-w-343 md:max-w-636 lg:h-168 lg:max-w-536', - goal: 'max-h-1146 w-343 w-full md:min-h-428 md:max-w-636 lg:h-388 lg:min-h-388 lg:max-w-1096', + auto: 'mx-auto w-fit lg:mx-0', + heatmap: 'mx-auto h-625 w-full min-w-343 md:h-600 md:max-w-636 lg:mx-0 lg:h-548 lg:max-w-536', + calendar: 'mx-auto w-full min-w-343 md:max-w-636 lg:mx-0 lg:h-368 lg:max-w-536', + schedule: + 'mx-auto h-auto min-h-140 min-w-343 md:max-w-636 lg:mx-0 lg:h-auto lg:max-w-536 lg:flex-1', + goal: 'mx-auto max-h-1146 w-full min-w-343 md:min-h-428 md:max-w-636 lg:mx-0 lg:h-388 lg:min-h-388 lg:max-w-1096', }, }, defaultVariants: { From 06b20d52e5e1aaaf18f5c390a4c68dbac5aa7acb Mon Sep 17 00:00:00 2001 From: 00kang Date: Sat, 25 Oct 2025 23:49:18 +0900 Subject: [PATCH 5/8] Chore:#317 - raise lg breakpoint to 1440px --- src/styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 8ed94634..3cd66f73 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -12,7 +12,7 @@ ======================================================================== */ --breakpoint-sm: 375px; --breakpoint-md: 744px; - --breakpoint-lg: 1024px; + --breakpoint-lg: 1440px; --breakpoint-xl: 1337px; /* ======================================================================== Colors (색상) From 46608a070967e3e321472bf7e238ee47c5a0a227 Mon Sep 17 00:00:00 2001 From: 00kang Date: Sun, 26 Oct 2025 00:08:08 +0900 Subject: [PATCH 6/8] Fix:#317 - disable background scroll when overlay is open --- src/components/sidebar/Sidebar.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 774ccca8..83029a34 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Suspense } from 'react'; +import { Suspense, useEffect } from 'react'; import dynamic from 'next/dynamic'; import Image from 'next/image'; @@ -31,6 +31,18 @@ export default function Sidebar() { const { isOpen, setIsOpen } = useSidebar(); const { openGoalModal } = useModalStore(); + // 사이드바 열릴 때 body 스크롤 방지 + useEffect(() => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + return () => { + document.body.style.overflow = ''; + }; + }, [isOpen]); + return ( <> {/* 오버레이 */} From aa7d68c83c6f28a7d133dc8358eb963bc707af6d Mon Sep 17 00:00:00 2001 From: 00kang Date: Tue, 28 Oct 2025 20:00:42 +0900 Subject: [PATCH 7/8] Refactor:#317 - optimize responsive layout for desktop view - Add max-width constraint (1296px) to main content wrapper - Update dashboard page (add flex-1 wrappers for balanced layout) - Replace fixed widths with max/min-width pattern across components for flexible scaling --- src/app/(main)/dashboard/page.tsx | 8 +++++--- src/app/(main)/layout.tsx | 2 +- src/components/calendar/CalendarCell.tsx | 2 +- src/components/calendar/CalendarGrid.tsx | 2 +- src/components/goals/GoalListDashboardSection.tsx | 2 +- src/components/heatmaps/HeatmapCell.tsx | 2 +- src/components/heatmaps/HeatmapLayout.tsx | 2 +- src/components/sidebar/Sidebar.tsx | 2 +- src/components/sidebar/SidebarGoalsList.tsx | 2 +- src/components/ui/Card.tsx | 9 +++++---- 10 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx index 6a4f37e9..3790bfb2 100644 --- a/src/app/(main)/dashboard/page.tsx +++ b/src/app/(main)/dashboard/page.tsx @@ -9,7 +9,7 @@ import TimerWidget from '@/components/timer/TimerWidget'; export default function DashboardPage() { return (
-
+
{/* 모바일/태블릿: 세로 스택 */}
@@ -21,9 +21,11 @@ export default function DashboardPage() { {/* PC: 복합 레이아웃 */}
- +
+ +
-
+
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 94d0e797..918f0380 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -32,7 +32,7 @@ function MainContent({ children }: { children: React.ReactNode }) { return (
-
{children}
+
{children}
); diff --git a/src/components/calendar/CalendarCell.tsx b/src/components/calendar/CalendarCell.tsx index b8551d6d..d5d8657b 100644 --- a/src/components/calendar/CalendarCell.tsx +++ b/src/components/calendar/CalendarCell.tsx @@ -24,7 +24,7 @@ const CalendarCell = ({ date, goals = [], onClick, className }: CalendarCellProp
+ {/* 모바일 상단 헤더 - sm에서만 표시 (태블릿) */}