[FEAT] next-intl 기반 다국어(영어/한국어) 지원 세팅

apps/timo-web/app/[locale]/(main)/home/_components/todo-create-modal/TodoCreateModal.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import {
+  CalendarDisableIcon,
+  ChevronUpIcon,
+  ClockDisableIcon,
+  DeleteIcon,
+  MemoDisableIcon,
+  RepeatDisableIcon,
+} from "@repo/timo-design-system/icons";
+import {
+  Checkbox,
+  CreateButton,
+  PriorityIcon,
+  TagIcon,
+} from "@repo/timo-design-system/ui";
+import { cn } from "@repo/timo-design-system/utils";
+import { useId } from "react";
+
+export type TodoSubtaskVariant = "filled" | "placeholder";
+
+export interface TodoSubtaskItem {
+  id: string;
+  label: string;
+  checked: boolean;
+  variant?: TodoSubtaskVariant;
+}
+
+const SUBTASK_LABEL_STYLE: Record<TodoSubtaskVariant, string> = {
+  filled: "typo-headline-b-14 text-timo-black",
+  placeholder: "typo-body-r-12 text-timo-gray-700",
+};
+
+const DEFAULT_SUBTASKS: TodoSubtaskItem[] = [
+  { id: "1", label: "Plan a new task", checked: false, variant: "filled" },
+  {
+    id: "2",
+    label: "Add tasks in small units",
+    checked: false,
+    variant: "placeholder",
+  },
+];
+
+export interface TodoCreateModalProps {
+  subtasks?: TodoSubtaskItem[];
+  onSubtaskToggle?: (id: string, checked: boolean) => void;
+  note?: string;
+  onNoteChange?: (note: string) => void;
+  isIconPickerOpen?: boolean;
+  onToggleIconPicker?: () => void;
+  isCreateDisabled?: boolean;
+  onCreate?: () => void;
+  onClose?: () => void;
+  onDateClick?: () => void;
+  onTimeClick?: () => void;
+  onPriorityClick?: () => void;
+  onTagClick?: () => void;
+  onMemoClick?: () => void;
+  onRepeatClick?: () => void;
+}
+
+export const TodoCreateModal = ({
+  subtasks = DEFAULT_SUBTASKS,
+  onSubtaskToggle,
+  note = "",
+  onNoteChange,
+  isIconPickerOpen = false,
+  onToggleIconPicker,
+  isCreateDisabled = true,
+  onCreate,
+  onClose,
+  onDateClick,
+  onTimeClick,
+  onPriorityClick,
+  onTagClick,
+  onMemoClick,
+  onRepeatClick,
+}: TodoCreateModalProps) => {
+  const noteId = useId();
+
+  return (
+    <div className="flex w-[490px] flex-col items-center justify-center gap-2.5 rounded-[4px] bg-white px-6 py-4">
+      <div className="flex w-full items-center justify-between">
+        <p className="typo-body-sb-12 text-timo-blue-300 whitespace-nowrap">
+          Add a task
+        </p>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="닫기"
+          className="flex shrink-0 items-center justify-center"
+        >
+          <DeleteIcon />
+        </button>
+      </div>
+
+      <div className="flex w-full flex-col items-start gap-3.5">
+        <div className="flex w-full flex-col items-start gap-2">
+          <button
+            type="button"
+            onClick={onToggleIconPicker}
+            aria-expanded={isIconPickerOpen}
+            className="bg-timo-gray-200 flex items-center gap-1 rounded-[4px] px-1.5 py-0.5"
+          >
+            <ChevronUpIcon width={18} height={18} />
+            <span className="typo-caption-r-10 text-timo-gray-700 whitespace-nowrap">
+              Add an icon
+            </span>
+          </button>
+
+          <div className="flex w-full flex-col items-start gap-1.5">
+            {subtasks.map((subtask) => (
+              <div key={subtask.id} className="flex items-center gap-2">
+                <Checkbox
+                  checked={subtask.checked}
+                  onChange={(checked) => onSubtaskToggle?.(subtask.id, checked)}
+                />
+                <p
+                  className={cn(
+                    "truncate",
+                    SUBTASK_LABEL_STYLE[subtask.variant ?? "filled"],
+                  )}
+                >
+                  {subtask.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex h-[35px] w-full items-start">
+          <label htmlFor={noteId} className="sr-only">
+            노트
+          </label>
+          <textarea
+            id={noteId}
+            value={note}
+            onChange={(e) => onNoteChange?.(e.target.value)}
+            placeholder="Please enter a note.."
+            rows={1}
+            className="typo-body-r-12 text-timo-gray-700 placeholder:text-timo-gray-700 w-full resize-none bg-transparent outline-none"
+          />
+        </div>
+      </div>
+
+      <div className="flex w-full items-center justify-between">
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onDateClick}
+            className="flex items-center gap-0.5"
+          >
+            <CalendarDisableIcon />
+            <span className="typo-caption-r-10 text-timo-gray-700 whitespace-nowrap">
+              Date
+            </span>
+          </button>
+
+          <button
+            type="button"
+            onClick={onTimeClick}
+            className="flex items-center"
+          >
+            <ClockDisableIcon />
+            <span className="typo-caption-r-10 text-timo-gray-700 flex w-9 items-center justify-center whitespace-nowrap">
+              00 : 00
+            </span>
+          </button>
+
+          <button
+            type="button"
+            onClick={onPriorityClick}
+            aria-label="우선순위 설정"
+            className="flex items-center justify-center p-1.5"
+          >
+            <PriorityIcon priority="Disable" />
+          </button>
+
+          <button type="button" onClick={onTagClick}>
+            <TagIcon text="Tag" />
+          </button>
+
+          <button type="button" onClick={onMemoClick} aria-label="메모 추가">
+            <MemoDisableIcon />
+          </button>
+
+          <button type="button" onClick={onRepeatClick} aria-label="반복 설정">
+            <RepeatDisableIcon />
+          </button>
+        </div>
+
+        <CreateButton
+          label="Create"
+          disabled={isCreateDisabled}
+          onClick={onCreate}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,51 @@
+import "./globals.css";
+import localFont from "next/font/local";
+import { notFound } from "next/navigation";
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+
+import type { Metadata } from "next";
+
+import { routing } from "@/i18n/routing";
+import { QueryProvider } from "@/providers/QueryProvider";
+
+const pretendard = localFont({
+  src: "../../fonts/PretendardVariable.woff2",
+  variable: "--font-family-pretendard",
+  weight: "45 920",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Timo",
+  description: "Timo web",
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export default async function RootLayout({
+  children,
+  params,
+}: Readonly<RootLayoutProps>) {
+  const { locale } = await params;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  return (
+    <html lang={locale} className={pretendard.variable}>
+      <body>
+        <NextIntlClientProvider>
+          <QueryProvider>{children}</QueryProvider>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

apps/timo-web/app/[locale]/page.tsx

@@ -0,0 +1,7 @@
+import { useTranslations } from "next-intl";
+
+export default function Home() {
+  const t = useTranslations("HomePage");
+
+  return <>{t("title")}</>;
+}

apps/timo-web/components/layout/sidebar/NavigationSidebar.tsx

@@ -20,10 +20,9 @@ import {
 } from "@repo/timo-design-system/icons";
 import { TabButton } from "@repo/timo-design-system/ui";
 import Image from "next/image";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
 
 import { ROUTES } from "@/constants/routes";
+import { Link, usePathname } from "@/i18n/navigation";
 
 const NAV_ITEMS = [
   {

apps/timo-web/i18n/navigation.ts

@@ -0,0 +1,6 @@
+import { createNavigation } from "next-intl/navigation";
+
+import { routing } from "@/i18n/routing";
+
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);

apps/timo-web/i18n/request.ts

@@ -0,0 +1,16 @@
+import { hasLocale } from "next-intl";
+import { getRequestConfig } from "next-intl/server";
+
+import { routing } from "@/i18n/routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const requested = await requestLocale;
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

apps/timo-web/i18n/routing.ts

@@ -0,0 +1,7 @@
+import { defineRouting } from "next-intl/routing";
+
+export const routing = defineRouting({
+  locales: ["en", "ko"],
+  defaultLocale: "en",
+  localePrefix: "as-needed",
+});

apps/timo-web/messages/en.json

@@ -0,0 +1,5 @@
+{
+  "HomePage": {
+    "title": "Hi Timo"
+  }
+}

apps/timo-web/messages/ko.json

@@ -0,0 +1,5 @@
+{
+  "HomePage": {
+    "title": "안녕 티모"
+  }
+}

apps/timo-web/next.config.js

@@ -1,12 +1,15 @@
 /* global process */
 import { withSentryConfig } from "@sentry/nextjs";
+import createNextIntlPlugin from "next-intl/plugin";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@repo/timo-design-system"],
 };
 
-export default withSentryConfig(nextConfig, {
+const withNextIntl = createNextIntlPlugin();
+
+export default withSentryConfig(withNextIntl(nextConfig), {
   org: "timo-client",
   project: "timo-web",
   authToken: process.env["SENTRY_AUTH_TOKEN"],

apps/timo-web/package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query-devtools": "^5.101.1",
     "axios": "^1.18.1",
     "next": "16.2.0",
+    "next-intl": "^4.13.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "zod": "^4.4.3"

apps/timo-web/proxy.ts

@@ -0,0 +1,9 @@
+import createMiddleware from "next-intl/middleware";
+
+import { routing } from "@/i18n/routing";
+
+export default createMiddleware(routing);
+
+export const config = {
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};