Commit @2baa0121c7cd9ee76570572eedb5bfb16b62b35e

임동욱 09-03

feat: OX퀴즈의 O·X 노출 문구를 둘 다 보낸다

지금까지는 정답으로 고른 쪽만 문구를 정할 수 있었고(나머지 줄은 비활성) 한 벌만
나갔다. 두 줄 모두 항상 편집할 수 있게 하고 둘 다 전송한다 — 정답이 아닌 쪽에도
보여 줄 문구가 필요하다.

정답 라디오는 그대로 둔다. 어느 쪽이 정답인지는 여전히 그것이 정한다.

백엔드가 아직 이 필드를 모른다(작업 중). 지금 보내도 폼은 미지의 파라미터를, JSON은
미지의 속성을 버리므로 조용히 무시된다. 이름이 확정되면 QUIZ_ANSWER_MESSAGE_FIELD
한 곳만 고치면 된다.

Co-Authored-By: Claude Opus 5

@2baa0121c7cd9ee76570572eedb5bfb16b62b35e

5e9070d

2baa012

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

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

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


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

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

5e9070d

2baa012

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


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

     INITIAL_CONTENT_FORM_STATE
   );
   const [answer, setAnswer] = useState(item?.answer || QUIZ_ANSWER_OPTIONS[0]);
-  const [messageCode, setMessageCode] = useState(ANSWER_MESSAGE_OPTIONS[0].value);
-  const [messageText, setMessageText] = useState('');
+  // O·X 각각의 노출 문구. 정답이 아닌 쪽도 보내므로 두 벌을 따로 들고 있는다.
+  const [messages, setMessages] = useState<
+    Record<string, { code: string; text: string }>
+  >(() =>
+    Object.fromEntries(
+      QUIZ_ANSWER_OPTIONS.map((option) => [
+        option,
+        { code: ANSWER_MESSAGE_OPTIONS[0].value, text: '' },
+      ])
+    )
+  );
+
+  const patchMessage = (
+    option: string,
+    patch: Partial<{ code: string; text: string }>
+  ) =>
+    setMessages((current) => ({
+      ...current,
+      [option]: { ...current[option], ...patch },
+    }));
 
   const errors = state.status === 'error' ? (state.errors ?? {}) : {};
 

                 <div className={styles.answerMessage}>
                   <FoxSelect
                     size="md"
+                    ariaLabel={`${option} 노출 문구`}
                     options={ANSWER_MESSAGE_OPTIONS.map((message) => ({
                       value: message.value,
                       label: message.label,
                     }))}
-                    value={messageCode}
-                    onValueChange={setMessageCode}
-                    disabled={answer !== option}
+                    value={messages[option].code}
+                    onValueChange={(code) => patchMessage(option, { code })}
                   />
                 </div>
-                {messageCode === ANSWER_MESSAGE_ETC && (
+                {messages[option].code === ANSWER_MESSAGE_ETC && (
                   <div className={styles.answerMessage}>
                     <FoxInput
                       size="md"
-                      aria-label="노출할 문구"
-                      value={messageText}
-                      onChange={setMessageText}
+                      aria-label={`${option}에 노출할 문구`}
+                      value={messages[option].text}
+                      onChange={(text) => patchMessage(option, { text })}
                       placeholder="내용을 입력하세요."
                       maxLength={ANSWER_MESSAGE_MAX_LENGTH}
-                      disabled={answer !== option}
                     />
                   </div>
                 )}
+                <input
+                  type="hidden"
+                  name={`answerMessage${option}Code`}
+                  value={messages[option].code}
+                />
+                <input
+                  type="hidden"
+                  name={`answerMessage${option}Text`}
+                  value={messages[option].text}
+                />
               </div>
             ))}
           </div>
-          <input type="hidden" name="answerMessageCode" value={messageCode} />
-          <input type="hidden" name="answerMessageText" value={messageText} />
-          {(errors.answer || errors.answerMessageText) && (
+          {(errors.answer ||
+            errors.answerMessageOText ||
+            errors.answerMessageXText) && (
             <FoxHelperText
               type="danger"
-              message={errors.answer ?? errors.answerMessageText ?? ''}
+              message={
+                errors.answer ??
+                errors.answerMessageOText ??
+                errors.answerMessageXText ??
+                ''
+              }
             />
           )}
         </ContentFormRow>

5e9070d

2baa012

lib/data/repositories/content-quiz-repository.ts

--- lib/data/repositories/content-quiz-repository.ts

+++ lib/data/repositories/content-quiz-repository.ts

...	...	@@ -230,6 +230,34 @@
230	230
231	231	type QuizKeywordPayload = Record<string, string>;
232	232
	233	+/**
	234	+ * 정답 노출 문구 필드명. 백엔드가 아직 이 필드를 모른다(작업 중) — 지금 보내면 조용히
	235	+ * 무시된다(폼은 미지의 파라미터를, JSON은 미지의 속성을 버린다). 이름이 확정되면 여기 세 값만
	236	+ * 고치면 요청·전송이 모두 따라간다(키워드와 같은 방식).
	237	+ */
	238	+const QUIZ_ANSWER_MESSAGE_FIELD = {
	239	+ /** 목록 자체의 이름. form에서는 `answerMessageList[0].…` 형태가 된다. */
	240	+ list: 'answerMessageList',
	241	+ /** 어느 쪽(O/X)에 붙는 문구인지. */
	242	+ answer: 'cntntsQuizAnswer',
	243	+ /** 고른 문구의 코드값. */
	244	+ code: 'answerMessageCode',
	245	+ /** 기타일 때 직접 적은 문구. */
	246	+ text: 'answerMessageText',
	247	+} as const;
	248	+
	249	+type QuizAnswerMessagePayload = Record<string, string>;
	250	+
	251	+function toAnswerMessagePayload(
	252	+ messages: QuizFormValues['answerMessages']
	253	+): QuizAnswerMessagePayload[] {
	254	+ return messages.map((message) => ({
	255	+ [QUIZ_ANSWER_MESSAGE_FIELD.answer]: message.answer,
	256	+ [QUIZ_ANSWER_MESSAGE_FIELD.code]: message.code,
	257	+ [QUIZ_ANSWER_MESSAGE_FIELD.text]: message.text,
	258	+ }));
	259	+}
	260	+
233	261	type QuizWritePayload = {
234	262	cntntsQuizLev: string;
235	263	cntntsQuizQuestion: string;
...	...	@@ -237,6 +265,7 @@
237	265	cntntsQuizAnswer: string;
238	266	useYn: string;
239	267	keywordList: QuizKeywordPayload[];
	268	+ answerMessageList: QuizAnswerMessagePayload[];
240	269	schulGrdList: Array<{ schulCd: string; grdCd: string \| null }>;
241	270	};
242	271
...	...	@@ -255,6 +284,7 @@
255	284	[QUIZ_KEYWORD_FIELD.keyword]: item.keyword,
256	285	[QUIZ_KEYWORD_FIELD.description]: item.description,
257	286	})),
	287	+ answerMessageList: toAnswerMessagePayload(values.answerMessages),
258	288	schulGrdList: toSchoolGradePayload(values.schoolCode, values.grades),
259	289	};
260	290	}
...	...	@@ -284,6 +314,12 @@
284	314	}
285	315	});
286	316
	317	+ payload.answerMessageList.forEach((item, index) => {
	318	+ for (const [field, value] of Object.entries(item)) {
	319	+ params[`${QUIZ_ANSWER_MESSAGE_FIELD.list}[${index}].${field}`] = value;
	320	+ }
	321	+ });
	322	+
287	323	payload.schulGrdList.forEach((item, index) => {
288	324	params[`schulGrdList[${index}].schulCd`] = item.schulCd;
289	325	// undefined면 파라미터 자체가 빠져 백엔드에서 null이 된다.
...	...	@@ -298,8 +334,12 @@
298	334	* (form 경로는 `toFormParams`가 같은 상수로 인덱스 표기를 만든다.)
299	335	*/
300	336	function toJsonBody(payload: QuizWritePayload): Record<string, unknown> {
301		- const { keywordList, ...rest } = payload;
302		- return { ...rest, [QUIZ_KEYWORD_FIELD.list]: keywordList };
	337	+ const { keywordList, answerMessageList, ...rest } = payload;
	338	+ return {
	339	+ ...rest,
	340	+ [QUIZ_KEYWORD_FIELD.list]: keywordList,
	341	+ [QUIZ_ANSWER_MESSAGE_FIELD.list]: answerMessageList,
	342	+ };
303	343	}
304	344
305	345	async function sendWrite(

5e9070d

2baa012

lib/domain/content-form.ts

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

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


   QUIZ_LEVEL_OPTIONS,
   gradesOf,
   type ContentKeyword,
+  type QuizAnswerMessage,
   type GradesBySchool,
 } from '@/lib/domain/content';
 import type { CommonCode } from '@/lib/domain/common-code';

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

   if (!(QUIZ_ANSWER_OPTIONS as readonly string[]).includes(values.answer)) {
     errors.answer = '정답을 선택해 주세요.';
   }
-  if (
-    values.answerMessageCode !== '' &&
-    !ANSWER_MESSAGE_OPTIONS.some(
-      (option) => option.value === values.answerMessageCode
-    )
-  ) {
-    errors.answerMessageCode = '노출 문구를 다시 선택해 주세요.';
-  }
 
   const question = requireText(
     values.question,

     errors
   );
 
-  let answerMessageText = values.answerMessageText
-    .trim()
-    .slice(0, ANSWER_MESSAGE_MAX_LENGTH);
-  if (values.answerMessageCode === ANSWER_MESSAGE_ETC) {
-    if (answerMessageText === '') {
-      errors.answerMessageText = '노출할 문구를 입력해 주세요.';
+  // O·X 두 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 둘 다 유효해야 한다.
+  const answerMessages = values.answerMessages.map((message) => {
+    if (
+      message.code !== '' &&
+      !ANSWER_MESSAGE_OPTIONS.some((option) => option.value === message.code)
+    ) {
+      errors[`answerMessage${message.answer}Code`] =
+        '노출 문구를 다시 선택해 주세요.';
     }
-  } else {
-    answerMessageText = '';
-  }
+
+    let text = message.text.trim().slice(0, ANSWER_MESSAGE_MAX_LENGTH);
+    if (message.code === ANSWER_MESSAGE_ETC) {
+      if (text === '') {
+        errors[`answerMessage${message.answer}Text`] =
+          `${message.answer}에 노출할 문구를 입력해 주세요.`;
+      }
+    } else {
+      text = '';
+    }
+    return { ...message, text };
+  });
 
   const keywords = normalizeKeywords(values.keywords);
   validateKeywords(keywords, errors);

   }
   return {
     ok: true,
-    values: { ...values, question, explanation, answerMessageText, keywords },
+    values: { ...values, question, explanation, answerMessages, keywords },
   };
 }

5e9070d

2baa012

lib/domain/content.ts

--- lib/domain/content.ts

+++ lib/domain/content.ts


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

Add a comment

Open 0
Closed 0

List

...	...	@@ -21,7 +21,11 @@
21	21	deleteQuiz,
22	22	updateQuiz,
23	23	} from '@/lib/data/repositories/content-quiz-repository';
24		-import { CONTENT_TYPE_CODE, type ContentKind } from '@/lib/domain/content';
	24	+import {
	25	+ CONTENT_TYPE_CODE,
	26	+ QUIZ_ANSWER_OPTIONS,
	27	+ type ContentKind,
	28	+} from '@/lib/domain/content';
25	29	import {
26	30	ContentInputError,
27	31	validateComicForm,
...	...	@@ -178,8 +182,12 @@
178	182	keywords: readKeywords(formData),
179	183	question: readString(formData, 'question'),
180	184	answer: readString(formData, 'answer'),
181		- answerMessageCode: readString(formData, 'answerMessageCode'),
182		- answerMessageText: readString(formData, 'answerMessageText'),
	185	+ // O·X 두 줄을 각각 읽는다 — 정답이 아닌 쪽도 함께 보낸다.
	186	+ answerMessages: QUIZ_ANSWER_OPTIONS.map((answer) => ({
	187	+ answer,
	188	+ code: readString(formData, `answerMessage${answer}Code`),
	189	+ text: readString(formData, `answerMessage${answer}Text`),
	190	+ })),
183	191	explanation: readString(formData, 'explanation'),
184	192	isVisible: readString(formData, 'isVisible') === 'true',
185	193	};

...	...	@@ -42,8 +42,9 @@
42	42	/**
43	43	* 콘텐츠 등록·수정 (금융OX퀴즈) — 시안 5402:12360.
44	44	*
45		- * 정답여부는 O·X 두 줄이고, 고른 쪽에서만 「사용자에게 노출할 문구」를 정한다(기획 ③).
46		- * 「기타」를 고르면 문구를 직접 적는다.
	45	+ * 정답여부는 O·X 두 줄이고 각 줄이 「사용자에게 노출할 문구」를 갖는다. 두 문구 모두
	46	+ * 백엔드로 보낸다 — 정답이 아닌 쪽에도 보여 줄 문구가 필요하기 때문이다(사용자 확정).
	47	+ * 「기타」를 고르면 문구를 직접 적는다. 앞의 라디오는 어느 쪽이 정답인지만 정한다.
47	48	*/
48	49	export function QuizForm({ schools, gradesBySchool, item }: QuizFormProps) {
49	50	const isEdit = item !== undefined;
...	...	@@ -52,8 +53,26 @@
52	53	INITIAL_CONTENT_FORM_STATE
53	54	);
54	55	const [answer, setAnswer] = useState(item?.answer \|\| QUIZ_ANSWER_OPTIONS[0]);
55		- const [messageCode, setMessageCode] = useState(ANSWER_MESSAGE_OPTIONS[0].value);
56		- const [messageText, setMessageText] = useState('');
	56	+ // O·X 각각의 노출 문구. 정답이 아닌 쪽도 보내므로 두 벌을 따로 들고 있는다.
	57	+ const [messages, setMessages] = useState<
	58	+ Record<string, { code: string; text: string }>
	59	+ >(() =>
	60	+ Object.fromEntries(
	61	+ QUIZ_ANSWER_OPTIONS.map((option) => [
	62	+ option,
	63	+ { code: ANSWER_MESSAGE_OPTIONS[0].value, text: '' },
	64	+ ])
	65	+ )
	66	+ );
	67	+
	68	+ const patchMessage = (
	69	+ option: string,
	70	+ patch: Partial<{ code: string; text: string }>
	71	+ ) =>
	72	+ setMessages((current) => ({
	73	+ ...current,
	74	+ [option]: { ...current[option], ...patch },
	75	+ }));
57	76
58	77	const errors = state.status === 'error' ? (state.errors ?? {}) : {};
59	78
...	...	@@ -140,37 +159,51 @@
140	159	<div className={styles.answerMessage}>
141	160	<FoxSelect
142	161	size="md"
	162	+ ariaLabel={`${option} 노출 문구`}
143	163	options={ANSWER_MESSAGE_OPTIONS.map((message) => ({
144	164	value: message.value,
145	165	label: message.label,
146	166	}))}
147		- value={messageCode}
148		- onValueChange={setMessageCode}
149		- disabled={answer !== option}
	167	+ value={messages[option].code}
	168	+ onValueChange={(code) => patchMessage(option, { code })}
150	169	/>
151	170	</div>
152		- {messageCode === ANSWER_MESSAGE_ETC && (
	171	+ {messages[option].code === ANSWER_MESSAGE_ETC && (
153	172	<div className={styles.answerMessage}>
154	173	<FoxInput
155	174	size="md"
156		- aria-label="노출할 문구"
157		- value={messageText}
158		- onChange={setMessageText}
	175	+ aria-label={`${option}에 노출할 문구`}
	176	+ value={messages[option].text}
	177	+ onChange={(text) => patchMessage(option, { text })}
159	178	placeholder="내용을 입력하세요."
160	179	maxLength={ANSWER_MESSAGE_MAX_LENGTH}
161		- disabled={answer !== option}
162	180	/>
163	181	</div>
164	182	)}
	183	+ <input
	184	+ type="hidden"
	185	+ name={`answerMessage${option}Code`}
	186	+ value={messages[option].code}
	187	+ />
	188	+ <input
	189	+ type="hidden"
	190	+ name={`answerMessage${option}Text`}
	191	+ value={messages[option].text}
	192	+ />
165	193	</div>
166	194	))}
167	195	</div>
168		- <input type="hidden" name="answerMessageCode" value={messageCode} />
169		- <input type="hidden" name="answerMessageText" value={messageText} />
170		- {(errors.answer \|\| errors.answerMessageText) && (
	196	+ {(errors.answer \|\|
	197	+ errors.answerMessageOText \|\|
	198	+ errors.answerMessageXText) && (
171	199	<FoxHelperText
172	200	type="danger"
173		- message={errors.answer ?? errors.answerMessageText ?? ''}
	201	+ message={
	202	+ errors.answer ??
	203	+ errors.answerMessageOText ??
	204	+ errors.answerMessageXText ??
	205	+ ''
	206	+ }
174	207	/>
175	208	)}
176	209	</ContentFormRow>

...	...	@@ -11,6 +11,7 @@
11	11	QUIZ_LEVEL_OPTIONS,
12	12	gradesOf,
13	13	type ContentKeyword,
	14	+ type QuizAnswerMessage,
14	15	type GradesBySchool,
15	16	} from '@/lib/domain/content';
16	17	import type { CommonCode } from '@/lib/domain/common-code';
...	...	@@ -81,8 +82,8 @@
81	82	keywords: ContentKeyword[];
82	83	question: string;
83	84	answer: string;
84		- answerMessageCode: string;
85		- answerMessageText: string;
	85	+ /** O·X 두 줄의 노출 문구. 정답이 아닌 쪽도 함께 보낸다(사용자 확정). */
	86	+ answerMessages: QuizAnswerMessage[];
86	87	explanation: string;
87	88	isVisible: boolean;
88	89	};
...	...	@@ -245,14 +246,6 @@
245	246	if (!(QUIZ_ANSWER_OPTIONS as readonly string[]).includes(values.answer)) {
246	247	errors.answer = '정답을 선택해 주세요.';
247	248	}
248		- if (
249		- values.answerMessageCode !== '' &&
250		- !ANSWER_MESSAGE_OPTIONS.some(
251		- (option) => option.value === values.answerMessageCode
252		- )
253		- ) {
254		- errors.answerMessageCode = '노출 문구를 다시 선택해 주세요.';
255		- }
256	249
257	250	const question = requireText(
258	251	values.question,
...	...	@@ -269,16 +262,27 @@
269	262	errors
270	263	);
271	264
272		- let answerMessageText = values.answerMessageText
273		- .trim()
274		- .slice(0, ANSWER_MESSAGE_MAX_LENGTH);
275		- if (values.answerMessageCode === ANSWER_MESSAGE_ETC) {
276		- if (answerMessageText === '') {
277		- errors.answerMessageText = '노출할 문구를 입력해 주세요.';
	265	+ // O·X 두 줄을 각각 검사한다 — 정답이 아닌 쪽도 보내므로 둘 다 유효해야 한다.
	266	+ const answerMessages = values.answerMessages.map((message) => {
	267	+ if (
	268	+ message.code !== '' &&
	269	+ !ANSWER_MESSAGE_OPTIONS.some((option) => option.value === message.code)
	270	+ ) {
	271	+ errors[`answerMessage${message.answer}Code`] =
	272	+ '노출 문구를 다시 선택해 주세요.';
278	273	}
279		- } else {
280		- answerMessageText = '';
281		- }
	274	+
	275	+ let text = message.text.trim().slice(0, ANSWER_MESSAGE_MAX_LENGTH);
	276	+ if (message.code === ANSWER_MESSAGE_ETC) {
	277	+ if (text === '') {
	278	+ errors[`answerMessage${message.answer}Text`] =
	279	+ `${message.answer}에 노출할 문구를 입력해 주세요.`;
	280	+ }
	281	+ } else {
	282	+ text = '';
	283	+ }
	284	+ return { ...message, text };
	285	+ });
282	286
283	287	const keywords = normalizeKeywords(values.keywords);
284	288	validateKeywords(keywords, errors);
...	...	@@ -288,6 +292,6 @@
288	292	}
289	293	return {
290	294	ok: true,
291		- values: { ...values, question, explanation, answerMessageText, keywords },
	295	+ values: { ...values, question, explanation, answerMessages, keywords },
292	296	};
293	297	}

...	...	@@ -57,6 +57,16 @@
57	57	{ value: ANSWER_MESSAGE_ETC, label: '기타' },
58	58	];
59	59
	60	+/** 정답여부 한 줄이 갖는 노출 문구. O·X 각각 하나씩 둔다. */
	61	+export type QuizAnswerMessage = {
	62	+ /** 'O' 또는 'X'. 어느 쪽에 붙는 문구인지. */
	63	+ answer: QuizAnswer;
	64	+ /** `ANSWER_MESSAGE_OPTIONS`의 코드값. */
	65	+ code: string;
	66	+ /** `code`가 기타일 때만 쓰는 직접 입력 문구. */
	67	+ text: string;
	68	+};
	69	+
60	70	export type ContentKeyword = {
61	71	keyword: string;
62	72	description: string;

Delete comment