refactor: fsd 구조로 변환

2026-02-13 15:20:35 +09:00
parent bb1a6fbdab
commit d60d4ccd9e
45 changed files with 1283 additions and 1222 deletions
--- a/src/widgets/lobby-routes/ui/LobbyRoutesPanel.tsx
+++ b/src/widgets/lobby-routes/ui/LobbyRoutesPanel.tsx
@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+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';
+
+function RouteCard({
+  route,
+  isCTA = false,
+  onLaunch,
+}: {
+  route: (typeof ROUTES)[number];
+  isCTA?: boolean;
+  onLaunch: (route: (typeof ROUTES)[number]) => void;
+}) {
+  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' : ''}`}
+    >
+      <div
+        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' : ''}>
+          <h3
+            className={`font-bold text-indigo-100 transition-colors group-hover:text-white ${isCTA ? 'text-3xl' : 'text-xl'}`}
+          >
+            {route.name}
+          </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}
+          </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'}
+          </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}
+        </p>
+      )}
+
+      {isCTA && (
+        <p className="relative z-10 mb-6 max-w-lg text-base text-slate-400">
+          {route.description}
+        </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'}`}
+      >
+        {isCTA ? '정거장 진입 (대기)' : '바로 출항'}
+      </button>
+    </div>
+  );
+}
+
+export function LobbyRoutesPanel() {
+  useLobbyRedirect();
+  const router = useRouter();
+  const [selectedRouteId, setSelectedRouteId] = useState<string | null>(null);
+  const [isBoardingOpen, setIsBoardingOpen] = useState(false);
+
+  const stationRoute = ROUTES[0];
+  const normalRoutes = ROUTES.slice(1);
+  const selectedRoute =
+    ROUTES.find((route) => route.id === selectedRouteId) ?? stationRoute;
+
+  const handleOpenBoarding = (route: (typeof ROUTES)[number]) => {
+    setSelectedRouteId(route.id);
+    setIsBoardingOpen(true);
+  };
+
+  const handleDocking = (mission: string) => {
+    const started = startVoyage({
+      route: selectedRoute,
+      mission,
+    });
+
+    if (!started) return;
+
+    setIsBoardingOpen(false);
+    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">
+          어느 별자리로 출항할까요?
+        </h1>
+        <p className="text-lg text-slate-300">몰입하기 좋은 궤도입니다.</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} />
+        </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>
+
+      <Dialog open={isBoardingOpen} onOpenChange={setIsBoardingOpen}>
+        <DialogContent
+          className="max-w-xl border-slate-800 bg-slate-950 text-slate-100"
+          showCloseButton={true}
+        >
+          <DialogHeader className="mb-2">
+            <h2 className="mb-1 text-sm font-semibold uppercase tracking-widest text-indigo-400">
+              Boarding Check
+            </h2>
+            <DialogTitle className="text-2xl font-bold text-white">
+              {selectedRoute.name} 항로 탑승
+            </DialogTitle>
+            <DialogDescription className="text-slate-400">
+              항해를 시작하기 전에 목표를 설정하세요.
+            </DialogDescription>
+          </DialogHeader>
+
+          <BoardingMissionForm
+            onDock={handleDocking}
+            onCancel={() => setIsBoardingOpen(false)}
+            autoFocus={true}
+            compact={true}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}