feat: 항해 종료 시 버튼을 꾹 눌러서 종료

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

@@ -1,5 +1,7 @@
+import { BookOpenText, Languages, Settings } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 
 import {
   Dialog,
@@ -11,6 +13,7 @@ import {
 import { BoardingMissionForm, startVoyage } from "@/features/boarding";
 import { useI18n } from "@/features/i18n/model/useI18n";
 import { useLobbyRedirect } from "@/features/lobby-session/model/useLobbyRedirect";
+import { LOCALE_LABELS, Locale, SUPPORTED_LOCALES } from "@/shared/config/i18n";
 import { ROUTES } from "@/shared/config/routes";
 
 function RouteCard({
@@ -77,7 +80,7 @@ function RouteCard({
 }
 
 export function LobbyRoutesPanel() {
-  const { t } = useI18n();
+  const { locale, setLocale, t } = useI18n();
   useLobbyRedirect();
   const router = useRouter();
   const [selectedRouteId, setSelectedRouteId] = useState<string | null>(null);
@@ -106,32 +109,79 @@ export function LobbyRoutesPanel() {
     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">{t("lobby.subtitle")}</p>
-      </div>
+  const handleLocaleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    setLocale(event.target.value as Locale);
+  };
 
-      <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}
-          />
+  return (
+    <div className="relative z-10 flex min-h-[calc(100vh-80px)] w-full flex-col p-6 md:p-12 lg:min-h-screen lg:flex-row lg:items-stretch lg:gap-0 lg:p-0">
+      <aside className="hidden w-72 shrink-0 border-r border-slate-700/80 bg-slate-800/65 px-7 py-8 shadow-[2px_0_24px_rgba(2,6,23,0.45)] backdrop-blur lg:flex lg:min-h-screen lg:flex-col lg:justify-between">
+        <div className="flex flex-col gap-10">
+          <h1 className="text-lg font-bold tracking-[0.14em] text-indigo-300">
+            FOCUSTELLA
+          </h1>
+          <nav className="flex flex-col gap-2">
+            <Link
+              href="/log"
+              className="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-sm font-semibold text-slate-300 transition-colors hover:border-slate-700 hover:bg-slate-900/70 hover:text-slate-100"
+            >
+              <BookOpenText className="h-4 w-4 text-indigo-300" aria-hidden />
+              <span>{t("layout.nav.log")}</span>
+            </Link>
+            <Link
+              href="/settings"
+              className="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-sm font-semibold text-slate-300 transition-colors hover:border-slate-700 hover:bg-slate-900/70 hover:text-slate-100"
+            >
+              <Settings className="h-4 w-4 text-indigo-300" aria-hidden />
+              <span>{t("layout.nav.settings")}</span>
+            </Link>
+          </nav>
+        </div>
+        <label className="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2 text-xs text-slate-300">
+          <span className="inline-flex items-center gap-2">
+            <Languages className="h-4 w-4 text-indigo-300" aria-hidden />
+            {t("layout.nav.language")}
+          </span>
+          <select
+            value={locale}
+            onChange={handleLocaleChange}
+            className="rounded border border-slate-700 bg-slate-900/80 px-2 py-1 text-xs text-slate-200 outline-none transition-colors focus:border-indigo-400"
+          >
+            {SUPPORTED_LOCALES.map((item) => (
+              <option key={item} value={item}>
+                {LOCALE_LABELS[item]}
+              </option>
+            ))}
+          </select>
+        </label>
+      </aside>
+
+      <div className="w-full flex-1 lg:min-h-screen lg:bg-slate-950/68 lg:px-10 lg:pt-10 lg:shadow-[inset_0_1px_0_rgba(148,163,184,0.06)]">
+        <div className="mx-auto mb-12 max-w-2xl space-y-4 rounded-3xl border border-slate-800/40 bg-slate-950/35 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">{t("lobby.subtitle")}</p>
         </div>
 
-        <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
-          {normalRoutes.map((route) => (
+        <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 pb-8">
+          <div className="w-full">
             <RouteCard
-              key={route.id}
-              route={route}
+              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}
+              />
+            ))}
+          </div>
         </div>
       </div>