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

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/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;

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

@@ -0,0 +1,165 @@
+import QuestionItemList from '@/domain/admin/blog/magnet/form/QuestionItemList';
+import {
+  FormQuestion,
+  FormQuestionItem,
+  FormQuestionType,
+  FormResponseRequired,
+  FormSelectionMethod,
+} from '@/domain/admin/blog/magnet/types';
+import {
+  FormControlLabel,
+  IconButton,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+import { Trash } from 'lucide-react';
+
+interface QuestionCardProps {
+  questionNumber: number;
+  question: FormQuestion;
+  onUpdate: (patch: Partial<FormQuestion>) => void;
+  onRemove: () => void;
+}
+
+const QuestionCard = ({
+  questionNumber,
+  question,
+  onUpdate,
+  onRemove,
+}: QuestionCardProps) => {
+  const handleQuestionTypeChange = (value: string) => {
+    onUpdate({ questionType: value as FormQuestionType });
+  };
+
+  const handleRequiredChange = (value: string) => {
+    onUpdate({ isRequired: value as FormResponseRequired });
+  };
+
+  const handleSelectionMethodChange = (value: string) => {
+    onUpdate({ selectionMethod: value as FormSelectionMethod });
+  };
+
+  const handleItemsChange = (items: FormQuestionItem[]) => {
+    onUpdate({ items });
+  };
+
+  return (
+    <div className="rounded-lg border border-neutral-200 bg-white p-6">
+      <div className="mb-5 flex items-center justify-between">
+        <span className="text-lg font-semibold">
+          질문 {questionNumber}
+        </span>
+        <IconButton size="small" onClick={onRemove}>
+          <Trash size={18} />
+        </IconButton>
+      </div>
+
+      <div className="flex flex-col gap-5">
+        {/* 질문 유형 */}
+        <div>
+          <label className="mb-1 block text-sm font-medium">
+            질문 유형
+          </label>
+          <RadioGroup
+            row
+            value={question.questionType}
+            onChange={(e) => handleQuestionTypeChange(e.target.value)}
+          >
+            <FormControlLabel
+              value="SUBJECTIVE"
+              control={<Radio size="small" />}
+              label="주관식"
+            />
+            <FormControlLabel
+              value="OBJECTIVE"
+              control={<Radio size="small" />}
+              label="객관식"
+            />
+          </RadioGroup>
+        </div>
+
+        {/* 응답 설정 */}
+        <div>
+          <label className="mb-1 block text-sm font-medium">
+            응답 설정
+          </label>
+          <RadioGroup
+            row
+            value={question.isRequired}
+            onChange={(e) => handleRequiredChange(e.target.value)}
+          >
+            <FormControlLabel
+              value="REQUIRED"
+              control={<Radio size="small" />}
+              label="필수"
+            />
+            <FormControlLabel
+              value="OPTIONAL"
+              control={<Radio size="small" />}
+              label="선택"
+            />
+          </RadioGroup>
+        </div>
+
+        {/* 질문 */}
+        <TextField
+          label="질문 *"
+          placeholder="질문을 입력하세요"
+          fullWidth
+          size="small"
+          value={question.question}
+          onChange={(e) => onUpdate({ question: e.target.value })}
+        />
+
+        {/* 설명 */}
+        <TextField
+          label="설명"
+          placeholder="질문에 대한 설명을 입력하세요 (선택사항)"
+          fullWidth
+          size="small"
+          multiline
+          minRows={2}
+          value={question.description}
+          onChange={(e) => onUpdate({ description: e.target.value })}
+        />
+
+        {/* 객관식 전용 영역 */}
+        {question.questionType === 'OBJECTIVE' && (
+          <>
+            <div>
+              <label className="mb-1 block text-sm font-medium">
+                선택 방식
+              </label>
+              <RadioGroup
+                row
+                value={question.selectionMethod}
+                onChange={(e) =>
+                  handleSelectionMethodChange(e.target.value)
+                }
+              >
+                <FormControlLabel
+                  value="SINGLE"
+                  control={<Radio size="small" />}
+                  label="단일선택"
+                />
+                <FormControlLabel
+                  value="MULTIPLE"
+                  control={<Radio size="small" />}
+                  label="다중선택"
+                />
+              </RadioGroup>
+            </div>
+
+            <QuestionItemList
+              items={question.items}
+              onUpdateItems={handleItemsChange}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default QuestionCard;