feat: question template에 passage textarea를 추가한다.

alstn113 · Jan 3, 2025 · 40e31a9 · 40e31a9
1 parent 85aa0fe
commit 40e31a9
Show file tree

Hide file tree

Showing 14 changed files with 828 additions and 2,499 deletions.
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/questions/details/QuestionDetailTemplate.tsx b/web/src/components/questions/details/QuestionDetailTemplate.tsx
@@ -4,6 +4,7 @@ import TrueOrFalseQuestion from './TrueOrFalseQuestion';
 import MultipleChoiceQuestion from './MultipleChoiceQuestion';
 import SingleChoiceQuestion from './SingleChoiceQuestion';
 import LongAnswerQuestion from './LongAnswerQuestion';
+import { Textarea } from '@nextui-org/react';
 
 interface QuestionDetailTemplateProps {
   question: QuestionBaseResponse;
@@ -28,7 +29,17 @@ const QuestionDetailTemplate = ({ question, index }: QuestionDetailTemplateProps
       <div className="w-full text-md font-semibold text-gray-800">
         {index + 1}. {question.text}
       </div>
+      {question.passage && (
+        <Textarea
+          value={question.passage}
+          className="mt-4"
+          variant="flat"
+          isReadOnly
+          maxRows={30}
+        />
+      )}
       <div className="w-full mt-4">{detailMap[question.type]}</div>
+      <div className="w-full mt-36" />
     </div>
   );
 };

diff --git a/web/src/components/questions/editor/LongAnswerQuestionEditor.tsx b/web/src/components/questions/editor/LongAnswerQuestionEditor.tsx
@@ -1,5 +1,5 @@
 const LongAnswerQuestionEditor = () => {
-  return <div></div>;
+  return <div className="mt-4"></div>;
 };
 
 export default LongAnswerQuestionEditor;
diff --git a/web/src/components/questions/editor/MultipleChoiceQuestionEditor.tsx b/web/src/components/questions/editor/MultipleChoiceQuestionEditor.tsx
@@ -57,7 +57,7 @@ const MultipleChoiceQuestionEditor = () => {
   };
 
   return (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-4">
       <div className="flex items-center gap-2 mb-2 ">
         <label className="font-semibold">선택지와 정답</label>
         <div>

diff --git a/web/src/components/questions/editor/QuestionEditorTemplate.tsx b/web/src/components/questions/editor/QuestionEditorTemplate.tsx
@@ -6,7 +6,7 @@ import MultipleChoiceQuestionEditor from './MultipleChoiceQuestionEditor';
 import TrueOrFalseQuestionEditor from './TrueOrFalseQuestionEditor';
 import React from 'react';
 import useExamEditorStore from '@/stores/useExamEditorStore';
-import { Button, Input } from '@nextui-org/react';
+import { Button, Input, Textarea } from '@nextui-org/react';
 
 const QuestionEditorTemplate = () => {
   const {
@@ -31,6 +31,11 @@ const QuestionEditorTemplate = () => {
     handleUpdateQuestion(currentIndex, newQuestion);
   };
 
+  const handleUpdatePassage = (passage: string) => {
+    const newQuestion = { ...question, passage };
+    handleUpdateQuestion(currentIndex, newQuestion);
+  };
+
   const handleDeleteQuestionClick = () => {
     if (questions.length === 1) {
       setQuestionTypeSelectorActive(true);
@@ -57,7 +62,14 @@ const QuestionEditorTemplate = () => {
           label: 'text-xl font-semibold text-gray-800',
         }}
       />
-
+      <Textarea
+        value={question.passage}
+        placeholder="지문이 필요한 경우 입력하세요. (선택사항)"
+        onValueChange={handleUpdatePassage}
+        variant="flat"
+        className="mt-4"
+        maxRows={30}
+      />
       {editorMap[question.type]}
     </div>
   );

diff --git a/web/src/components/questions/editor/ShortAnswerQuestionEditor.tsx b/web/src/components/questions/editor/ShortAnswerQuestionEditor.tsx
@@ -12,7 +12,7 @@ const ShortAnswerQuestionEditor = () => {
   };
 
   return (
-    <div className="mt-8">
+    <div className="mt-4">
       <Input
         value={question.correctAnswer}
         label="정답"

diff --git a/web/src/components/questions/editor/SingleChoiceQuestionEditor.tsx b/web/src/components/questions/editor/SingleChoiceQuestionEditor.tsx
@@ -65,7 +65,7 @@ const SingleChoiceQuestionEditor = () => {
   };
 
   return (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-4">
       <div className="flex items-center gap-2 mb-2 ">
         <label className="font-semibold">선택지와 정답</label>
         <div>

diff --git a/web/src/components/questions/editor/TrueOrFalseQuestionEditor.tsx b/web/src/components/questions/editor/TrueOrFalseQuestionEditor.tsx
@@ -15,7 +15,7 @@ const TrueOrFalseQuestionEditor = () => {
   };
 
   return (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-4">
       <label className="mb-2 font-semibold">정답</label>
       <div className="flex w-full flex-col">
         <div className="flex gap-2">

diff --git a/web/src/components/questions/view/LongAnswerQuestionView.tsx b/web/src/components/questions/view/LongAnswerQuestionView.tsx
@@ -1,5 +1,5 @@
 const LongAnswerQuestionView = () => {
-  return <div></div>;
+  return <div className="mt-4"></div>;
 };
 
 export default LongAnswerQuestionView;
diff --git a/web/src/components/questions/view/MultipleChoiceQuestionView.tsx b/web/src/components/questions/view/MultipleChoiceQuestionView.tsx
@@ -7,7 +7,7 @@ const MultipleChoiceQuestionView = () => {
   const question = questions[currentIndex] as MultipleChoiceQuestionRequest;
 
   return (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-4">
       <label className="mb-2 font-semibold">선택지와 정답</label>
       <div>
         {question.options.map((option, index) => (

diff --git a/web/src/components/questions/view/QuestionViewTemplate.tsx b/web/src/components/questions/view/QuestionViewTemplate.tsx
@@ -1,6 +1,6 @@
 import { QuestionType } from '@/api/questionAPI';
 import useExamEditorStore from '@/stores/useExamEditorStore';
-import { Input } from '@nextui-org/react';
+import { Input, Textarea } from '@nextui-org/react';
 import ShortAnswerQuestionView from './ShortAnswerQuestionView';
 import LongAnswerQuestionView from './LongAnswerQuestionView';
 import SingleChoiceQuestionView from './SingleChoiceQuestionView';
@@ -34,6 +34,7 @@ const QuestionViewTemplate = () => {
           label: 'text-xl font-semibold text-gray-800',
         }}
       />
+      <Textarea isReadOnly value={question.passage} variant="flat" className="mt-4" />
       {viewMap[question.type]}
     </div>
   );

diff --git a/web/src/components/questions/view/ShortAnswerQuestionView.tsx b/web/src/components/questions/view/ShortAnswerQuestionView.tsx
@@ -7,7 +7,7 @@ const ShortAnswerQuestionView = () => {
   const question = questions[currentIndex] as ShortAnswerQuestionRequest;
 
   return (
-    <div className="mt-8">
+    <div className="mt-4">
       <Input
         isReadOnly
         value={question.correctAnswer}

diff --git a/web/src/components/questions/view/SingleChoiceQuestionView.tsx b/web/src/components/questions/view/SingleChoiceQuestionView.tsx
@@ -7,7 +7,7 @@ const SingleChoiceQuestionView = () => {
   const question = questions[currentIndex] as SingleChoiceQuestionRequest;
 
   return (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-4">
       <label className="mb-2 font-semibold">선택지와 정답</label>
       <RadioGroup value={question.options.findIndex((option) => option.isCorrect).toString()}>
         <div>

diff --git a/web/src/components/questions/view/TrueOrFalseQuestionView.tsx b/web/src/components/questions/view/TrueOrFalseQuestionView.tsx
@@ -7,7 +7,7 @@ const TrueOrFalseQuestionView = () => {
   const question = questions[currentIndex] as TrueOrFalseQuestionRequest;
 
   return (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-4">
       <label className="mb-2 font-semibold">정답</label>
       <div className="flex w-full flex-col">
         <div className="flex gap-2">