LC-2857 ADMIN 마그넷 내부화 신청폼 관리

src/app/admin/blog/magnet/[id]/form/common/page.tsx

@@ -1,4 +1,10 @@
-// TODO: 공통 신청폼 관리 페이지 구현 예정
-export default function MagnetFormCommonPage() {
-  return <div>공통 신청폼 관리 (준비 중)</div>;
-}
+import CommonFormPage from '@/domain/admin/blog/magnet/CommonFormPage';
+import { fetchCommonForm } from '@/domain/admin/blog/magnet/mock';
+
+const Page = async () => {
+  const initialData = await fetchCommonForm();
+
+  return <CommonFormPage initialData={initialData} />;
+};
+
+export default Page;

src/app/admin/blog/magnet/[id]/form/page.tsx

@@ -1,4 +1,11 @@
-// TODO: 마그넷 신청 폼 관리 페이지 구현 예정
-export default function MagnetFormPage() {
-  return <div>신청 폼 관리 (준비 중)</div>;
-}
+import { fetchMagnetForm } from '@/domain/admin/blog/magnet/mock';
+import MagnetFormPage from '@/domain/admin/blog/magnet/MagnetFormPage';
+
+const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params;
+  const initialData = await fetchMagnetForm(Number(id));
+
+  return <MagnetFormPage magnetId={id} initialData={initialData} />;
+};
+
+export default Page;

src/domain/admin/blog/magnet/CommonFormPage.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import FormBuilderSection from '@/domain/admin/blog/magnet/form/FormBuilderSection';
+import { useCommonFormBuilder } from '@/domain/admin/blog/magnet/hooks/useCommonFormBuilder';
+import { CommonFormData } from '@/domain/admin/blog/magnet/types';
+import Heading from '@/domain/admin/ui/heading/Heading';
+import { Button, IconButton } from '@mui/material';
+import { ArrowLeft } from 'lucide-react';
+
+interface CommonFormPageProps {
+  initialData: CommonFormData;
+}
+
+const CommonFormPage = ({ initialData }: CommonFormPageProps) => {
+  const {
+    questions,
+    addQuestion,
+    removeQuestion,
+    updateQuestion,
+    saveForm,
+    navigateToList,
+  } = useCommonFormBuilder({ initialData });
+
+  return (
+    <div className="mx-6 mb-40 mt-6">
+      <header className="mb-6 flex items-center gap-2">
+        <IconButton size="small" onClick={navigateToList}>
+          <ArrowLeft size={20} />
+        </IconButton>
+        <Heading>공통 신청폼 관리</Heading>
+      </header>
+
+      <main className="max-w-screen-xl">
+        <FormBuilderSection
+          questions={questions}
+          onUpdateQuestion={updateQuestion}
+          onRemoveQuestion={removeQuestion}
+          onAddQuestion={addQuestion}
+        />
+
+        <div className="mt-8 flex items-center justify-end gap-4">
+          <Button
+            variant="outlined"
+            type="button"
+            onClick={navigateToList}
+          >
+            취소
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            type="button"
+            onClick={saveForm}
+          >
+            저장하기
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default CommonFormPage;

src/domain/admin/blog/magnet/MagnetFormPage.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import CloneFormDropdown from '@/domain/admin/blog/magnet/form/CloneFormDropdown';
+import FormBuilderSection from '@/domain/admin/blog/magnet/form/FormBuilderSection';
+import { useMagnetFormBuilder } from '@/domain/admin/blog/magnet/hooks/useMagnetFormBuilder';
+import { MagnetFormData } from '@/domain/admin/blog/magnet/types';
+import Heading from '@/domain/admin/ui/heading/Heading';
+import { Button } from '@mui/material';
+
+interface MagnetFormPageProps {
+  magnetId: string;
+  initialData: MagnetFormData;
+}
+
+const MagnetFormPage = ({
+  magnetId,
+  initialData,
+}: MagnetFormPageProps) => {
+  const {
+    questions,
+    addQuestion,
+    removeQuestion,
+    updateQuestion,
+    cloneFromMagnet,
+    saveForm,
+    navigateToList,
+  } = useMagnetFormBuilder({ magnetId, initialData });
+
+  return (
+    <div className="mx-6 mb-40 mt-6">
+      <header className="mb-6 flex items-center justify-between">
+        <Heading>신청폼 관리</Heading>
+        <CloneFormDropdown
+          currentMagnetId={Number(magnetId)}
+          hasExistingQuestions={questions.length > 0}
+          onClone={cloneFromMagnet}
+        />
+      </header>
+
+      <main className="max-w-screen-xl">
+        <FormBuilderSection
+          questions={questions}
+          onUpdateQuestion={updateQuestion}
+          onRemoveQuestion={removeQuestion}
+          onAddQuestion={addQuestion}
+        />
+
+        <div className="mt-8 flex items-center justify-end gap-4">
+          <Button
+            variant="outlined"
+            type="button"
+            onClick={navigateToList}
+          >
+            취소
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            type="button"
+            onClick={saveForm}
+          >
+            저장하기
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default MagnetFormPage;

src/domain/admin/blog/magnet/form/CloneFormDropdown.tsx

@@ -0,0 +1,82 @@
+import {
+  fetchMagnetForm,
+  fetchMagnetsWithForm,
+} from '@/domain/admin/blog/magnet/mock';
+import { FormQuestion } from '@/domain/admin/blog/magnet/types';
+import { Button, Menu, MenuItem } from '@mui/material';
+import { Copy } from 'lucide-react';
+import { MouseEvent, useMemo, useState } from 'react';
+
+interface CloneFormDropdownProps {
+  currentMagnetId: number;
+  hasExistingQuestions: boolean;
+  onClone: (questions: FormQuestion[]) => void;
+}
+
+const CloneFormDropdown = ({
+  currentMagnetId,
+  hasExistingQuestions,
+  onClone,
+}: CloneFormDropdownProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const magnetsWithForm = useMemo(() => {
+    return fetchMagnetsWithForm().filter(
+      (m) => m.id !== currentMagnetId,
+    );
+  }, [currentMagnetId]);
+
+  const handleOpen = (e: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(e.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleClone = async (magnetId: number) => {
+    handleClose();
+
+    if (hasExistingQuestions) {
+      const confirmed = window.confirm(
+        '기존 질문이 모두 대체됩니다. 계속하시겠습니까?',
+      );
+      if (!confirmed) return;
+    }
+
+    const data = await fetchMagnetForm(magnetId);
+    onClone(data.questions);
+  };
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        startIcon={<Copy size={16} />}
+        onClick={handleOpen}
+      >
+        신청폼 복제
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        {magnetsWithForm.length === 0 ? (
+          <MenuItem disabled>복제할 수 있는 폼이 없습니다</MenuItem>
+        ) : (
+          magnetsWithForm.map((m) => (
+            <MenuItem
+              key={m.id}
+              onClick={() => handleClone(m.id)}
+            >
+              [{m.id}] {m.title} ({m.questionCount}개 질문)
+            </MenuItem>
+          ))
+        )}
+      </Menu>
+    </>
+  );
+};
+
+export default CloneFormDropdown;

src/domain/admin/blog/magnet/form/FormBuilderSection.tsx

@@ -0,0 +1,51 @@
+import QuestionCard from '@/domain/admin/blog/magnet/form/QuestionCard';
+import { FormQuestion } from '@/domain/admin/blog/magnet/types';
+import { Button } from '@mui/material';
+import { Plus } from 'lucide-react';
+
+interface FormBuilderSectionProps {
+  questions: FormQuestion[];
+  onUpdateQuestion: (
+    questionId: string,
+    patch: Partial<FormQuestion>,
+  ) => void;
+  onRemoveQuestion: (questionId: string) => void;
+  onAddQuestion: () => void;
+}
+
+const FormBuilderSection = ({
+  questions,
+  onUpdateQuestion,
+  onRemoveQuestion,
+  onAddQuestion,
+}: FormBuilderSectionProps) => {
+  return (
+    <div>
+      <div className="flex flex-col gap-4">
+        {questions.map((question, index) => (
+          <QuestionCard
+            key={question.questionId}
+            questionNumber={index + 1}
+            question={question}
+            onUpdate={(patch) =>
+              onUpdateQuestion(question.questionId, patch)
+            }
+            onRemove={() => onRemoveQuestion(question.questionId)}
+          />
+        ))}
+      </div>
+
+      <div className="mt-4">
+        <Button
+          variant="contained"
+          startIcon={<Plus size={16} />}
+          onClick={onAddQuestion}
+        >
+          질문 추가
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default FormBuilderSection;