Commit @f2af4f282489d775b30b84572fddbc40d96da546

임동욱 09-03

feat: OX퀴즈 정답여부 선택지를 QUIZ_ANSWER 상세코드 코드명으로 받는다

하드코딩 O·X 대신 공통코드 QUIZ_ANSWER의 상세코드 목록을 조회해 코드명(cdNm)을
그대로 선택지·저장 값(문자열)으로 쓴다. 폼 필드명·노출 문구 줄도 선택지 수를 따른다.

Co-Authored-By: Claude Fable 5

@f2af4f282489d775b30b84572fddbc40d96da546

4fa5b64

f2af4f2

app/(protected)/(basic)/contents/_actions.ts

--- app/(protected)/(basic)/contents/_actions.ts

+++ app/(protected)/(basic)/contents/_actions.ts


 import { redirect, unstable_rethrow } from 'next/navigation';
 import { verifySession } from '@/lib/auth/dal';
 import { BackendRequestError } from '@/lib/http/backend-fetch';
-import { fetchSchoolGradeCodes } from '@/lib/data/repositories/common-code-repository';
+import {
+  fetchQuizAnswerNames,
+  fetchSchoolGradeCodes,
+} from '@/lib/data/repositories/common-code-repository';
 import {
   uploadAttachment,
   uploadAttachments,

   deleteQuiz,
   updateQuiz,
 } from '@/lib/data/repositories/content-quiz-repository';
-import {
-  CONTENT_TYPE_CODE,
-  QUIZ_ANSWER_OPTIONS,
-  type ContentKind,
-} from '@/lib/domain/content';
+import { CONTENT_TYPE_CODE, type ContentKind } from '@/lib/domain/content';
 import {
   ContentInputError,
   validateComicForm,

   };
 }
 
-function readQuizValues(formData: FormData) {
+function readQuizValues(formData: FormData, answerOptions: readonly string[]) {
   return {
     schoolCode: readString(formData, 'schoolCode'),
     grades: readGrades(formData),

     keywords: readKeywords(formData),
     question: readString(formData, 'question'),
     answer: readString(formData, 'answer'),
-    // O·X 두 줄을 각각 읽는다 — 정답이 아닌 쪽도 함께 보낸다.
-    answerMessages: QUIZ_ANSWER_OPTIONS.map((answer) => ({
+    // 정답 선택지 줄을 각각 읽는다 — 정답이 아닌 쪽도 함께 보낸다.
+    answerMessages: answerOptions.map((answer) => ({
       answer,
       code: readString(formData, `answerMessage${answer}Code`),
       text: readString(formData, `answerMessage${answer}Text`),

   await verifySession();
 
   const failed = await runWrite(async () => {
+    const answerOptions = await fetchQuizAnswerNames();
     const validation = validateQuizForm(
-      readQuizValues(formData),
-      await fetchSchoolGradeCodes()
+      readQuizValues(formData, answerOptions),
+      await fetchSchoolGradeCodes(),
+      answerOptions
     );
     if (!validation.ok) {
       return { status: 'error', errors: validation.errors };

   }
 
   const failed = await runWrite(async () => {
+    const answerOptions = await fetchQuizAnswerNames();
     const validation = validateQuizForm(
-      readQuizValues(formData),
-      await fetchSchoolGradeCodes()
+      readQuizValues(formData, answerOptions),
+      await fetchSchoolGradeCodes(),
+      answerOptions
     );
     if (!validation.ok) {
       return { status: 'error', errors: validation.errors };

4fa5b64

f2af4f2

app/(protected)/(basic)/contents/quizzes/[quizId]/page.tsx

--- app/(protected)/(basic)/contents/quizzes/[quizId]/page.tsx

+++ app/(protected)/(basic)/contents/quizzes/[quizId]/page.tsx


 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { verifySession } from '@/lib/auth/dal';
-import { fetchSchoolGradeCodes } from '@/lib/data/repositories/common-code-repository';
+import {
+  fetchQuizAnswerNames,
+  fetchSchoolGradeCodes,
+} from '@/lib/data/repositories/common-code-repository';
 import { fetchQuizDetail } from '@/lib/data/repositories/content-quiz-repository';
 import { QuizForm } from '../_components/quiz-form';
 

 export default async function Page({ params }: PageProps) {
   await verifySession();
 
-  const { schools, gradesBySchool } = await fetchSchoolGradeCodes();
+  const [{ schools, gradesBySchool }, answerOptions] = await Promise.all([
+    fetchSchoolGradeCodes(),
+    fetchQuizAnswerNames(),
+  ]);
 
   const { quizId } = await params;
   const item = await fetchQuizDetail(quizId);

     notFound();
   }
 
-  return <QuizForm schools={schools} gradesBySchool={gradesBySchool} item={item} />;
+  return (
+    <QuizForm
+      schools={schools}
+      gradesBySchool={gradesBySchool}
+      answerOptions={answerOptions}
+      item={item}
+    />
+  );
 }

4fa5b64

f2af4f2

app/(protected)/(basic)/contents/quizzes/_components/quiz-form.tsx

--- app/(protected)/(basic)/contents/quizzes/_components/quiz-form.tsx

+++ app/(protected)/(basic)/contents/quizzes/_components/quiz-form.tsx


 import {
   ANSWER_MESSAGE_ETC,
   ANSWER_MESSAGE_OPTIONS,
-  QUIZ_ANSWER_OPTIONS,
   QUIZ_LEVEL_OPTIONS,
   type QuizItem,
   type GradesBySchool,

 interface QuizFormProps {
   schools: readonly CommonCode[];
   gradesBySchool: GradesBySchool;
+  /** 공통코드 `QUIZ_ANSWER` 상세코드의 코드명 — 이 문자열이 그대로 저장된다. */
+  answerOptions: readonly string[];
   item?: QuizItem;
 }
 
 /**
  * 콘텐츠 등록·수정 (금융OX퀴즈) — 시안 5402:12360.
  *
- * 정답여부는 O·X 두 줄이고 각 줄이 「사용자에게 노출할 문구」를 갖는다. 두 문구 모두
- * 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기 때문이다(사용자 확정).
- * 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이 정답인지만 정한다.
+ * 정답여부는 선택지(공통코드 `QUIZ_ANSWER`)마다 한 줄이고 각 줄이 「사용자에게 노출할
+ * 문구」를 갖는다. 문구는 모두 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기
+ * 때문이다(사용자 확정). 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이
+ * 정답인지만 정한다.
  */
-export function QuizForm({ schools, gradesBySchool, item }: QuizFormProps) {
+export function QuizForm({
+  schools,
+  gradesBySchool,
+  answerOptions,
+  item,
+}: QuizFormProps) {
   const isEdit = item !== undefined;
   const [state, formAction, isPending] = useActionState(
     isEdit ? updateQuizAction : createQuizAction,
     INITIAL_CONTENT_FORM_STATE
   );
-  const [answer, setAnswer] = useState(item?.answer || QUIZ_ANSWER_OPTIONS[0]);
-  // O·X 각각의 노출 문구. 정답이 아닌 쪽도 보내므로 두 벌을 따로 들고 있는다.
+  const [answer, setAnswer] = useState(item?.answer || answerOptions[0] || '');
+  // 선택지 각각의 노출 문구. 정답이 아닌 쪽도 보내므로 선택지 수만큼 따로 들고 있는다.
   const [messages, setMessages] = useState<
     Record<string, { code: string; text: string }>
   >(() =>
     Object.fromEntries(
-      QUIZ_ANSWER_OPTIONS.map((option) => [
+      answerOptions.map((option) => [
         option,
         { code: ANSWER_MESSAGE_OPTIONS[0].value, text: '' },
       ])

     }));
 
   const errors = state.status === 'error' ? (state.errors ?? {}) : {};
+  const answerError =
+    errors.answer ??
+    answerOptions
+      .flatMap((option) => [
+        errors[`answerMessage${option}Code`],
+        errors[`answerMessage${option}Text`],
+      ])
+      .find(Boolean);
 
   return (
     <>

 
         <ContentFormRow label="정답여부" required>
           <div className={styles.answerLines}>
-            {QUIZ_ANSWER_OPTIONS.map((option) => (
+            {answerOptions.map((option) => (
               <div key={option} className={styles.inline}>
                 <FoxRadio
                   name="answer"

               </div>
             ))}
           </div>
-          {(errors.answer ||
-            errors.answerMessageOText ||
-            errors.answerMessageXText) && (
-            <FoxHelperText
-              type="danger"
-              message={
-                errors.answer ??
-                errors.answerMessageOText ??
-                errors.answerMessageXText ??
-                ''
-              }
-            />
-          )}
+          {answerError && <FoxHelperText type="danger" message={answerError} />}
         </ContentFormRow>
 
         <ContentFormRow label="해설" required>

4fa5b64

f2af4f2

app/(protected)/(basic)/contents/quizzes/new/page.tsx

--- app/(protected)/(basic)/contents/quizzes/new/page.tsx

+++ app/(protected)/(basic)/contents/quizzes/new/page.tsx


 import type { Metadata } from 'next';
 import { verifySession } from '@/lib/auth/dal';
-import { fetchSchoolGradeCodes } from '@/lib/data/repositories/common-code-repository';
+import {
+  fetchQuizAnswerNames,
+  fetchSchoolGradeCodes,
+} from '@/lib/data/repositories/common-code-repository';
 import { QuizForm } from '../_components/quiz-form';
 
 export const metadata: Metadata = { title: '콘텐츠 등록 (금융OX퀴즈)' };

 export default async function Page() {
   await verifySession();
 
-  const { schools, gradesBySchool } = await fetchSchoolGradeCodes();
-  return <QuizForm schools={schools} gradesBySchool={gradesBySchool} />;
+  const [{ schools, gradesBySchool }, answerOptions] = await Promise.all([
+    fetchSchoolGradeCodes(),
+    fetchQuizAnswerNames(),
+  ]);
+  return (
+    <QuizForm
+      schools={schools}
+      gradesBySchool={gradesBySchool}
+      answerOptions={answerOptions}
+    />
+  );
 }

4fa5b64

f2af4f2

lib/data/repositories/common-code-repository.ts

--- lib/data/repositories/common-code-repository.ts

+++ lib/data/repositories/common-code-repository.ts


   return details.map((detail) => ({ code: detail.comDtlCd, label: detail.name }));
 }
 
+/**
+ * OX퀴즈 정답여부 선택지 — 코드값(`comDtlCd`)이 아니라 **코드명(`cdNm`)을 그대로 값으로**
+ * 화면·저장에 쓴다(사용자 확정). 백엔드 `CNTNTS_QUIZ_ANSWER`가 문자열을 받기 때문이다.
+ */
+export async function fetchQuizAnswerNames(): Promise<string[]> {
+  const details = await fetchCodeDetails(CODE_GROUP.quizAnswer);
+  return details.map((detail) => detail.name);
+}
+
 export type SchoolGradeCodes = {
   /** `COM_SCHUL_CD` — 학교 선택지. */
   schools: CommonCode[];

4fa5b64

f2af4f2

lib/domain/common-code.ts

--- lib/domain/common-code.ts

+++ lib/domain/common-code.ts

...	...	@@ -31,6 +31,8 @@
31	31	school: 'COM_SCHUL_CD',
32	32	/** 학년. 학교마다 다르므로 `atrbNm`에 학교 코드를 넣어 조회한다. */
33	33	grade: 'GRD_CD',
	34	+ /** OX퀴즈 정답여부. */
	35	+ quizAnswer: 'QUIZ_ANSWER',
34	36	} as const;
35	37
36	38	/** 값이 없는 항목의 화면 표기. */

4fa5b64

f2af4f2

lib/domain/content-form.ts

--- lib/domain/content-form.ts

+++ lib/domain/content-form.ts


   ANSWER_MESSAGE_ETC,
   ANSWER_MESSAGE_OPTIONS,
   MIN_COMIC_CUTS,
-  QUIZ_ANSWER_OPTIONS,
   QUIZ_LEVEL_OPTIONS,
   gradesOf,
   type ContentKeyword,

   keywords: ContentKeyword[];
   question: string;
   answer: string;
-  /** O·X 두 줄의 노출 문구. 정답이 아닌 쪽도 함께 보낸다(사용자 확정). */
+  /** 정답 선택지마다 한 줄씩의 노출 문구. 정답이 아닌 쪽도 함께 보낸다(사용자 확정). */
   answerMessages: QuizAnswerMessage[];
   explanation: string;
   isVisible: boolean;

 
 export function validateQuizForm(
   values: QuizFormValues,
-  codes: SchoolGradeOptions
+  codes: SchoolGradeOptions,
+  answerOptions: readonly string[]
 ): ValidationResult<QuizFormValues> {
   const errors: ContentFormErrors = {};
   validateGrades(values, codes, errors);

   if (!QUIZ_LEVEL_OPTIONS.some((option) => option.value === values.level)) {
     errors.level = '난이도를 선택해 주세요.';
   }
-  if (!(QUIZ_ANSWER_OPTIONS as readonly string[]).includes(values.answer)) {
+  if (!answerOptions.includes(values.answer)) {
     errors.answer = '정답을 선택해 주세요.';
   }
 

     errors
   );
 
-  // O·X 두 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 둘 다 유효해야 한다.
+  // 정답 선택지 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 모두 유효해야 한다.
   const answerMessages = values.answerMessages.map((message) => {
     if (
       message.code !== '' &&

4fa5b64

f2af4f2

lib/domain/content.ts

--- lib/domain/content.ts

+++ lib/domain/content.ts


   { value: '1', label: '하' },
 ];
 
-export const QUIZ_ANSWER_OPTIONS = ['O', 'X'] as const;
-export type QuizAnswer = (typeof QUIZ_ANSWER_OPTIONS)[number];
-
 /** 정답여부에 함께 노출할 문구. 기타를 고르면 직접 입력한다. */
 export const ANSWER_MESSAGE_ETC = 'ETC';
 

   { value: ANSWER_MESSAGE_ETC, label: '기타' },
 ];
 
-/** 정답여부 한 줄이 갖는 노출 문구. O·X 각각 하나씩 둔다. */
+/** 정답여부 한 줄이 갖는 노출 문구. 정답 선택지마다 하나씩 둔다. */
 export type QuizAnswerMessage = {
-  /** 'O' 또는 'X'. 어느 쪽에 붙는 문구인지. */
-  answer: QuizAnswer;
+  /** 어느 정답에 붙는 문구인지 — `QUIZ_ANSWER` 상세코드의 코드명. */
+  answer: string;
   /** `ANSWER_MESSAGE_OPTIONS`의 코드값. */
   code: string;
   /** `code`가 기타일 때만 쓰는 직접 입력 문구. */

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,7 +4,10 @@
4	4	import { redirect, unstable_rethrow } from 'next/navigation';
5	5	import { verifySession } from '@/lib/auth/dal';
6	6	import { BackendRequestError } from '@/lib/http/backend-fetch';
7		-import { fetchSchoolGradeCodes } from '@/lib/data/repositories/common-code-repository';
	7	+import {
	8	+ fetchQuizAnswerNames,
	9	+ fetchSchoolGradeCodes,
	10	+} from '@/lib/data/repositories/common-code-repository';
8	11	import {
9	12	uploadAttachment,
10	13	uploadAttachments,
...	...	@@ -21,11 +24,7 @@
21	24	deleteQuiz,
22	25	updateQuiz,
23	26	} from '@/lib/data/repositories/content-quiz-repository';
24		-import {
25		- CONTENT_TYPE_CODE,
26		- QUIZ_ANSWER_OPTIONS,
27		- type ContentKind,
28		-} from '@/lib/domain/content';
	27	+import { CONTENT_TYPE_CODE, type ContentKind } from '@/lib/domain/content';
29	28	import {
30	29	ContentInputError,
31	30	validateComicForm,
...	...	@@ -174,7 +173,7 @@
174	173	};
175	174	}
176	175
177		-function readQuizValues(formData: FormData) {
	176	+function readQuizValues(formData: FormData, answerOptions: readonly string[]) {
178	177	return {
179	178	schoolCode: readString(formData, 'schoolCode'),
180	179	grades: readGrades(formData),
...	...	@@ -182,8 +181,8 @@
182	181	keywords: readKeywords(formData),
183	182	question: readString(formData, 'question'),
184	183	answer: readString(formData, 'answer'),
185		- // O·X 두 줄을 각각 읽는다 — 정답이 아닌 쪽도 함께 보낸다.
186		- answerMessages: QUIZ_ANSWER_OPTIONS.map((answer) => ({
	184	+ // 정답 선택지 줄을 각각 읽는다 — 정답이 아닌 쪽도 함께 보낸다.
	185	+ answerMessages: answerOptions.map((answer) => ({
187	186	answer,
188	187	code: readString(formData, `answerMessage${answer}Code`),
189	188	text: readString(formData, `answerMessage${answer}Text`),
...	...	@@ -390,9 +389,11 @@
390	389	await verifySession();
391	390
392	391	const failed = await runWrite(async () => {
	392	+ const answerOptions = await fetchQuizAnswerNames();
393	393	const validation = validateQuizForm(
394		- readQuizValues(formData),
395		- await fetchSchoolGradeCodes()
	394	+ readQuizValues(formData, answerOptions),
	395	+ await fetchSchoolGradeCodes(),
	396	+ answerOptions
396	397	);
397	398	if (!validation.ok) {
398	399	return { status: 'error', errors: validation.errors };
...	...	@@ -421,9 +422,11 @@
421	422	}
422	423
423	424	const failed = await runWrite(async () => {
	425	+ const answerOptions = await fetchQuizAnswerNames();
424	426	const validation = validateQuizForm(
425		- readQuizValues(formData),
426		- await fetchSchoolGradeCodes()
	427	+ readQuizValues(formData, answerOptions),
	428	+ await fetchSchoolGradeCodes(),
	429	+ answerOptions
427	430	);
428	431	if (!validation.ok) {
429	432	return { status: 'error', errors: validation.errors };

...	...	@@ -173,6 +173,15 @@
173	173	return details.map((detail) => ({ code: detail.comDtlCd, label: detail.name }));
174	174	}
175	175
	176	+/**
	177	+ * OX퀴즈 정답여부 선택지 — 코드값(`comDtlCd`)이 아니라 코드명(`cdNm`)을 그대로 값으로
	178	+ * 화면·저장에 쓴다(사용자 확정). 백엔드 `CNTNTS_QUIZ_ANSWER`가 문자열을 받기 때문이다.
	179	+ */
	180	+export async function fetchQuizAnswerNames(): Promise<string[]> {
	181	+ const details = await fetchCodeDetails(CODE_GROUP.quizAnswer);
	182	+ return details.map((detail) => detail.name);
	183	+}
	184	+
176	185	export type SchoolGradeCodes = {
177	186	/** `COM_SCHUL_CD` — 학교 선택지. */
178	187	schools: CommonCode[];

...	...	@@ -7,7 +7,6 @@
7	7	ANSWER_MESSAGE_ETC,
8	8	ANSWER_MESSAGE_OPTIONS,
9	9	MIN_COMIC_CUTS,
10		- QUIZ_ANSWER_OPTIONS,
11	10	QUIZ_LEVEL_OPTIONS,
12	11	gradesOf,
13	12	type ContentKeyword,
...	...	@@ -82,7 +81,7 @@
82	81	keywords: ContentKeyword[];
83	82	question: string;
84	83	answer: string;
85		- /** O·X 두 줄의 노출 문구. 정답이 아닌 쪽도 함께 보낸다(사용자 확정). */
	84	+ /** 정답 선택지마다 한 줄씩의 노출 문구. 정답이 아닌 쪽도 함께 보낸다(사용자 확정). */
86	85	answerMessages: QuizAnswerMessage[];
87	86	explanation: string;
88	87	isVisible: boolean;
...	...	@@ -235,7 +234,8 @@
235	234
236	235	export function validateQuizForm(
237	236	values: QuizFormValues,
238		- codes: SchoolGradeOptions
	237	+ codes: SchoolGradeOptions,
	238	+ answerOptions: readonly string[]
239	239	): ValidationResult<QuizFormValues> {
240	240	const errors: ContentFormErrors = {};
241	241	validateGrades(values, codes, errors);
...	...	@@ -243,7 +243,7 @@
243	243	if (!QUIZ_LEVEL_OPTIONS.some((option) => option.value === values.level)) {
244	244	errors.level = '난이도를 선택해 주세요.';
245	245	}
246		- if (!(QUIZ_ANSWER_OPTIONS as readonly string[]).includes(values.answer)) {
	246	+ if (!answerOptions.includes(values.answer)) {
247	247	errors.answer = '정답을 선택해 주세요.';
248	248	}
249	249
...	...	@@ -262,7 +262,7 @@
262	262	errors
263	263	);
264	264
265		- // O·X 두 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 둘 다 유효해야 한다.
	265	+ // 정답 선택지 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 모두 유효해야 한다.
266	266	const answerMessages = values.answerMessages.map((message) => {
267	267	if (
268	268	message.code !== '' &&

...	...	@@ -1,7 +1,10 @@
1	1	import type { Metadata } from 'next';
2	2	import { notFound } from 'next/navigation';
3	3	import { verifySession } from '@/lib/auth/dal';
4		-import { fetchSchoolGradeCodes } from '@/lib/data/repositories/common-code-repository';
	4	+import {
	5	+ fetchQuizAnswerNames,
	6	+ fetchSchoolGradeCodes,
	7	+} from '@/lib/data/repositories/common-code-repository';
5	8	import { fetchQuizDetail } from '@/lib/data/repositories/content-quiz-repository';
6	9	import { QuizForm } from '../_components/quiz-form';
7	10
...	...	@@ -15,7 +18,10 @@
15	18	export default async function Page({ params }: PageProps) {
16	19	await verifySession();
17	20
18		- const { schools, gradesBySchool } = await fetchSchoolGradeCodes();
	21	+ const [{ schools, gradesBySchool }, answerOptions] = await Promise.all([
	22	+ fetchSchoolGradeCodes(),
	23	+ fetchQuizAnswerNames(),
	24	+ ]);
19	25
20	26	const { quizId } = await params;
21	27	const item = await fetchQuizDetail(quizId);
...	...	@@ -23,5 +29,12 @@
23	29	notFound();
24	30	}
25	31
26		- return <QuizForm schools={schools} gradesBySchool={gradesBySchool} item={item} />;
	32	+ return (
	33	+ <QuizForm
	34	+ schools={schools}
	35	+ gradesBySchool={gradesBySchool}
	36	+ answerOptions={answerOptions}
	37	+ item={item}
	38	+ />
	39	+ );
27	40	}

...	...	@@ -12,7 +12,6 @@
12	12	import {
13	13	ANSWER_MESSAGE_ETC,
14	14	ANSWER_MESSAGE_OPTIONS,
15		- QUIZ_ANSWER_OPTIONS,
16	15	QUIZ_LEVEL_OPTIONS,
17	16	type QuizItem,
18	17	type GradesBySchool,
...	...	@@ -36,29 +35,37 @@
36	35	interface QuizFormProps {
37	36	schools: readonly CommonCode[];
38	37	gradesBySchool: GradesBySchool;
	38	+ /** 공통코드 `QUIZ_ANSWER` 상세코드의 코드명 — 이 문자열이 그대로 저장된다. */
	39	+ answerOptions: readonly string[];
39	40	item?: QuizItem;
40	41	}
41	42
42	43	/**
43	44	* 콘텐츠 등록·수정 (금융OX퀴즈) — 시안 5402:12360.
44	45	*
45		- * 정답여부는 O·X 두 줄이고 각 줄이 「사용자에게 노출할 문구」를 갖는다. 두 문구 모두
46		- * 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기 때문이다(사용자 확정).
47		- * 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이 정답인지만 정한다.
	46	+ * 정답여부는 선택지(공통코드 `QUIZ_ANSWER`)마다 한 줄이고 각 줄이 「사용자에게 노출할
	47	+ * 문구」를 갖는다. 문구는 모두 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기
	48	+ * 때문이다(사용자 확정). 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이
	49	+ * 정답인지만 정한다.
48	50	*/
49		-export function QuizForm({ schools, gradesBySchool, item }: QuizFormProps) {
	51	+export function QuizForm({
	52	+ schools,
	53	+ gradesBySchool,
	54	+ answerOptions,
	55	+ item,
	56	+}: QuizFormProps) {
50	57	const isEdit = item !== undefined;
51	58	const [state, formAction, isPending] = useActionState(
52	59	isEdit ? updateQuizAction : createQuizAction,
53	60	INITIAL_CONTENT_FORM_STATE
54	61	);
55		- const [answer, setAnswer] = useState(item?.answer \|\| QUIZ_ANSWER_OPTIONS[0]);
56		- // O·X 각각의 노출 문구. 정답이 아닌 쪽도 보내므로 두 벌을 따로 들고 있는다.
	62	+ const [answer, setAnswer] = useState(item?.answer \|\| answerOptions[0] \|\| '');
	63	+ // 선택지 각각의 노출 문구. 정답이 아닌 쪽도 보내므로 선택지 수만큼 따로 들고 있는다.
57	64	const [messages, setMessages] = useState<
58	65	Record<string, { code: string; text: string }>
59	66	>(() =>
60	67	Object.fromEntries(
61		- QUIZ_ANSWER_OPTIONS.map((option) => [
	68	+ answerOptions.map((option) => [
62	69	option,
63	70	{ code: ANSWER_MESSAGE_OPTIONS[0].value, text: '' },
64	71	])
...	...	@@ -75,6 +82,14 @@
75	82	}));
76	83
77	84	const errors = state.status === 'error' ? (state.errors ?? {}) : {};
	85	+ const answerError =
	86	+ errors.answer ??
	87	+ answerOptions
	88	+ .flatMap((option) => [
	89	+ errors[`answerMessage${option}Code`],
	90	+ errors[`answerMessage${option}Text`],
	91	+ ])
	92	+ .find(Boolean);
78	93
79	94	return (
80	95	<>
...	...	@@ -146,7 +161,7 @@
146	161
147	162	<ContentFormRow label="정답여부" required>
148	163	<div className={styles.answerLines}>
149		- {QUIZ_ANSWER_OPTIONS.map((option) => (
	164	+ {answerOptions.map((option) => (
150	165	<div key={option} className={styles.inline}>
151	166	<FoxRadio
152	167	name="answer"
...	...	@@ -193,19 +208,7 @@
193	208	</div>
194	209	))}
195	210	</div>
196		- {(errors.answer \|\|
197		- errors.answerMessageOText \|\|
198		- errors.answerMessageXText) && (
199		- <FoxHelperText
200		- type="danger"
201		- message={
202		- errors.answer ??
203		- errors.answerMessageOText ??
204		- errors.answerMessageXText ??
205		- ''
206		- }
207		- />
208		- )}
	211	+ {answerError && <FoxHelperText type="danger" message={answerError} />}
209	212	</ContentFormRow>
210	213
211	214	<ContentFormRow label="해설" required>

...	...	@@ -1,6 +1,9 @@
1	1	import type { Metadata } from 'next';
2	2	import { verifySession } from '@/lib/auth/dal';
3		-import { fetchSchoolGradeCodes } from '@/lib/data/repositories/common-code-repository';
	3	+import {
	4	+ fetchQuizAnswerNames,
	5	+ fetchSchoolGradeCodes,
	6	+} from '@/lib/data/repositories/common-code-repository';
4	7	import { QuizForm } from '../_components/quiz-form';
5	8
6	9	export const metadata: Metadata = { title: '콘텐츠 등록 (금융OX퀴즈)' };
...	...	@@ -9,6 +12,15 @@
9	12	export default async function Page() {
10	13	await verifySession();
11	14
12		- const { schools, gradesBySchool } = await fetchSchoolGradeCodes();
13		- return <QuizForm schools={schools} gradesBySchool={gradesBySchool} />;
	15	+ const [{ schools, gradesBySchool }, answerOptions] = await Promise.all([
	16	+ fetchSchoolGradeCodes(),
	17	+ fetchQuizAnswerNames(),
	18	+ ]);
	19	+ return (
	20	+ <QuizForm
	21	+ schools={schools}
	22	+ gradesBySchool={gradesBySchool}
	23	+ answerOptions={answerOptions}
	24	+ />
	25	+ );
14	26	}

...	...	@@ -43,9 +43,6 @@
43	43	{ value: '1', label: '하' },
44	44	];
45	45
46		-export const QUIZ_ANSWER_OPTIONS = ['O', 'X'] as const;
47		-export type QuizAnswer = (typeof QUIZ_ANSWER_OPTIONS)[number];
48		-
49	46	/** 정답여부에 함께 노출할 문구. 기타를 고르면 직접 입력한다. */
50	47	export const ANSWER_MESSAGE_ETC = 'ETC';
51	48
...	...	@@ -57,10 +54,10 @@
57	54	{ value: ANSWER_MESSAGE_ETC, label: '기타' },
58	55	];
59	56
60		-/** 정답여부 한 줄이 갖는 노출 문구. O·X 각각 하나씩 둔다. */
	57	+/** 정답여부 한 줄이 갖는 노출 문구. 정답 선택지마다 하나씩 둔다. */
61	58	export type QuizAnswerMessage = {
62		- /** 'O' 또는 'X'. 어느 쪽에 붙는 문구인지. */
63		- answer: QuizAnswer;
	59	+ /** 어느 정답에 붙는 문구인지 — `QUIZ_ANSWER` 상세코드의 코드명. */
	60	+ answer: string;
64	61	/** `ANSWER_MESSAGE_OPTIONS`의 코드값. */
65	62	code: string;
66	63	/** `code`가 기타일 때만 쓰는 직접 입력 문구. */

Delete comment