[FEAT] 메인 레이아웃 셸 구현 (네비게이션/타임 사이드바, 헤더, 라우트 그룹)

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@repo/timo-design-system/utils";
+import { useState } from "react";
+
+import {
+  TIME_SIDEBAR_COLLAPSED_MARGIN_CLASS_NAME,
+  TIME_SIDEBAR_MARGIN_CLASS_NAME,
+  type TimeSidebarSize,
+} from "@/components/layout/sidebar/time/time-sidebar-size";
+import { TimeSidebar } from "@/components/layout/sidebar/time/TimeSidebar";
+import { ROUTES } from "@/constants/routes";
+import { usePathname } from "@/i18n/navigation";
+
+interface WithTimeSidebarContainerProps {
+  children: React.ReactNode;
+}
+
+export const WithTimeSidebarContainer = ({
+  children,
+}: WithTimeSidebarContainerProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  const pathname = usePathname();
+
+  const size: TimeSidebarSize = pathname.startsWith(ROUTES.TODAY) ? "lg" : "sm";
+
+  return (
+    <>
+      <div
+        className={cn(
+          "transition-[margin-right] duration-200 ease-in-out",
+          isOpen
+            ? TIME_SIDEBAR_MARGIN_CLASS_NAME[size]
+            : TIME_SIDEBAR_COLLAPSED_MARGIN_CLASS_NAME,
+        )}
+      >
+        {children}
+      </div>
+
+      <TimeSidebar
+        size={size}
+        isOpen={isOpen}
+        onToggleCollapse={() => setIsOpen((prev) => !prev)}
+      />
+    </>
+  );
+};

apps/timo-web/app/[locale]/(main)/home/_components/HomeTodoCard.tsx → apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx

@@ -18,9 +18,9 @@ import { cn } from "@repo/timo-design-system/utils";
 import type {
   TodoPriorityTypes,
   TodoTimerStatusTypes,
-} from "@/app/[locale]/(main)/home/_types/todo-type";
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
-import { convertDurationToTimeText } from "@/app/[locale]/(main)/home/_utils/todo-time";
+import { convertDurationToTimeText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time";
 
 const PRIORITY_MAP: Record<
   TodoPriorityTypes,

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+
+import { Header } from "@/components/layout/header/Header";
+import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+
+const VIEW_OPTIONS = ["기본", "7일"] as const;
+
+type ViewOption = (typeof VIEW_OPTIONS)[number];
+
+const isViewOption = (value: string): value is ViewOption =>
+  (VIEW_OPTIONS as readonly string[]).includes(value);
+
+export const HomeHeaderContainer = () => {
+  const [view, setView] = useState<ViewOption>(VIEW_OPTIONS[0]);
+  const { isOpen, toggle } = useNavigationSidebar();
+
+  const handleChangeView = (value: string) => {
+    if (isViewOption(value)) {
+      setView(value);
+    }
+  };
+
+  return (
+    <Header
+      left={
+        <>
+          <Header.SidebarButton isOpen={isOpen} onClick={toggle} />
+          <Header.TodayButton />
+        </>
+      }
+      right={
+        <Header.ViewDropdown
+          items={[...VIEW_OPTIONS]}
+          value={view}
+          onChange={handleChangeView}
+        />
+      }
+    />
+  );
+};

apps/timo-web/app/[locale]/(main)/home/_containers/HomeTodoContainer.tsx → apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx

@@ -3,15 +3,15 @@
 import { AddTaskButton } from "@repo/timo-design-system/ui";
 import { useState } from "react";
 
-import type { Todo } from "@/app/[locale]/(main)/home/_types/todo-type";
+import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
-import { HomeDateInformation } from "@/app/[locale]/(main)/home/_components/HomeDateInformation";
-import { HomeTodoCard } from "@/app/[locale]/(main)/home/_components/HomeTodoCard";
-import { todoMocks } from "@/app/[locale]/(main)/home/_mocks/todo-mock";
+import { HomeDateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation";
+import { HomeTodoCard } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard";
+import { todoMocks } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock";
 import {
   convertDateToDateText,
   convertDateToDayOfWeek,
-} from "@/app/[locale]/(main)/home/_utils/date";
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
 
 export const HomeTodoContainer = () => {
   const [todos, setTodos] = useState<Todo[]>(todoMocks);

apps/timo-web/app/[locale]/(main)/home/_mocks/todo-mock.ts → apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts

@@ -1,4 +1,4 @@
-import { Todo } from "@/app/[locale]/(main)/home/_types/todo-type";
+import { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
 export const todoMocks: Todo[] = [
   {

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx

@@ -0,0 +1,13 @@
+import { HomeHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer";
+import { HomeTodoContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer";
+
+export default function HomePage() {
+  return (
+    <>
+      <HomeHeaderContainer />
+      <section>
+        <HomeTodoContainer />
+      </section>
+    </>
+  );
+}

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/layout.tsx

@@ -0,0 +1,11 @@
+import { WithTimeSidebarContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer";
+
+interface WithTimeSidebarLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function WithTimeSidebarLayout({
+  children,
+}: Readonly<WithTimeSidebarLayoutProps>) {
+  return <WithTimeSidebarContainer>{children}</WithTimeSidebarContainer>;
+}

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayHeaderContainer.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Header } from "@/components/layout/header/Header";
+import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+
+export const TodayHeaderContainer = () => {
+  const { isOpen, toggle } = useNavigationSidebar();
+
+  return (
+    <Header left={<Header.SidebarButton isOpen={isOpen} onClick={toggle} />} />
+  );
+};

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx

@@ -0,0 +1,5 @@
+import { TodayHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayHeaderContainer";
+
+export default function TodayPage() {
+  return <TodayHeaderContainer />;
+}

apps/timo-web/app/[locale]/(main)/_containers/MainShellContainer.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@repo/timo-design-system/utils";
+
+import { NavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebar";
+import {
+  NavigationSidebarProvider,
+  useNavigationSidebar,
+} from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+
+interface MainShellContainerProps {
+  children: React.ReactNode;
+}
+
+const MAIN_MARGIN_CLASS_NAME = {
+  open: "ml-55",
+  collapsed: "ml-5",
+} as const;
+
+const MainContent = ({ children }: { children: React.ReactNode }) => {
+  const { isOpen } = useNavigationSidebar();
+
+  return (
+    <main
+      className={cn(
+        "rounded-8 h-full overflow-y-auto bg-white transition-[margin-left] duration-200 ease-in-out",
+        isOpen ? MAIN_MARGIN_CLASS_NAME.open : MAIN_MARGIN_CLASS_NAME.collapsed,
+      )}
+    >
+      {children}
+    </main>
+  );
+};
+
+export const MainShellContainer = ({ children }: MainShellContainerProps) => {
+  return (
+    <NavigationSidebarProvider>
+      <NavigationSidebar />
+      <MainContent>{children}</MainContent>
+    </NavigationSidebarProvider>
+  );
+};

apps/timo-web/app/[locale]/(main)/focus/_containers/FocusHeaderContainer.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Header } from "@/components/layout/header/Header";
+import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+
+export const FocusHeaderContainer = () => {
+  const { isOpen, toggle } = useNavigationSidebar();
+
+  return (
+    <Header left={<Header.SidebarButton isOpen={isOpen} onClick={toggle} />} />
+  );
+};

apps/timo-web/app/[locale]/(main)/focus/page.tsx

@@ -1,3 +1,5 @@
+import { FocusHeaderContainer } from "@/app/[locale]/(main)/focus/_containers/FocusHeaderContainer";
+
 export default function FocusPage() {
-  return <></>;
+  return <FocusHeaderContainer />;
 }

apps/timo-web/app/[locale]/(main)/layout.tsx

@@ -1,14 +1,13 @@
-import { NavigationSidebar } from "@/components/layout/sidebar/NavigationSidebar";
+import { MainShellContainer } from "@/app/[locale]/(main)/_containers/MainShellContainer";
 
 interface MainLayoutProps {
   children: React.ReactNode;
 }
 
 export default function MainLayout({ children }: Readonly<MainLayoutProps>) {
   return (
-    <div className="flex min-h-screen">
-      <NavigationSidebar />
-      <main className="flex-1">{children}</main>
+    <div className="bg-timo-gray-300 h-screen overflow-hidden py-5">
+      <MainShellContainer>{children}</MainShellContainer>
     </div>
   );
 }

apps/timo-web/app/[locale]/(main)/settings/_containers/SettingsHeaderContainer.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Header } from "@/components/layout/header/Header";
+import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+
+export const SettingsHeaderContainer = () => {
+  const { isOpen, toggle } = useNavigationSidebar();
+
+  return (
+    <Header left={<Header.SidebarButton isOpen={isOpen} onClick={toggle} />} />
+  );
+};

apps/timo-web/app/[locale]/(main)/settings/layout.tsx

@@ -1,7 +1,14 @@
-export default function SettingsLayout({
+import { SettingsHeaderContainer } from "@/app/[locale]/(main)/settings/_containers/SettingsHeaderContainer";
+
+export default function SettingsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <>{children}</>;
+  return (
+    <>
+      <SettingsHeaderContainer />
+      {children}
+    </>
+  );
 }

apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+
+import { Header } from "@/components/layout/header/Header";
+import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+
+const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("ko-KR", {
+  year: "numeric",
+  month: "long",
+});
+
+const addMonths = (date: Date, amount: number) =>
+  new Date(date.getFullYear(), date.getMonth() + amount, 1);
+
+export const StatisticsHeaderContainer = () => {
+  const [currentMonth, setCurrentMonth] = useState(() => new Date());
+  const { isOpen, toggle } = useNavigationSidebar();
+
+  const handlePrev = () => setCurrentMonth((prev) => addMonths(prev, -1));
+  const handleNext = () => setCurrentMonth((prev) => addMonths(prev, 1));
+
+  return (
+    <Header
+      left={
+        <>
+          <Header.SidebarButton isOpen={isOpen} onClick={toggle} />
+          <Header.WeeklyNav
+            onPrev={handlePrev}
+            onNext={handleNext}
+            label={MONTH_LABEL_FORMATTER.format(currentMonth)}
+          />
+        </>
+      }
+    />
+  );
+};

apps/timo-web/app/[locale]/(main)/statistics/page.tsx

@@ -1,3 +1,5 @@
+import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer";
+
 export default function StatisticsPage() {
-  return <></>;
+  return <StatisticsHeaderContainer />;
 }