[FEAT] 홈 화면 7일 뷰 퍼블리싱 및 투두 드래그 정렬/타이머 연동 구현

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { cn } from "@repo/timo-design-system/utils";
-import { useState } from "react";
 
 import {
   TIME_SIDEBAR_COLLAPSED_MARGIN_CLASS_NAME,
@@ -11,6 +10,7 @@ import {
 import { TimeSidebar } from "@/components/layout/sidebar/time/TimeSidebar";
 import { ROUTES } from "@/constants/routes";
 import { usePathname } from "@/i18n/navigation";
+import { useTimeSidebarStore } from "@/stores/time-sidebar/useTimeSidebarStore";
 
 interface WithTimeSidebarContainerProps {
   children: React.ReactNode;
@@ -19,7 +19,8 @@ interface WithTimeSidebarContainerProps {
 export const WithTimeSidebarContainer = ({
   children,
 }: WithTimeSidebarContainerProps) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const isOpen = useTimeSidebarStore((state) => state.isOpen);
+  const toggleOpen = useTimeSidebarStore((state) => state.toggleOpen);
 
   const pathname = usePathname();
 
@@ -29,7 +30,7 @@ export const WithTimeSidebarContainer = ({
     <>
       <div
         className={cn(
-          "transition-[margin-right] duration-200 ease-in-out",
+          "h-full transition-[margin-right] duration-200 ease-in-out",
           isOpen
             ? TIME_SIDEBAR_MARGIN_CLASS_NAME[size]
             : TIME_SIDEBAR_COLLAPSED_MARGIN_CLASS_NAME,
@@ -38,11 +39,7 @@ export const WithTimeSidebarContainer = ({
         {children}
       </div>
 
-      <TimeSidebar
-        size={size}
-        isOpen={isOpen}
-        onToggleCollapse={() => setIsOpen((prev) => !prev)}
-      />
+      <TimeSidebar size={size} isOpen={isOpen} onToggleCollapse={toggleOpen} />
     </>
   );
 };

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

@@ -1,3 +1,5 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import {
   MemoDisableIcon,
   MemoOnIcon,
@@ -14,6 +16,7 @@ import {
   TagIcon,
 } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
+import { useTranslations } from "next-intl";
 
 import type {
   TodoPriorityTypes,
@@ -33,11 +36,11 @@ const PRIORITY_MAP: Record<
 };
 
 export interface HomeTodoCardProps {
+  todoId: number;
   title: string;
   isCompleted: boolean;
   durationSeconds: number;
   priority: TodoPriorityTypes;
-  priorityLabel?: string;
   tagName?: string;
   hasMemo: boolean;
   isRepeated: boolean;
@@ -50,11 +53,11 @@ export interface HomeTodoCardProps {
 }
 
 export const HomeTodoCard = ({
+  todoId,
   title,
   isCompleted,
   durationSeconds,
   priority,
-  priorityLabel,
   tagName,
   hasMemo,
   isRepeated,
@@ -65,19 +68,32 @@ export const HomeTodoCard = ({
   onTogglePlay,
   onToggleSubtaskCompleted,
 }: HomeTodoCardProps) => {
+  const tCommon = useTranslations("Common");
+
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: todoId, disabled: isCompleted });
+
+  const sortableStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    touchAction: "none",
+  };
+
   const isRunning = timerStatus === "RUNNING";
 
+  const priorityLabel = tCommon(`priority.${PRIORITY_MAP[priority]}`);
+
   const titleRow = (
     <div className="flex w-full items-center justify-between gap-2">
-      <div className="flex w-[165px] items-center gap-1">
+      <div className="flex min-w-0 flex-1 items-center gap-1">
         <Checkbox
           checked={isCompleted}
           onChange={onToggleCompleted}
           disabled={isCompleted}
         />
         <p
           className={cn(
-            "typo-body-sb-12 w-[137px] truncate",
+            "typo-body-sb-12 min-w-0 flex-1 truncate",
             isCompleted ? "text-timo-gray-700" : "text-timo-black",
           )}
         >
@@ -103,21 +119,27 @@ export const HomeTodoCard = ({
 
   return (
     <article
+      ref={setNodeRef}
+      style={sortableStyle}
+      {...attributes}
+      {...listeners}
       className={cn(
-        "border-timo-gray-500 flex size-full flex-col items-start gap-2 overflow-hidden rounded-[4px] border border-solid px-3.5 py-3",
+        "border-timo-gray-500 flex w-full shrink-0 flex-col items-start gap-2 overflow-hidden rounded-[4px] border border-solid px-3.5 py-3",
         isCompleted ? "bg-timo-gray-200" : "bg-white",
       )}
     >
       {subtaskTitle ? (
         <div className="flex w-full flex-col items-start gap-1">
           {titleRow}
-          <div className="flex items-center gap-2">
+          <div className="flex w-full min-w-0 items-center gap-2">
             <Checkbox
               checked={isSubtaskCompleted}
               onChange={(checked) => onToggleSubtaskCompleted?.(checked)}
               disabled={isCompleted}
             />
-            <p className="typo-body-r-12 text-timo-gray-700">{subtaskTitle}</p>
+            <p className="typo-body-r-12 text-timo-gray-700 min-w-0 flex-1 truncate">
+              {subtaskTitle}
+            </p>
           </div>
         </div>
       ) : (

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { AddTaskButton } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+
+import type { ApiDayOfWeek } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
+
+import { HomeDateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation";
+import {
+  convertDateToDateText,
+  getToday,
+  parseDateKey,
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
+
+export interface HomeDayHeaderContainerProps {
+  dateKey: string;
+  dayOfWeek: ApiDayOfWeek;
+  isHoliday: boolean;
+  isToday: boolean;
+  totalCount: number;
+  completedCount: number;
+}
+
+export const HomeDayHeaderContainer = ({
+  dateKey,
+  dayOfWeek,
+  isHoliday,
+  isToday,
+  totalCount,
+  completedCount,
+}: HomeDayHeaderContainerProps) => {
+  const t = useTranslations("Home");
+  const tCommon = useTranslations("Common");
+  const date = parseDateKey(dateKey) ?? getToday();
+
+  return (
+    <div className="flex flex-col gap-3 pb-2">
+      <HomeDateInformation
+        date={convertDateToDateText(date)}
+        dayOfWeek={tCommon(`weekday.${dayOfWeek}`)}
+        isHoliday={isHoliday}
+        isToday={isToday}
+        totalCount={totalCount}
+        completedCount={completedCount}
+      />
+      <AddTaskButton text={t("addTask")} />
+    </div>
+  );
+};

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

@@ -1,31 +1,46 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { useState } from "react";
 
+import { triggerScrollToToday } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodayScroll";
+import { useHomeViewMode } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeViewMode";
 import { Header } from "@/components/layout/header/Header";
 import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
 
 export const HomeHeaderContainer = () => {
   const t = useTranslations("Home");
   const basicLabel = t("viewBasic");
   const weekLabel = t("viewWeek");
+
   const viewOptions = [basicLabel, weekLabel];
-  const [isWeekView, setIsWeekView] = useState<boolean>(false);
+
   const { isOpen, toggle } = useNavigationSidebar();
+  const { isWeekView, setViewMode, goToNextWeek, goToPrevWeek, goToToday } =
+    useHomeViewMode();
 
   const handleChangeView = (value: string) => {
-    if (value === basicLabel || value === weekLabel) {
-      setIsWeekView(value === weekLabel);
+    if (value === basicLabel) {
+      setViewMode("basic");
+    } else if (value === weekLabel) {
+      setViewMode("week");
     }
   };
 
+  const handleGoToToday = () => {
+    goToToday();
+    triggerScrollToToday();
+  };
+
   return (
     <Header
       left={
         <>
           <Header.SidebarButton isOpen={isOpen} onClick={toggle} />
-          <Header.TodayButton label={t("today")} />
+          {isWeekView ? (
+            <Header.WeeklyNav onPrev={goToPrevWeek} onNext={goToNextWeek} />
+          ) : (
+            <Header.TodayButton label={t("today")} onClick={handleGoToToday} />
+          )}
         </>
       }
       right={