[FEAT] 통계 페이지 뷰 구현 (PR수정중)

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

@@ -1,10 +1,13 @@
+"use client";
+
 import {
   StatisticsClockEmptyIcon,
   StatisticsClockFilledIcon,
   StatisticsClockLightIcon,
   StatisticsClockOutlineIcon,
 } from "@repo/timo-design-system/icons";
 import { cn } from "@repo/timo-design-system/utils";
+import { useLocale } from "next-intl";
 
 import type { StatisticsCalendarResponse } from "@/app/[locale]/(main)/statistics/_types/statistics";
 
@@ -52,27 +55,32 @@ const WEEKDAYS = [
 
 interface StatisticsCalendarProps {
   currentMonth: Date;
+  selectedDate: Date;
+  onSelectDate: (date: Date) => void;
   calendarData: StatisticsCalendarResponse;
 }
 
 export const StatisticsCalendar = ({
   currentMonth,
+  selectedDate,
+  onSelectDate,
   calendarData,
 }: StatisticsCalendarProps) => {
+  const locale = useLocale();
   const today = new Date(calendarData.today);
   const calendarDates = getCalendarDates(currentMonth);
   const firstDayOffset = getFirstDayOffset(currentMonth);
   const completionRateByDate = new Map(
     calendarData.days.map(({ date, completionRate }) => [date, completionRate]),
   );
-  const todayLabel = formatStatisticsCalendarDate(today);
+  const todayLabel = formatStatisticsCalendarDate(today, locale);
 
   return (
     <section className="w-full px-14.75 pt-10 pb-13">
       <div className="w-199.5">
         <div className="mb-17.25">
           <h1 className="typo-headline-b-30 text-timo-gray-900">
-            {formatStatisticsMonth(currentMonth)}
+            {formatStatisticsMonth(currentMonth, locale)}
           </h1>
 
           <p className="typo-headline-m-14 text-timo-black mt-2">
@@ -100,17 +108,36 @@ export const StatisticsCalendar = ({
 
           {calendarDates.map((calendarDate) => {
             const dateKey = formatDateKey(calendarDate.date);
+            const isSelected = dateKey === formatDateKey(selectedDate);
             const completionRate = completionRateByDate.get(dateKey) ?? null;
             const status = getIconStatus(completionRate);
             const Icon = STATUS_ICON[status];
 
             return (
-              <div key={dateKey} className="flex flex-col items-center gap-2.5">
-                <Icon />
-                <span className="typo-body-sb-11 text-timo-gray-700">
+              <button
+                key={dateKey}
+                type="button"
+                className="flex flex-col items-center gap-2.5"
+                onClick={() => onSelectDate(calendarDate.date)}
+              >
+                <span
+                  className={cn(
+                    "rounded-full",
+                    isSelected &&
+                      "drop-shadow-[0_0_10px_var(--color-timo-blue-75)]",
+                  )}
+                >
+                  <Icon />
+                </span>
+                <span
+                  className={cn(
+                    "typo-body-sb-11 text-timo-gray-700",
+                    isSelected && "text-timo-blue-300",
+                  )}
+                >
                   {calendarDate.day}
                 </span>
-              </div>
+              </button>
             );
           })}
         </div>

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

@@ -1,5 +1,8 @@
+"use client";
+
 import { TagIcon } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
+import { useTranslations } from "next-intl";
 
 import type {
   StatisticsDayDetail,
@@ -29,9 +32,12 @@ type StatisticsSidePanelProps =
 const SIDE_PANEL_CLASS_NAME =
   "border-timo-gray-500 min-h-full w-76 border-l text-timo-black";
 
-const getDiffLabel = (diffMinutes: number) => {
-  if (diffMinutes > 0) return "+초과";
-  if (diffMinutes < 0) return "-단축";
+const getDiffLabel = (
+  diffMinutes: number,
+  t: ReturnType<typeof useTranslations<"Statistics.sidePanel">>,
+) => {
+  if (diffMinutes > 0) return t("overtime");
+  if (diffMinutes < 0) return t("shortened");
   return "";
 };
 
@@ -42,34 +48,36 @@ const getDiffClassName = (diffMinutes: number) => {
 };
 
 export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
+  const t = useTranslations("Statistics.sidePanel");
+
   if (props.variant === "month") {
     const { summary } = props;
 
     return (
-      <aside className={cn(SIDE_PANEL_CLASS_NAME, "pt-20.75 pb-148")}>
+      <aside className={cn(SIDE_PANEL_CLASS_NAME, "w-76 pt-20.75 pb-148")}>
         <div className="flex h-46.25 flex-col gap-5">
           <div className="px-7.5 py-2.5">
             <SummaryTimeBlock
-              label="이번 달의 총 기록 시간"
+              label={t("monthTotalRecordTime")}
               minutes={summary.totalRecordMinutes}
             />
           </div>
 
           <dl className="typo-headline-r-14 flex flex-col gap-2 px-7.5">
             <div className="flex items-center gap-3">
-              <dt className="text-timo-gray-900">활동일</dt>
-              <dd>{summary.activeDayCount}일</dd>
+              <dt className="text-timo-gray-900">{t("activeDays")}</dt>
+              <dd>{t("activeDayCount", { count: summary.activeDayCount })}</dd>
             </div>
 
             <div className="flex items-center gap-3">
-              <dt className="text-timo-gray-900">일평균</dt>
+              <dt className="text-timo-gray-900">{t("dailyAverage")}</dt>
               <dd>
                 {formatStatisticsHourText(summary.averageRecordedMinutes)}
               </dd>
             </div>
 
             <div className="flex items-center gap-3">
-              <dt className="text-timo-gray-900">누적 태스크</dt>
+              <dt className="text-timo-gray-900">{t("accumulatedTasks")}</dt>
               <dd>
                 {summary.completedTodoCount}/{summary.totalTodoCount}
               </dd>
@@ -88,7 +96,7 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
         <h2 className="typo-headline-b-24">{detail.date}</h2>
 
         <SummaryTimeBlock
-          label="오늘의 총 기록 시간"
+          label={t("dayTotalRecordTime")}
           minutes={detail.totalRecordMinutes}
         />
       </div>
@@ -116,11 +124,12 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
                 </strong>
 
                 <span>
-                  계획: {formatStatisticsClockText(todo.estimatedTimeMinutes)}
+                  {t("plan")}:{" "}
+                  {formatStatisticsClockText(todo.estimatedTimeMinutes)}
                 </span>
 
                 <span className={getDiffClassName(diffMinutes)}>
-                  {getDiffLabel(diffMinutes)}
+                  {getDiffLabel(diffMinutes, t)}
                 </span>
               </div>
             </li>

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

@@ -1,24 +1,69 @@
 "use client";
 
+import { useLocale } from "next-intl";
 import { useState } from "react";
 
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
+import { StatisticsSidePanel } from "@/app/[locale]/(main)/statistics/_components/StatisticsSidePanel";
 import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer";
-import { MOCK_STATISTICS_CALENDAR } from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
+import {
+  MOCK_STATISTICS_CALENDAR,
+  MOCK_STATISTICS_DAY_DETAILS,
+  MOCK_STATISTICS_MONTH_SUMMARY,
+} from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
+import { formatStatisticsSidePanelDate } from "@/app/[locale]/(main)/statistics/_utils/format-statistics-date";
+import { formatDateKey } from "@/app/[locale]/(main)/statistics/_utils/statistics-calendar";
+
+type StatisticsPanelMode = "month" | "day";
 
 export const StatisticsContainer = () => {
+  const locale = useLocale();
   const [currentMonth, setCurrentMonth] = useState(() => new Date());
+  const [selectedDate, setSelectedDate] = useState(
+    () => new Date(MOCK_STATISTICS_CALENDAR.today),
+  );
+  const [panelMode, setPanelMode] = useState<StatisticsPanelMode>("month");
+  const selectedDateKey = formatDateKey(selectedDate);
+  const selectedDetailBase = MOCK_STATISTICS_DAY_DETAILS[selectedDateKey] ?? {
+    date: selectedDateKey,
+    totalRecordMinutes: 0,
+    todos: [],
+  };
+  const selectedDetail = {
+    ...selectedDetailBase,
+    date: formatStatisticsSidePanelDate(selectedDate, locale),
+  };
+  const handleChangeMonth: typeof setCurrentMonth = (value) => {
+    setCurrentMonth(value);
+    setPanelMode("month");
+  };
+  const handleSelectDate = (date: Date) => {
+    setSelectedDate(date);
+    setPanelMode("day");
+  };
 
   return (
-    <>
+    <div className="flex h-full flex-col">
       <StatisticsHeaderContainer
         currentMonth={currentMonth}
-        onChangeMonth={setCurrentMonth}
-      />
-      <StatisticsCalendar
-        currentMonth={currentMonth}
-        calendarData={MOCK_STATISTICS_CALENDAR}
+        onChangeMonth={handleChangeMonth}
       />
-    </>
+      <div className="flex min-h-0 flex-1">
+        <StatisticsCalendar
+          currentMonth={currentMonth}
+          selectedDate={selectedDate}
+          onSelectDate={handleSelectDate}
+          calendarData={MOCK_STATISTICS_CALENDAR}
+        />
+        {panelMode === "month" ? (
+          <StatisticsSidePanel
+            variant="month"
+            summary={MOCK_STATISTICS_MONTH_SUMMARY}
+          />
+        ) : (
+          <StatisticsSidePanel variant="day" detail={selectedDetail} />
+        )}
+      </div>
+    </div>
   );
 };

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { useLocale } from "next-intl";
+
 import type { Dispatch, SetStateAction } from "react";
 
 import { Header } from "@/components/layout/header/Header";
@@ -10,10 +12,6 @@ interface StatisticsHeaderContainerProps {
   onChangeMonth: Dispatch<SetStateAction<Date>>;
 }
 
-const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
-  month: "long",
-});
-
 const addMonths = (date: Date, amount: number) =>
   new Date(date.getFullYear(), date.getMonth() + amount, 1);
 
@@ -22,6 +20,10 @@ export const StatisticsHeaderContainer = ({
   onChangeMonth,
 }: StatisticsHeaderContainerProps) => {
   const { isOpen, toggle } = useNavigationSidebar();
+  const locale = useLocale();
+  const monthLabel = new Intl.DateTimeFormat(locale, {
+    month: "long",
+  }).format(currentMonth);
 
   const handlePrev = () => onChangeMonth((prev) => addMonths(prev, -1));
   const handleNext = () => onChangeMonth((prev) => addMonths(prev, 1));
@@ -34,7 +36,7 @@ export const StatisticsHeaderContainer = ({
           <Header.WeeklyNav
             onPrev={handlePrev}
             onNext={handleNext}
-            label={MONTH_LABEL_FORMATTER.format(currentMonth)}
+            label={monthLabel}
           />
         </>
       }