diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx index 75c10991..2868a603 100644 --- a/src/app/(main)/dashboard/page.tsx +++ b/src/app/(main)/dashboard/page.tsx @@ -5,30 +5,34 @@ 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: 복합 레이아웃 */} +
+
+
+ +
+ +
+ + +
+
+ + +
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 94d0e797..54f3c10f 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -2,7 +2,7 @@ import { usePathname } from 'next/navigation'; -import { SidebarProvider, useSidebar } from '@/app/providers/SidebarProvider'; +import { SidebarProvider } from '@/app/providers/SidebarProvider'; import Sidebar from '@/components/sidebar/Sidebar'; export default function MainLayout({ children }: { children: React.ReactNode }) { @@ -16,13 +16,13 @@ export default function MainLayout({ children }: { children: React.ReactNode }) function SidebarLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname(); const isTodoNoteNewPage = /^\/todo\/[^/]+\/note\/new$/.test(pathname); - const { isOpen } = useSidebar(); return (
+ {children}
); @@ -30,9 +30,9 @@ function SidebarLayout({ children }: { children: React.ReactNode }) { function MainContent({ children }: { children: React.ReactNode }) { return ( -
-
-
{children}
+
+
+
{children}
); 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} 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 - -
- -
- ) : ( + // 모바일/태블릿(< 1440px)에서 사이드바 열릴 때 뒤 컨텐츠 스크롤 방지 + useEffect(() => { + if (isOpen && window.innerWidth < 1440) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + return () => { + document.body.style.overflow = ''; + }; + }, [isOpen]); + + return ( <> + {/* 오버레이 - 모바일/태블릿에서만 표시 */}
-
- 로고 이미지 -
- - -
- -
-
-
- 로고 이미지 -
- FlowIt +
+ +
+ +
+ +
+ +
+ +
+ +
+ }> + }> + + + +
+ +
+ +
+ +
+ ) : ( + <> + {/* 사이드바 닫힘 상태 */} +
+
+ 로고 이미지 +
+ + +
- -
+ {/* 모바일 상단 헤더 - sm에서만 표시 (태블릿) */} +
+
+
+ 로고 이미지 +
+ FlowIt +
+ + +
+ + )} ); } diff --git a/src/components/sidebar/SidebarGoalsList.tsx b/src/components/sidebar/SidebarGoalsList.tsx index 91f655e9..a2ac1494 100644 --- a/src/components/sidebar/SidebarGoalsList.tsx +++ b/src/components/sidebar/SidebarGoalsList.tsx @@ -30,7 +30,7 @@ export default function SidebarGoalsList() { return (
router.push(ROUTES.GOALS.DETAIL(`${goal.goalId}`))} 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 ( -
+
로고 이미지 diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx index 6e5dfc45..0a9306ed 100644 --- a/src/components/ui/Card.tsx +++ b/src/components/ui/Card.tsx @@ -9,11 +9,13 @@ 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-636 lg:min-w-536', + calendar: 'mx-auto w-full min-w-343 md:max-w-636 lg:mx-0 lg:h-368 lg:max-w-636 lg:min-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-636 lg:min-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-1296 lg:min-w-1096', }, }, defaultVariants: { 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 (색상)