Initial i18n support

.gitignore

@@ -1,2 +1,3 @@
 target/
 node_modules/
+.DS_Store

apps/desktop/package.json

@@ -42,9 +42,11 @@
     "embla-carousel": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
     "framer-motion": "^11.15.0",
+    "i18next": "^24.1.2",
     "lucide-react": "^0.468.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.2.0",
     "react-resizable-panels": "^2.1.7",
     "react-router": "^7.0.2",
     "tailwind-merge": "^2.5.5",

apps/desktop/src/App.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { BrowserRouter, Routes, Route } from "react-router";
 import { UIProvider } from "./contexts/UIContext";
+import { LanguageProvider } from "./contexts/LanguageContext";
+import "./i18n/config";
 import NavBar from "./components/layout/NavBar";
 import Home from "./pages/Home";
 import Note from "./pages/Note";
@@ -35,35 +37,37 @@ function App() {
 
   return (
     <BrowserRouter>
-      <UIProvider>
-        <div className="flex h-screen flex-col">
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route
-              path="/"
-              element={
-                <>
-                  <NavBar />
-                  <main className="w-full flex-1 overflow-auto bg-gray-50">
-                    <Home />
-                  </main>
-                </>
-              }
-            />
-            <Route
-              path="/note/:id"
-              element={
-                <>
-                  <NavBar />
-                  <main className="w-full flex-1 overflow-auto bg-gray-50">
-                    <Note />
-                  </main>
-                </>
-              }
-            />
-          </Routes>
-        </div>
-      </UIProvider>
+      <LanguageProvider>
+        <UIProvider>
+          <div className="flex h-screen flex-col">
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              <Route
+                path="/"
+                element={
+                  <>
+                    <NavBar />
+                    <main className="w-full flex-1 overflow-auto bg-gray-50">
+                      <Home />
+                    </main>
+                  </>
+                }
+              />
+              <Route
+                path="/note/:id"
+                element={
+                  <>
+                    <NavBar />
+                    <main className="w-full flex-1 overflow-auto bg-gray-50">
+                      <Note />
+                    </main>
+                  </>
+                }
+              />
+            </Routes>
+          </div>
+        </UIProvider>
+      </LanguageProvider>
     </BrowserRouter>
   );
 }

apps/desktop/src/components/home/NewUserBanner.tsx

@@ -1,19 +1,22 @@
 import { RiArrowRightLine } from "@remixicon/react";
+import { useTranslation } from "react-i18next";
 
 interface NewUserBannerProps {
   onDemoClick: () => void;
 }
 
 export const NewUserBanner = ({ onDemoClick }: NewUserBannerProps) => {
+  const { t } = useTranslation();
+
   return (
     <div className="rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 p-4 text-white shadow-md">
       <div className="flex items-center justify-between">
-        <span>하이퍼노트에 대해서 궁금하신가요?</span>
+        <span>{t('home.newUser.question')}</span>
         <button
           onClick={onDemoClick}
           className="flex items-center gap-2 rounded-full bg-white px-4 py-2 text-blue-600 transition-colors hover:bg-blue-50"
         >
-          <span>데모 체험</span>
+          <span>{t('home.newUser.tryDemo')}</span>
           <RiArrowRightLine className="h-4 w-4" />
         </button>
       </div>

apps/desktop/src/components/home/PastNotes.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Note } from "../../types";
 
 interface PastNotesProps {
@@ -6,9 +7,11 @@ interface PastNotesProps {
 }
 
 export const PastNotes = ({ notes, onNoteClick }: PastNotesProps) => {
+  const { t } = useTranslation();
+
   return (
     <section>
-      <h2 className="mb-4 text-xl font-semibold">최근 노트</h2>
+      <h2 className="mb-4 text-xl font-semibold">{t('home.recentNotes')}</h2>
       <div className="space-y-4">
         {notes.map((note) => (
           <div
@@ -18,11 +21,11 @@ export const PastNotes = ({ notes, onNoteClick }: PastNotesProps) => {
           >
             <div className="mb-3 flex items-start justify-between">
               <h3 className="line-clamp-1 font-medium">
-                {note.title || "Untitled Note"}
+                {note.title || t('common.untitled')}
               </h3>
             </div>
             <p className="mb-2 shrink-0 text-sm text-gray-500">
-              {new Date(note.updatedAt).toLocaleString()}
+              {t('home.updated', { time: new Date(note.updatedAt).toLocaleString() })}
             </p>
             <p className="my-2 line-clamp-2 text-sm text-gray-600">
               {note.rawMemo}

apps/desktop/src/components/home/UpcomingEvents.tsx

@@ -3,6 +3,7 @@ import { Note } from "../../types";
 import { EventCard } from "./EventCard";
 import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 
 interface UpcomingEventsProps {
   futureNotes: Note[];
@@ -13,6 +14,7 @@ export const UpcomingEvents = ({
   futureNotes,
   onNoteClick,
 }: UpcomingEventsProps) => {
+  const { t } = useTranslation();
   const [emblaRef, emblaApi] = useEmblaCarousel({
     align: "start",
     slidesToScroll: 1,
@@ -30,7 +32,7 @@ export const UpcomingEvents = ({
 
   return (
     <div className="relative">
-      <h2 className="text-xl font-semibold">다가오는 이벤트</h2>
+      <h2 className="text-xl font-semibold">{t('home.upcomingEvents')}</h2>
       <div className="relative">
         <div className="overflow-hidden px-2 py-4" ref={emblaRef}>
           <div className="flex gap-4">

apps/desktop/src/components/layout/NavBar.tsx

@@ -5,6 +5,7 @@ import {
   RiSidebarUnfoldLine,
   RiSidebarFoldLine,
 } from "@remixicon/react";
+import { useTranslation } from "react-i18next";
 
 import SearchModal from "../modals/search/SearchModal";
 import SettingsModal from "../modals/settings/SettingsModal";
@@ -15,6 +16,7 @@ import NavigationButtons from "./NavigationButtons";
 import { useUI } from "../../contexts/UIContext";
 
 export default function NavBar() {
+  const { t } = useTranslation();
   const { isPanelOpen, setIsPanelOpen } = useUI();
   const navigate = useNavigate();
   const location = useLocation();
@@ -54,6 +56,7 @@ export default function NavBar() {
                 <button
                   onClick={handleSettingsClick}
                   className="flex items-center rounded p-2 hover:bg-gray-100"
+                  aria-label={t("settings.title")}
                 >
                   <RiMenuLine className="size-5" />
                 </button>
@@ -71,7 +74,7 @@ export default function NavBar() {
                 <button
                   onClick={togglePanel}
                   className="rounded p-2 hover:bg-gray-100"
-                  aria-label={isPanelOpen ? "Close panel" : "Open panel"}
+                  aria-label={t(isPanelOpen ? "note.panel.close" : "note.panel.open")}
                 >
                   {isPanelOpen ? (
                     <RiSidebarUnfoldLine className="size-5" />
@@ -83,9 +86,9 @@ export default function NavBar() {
                 <button
                   onClick={handleNewNote}
                   className="rounded-md bg-blue-500 px-2.5 py-1 text-sm text-white hover:bg-blue-600"
-                  aria-label="새 노트 만들기"
+                  aria-label={t("note.new.label")}
                 >
-                  새 노트
+                  {t("note.new.button")}
                 </button>
               )}
             </div>

apps/desktop/src/components/layout/SearchBar.tsx

@@ -1,14 +1,18 @@
+import { useTranslation } from "react-i18next";
+
 interface SearchBarProps {
   onSearchClick: () => void;
 }
 
 export default function SearchBar({ onSearchClick }: SearchBarProps) {
+  const { t } = useTranslation();
+
   return (
     <div className="relative">
       <button
         onClick={onSearchClick}
         className="flex items-center gap-2 rounded-md sm:bg-gray-100 sm:py-2 sm:pl-3 sm:pr-2"
-        aria-label="검색"
+        aria-label={t("search.label")}
       >
         <svg
           className="h-4 w-4 text-gray-600"
@@ -24,7 +28,7 @@ export default function SearchBar({ onSearchClick }: SearchBarProps) {
           />
         </svg>
         <span className="hidden text-xs text-gray-600 sm:inline">
-          검색...
+          {t("search.placeholder")}
           <span className="ml-4 rounded bg-gray-300 px-2 py-0.5 text-xs">
             ⌘K
           </span>

apps/desktop/src/components/modals/search/SearchModal.tsx

@@ -3,10 +3,12 @@ import "../../../styles/cmdk.css";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router";
 import { Command } from "cmdk";
+import { useTranslation } from "react-i18next";
 
 import { mockNotes } from "../../../mocks/data";
 
 const SearchModal = () => {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const navigate = useNavigate();
@@ -62,17 +64,17 @@ const SearchModal = () => {
         />
       )}
       {open && (
-        <Command label="Search" onKeyDown={handleKeyDown}>
+        <Command label={t('search.label')} onKeyDown={handleKeyDown}>
           <Command className="fixed left-[50%] top-[50%] z-[51] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white shadow-lg dark:bg-gray-800">
             <Command.Input
               value={search}
               onValueChange={setSearch}
-              placeholder="Search notes..."
+              placeholder={t('search.placeholder')}
               className="w-full"
               autoFocus
             />
             <Command.List>
-              <Command.Empty>No notes found.</Command.Empty>
+              <Command.Empty>{t('search.noResults')}</Command.Empty>
               <Command.Group>
                 {filteredNotes.map((note) => (
                   <Command.Item

apps/desktop/src/components/modals/settings/SettingsTabs.tsx

@@ -1,4 +1,5 @@
 import * as Tabs from "@radix-ui/react-tabs";
+import { useTranslation } from "react-i18next";
 import {
   RiSettings4Line,
   RiMessage2Line,
@@ -16,14 +17,40 @@ interface TabItem {
 }
 
 export function SettingsTabs() {
+  const { t } = useTranslation();
+
   const mainTabs: TabItem[] = [
-    { value: "profile", label: "프로필", icon: RiUser3Line },
-    { value: "general", label: "일반", icon: RiSettings4Line },
-    { value: "feedback", label: "피드백", icon: RiMessage2Line },
-    { value: "billing", label: "결제", icon: RiBankCardLine },
-    { value: "calendar", label: "캘린더", icon: RiCalendarLine },
-    { value: "notification", label: "알림", icon: RiNotification3Line },
-    { value: "integrations", label: "연동", icon: RiPlugLine },
+    { value: "profile", label: t("settings.tabs.profile"), icon: RiUser3Line },
+    {
+      value: "general",
+      label: t("settings.tabs.general"),
+      icon: RiSettings4Line,
+    },
+    {
+      value: "feedback",
+      label: t("settings.tabs.feedback"),
+      icon: RiMessage2Line,
+    },
+    {
+      value: "billing",
+      label: t("settings.tabs.billing"),
+      icon: RiBankCardLine,
+    },
+    {
+      value: "calendar",
+      label: t("settings.tabs.calendar"),
+      icon: RiCalendarLine,
+    },
+    {
+      value: "notification",
+      label: t("settings.tabs.notifications"),
+      icon: RiNotification3Line,
+    },
+    {
+      value: "integrations",
+      label: t("settings.tabs.integrations"),
+      icon: RiPlugLine,
+    },
   ];
 
   const TabButton = ({ tab }: { tab: TabItem }) => (