refactor: fsd 구조로 변환

src/features/boarding/ui/BoardingMissionForm.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+
+export function BoardingMissionForm({
+  onDock,
+  onCancel,
+  autoFocus = false,
+  compact = false,
+}: {
+  onDock: (mission: string) => void;
+  onCancel?: () => void;
+  autoFocus?: boolean;
+  compact?: boolean;
+}) {
+  const [mission, setMission] = useState('');
+  const trimmedMission = mission.trim();
+
+  return (
+    <div className={`flex flex-col ${compact ? 'gap-6' : 'space-y-8 flex-1'}`}>
+      <div className="space-y-3">
+        <label className="block text-sm font-medium text-slate-300">
+          이번 항해의 핵심 목표
+        </label>
+        <input
+          type="text"
+          value={mission}
+          onChange={(event) => setMission(event.target.value)}
+          placeholder="예: 서론 3문단 완성하기"
+          className="w-full border-b-2 border-slate-700 bg-slate-900/50 px-0 py-3 text-lg outline-none transition-colors placeholder:text-slate-600 focus:border-indigo-500"
+          autoFocus={autoFocus}
+        />
+      </div>
+
+      <div className={`flex ${compact ? 'justify-end gap-3' : 'mt-8 flex-col gap-3'} w-full`}>
+        {onCancel && (
+          <button
+            onClick={onCancel}
+            className="rounded-xl border border-slate-700 bg-transparent px-4 py-2 font-semibold text-slate-300 transition-colors hover:bg-slate-900/60 hover:text-white"
+          >
+            취소
+          </button>
+        )}
+        <button
+          onClick={() => onDock(trimmedMission)}
+          disabled={!trimmedMission}
+          className={`rounded-xl bg-indigo-600 font-bold text-white transition-all shadow-lg shadow-indigo-900/30 hover:bg-indigo-500 disabled:bg-slate-800 disabled:text-slate-500 ${compact ? 'px-6 py-2' : 'w-full py-4 text-lg'}`}
+        >
+          도킹 완료 (출항)
+        </button>
+      </div>
+    </div>
+  );
+}