diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx index a1c525d0..b4db4793 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx +++ b/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 = ({
{tagName && } {hasMemo && diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx index f7ddc770..c275729e 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx +++ b/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(VIEW_OPTIONS[0]); + const t = useTranslations("Home"); + const basicLabel = t("viewBasic"); + const weekLabel = t("viewWeek"); + const viewOptions = [basicLabel, weekLabel]; + const [isWeekView, setIsWeekView] = useState(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={ <> - + } right={ } diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx index 57b8ea46..f355e55d 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx +++ b/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 = { + DAILY_LIFE: "dailyLife", + WORK: "work", + EXERCISE: "exercise", + ASSIGNMENT: "assignment", + ADDITIONAL: "additional", +}; + +type PriorityLabelKeyTypes = "veryImportant" | "important" | "average" | "low"; + +const PRIORITY_LABEL_KEY: Record = { + URGENT: "veryImportant", + HIGH: "important", + MEDIUM: "average", + LOW: "low", +}; export const HomeTodoContainer = () => { + const t = useTranslations("Home"); + const tCommon = useTranslations("Common"); const [todos, setTodos] = useState(todoMocks); const today = new Date(); @@ -70,13 +99,13 @@ export const HomeTodoContainer = () => {
- +
@@ -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} diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts index 41926977..8dad6cab 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts +++ b/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", diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts index 4ece60a4..027b888b 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts +++ b/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 { diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts index 5e4716fc..d7315124 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts +++ b/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(); diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx index 136d84a2..8f978ff2 100644 --- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx +++ b/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", }); diff --git a/apps/timo-web/components/layout/header/Header.tsx b/apps/timo-web/components/layout/header/Header.tsx index 5ace3dcd..ab9c40b5 100644 --- a/apps/timo-web/components/layout/header/Header.tsx +++ b/apps/timo-web/components/layout/header/Header.tsx @@ -41,7 +41,7 @@ const HeaderWeeklyNav = ({ onPrev, onNext, label }: HeaderWeeklyNavProps) => {
{label && ( - + {label} )} diff --git a/apps/timo-web/components/layout/sidebar/time/TimeSidebarHeader.tsx b/apps/timo-web/components/layout/sidebar/time/TimeSidebarHeader.tsx index fbd32ec1..93b072a8 100644 --- a/apps/timo-web/components/layout/sidebar/time/TimeSidebarHeader.tsx +++ b/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 (
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json index 32d5bce5..649a0486 100644 --- a/apps/timo-web/messages/en.json +++ b/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 8 tags, and to add more, please delete existing tags.", "todoLimitLine1": "You can add up to 20 incomplete to-dos.", diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json index d2bf0c8e..cf175e99 100644 --- a/apps/timo-web/messages/ko.json +++ b/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": "태그는 최대 8개까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.", "todoLimitLine1": "완료되지 않은 투두는 최대 20개까지 추가할 수 있어요.", diff --git a/apps/timo-web/utils/get-day-of-week-key.ts b/apps/timo-web/utils/get-day-of-week-key.ts new file mode 100644 index 00000000..2e1d2f6b --- /dev/null +++ b/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"; +}; diff --git a/packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsx b/packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsx index d22854a8..814c3b09 100644 --- a/packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsx +++ b/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 = ({ )} > - + diff --git a/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx b/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx index 76fd20ba..7d2cfa0a 100644 --- a/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx +++ b/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx @@ -20,11 +20,11 @@ export const DropdownView = ({ className, }: DropdownViewProps) => { return ( - + diff --git a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx index 369da149..f4df4994 100644 --- a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx +++ b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx @@ -21,11 +21,15 @@ const PRIORITY_COLOR: Record = { export interface PriorityIconProps { priority: Priority; + label?: string; } -export const PriorityIcon = ({ priority }: PriorityIconProps) => { +export const PriorityIcon = ({ priority, label }: PriorityIconProps) => { return (