Commit @8e393f34555609ec423d325faf201372d89c100c

임동욱 09-03

feat: OX퀴즈 노출 문구를 정답별 공통코드에서 받는다

O와 X의 문구 목록이 서로 달라 그룹이 둘로 갈린다 — QUIZ_ANSWER_O · QUIZ_ANSWER_X.
정답 코드명을 접미로 붙여 그룹 이름을 만들므로, 정답 선택지가 늘어도 그룹만 등록하면
화면은 손대지 않는다.

기타는 코드가 아니라 직접 입력을 여는 자리라 프론트가 목록 뒤에 붙이고, 고르면 사용자가
적은 문구가 전송된다. 서버 검증도 하드코딩 표 대신 같은 그룹을 조회해 대조한다.

Co-Authored-By: Claude Opus 5

@8e393f34555609ec423d325faf201372d89c100c

ca22a35

8e393f3

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

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

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


 import { verifySession } from '@/lib/auth/dal';
 import { BackendRequestError } from '@/lib/http/backend-fetch';
 import {
+  fetchQuizAnswerMessages,
   fetchQuizAnswerNames,
   fetchSchoolGradeCodes,
 } from '@/lib/data/repositories/common-code-repository';

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

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

ca22a35

8e393f3

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 { notFound } from 'next/navigation';
 import { verifySession } from '@/lib/auth/dal';
 import {
+  fetchQuizAnswerMessages,
   fetchQuizAnswerNames,
   fetchSchoolGradeCodes,
 } from '@/lib/data/repositories/common-code-repository';

     fetchSchoolGradeCodes(),
     fetchQuizAnswerNames(),
   ]);
+  // 문구 그룹 이름이 정답 코드명에서 나오므로 정답 목록을 받은 뒤에 조회한다.
+  const messageOptionsByAnswer = await fetchQuizAnswerMessages(answerOptions);
 
   const { quizId } = await params;
   const item = await fetchQuizDetail(quizId);

       schools={schools}
       gradesBySchool={gradesBySchool}
       answerOptions={answerOptions}
+      messageOptionsByAnswer={messageOptionsByAnswer}
       item={item}
     />
   );

ca22a35

8e393f3

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 { submitFormAction } from '@/app/_hooks/submit-form-action';
 import {
   ANSWER_MESSAGE_ETC,
-  ANSWER_MESSAGE_OPTIONS,
   QUIZ_LEVEL_OPTIONS,
   type QuizItem,
   type GradesBySchool,

   gradesBySchool: GradesBySchool;
   /** 공통코드 `QUIZ_ANSWER` 상세코드의 코드명 — 이 문자열이 그대로 저장된다. */
   answerOptions: readonly string[];
+  /**
+   * 정답별 「노출할 문구」 선택지. O와 X의 목록이 달라 그룹이 갈린다
+   * (`QUIZ_ANSWER_O`·`QUIZ_ANSWER_X`).
+   */
+  messageOptionsByAnswer: Record<string, readonly CommonCode[]>;
   item?: QuizItem;
 }
 

  * 콘텐츠 등록·수정 (금융OX퀴즈) — 시안 5402:12360.
  *
  * 정답여부는 선택지(공통코드 `QUIZ_ANSWER`)마다 한 줄이고 각 줄이 「사용자에게 노출할
- * 문구」를 갖는다. 문구는 모두 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기
- * 때문이다(사용자 확정). 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이
- * 정답인지만 정한다.
+ * 문구」를 갖는다. 문구 선택지는 정답마다 다른 공통코드에서 온다 — O는 `QUIZ_ANSWER_O`,
+ * X는 `QUIZ_ANSWER_X`다(사용자 확정). 문구는 모두 백엔드로 보낸다 — 정답이 아닌 쪽에도
+ * 보여 줄 문구가 필요하기 때문이다. 「기타」를 고르면 문구를 직접 적고 그 값이 전송된다.
+ * 앞의 라디오는 어느 쪽이 정답인지만 정한다.
  */
 export function QuizForm({
   schools,
   gradesBySchool,
   answerOptions,
+  messageOptionsByAnswer,
   item,
 }: QuizFormProps) {
   const isEdit = item !== undefined;

     Object.fromEntries(
       answerOptions.map((option) => [
         option,
-        { code: ANSWER_MESSAGE_OPTIONS[0].value, text: '' },
+        // 코드가 아직 등록되지 않았을 수 있다 — 그때는 「기타」로 시작한다.
+        {
+          code: messageOptionsByAnswer[option]?.[0]?.code ?? ANSWER_MESSAGE_ETC,
+          text: '',
+        },
       ])
     )
   );
+
+  /** 코드 목록 + 「기타」. 기타는 코드가 아니라 직접 입력을 여는 자리라 항상 뒤에 붙인다. */
+  const messageOptionsOf = (option: string) => [
+    ...(messageOptionsByAnswer[option] ?? []).map((code) => ({
+      value: code.code,
+      label: code.label,
+    })),
+    { value: ANSWER_MESSAGE_ETC, label: '기타' },
+  ];
 
   const patchMessage = (
     option: string,

                   <FoxSelect
                     size="md"
                     ariaLabel={`${option} 노출 문구`}
-                    options={ANSWER_MESSAGE_OPTIONS.map((message) => ({
-                      value: message.value,
-                      label: message.label,
-                    }))}
+                    options={messageOptionsOf(option)}
                     value={messages[option].code}
                     onValueChange={(code) => patchMessage(option, { code })}
                   />

ca22a35

8e393f3

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 {
+  fetchQuizAnswerMessages,
   fetchQuizAnswerNames,
   fetchSchoolGradeCodes,
 } from '@/lib/data/repositories/common-code-repository';

     fetchSchoolGradeCodes(),
     fetchQuizAnswerNames(),
   ]);
+  // 문구 그룹 이름이 정답 코드명에서 나오므로 정답 목록을 받은 뒤에 조회한다.
+  const messageOptionsByAnswer = await fetchQuizAnswerMessages(answerOptions);
   return (
     <QuizForm
       schools={schools}
       gradesBySchool={gradesBySchool}
       answerOptions={answerOptions}
+      messageOptionsByAnswer={messageOptionsByAnswer}
     />
   );
 }

ca22a35

8e393f3

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) => detail.name);
 }
 
+/**
+ * 정답별 「노출할 문구」 선택지. O와 X의 목록이 달라 그룹이 둘로 갈린다 —
+ * `QUIZ_ANSWER_O` · `QUIZ_ANSWER_X`(사용자 확정).
+ *
+ * 정답 코드명(`O`/`X`)을 접미로 붙여 그룹 이름을 만든다. 정답 선택지가 늘면 같은 규칙으로
+ * 그룹만 등록하면 화면은 손대지 않아도 된다.
+ */
+export async function fetchQuizAnswerMessages(
+  answerNames: readonly string[]
+): Promise<Record<string, CommonCode[]>> {
+  const entries = await Promise.all(
+    answerNames.map(
+      async (answer) =>
+        [
+          answer,
+          await fetchCommonCodes(`${CODE_GROUP.quizAnswer}_${answer}`),
+        ] as const
+    )
+  );
+  return Object.fromEntries(entries);
+}
+
 export type SchoolGradeCodes = {
   /** `COM_SCHUL_CD` — 학교 선택지. */
   schools: CommonCode[];

ca22a35

8e393f3

lib/domain/content-form.ts

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

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


 
 import {
   ANSWER_MESSAGE_ETC,
-  ANSWER_MESSAGE_OPTIONS,
   MIN_COMIC_CUTS,
   QUIZ_LEVEL_OPTIONS,
   gradesOf,

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

 
   // 정답 선택지 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 모두 유효해야 한다.
   const answerMessages = values.answerMessages.map((message) => {
+    const allowedCodes = messageOptionsByAnswer[message.answer] ?? [];
     if (
       message.code !== '' &&
-      !ANSWER_MESSAGE_OPTIONS.some((option) => option.value === message.code)
+      message.code !== ANSWER_MESSAGE_ETC &&
+      !allowedCodes.some((option) => option.code === message.code)
     ) {
       errors[`answerMessage${message.answer}Code`] =
         '노출 문구를 다시 선택해 주세요.';

ca22a35

8e393f3

lib/domain/content.ts

--- lib/domain/content.ts

+++ lib/domain/content.ts

...	...	@@ -43,22 +43,18 @@
43	43	{ value: '1', label: '하' },
44	44	];
45	45
46		-/** 정답여부에 함께 노출할 문구. 기타를 고르면 직접 입력한다. */
	46	+/**
	47	+ * 정답여부에 함께 노출할 문구. 선택지는 정답마다 다른 공통코드 그룹에서 온다 —
	48	+ * `QUIZ_ANSWER_O` · `QUIZ_ANSWER_X`(사용자 확정). 「기타」만 코드가 아니라 직접 입력을
	49	+ * 여는 자리라 프론트가 붙인다.
	50	+ */
47	51	export const ANSWER_MESSAGE_ETC = 'ETC';
48		-
49		-// TODO: 기획이 "추후 정의"로 남긴 기본 3종이다. 확정되면 이 표만 교체한다.
50		-export const ANSWER_MESSAGE_OPTIONS: ReadonlyArray<{ value: string; label: string }> = [
51		- { value: 'MSG1', label: '사용자에게 노출할 문구1' },
52		- { value: 'MSG2', label: '사용자에게 노출할 문구2' },
53		- { value: 'MSG3', label: '사용자에게 노출할 문구3' },
54		- { value: ANSWER_MESSAGE_ETC, label: '기타' },
55		-];
56	52
57	53	/** 정답여부 한 줄이 갖는 노출 문구. 정답 선택지마다 하나씩 둔다. */
58	54	export type QuizAnswerMessage = {
59	55	/** 어느 정답에 붙는 문구인지 — `QUIZ_ANSWER` 상세코드의 코드명. */
60	56	answer: string;
61		- /** `ANSWER_MESSAGE_OPTIONS`의 코드값. */
	57	+ /** 정답별 문구 그룹의 상세코드값, 또는 `ANSWER_MESSAGE_ETC`. */
62	58	code: string;
63	59	/** `code`가 기타일 때만 쓰는 직접 입력 문구. */
64	60	text: string;

Add a comment

Open 0
Closed 0

List

...	...	@@ -182,6 +182,28 @@
182	182	return details.map((detail) => detail.name);
183	183	}
184	184
	185	+/**
	186	+ * 정답별 「노출할 문구」 선택지. O와 X의 목록이 달라 그룹이 둘로 갈린다 —
	187	+ * `QUIZ_ANSWER_O` · `QUIZ_ANSWER_X`(사용자 확정).
	188	+ *
	189	+ * 정답 코드명(`O`/`X`)을 접미로 붙여 그룹 이름을 만든다. 정답 선택지가 늘면 같은 규칙으로
	190	+ * 그룹만 등록하면 화면은 손대지 않아도 된다.
	191	+ */
	192	+export async function fetchQuizAnswerMessages(
	193	+ answerNames: readonly string[]
	194	+): Promise<Record<string, CommonCode[]>> {
	195	+ const entries = await Promise.all(
	196	+ answerNames.map(
	197	+ async (answer) =>
	198	+ [
	199	+ answer,
	200	+ await fetchCommonCodes(`${CODE_GROUP.quizAnswer}_${answer}`),
	201	+ ] as const
	202	+ )
	203	+ );
	204	+ return Object.fromEntries(entries);
	205	+}
	206	+
185	207	export type SchoolGradeCodes = {
186	208	/** `COM_SCHUL_CD` — 학교 선택지. */
187	209	schools: CommonCode[];

...	...	@@ -5,7 +5,6 @@
5	5
6	6	import {
7	7	ANSWER_MESSAGE_ETC,
8		- ANSWER_MESSAGE_OPTIONS,
9	8	MIN_COMIC_CUTS,
10	9	QUIZ_LEVEL_OPTIONS,
11	10	gradesOf,
...	...	@@ -235,7 +234,8 @@
235	234	export function validateQuizForm(
236	235	values: QuizFormValues,
237	236	codes: SchoolGradeOptions,
238		- answerOptions: readonly string[]
	237	+ answerOptions: readonly string[],
	238	+ messageOptionsByAnswer: Record<string, readonly CommonCode[]>
239	239	): ValidationResult<QuizFormValues> {
240	240	const errors: ContentFormErrors = {};
241	241	validateGrades(values, codes, errors);
...	...	@@ -264,9 +264,11 @@
264	264
265	265	// 정답 선택지 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 모두 유효해야 한다.
266	266	const answerMessages = values.answerMessages.map((message) => {
	267	+ const allowedCodes = messageOptionsByAnswer[message.answer] ?? [];
267	268	if (
268	269	message.code !== '' &&
269		- !ANSWER_MESSAGE_OPTIONS.some((option) => option.value === message.code)
	270	+ message.code !== ANSWER_MESSAGE_ETC &&
	271	+ !allowedCodes.some((option) => option.code === message.code)
270	272	) {
271	273	errors[`answerMessage${message.answer}Code`] =
272	274	'노출 문구를 다시 선택해 주세요.';

...	...	@@ -5,6 +5,7 @@
5	5	import { verifySession } from '@/lib/auth/dal';
6	6	import { BackendRequestError } from '@/lib/http/backend-fetch';
7	7	import {
	8	+ fetchQuizAnswerMessages,
8	9	fetchQuizAnswerNames,
9	10	fetchSchoolGradeCodes,
10	11	} from '@/lib/data/repositories/common-code-repository';
...	...	@@ -393,7 +394,8 @@
393	394	const validation = validateQuizForm(
394	395	readQuizValues(formData, answerOptions),
395	396	await fetchSchoolGradeCodes(),
396		- answerOptions
	397	+ answerOptions,
	398	+ await fetchQuizAnswerMessages(answerOptions)
397	399	);
398	400	if (!validation.ok) {
399	401	return { status: 'error', errors: validation.errors };
...	...	@@ -426,7 +428,8 @@
426	428	const validation = validateQuizForm(
427	429	readQuizValues(formData, answerOptions),
428	430	await fetchSchoolGradeCodes(),
429		- answerOptions
	431	+ answerOptions,
	432	+ await fetchQuizAnswerMessages(answerOptions)
430	433	);
431	434	if (!validation.ok) {
432	435	return { status: 'error', errors: validation.errors };

...	...	@@ -2,6 +2,7 @@
2	2	import { notFound } from 'next/navigation';
3	3	import { verifySession } from '@/lib/auth/dal';
4	4	import {
	5	+ fetchQuizAnswerMessages,
5	6	fetchQuizAnswerNames,
6	7	fetchSchoolGradeCodes,
7	8	} from '@/lib/data/repositories/common-code-repository';
...	...	@@ -22,6 +23,8 @@
22	23	fetchSchoolGradeCodes(),
23	24	fetchQuizAnswerNames(),
24	25	]);
	26	+ // 문구 그룹 이름이 정답 코드명에서 나오므로 정답 목록을 받은 뒤에 조회한다.
	27	+ const messageOptionsByAnswer = await fetchQuizAnswerMessages(answerOptions);
25	28
26	29	const { quizId } = await params;
27	30	const item = await fetchQuizDetail(quizId);
...	...	@@ -34,6 +37,7 @@
34	37	schools={schools}
35	38	gradesBySchool={gradesBySchool}
36	39	answerOptions={answerOptions}
	40	+ messageOptionsByAnswer={messageOptionsByAnswer}
37	41	item={item}
38	42	/>
39	43	);

...	...	@@ -11,7 +11,6 @@
11	11	import { submitFormAction } from '@/app/_hooks/submit-form-action';
12	12	import {
13	13	ANSWER_MESSAGE_ETC,
14		- ANSWER_MESSAGE_OPTIONS,
15	14	QUIZ_LEVEL_OPTIONS,
16	15	type QuizItem,
17	16	type GradesBySchool,
...	...	@@ -37,6 +36,11 @@
37	36	gradesBySchool: GradesBySchool;
38	37	/** 공통코드 `QUIZ_ANSWER` 상세코드의 코드명 — 이 문자열이 그대로 저장된다. */
39	38	answerOptions: readonly string[];
	39	+ /**
	40	+ * 정답별 「노출할 문구」 선택지. O와 X의 목록이 달라 그룹이 갈린다
	41	+ * (`QUIZ_ANSWER_O`·`QUIZ_ANSWER_X`).
	42	+ */
	43	+ messageOptionsByAnswer: Record<string, readonly CommonCode[]>;
40	44	item?: QuizItem;
41	45	}
42	46
...	...	@@ -44,14 +48,16 @@
44	48	* 콘텐츠 등록·수정 (금융OX퀴즈) — 시안 5402:12360.
45	49	*
46	50	* 정답여부는 선택지(공통코드 `QUIZ_ANSWER`)마다 한 줄이고 각 줄이 「사용자에게 노출할
47		- * 문구」를 갖는다. 문구는 모두 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기
48		- * 때문이다(사용자 확정). 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이
49		- * 정답인지만 정한다.
	51	+ * 문구」를 갖는다. 문구 선택지는 정답마다 다른 공통코드에서 온다 — O는 `QUIZ_ANSWER_O`,
	52	+ * X는 `QUIZ_ANSWER_X`다(사용자 확정). 문구는 모두 백엔드로 보낸다 — 정답이 아닌 쪽에도
	53	+ * 보여 줄 문구가 필요하기 때문이다. 「기타」를 고르면 문구를 직접 적고 그 값이 전송된다.
	54	+ * 앞의 라디오는 어느 쪽이 정답인지만 정한다.
50	55	*/
51	56	export function QuizForm({
52	57	schools,
53	58	gradesBySchool,
54	59	answerOptions,
	60	+ messageOptionsByAnswer,
55	61	item,
56	62	}: QuizFormProps) {
57	63	const isEdit = item !== undefined;
...	...	@@ -67,10 +73,23 @@
67	73	Object.fromEntries(
68	74	answerOptions.map((option) => [
69	75	option,
70		- { code: ANSWER_MESSAGE_OPTIONS[0].value, text: '' },
	76	+ // 코드가 아직 등록되지 않았을 수 있다 — 그때는 「기타」로 시작한다.
	77	+ {
	78	+ code: messageOptionsByAnswer[option]?.[0]?.code ?? ANSWER_MESSAGE_ETC,
	79	+ text: '',
	80	+ },
71	81	])
72	82	)
73	83	);
	84	+
	85	+ /** 코드 목록 + 「기타」. 기타는 코드가 아니라 직접 입력을 여는 자리라 항상 뒤에 붙인다. */
	86	+ const messageOptionsOf = (option: string) => [
	87	+ ...(messageOptionsByAnswer[option] ?? []).map((code) => ({
	88	+ value: code.code,
	89	+ label: code.label,
	90	+ })),
	91	+ { value: ANSWER_MESSAGE_ETC, label: '기타' },
	92	+ ];
74	93
75	94	const patchMessage = (
76	95	option: string,
...	...	@@ -175,10 +194,7 @@
175	194	<FoxSelect
176	195	size="md"
177	196	ariaLabel={`${option} 노출 문구`}
178		- options={ANSWER_MESSAGE_OPTIONS.map((message) => ({
179		- value: message.value,
180		- label: message.label,
181		- }))}
	197	+ options={messageOptionsOf(option)}
182	198	value={messages[option].code}
183	199	onValueChange={(code) => patchMessage(option, { code })}
184	200	/>

...	...	@@ -1,6 +1,7 @@
1	1	import type { Metadata } from 'next';
2	2	import { verifySession } from '@/lib/auth/dal';
3	3	import {
	4	+ fetchQuizAnswerMessages,
4	5	fetchQuizAnswerNames,
5	6	fetchSchoolGradeCodes,
6	7	} from '@/lib/data/repositories/common-code-repository';
...	...	@@ -16,11 +17,14 @@
16	17	fetchSchoolGradeCodes(),
17	18	fetchQuizAnswerNames(),
18	19	]);
	20	+ // 문구 그룹 이름이 정답 코드명에서 나오므로 정답 목록을 받은 뒤에 조회한다.
	21	+ const messageOptionsByAnswer = await fetchQuizAnswerMessages(answerOptions);
19	22	return (
20	23	<QuizForm
21	24	schools={schools}
22	25	gradesBySchool={gradesBySchool}
23	26	answerOptions={answerOptions}
	27	+ messageOptionsByAnswer={messageOptionsByAnswer}
24	28	/>
25	29	);
26	30	}

Delete comment