feat: 투표 모달 구현

apps/frontend/package.json

@@ -14,6 +14,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@plum/shared-interfaces": "workspace:*",
     "@sentry/react": "^10.32.1",
     "@tailwindcss/vite": "^4.1.18",
@@ -23,10 +24,12 @@
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.71.0",
     "react-router": "^7.11.0",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
+    "zod": "^4.3.5",
     "zustand": "^5.0.9"
   },
   "devDependencies": {

apps/frontend/src/feature/create-poll/components/CreatePollModal.spec.tsx

@@ -0,0 +1,78 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { CreatePollModal } from './CreatePollModal';
+
+describe('CreatePollModal', () => {
+  const user = userEvent.setup();
+  const mockOnCreate = vi.fn();
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('사용자가 유효한 데이터를 입력하고 "추가하기"를 누르면 onCreate가 호출되고 폼이 초기화되어야 한다', async () => {
+    render(
+      <CreatePollModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const titleInput = screen.getByPlaceholderText(/무엇을 묻고 싶으신가요/i);
+    await user.type(titleInput, '새로운 테스트 투표');
+
+    const optionInputs = screen.getAllByPlaceholderText(/선택지 \d/);
+    await user.type(optionInputs[0], '사과');
+    await user.type(optionInputs[1], '바나나');
+
+    const submitButton = screen.getByRole('button', { name: /추가하기/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockOnCreate).toHaveBeenCalledWith({
+        title: '새로운 테스트 투표',
+        options: [{ value: '사과' }, { value: '바나나' }],
+        timeLimit: 0,
+      });
+    });
+
+    expect(mockOnClose).toHaveBeenCalled();
+
+    expect(titleInput).toHaveValue('');
+  });
+
+  it('필수 입력값이 누락되었을 때 "추가하기" 버튼이 비활성화 상태여야 한다', async () => {
+    render(
+      <CreatePollModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    await user.type(screen.getByPlaceholderText(/무엇을 묻고 싶으신가요/i), '제목만 있음');
+
+    const submitButton = screen.getByRole('button', { name: /추가하기/i });
+    expect(submitButton).toBeDisabled();
+  });
+
+  it('닫기 버튼 클릭 시 onClose가 호출되어야 한다', async () => {
+    render(
+      <CreatePollModal
+        isOpen={true}
+        onClose={mockOnClose}
+        onCreate={mockOnCreate}
+      />,
+    );
+
+    const closeButton = screen.getByRole('button', { name: /모달 닫기/i });
+    await user.click(closeButton);
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+});

apps/frontend/src/feature/create-poll/components/CreatePollModal.tsx

@@ -1,35 +1,53 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Modal } from '@/shared/components/Modal';
-import { PollOptionListSection } from './PollOptionListSection';
-import { usePollOptions } from '../hooks/usePollOptions';
+import { PollForm } from './PollForm';
+import { pollFormDefaultValues, PollFormValues, pollFormSchema } from '../schema';
+import { logger } from '@/shared/lib/logger';
 
 interface CreatePollModalProps {
   isOpen: boolean;
   onClose: () => void;
+  onCreate: (data: PollFormValues) => void;
 }
 
 /**
  * 투표 생성 모달 컴포넌트
- * @param isOpen 모달 열림 상태
- * @param onClose 모달 닫기 핸들러
+ * @param isOpen - 모달 열림 상태
+ * @param onClose - 모달 닫기 핸들러
+ * @param onCreate - 투표 추가 핸들러
+ * @returns 투표 생성 모달 JSX 요소
  */
-export const CreatePollModal = ({ isOpen, onClose }: CreatePollModalProps) => {
-  const { options, addOption, deleteOption, updateOption, canAddMore, canDelete } =
-    usePollOptions();
+export function CreatePollModal({ isOpen, onClose, onCreate }: CreatePollModalProps) {
+  const formMethods = useForm<PollFormValues>({
+    resolver: zodResolver(pollFormSchema),
+    defaultValues: pollFormDefaultValues,
+    mode: 'onChange',
+  });
+
+  const handleSubmit = (data: PollFormValues) => {
+    logger.ui.info('투표 생성 데이터:', data);
+    onCreate(data);
+    formMethods.reset();
+    onClose();
+  };
 
   return (
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      className="w-full max-w-181.5"
+      className="max-w-181.5"
     >
-      <PollOptionListSection
-        options={options}
-        onAddOption={addOption}
-        onDeleteOption={deleteOption}
-        onUpdateOption={updateOption}
-        canAddMore={canAddMore}
-        canDelete={canDelete}
+      <header className="flex items-center justify-between pb-4">
+        <Modal.Title>새로운 투표 추가</Modal.Title>
+        <Modal.CloseButton onClose={onClose} />
+      </header>
+
+      <PollForm
+        formMethods={formMethods}
+        onSubmit={handleSubmit}
+        submitLabel="추가하기"
       />
     </Modal>
   );
-};
+}

apps/frontend/src/feature/create-poll/components/PollForm.spec.tsx

@@ -0,0 +1,122 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import '@testing-library/jest-dom';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { PollForm } from './PollForm';
+import { pollFormSchema, PollFormValues } from '../schema';
+import { MAX_POLL_OPTIONS } from '../constants';
+
+const TestWrapper = ({ onSubmit }: { onSubmit: (data: PollFormValues) => void }) => {
+  const formMethods = useForm<PollFormValues>({
+    resolver: zodResolver(pollFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      title: '',
+      options: [{ value: '' }, { value: '' }],
+      timeLimit: 0,
+    },
+  });
+
+  return (
+    <PollForm
+      formMethods={formMethods}
+      onSubmit={onSubmit}
+      submitLabel="제출하기"
+    />
+  );
+};
+
+describe('PollForm', () => {
+  const user = userEvent.setup();
+  const mockSubmit = vi.fn();
+
+  beforeEach(() => {
+    mockSubmit.mockClear();
+  });
+
+  it('모든 필수 항목이 올바르게 입력되면 제출 버튼이 활성화되어야 한다', async () => {
+    render(<TestWrapper onSubmit={mockSubmit} />);
+    const submitButton = screen.getByRole('button', { name: '제출하기' });
+    expect(submitButton).toBeDisabled();
+
+    await user.type(screen.getByPlaceholderText(/무엇을 묻고 싶으신가요/), '오늘의 점심');
+    await user.type(screen.getByPlaceholderText('선택지 1'), '짜장면');
+    await user.type(screen.getByPlaceholderText('선택지 2'), '짬뽕');
+
+    await waitFor(() => {
+      expect(submitButton).toBeEnabled();
+    });
+  });
+
+  it('선택지 추가 버튼을 누르면 새로운 입력창이 나타나야 한다', async () => {
+    render(<TestWrapper onSubmit={mockSubmit} />);
+
+    const addButton = screen.getByRole('button', { name: /선택지 추가/ });
+    await user.click(addButton);
+
+    expect(screen.getByPlaceholderText('선택지 3')).toBeInTheDocument();
+  });
+
+  it(`선택지가 최대 개수(${MAX_POLL_OPTIONS})에 도달하면 추가 버튼이 비활성화되어야 한다`, async () => {
+    render(<TestWrapper onSubmit={mockSubmit} />);
+    const addButton = screen.getByRole('button', { name: /선택지 추가/ });
+
+    for (let i = 0; i < MAX_POLL_OPTIONS - 2; i++) {
+      await user.click(addButton);
+    }
+
+    expect(addButton).toBeDisabled();
+  });
+
+  it('제목에 공백만 입력할 경우, 다른 필드가 유효하더라도 제출 버튼이 비활성화되어야 한다', async () => {
+    render(<TestWrapper onSubmit={mockSubmit} />);
+    const submitButton = screen.getByRole('button', { name: '제출하기' });
+    const titleInput = screen.getByPlaceholderText(/무엇을 묻고 싶으신가요/);
+    const optionInputs = screen.getAllByPlaceholderText(/선택지 \d/);
+
+    await user.type(optionInputs[0], '사과');
+    await user.type(optionInputs[1], '바나나');
+
+    await user.type(titleInput, '   ');
+
+    await waitFor(() => {
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  it('제출 시 입력된 데이터가 올바른 구조로 onSubmit 핸들러에 전달되어야 한다', async () => {
+    render(<TestWrapper onSubmit={mockSubmit} />);
+
+    await user.type(screen.getByPlaceholderText(/무엇을 묻고 싶으신가요/), '간식 투표');
+    await user.type(screen.getByPlaceholderText('선택지 1'), '치킨');
+    await user.type(screen.getByPlaceholderText('선택지 2'), '피자');
+
+    const submitButton = screen.getByRole('button', { name: '제출하기' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalledWith(
+        {
+          title: '간식 투표',
+          options: [{ value: '치킨' }, { value: '피자' }],
+          timeLimit: 0,
+        },
+        expect.anything(),
+      );
+    });
+  });
+
+  it('커스텀 드롭다운을 통해 시간이 변경되면 폼 상태에 반영되어야 한다', async () => {
+    render(<TestWrapper onSubmit={mockSubmit} />);
+
+    const dropdownButton = screen.getByRole('button', { name: /제한 없음/ });
+    await user.click(dropdownButton);
+
+    const option1Min = screen.getByText('1분');
+    await user.click(option1Min);
+
+    expect(screen.getByText('1분')).toBeInTheDocument();
+  });
+});

apps/frontend/src/feature/create-poll/components/PollForm.tsx

@@ -0,0 +1,95 @@
+import { Controller, useFieldArray, UseFormReturn } from 'react-hook-form';
+import { FormField } from '@/shared/components/FormField';
+import { Button } from '@/shared/components/Button';
+import { Icon } from '@/shared/components/icon/Icon';
+import { PollOptionList } from './PollOptionList';
+import { MAX_POLL_OPTIONS } from '../constants';
+import { POLL_FORM_KEYS, PollFormValues } from '../schema';
+import { TimeLimitDropdown } from '@/shared/components/TimeLimitDropdown';
+
+interface PollFormProps {
+  formMethods: UseFormReturn<PollFormValues>;
+  onSubmit: (data: PollFormValues) => void;
+  submitLabel: string;
+}
+
+/**
+ * 투표 폼 컴포넌트
+ * @param formMethods - react-hook-form의 폼 메서드 객체
+ * @param onSubmit - 폼 제출 핸들러
+ * @param submitLabel - 제출 버튼 라벨
+ * @returns 투표 폼 JSX 요소
+ */
+export function PollForm({ formMethods, onSubmit, submitLabel }: PollFormProps) {
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { isValid },
+  } = formMethods;
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: POLL_FORM_KEYS.options,
+  });
+
+  return (
+    <form
+      className="flex h-full min-h-0 flex-col gap-6 overflow-y-scroll"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <FormField required>
+        <FormField.Legend className="mb-2 font-extrabold">투표 제목</FormField.Legend>
+        <FormField.Input
+          {...register(POLL_FORM_KEYS.title, { required: true, minLength: 2 })}
+          placeholder="무엇을 묻고 싶으신가요?"
+        />
+      </FormField>
+
+      <FormField required>
+        <FormField.Legend className="mb-2 font-extrabold">투표 선택지</FormField.Legend>
+        <div className="flex flex-col gap-3">
+          <PollOptionList
+            fields={fields}
+            register={register}
+            onDelete={remove}
+          />
+          <Button
+            variant="ghost"
+            type="button"
+            onClick={() => append({ value: '' })}
+            disabled={fields.length >= MAX_POLL_OPTIONS}
+          >
+            <Icon
+              name="plus"
+              size={14}
+            />
+            <span>선택지 추가</span>
+          </Button>
+        </div>
+      </FormField>
+
+      <FormField required>
+        <FormField.Legend className="mb-2 font-extrabold">제한 시간</FormField.Legend>
+        <Controller
+          control={control}
+          name={POLL_FORM_KEYS.timeLimit}
+          render={({ field: { onChange, value } }) => (
+            <TimeLimitDropdown
+              selectedTime={value}
+              onChange={onChange}
+            />
+          )}
+        />
+      </FormField>
+
+      <Button
+        type="submit"
+        disabled={!isValid}
+        className="w-full"
+      >
+        {submitLabel}
+      </Button>
+    </form>
+  );
+}