feat: 다국어 화

src/widgets/lobby-routes/ui/LobbyRoutesPanel.tsx

@@ -1,16 +1,17 @@
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-import { BoardingMissionForm, startVoyage } from '@/features/boarding';
-import { useLobbyRedirect } from '@/features/lobby-session/model/useLobbyRedirect';
-import { ROUTES } from '@/shared/config/routes';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog";
+import { BoardingMissionForm, startVoyage } from "@/features/boarding";
+import { useI18n } from "@/features/i18n/model/useI18n";
+import { useLobbyRedirect } from "@/features/lobby-session/model/useLobbyRedirect";
+import { ROUTES } from "@/shared/config/routes";
 
 function RouteCard({
   route,
@@ -21,58 +22,62 @@ function RouteCard({
   isCTA?: boolean;
   onLaunch: (route: (typeof ROUTES)[number]) => void;
 }) {
+  const { t } = useI18n();
+
   return (
     <div
-      className={`group relative flex h-full flex-col rounded-2xl border border-slate-800 bg-slate-900/60 p-6 shadow-lg backdrop-blur-md transition-all duration-300 hover:border-indigo-500/50 hover:bg-slate-800/80 hover:shadow-indigo-900/20 ${isCTA ? 'min-h-[200px] items-center justify-center text-center' : ''}`}
+      className={`group relative flex h-full flex-col rounded-2xl border border-slate-800 bg-slate-900/60 p-6 shadow-lg backdrop-blur-md transition-all duration-300 hover:border-indigo-500/50 hover:bg-slate-800/80 hover:shadow-indigo-900/20 ${isCTA ? "min-h-[200px] items-center justify-center text-center" : ""}`}
     >
       <div
-        className={`relative z-10 flex w-full ${isCTA ? 'flex-col items-center gap-4' : 'mb-4 items-start justify-between'}`}
+        className={`relative z-10 flex w-full ${isCTA ? "flex-col items-center gap-4" : "mb-4 items-start justify-between"}`}
       >
-        <div className={isCTA ? 'flex flex-col items-center' : ''}>
+        <div className={isCTA ? "flex flex-col items-center" : ""}>
           <h3
-            className={`font-bold text-indigo-100 transition-colors group-hover:text-white ${isCTA ? 'text-3xl' : 'text-xl'}`}
+            className={`font-bold text-indigo-100 transition-colors group-hover:text-white ${isCTA ? "text-3xl" : "text-xl"}`}
           >
-            {route.name}
+            {t(route.nameKey, undefined, route.id)}
           </h3>
           <span className="mt-2 inline-block rounded-full border border-slate-800 bg-slate-950/50 px-2 py-0.5 text-xs font-medium text-slate-400">
-            {route.tag}
+            {t(route.tagKey)}
           </span>
         </div>
-
-        <span
-          className={`font-light text-slate-300 transition-colors group-hover:text-white ${isCTA ? 'mt-2 text-4xl' : 'text-3xl'}`}
-        >
-          {route.durationMinutes === 0 ? '∞' : route.durationMinutes}
-          <span className="ml-1 text-sm text-slate-500">
-            {route.durationMinutes === 0 ? '' : 'min'}
+        {route.durationMinutes !== 0 && (
+          <span
+            className={`font-light text-slate-300 transition-colors group-hover:text-white ${isCTA ? "mt-2 text-4xl" : "text-3xl"}`}
+          >
+            {route.durationMinutes !== 0 && route.durationMinutes}
+            <span className="ml-1 text-sm text-slate-500">
+              {route.durationMinutes !== 0 && t("common.minuteShort")}
+            </span>
           </span>
-        </span>
+        )}
       </div>
 
       {!isCTA && (
         <p className="relative z-10 mb-8 w-full flex-1 text-left text-sm leading-relaxed text-slate-400">
-          {route.description}
+          {t(route.descriptionKey)}
         </p>
       )}
 
       {isCTA && (
-        <p className="relative z-10 mb-6 max-w-lg text-base text-slate-400">
-          {route.description}
+        <p className="relative z-10 mt-2 mb-6 max-w-lg text-left text-base text-slate-400">
+          {t(route.descriptionKey)}
         </p>
       )}
 
       <button
         type="button"
         onClick={() => onLaunch(route)}
-        className={`relative z-10 flex items-center justify-center rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-900/30 transition-all hover:bg-indigo-500 active:scale-[0.98] ${isCTA ? 'w-full max-w-md py-4 text-lg' : 'w-full py-4'}`}
+        className={`relative z-10 flex items-center justify-center rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-900/30 transition-all hover:bg-indigo-500 active:scale-[0.98] ${isCTA ? "w-full max-w-md py-4 text-lg" : "w-full py-4"}`}
       >
-        {isCTA ? '정거장 진입 (대기)' : '바로 출항'}
+        {isCTA ? t("lobby.cta.station") : t("lobby.cta.launch")}
       </button>
     </div>
   );
 }
 
 export function LobbyRoutesPanel() {
+  const { t } = useI18n();
   useLobbyRedirect();
   const router = useRouter();
   const [selectedRouteId, setSelectedRouteId] = useState<string | null>(null);
@@ -92,31 +97,40 @@ export function LobbyRoutesPanel() {
     const started = startVoyage({
       route: selectedRoute,
       mission,
+      routeName: t(selectedRoute.nameKey, undefined, selectedRoute.id),
     });
 
     if (!started) return;
 
     setIsBoardingOpen(false);
-    router.push('/flight');
+    router.push("/flight");
   };
 
   return (
     <div className="relative z-10 flex min-h-[calc(100vh-80px)] flex-col items-center justify-center p-6 md:p-12">
       <div className="mx-auto mb-12 max-w-2xl space-y-4 rounded-3xl border border-slate-800/30 bg-slate-950/30 p-6 text-center backdrop-blur-sm">
         <h1 className="text-3xl font-bold tracking-tight text-slate-100 md:text-5xl">
-          어느 별자리로 출항할까요?
+          {t("lobby.title")}
         </h1>
-        <p className="text-lg text-slate-300">몰입하기 좋은 궤도입니다.</p>
+        <p className="text-lg text-slate-300">{t("lobby.subtitle")}</p>
       </div>
 
       <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
         <div className="w-full">
-          <RouteCard route={stationRoute} isCTA={true} onLaunch={handleOpenBoarding} />
+          <RouteCard
+            route={stationRoute}
+            isCTA={true}
+            onLaunch={handleOpenBoarding}
+          />
         </div>
 
         <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
           {normalRoutes.map((route) => (
-            <RouteCard key={route.id} route={route} onLaunch={handleOpenBoarding} />
+            <RouteCard
+              key={route.id}
+              route={route}
+              onLaunch={handleOpenBoarding}
+            />
           ))}
         </div>
       </div>
@@ -128,13 +142,15 @@ export function LobbyRoutesPanel() {
         >
           <DialogHeader className="mb-2">
             <h2 className="mb-1 text-sm font-semibold uppercase tracking-widest text-indigo-400">
-              Boarding Check
+              {t("lobby.modal.boardingCheck")}
             </h2>
             <DialogTitle className="text-2xl font-bold text-white">
-              {selectedRoute.name} 항로 탑승
+              {t("lobby.modal.routeBoarding", {
+                routeName: t(selectedRoute.nameKey, undefined, selectedRoute.id),
+              })}
             </DialogTitle>
             <DialogDescription className="text-slate-400">
-              항해를 시작하기 전에 목표를 설정하세요.
+              {t("lobby.modal.description")}
             </DialogDescription>
           </DialogHeader>