[FEAT] 홈/통계/타임사이드바 다국어(i18n) 텍스트 매핑 추가

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

@@ -37,6 +37,7 @@ export interface HomeTodoCardProps {
   isCompleted: boolean;
   durationSeconds: number;
   priority: TodoPriorityTypes;
+  priorityLabel?: string;
   tagName?: string;
   hasMemo: boolean;
   isRepeated: boolean;
@@ -53,6 +54,7 @@ export const HomeTodoCard = ({
   isCompleted,
   durationSeconds,
   priority,
+  priorityLabel,
   tagName,
   hasMemo,
   isRepeated,
@@ -125,6 +127,7 @@ export const HomeTodoCard = ({
         <div className="flex min-w-0 items-center gap-1">
           <PriorityIcon
             priority={isCompleted ? "Disable" : PRIORITY_MAP[priority]}
+            label={priorityLabel}
           />
           {tagName && <TagIcon text={tagName} />}
           {hasMemo &&

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

@@ -1,24 +1,22 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 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 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 handleChangeView = (value: string) => {
-    if (isViewOption(value)) {
-      setView(value);
+    if (value === basicLabel || value === weekLabel) {
+      setIsWeekView(value === weekLabel);
     }
   };
 
@@ -27,13 +25,13 @@ export const HomeHeaderContainer = () => {
       left={
         <>
           <Header.SidebarButton isOpen={isOpen} onClick={toggle} />
-          <Header.TodayButton />
+          <Header.TodayButton label={t("today")} />
         </>
       }
       right={
         <Header.ViewDropdown
-          items={[...VIEW_OPTIONS]}
-          value={view}
+          items={viewOptions}
+          value={isWeekView ? weekLabel : basicLabel}
           onChange={handleChangeView}
         />
       }

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

@@ -1,19 +1,48 @@
 "use client";
 
 import { AddTaskButton } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type {
+  Todo,
+  TodoPriorityTypes,
+  TodoTagName,
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
 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)/(with-time-sidebar)/home/_utils/date";
+import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
+import { getDayOfWeekKey } from "@/utils/get-day-of-week-key";
+
+type TagLabelKeyTypes =
+  | "dailyLife"
+  | "work"
+  | "exercise"
+  | "assignment"
+  | "additional";
+
+const TAG_LABEL_KEY: Record<TodoTagName, TagLabelKeyTypes> = {
+  DAILY_LIFE: "dailyLife",
+  WORK: "work",
+  EXERCISE: "exercise",
+  ASSIGNMENT: "assignment",
+  ADDITIONAL: "additional",
+};
+
+type PriorityLabelKeyTypes = "veryImportant" | "important" | "average" | "low";
+
+const PRIORITY_LABEL_KEY: Record<TodoPriorityTypes, PriorityLabelKeyTypes> = {
+  URGENT: "veryImportant",
+  HIGH: "important",
+  MEDIUM: "average",
+  LOW: "low",
+};
 
 export const HomeTodoContainer = () => {
+  const t = useTranslations("Home");
+  const tCommon = useTranslations("Common");
   const [todos, setTodos] = useState<Todo[]>(todoMocks);
 
   const today = new Date();
@@ -70,13 +99,13 @@ export const HomeTodoContainer = () => {
       <div className="flex flex-col gap-3 pb-2">
         <HomeDateInformation
           date={convertDateToDateText(today)}
-          dayOfWeek={convertDateToDayOfWeek(today)}
+          dayOfWeek={tCommon(`weekday.${getDayOfWeekKey(today)}`)}
           isHoliday={false}
           isToday
           totalCount={todos.length}
           completedCount={completedCount}
         />
-        <AddTaskButton text="영문영문영문" />
+        <AddTaskButton text={t("addTask")} />
       </div>
 
       <div className="flex max-h-[680px] flex-col gap-2 overflow-y-auto pr-1">
@@ -90,7 +119,10 @@ export const HomeTodoContainer = () => {
               isCompleted={todo.completed}
               durationSeconds={todo.durationSeconds}
               priority={todo.priority}
-              tagName={todo.tag.name}
+              priorityLabel={tCommon(
+                `priority.${PRIORITY_LABEL_KEY[todo.priority]}`,
+              )}
+              tagName={tCommon(`tag.${TAG_LABEL_KEY[todo.tag.name]}`)}
               hasMemo={todo.hasMemo}
               isRepeated={todo.isRepeated}
               timerStatus={todo.timerStatus}

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

@@ -8,7 +8,7 @@ export const todoMocks: Todo[] = [
     completed: false,
     durationSeconds: 7200,
     priority: "HIGH",
-    tag: { tagId: 3, name: "업무" },
+    tag: { tagId: 3, name: "WORK" },
     hasMemo: false,
     isRepeated: true,
     timerStatus: "RUNNING",
@@ -22,7 +22,7 @@ export const todoMocks: Todo[] = [
     completed: false,
     durationSeconds: 5400,
     priority: "URGENT",
-    tag: { tagId: 1, name: "과제" },
+    tag: { tagId: 1, name: "ASSIGNMENT" },
     hasMemo: true,
     isRepeated: false,
     timerStatus: "STOPPED",
@@ -42,7 +42,7 @@ export const todoMocks: Todo[] = [
     completed: true,
     durationSeconds: 1800,
     priority: "LOW",
-    tag: { tagId: 4, name: "루틴" },
+    tag: { tagId: 4, name: "EXERCISE" },
     hasMemo: false,
     isRepeated: true,
     timerStatus: "STOPPED",
@@ -56,7 +56,7 @@ export const todoMocks: Todo[] = [
     completed: false,
     durationSeconds: 1800,
     priority: "MEDIUM",
-    tag: { tagId: 5, name: "자기계발" },
+    tag: { tagId: 5, name: "ADDITIONAL" },
     hasMemo: true,
     isRepeated: false,
     timerStatus: "STOPPED",
@@ -70,7 +70,7 @@ export const todoMocks: Todo[] = [
     completed: false,
     durationSeconds: 3600,
     priority: "MEDIUM",
-    tag: { tagId: 2, name: "일상" },
+    tag: { tagId: 2, name: "DAILY_LIFE" },
     hasMemo: false,
     isRepeated: false,
     timerStatus: "STOPPED",

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts

@@ -1,9 +1,15 @@
 export type TodoPriorityTypes = "URGENT" | "HIGH" | "MEDIUM" | "LOW";
 export type TodoTimerStatusTypes = "RUNNING" | "STOPPED";
+export type TodoTagName =
+  | "DAILY_LIFE"
+  | "WORK"
+  | "EXERCISE"
+  | "ASSIGNMENT"
+  | "ADDITIONAL";
 
 export interface TodoTag {
   tagId: number;
-  name: string;
+  name: TodoTagName;
 }
 
 export interface TodoSubtask {

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts

@@ -1,17 +1,3 @@
-const DAY_OF_WEEK_LABELS = [
-  "일요일",
-  "월요일",
-  "화요일",
-  "수요일",
-  "목요일",
-  "금요일",
-  "토요일",
-];
-
-export const convertDateToDayOfWeek = (date: Date): string => {
-  return DAY_OF_WEEK_LABELS[date.getDay()] ?? "";
-};
-
 export const convertDateToDateText = (date: Date): string => {
   const day = date.getDate();
 

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

@@ -5,8 +5,7 @@ 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",
+const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
   month: "long",
 });
 

apps/timo-web/components/layout/header/Header.tsx

@@ -41,7 +41,7 @@ const HeaderWeeklyNav = ({ onPrev, onNext, label }: HeaderWeeklyNavProps) => {
     <div className="flex items-center gap-2">
       <WeeklyButton variant="left" onClick={onPrev} />
       {label && (
-        <span className="typo-headline-m-14 text-timo-gray-900 flex h-8 items-center rounded-[4px] bg-white px-2">
+        <span className="typo-headline-m-14 text-timo-gray-900 flex h-8 w-17 shrink-0 items-center justify-center rounded-[4px] bg-white px-2 whitespace-nowrap">
           {label}
         </span>
       )}

apps/timo-web/components/layout/sidebar/time/TimeSidebarHeader.tsx

@@ -1,5 +1,10 @@
+"use client";
+
 import { SidebarButton } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
+import { useTranslations } from "next-intl";
+
+import { getDayOfWeekKey } from "@/utils/get-day-of-week-key";
 
 export interface TimeSidebarHeaderProps {
   date: Date;
@@ -12,11 +17,10 @@ export const TimeSidebarHeader = ({
   isOpen = true,
   onToggleCollapse,
 }: TimeSidebarHeaderProps) => {
+  const t = useTranslations("Common");
   const day = date.getDate();
 
-  const weekday = new Intl.DateTimeFormat("ko-KR", { weekday: "long" }).format(
-    date,
-  );
+  const weekday = t(`weekday.${getDayOfWeekKey(date)}`);
 
   return (
     <header className="relative flex items-center px-4.5 pt-3 pb-3">

apps/timo-web/messages/en.json

@@ -6,6 +6,36 @@
     "statistics": "Statistics",
     "settings": "Settings"
   },
+  "Common": {
+    "weekday": {
+      "sunday": "Sunday",
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "saturday": "Saturday"
+    },
+    "tag": {
+      "dailyLife": "Daily life",
+      "work": "Work",
+      "exercise": "Exercise",
+      "assignment": "Assignment",
+      "additional": "Additional"
+    },
+    "priority": {
+      "veryImportant": "Very Important",
+      "important": "Important",
+      "average": "Average",
+      "low": "Low"
+    }
+  },
+  "Home": {
+    "today": "Today",
+    "viewBasic": "Basic",
+    "viewWeek": "7 days",
+    "addTask": "Add a task"
+  },
   "Toast": {
     "tagLimit": "You can create up to <blue>8 tags</blue>, and to add more, please delete existing tags.",
     "todoLimitLine1": "You can add up to <blue>20 incomplete to-dos</blue>.",

apps/timo-web/messages/ko.json

@@ -6,6 +6,36 @@
     "statistics": "통계",
     "settings": "설정"
   },
+  "Common": {
+    "weekday": {
+      "sunday": "일요일",
+      "monday": "월요일",
+      "tuesday": "화요일",
+      "wednesday": "수요일",
+      "thursday": "목요일",
+      "friday": "금요일",
+      "saturday": "토요일"
+    },
+    "tag": {
+      "dailyLife": "일상",
+      "work": "업무",
+      "exercise": "운동",
+      "assignment": "과제",
+      "additional": "기타"
+    },
+    "priority": {
+      "veryImportant": "매우중요",
+      "important": "중요",
+      "average": "보통",
+      "low": "낮음"
+    }
+  },
+  "Home": {
+    "today": "오늘",
+    "viewBasic": "기본",
+    "viewWeek": "7일",
+    "addTask": "할 일을 추가하세요"
+  },
   "Toast": {
     "tagLimit": "태그는 <blue>최대 8개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
     "todoLimitLine1": "완료되지 않은 투두는 <blue>최대 20개</blue>까지 추가할 수 있어요.",

apps/timo-web/utils/get-day-of-week-key.ts

@@ -0,0 +1,15 @@
+const DAY_OF_WEEK_KEYS = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+
+export type DayOfWeekKey = (typeof DAY_OF_WEEK_KEYS)[number];
+
+export const getDayOfWeekKey = (date: Date): DayOfWeekKey => {
+  return DAY_OF_WEEK_KEYS[date.getDay()] ?? "sunday";
+};

packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from "../../../icons";
+import { PlusGrayIcon } from "../../../icons";
 import { cn } from "../../../lib";
 
 export type AddTaskButtonVariant = "default" | "weekly" | "big";
@@ -32,7 +32,7 @@ export const AddTaskButton = ({
       )}
     >
       <span className="flex size-5.5 shrink-0 items-center justify-center">
-        <PlusIcon />
+        <PlusGrayIcon />
       </span>
 
       <span

packages/timo-design-system/src/components/button/today-button/TodayButton.tsx

@@ -16,7 +16,7 @@ export const TodayButton = ({
       type="button"
       onClick={onClick}
       className={cn(
-        "typo-headline-m-14 text-timo-gray-900 border-timo-gray-500 flex h-8 items-center rounded-[4px] border bg-white px-2",
+        "typo-headline-m-14 text-timo-gray-900 border-timo-gray-500 flex h-8 items-center rounded-[4px] border bg-white px-2.5",
         className,
       )}
     >