리팩토링: 코드 최적화

2026-05-25 18:42:13 +09:00
parent 5ee33bf0d3
commit d56cada1ec
11 changed files with 215 additions and 175 deletions
@@ -0,0 +1,67 @@
+"use client";
+
+import type { FormEvent } from "react";
+
+interface AnswerFormProps {
+  answerA: string;
+  answerB: string;
+  disabled: boolean;
+  error: string;
+  onAnswerAChange: (value: string) => void;
+  onAnswerBChange: (value: string) => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+}
+
+export default function AnswerForm({
+  answerA,
+  answerB,
+  disabled,
+  error,
+  onAnswerAChange,
+  onAnswerBChange,
+  onSubmit,
+}: AnswerFormProps) {
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
+    >
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
+          첫째 항
+          <input
+            value={answerA}
+            onChange={(event) => onAnswerAChange(event.target.value)}
+            disabled={disabled}
+            inputMode="numeric"
+            className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
+          />
+        </label>
+        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
+          둘째 항
+          <input
+            value={answerB}
+            onChange={(event) => onAnswerBChange(event.target.value)}
+            disabled={disabled}
+            inputMode="numeric"
+            className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
+          />
+        </label>
+      </div>
+
+      {error ? (
+        <p className="mt-3 text-sm font-semibold text-red-700">{error}</p>
+      ) : null}
+
+      <div className="mt-6 flex flex-wrap gap-3">
+        <button
+          type="submit"
+          disabled={disabled}
+          className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300"
+        >
+          제출
+        </button>
+      </div>
+    </form>
+  );
+}