editable 하다가 말았음

src/client/src/quiz/EditableProblem.jsx

 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import Card from "react-bootstrap/Card";
+import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 
-function Problem({ problem, number, onUpdate, onRemove }) {
-  const [editable, setEditable] = useState(false);
-
-  const handleEditable = (event) => {
-    setEditable(true);
-  };
+const EditableForm = (props) => {
+  const {
+    problem,
+    number,
+    onUpdate,
+    onRemove,
+    handleEditable,
+    handleChange,
+  } = props;
+  return (
+    <Form>
+      <Form.Group>
+        <Form.Control
+          value={`${number + 1}번. ${problem.question}`}
+          onChange={handleChange}
+        />
+      </Form.Group>
+      Answers
+      {problem.answers.map((answer, index) => {
+        return (
+          <Form.Group key={index}>
+            <Form.Control value={answer} onChange={handleChange} />
+          </Form.Group>
+        );
+      })}
+      <Button onClick={(event) => onUpdate(number)}>수정</Button>
+      <Button onClick={() => onRemove(number)}>삭제</Button>
+      <Button onClick={handleEditable}>Editable</Button>
+    </Form>
+  );
+};
 
+const CardForm = (props) => {
+  const { problem, number, onUpdate, onRemove, handleEditable } = props;
   return (
     <Card>
       <Card.Body>
@@ -20,15 +48,61 @@ function Problem({ problem, number, onUpdate, onRemove }) {
         {problem.answers.map((answer, index) => {
           return <Card.Text key={index}>{answer}</Card.Text>;
         })}
-        <Link to={`/quiz/problem/edit/${problem._id}`}>
-          <Button onClick={(event) => onUpdate(number)}>수정</Button>
-        </Link>
+        <Button onClick={(event) => onUpdate(number)}>수정</Button>
         <Button onClick={() => onRemove(number)}>삭제</Button>
-        <Card.Text as={editable ? "input" : "p"}>Hello 안녕!</Card.Text>
-        <Button onClick={editable}>Editable</Button>
+        <Button onClick={handleEditable}>Editable</Button>
       </Card.Body>
     </Card>
   );
+};
+
+function EditableProblem(props) {
+  const [editable, setEditable] = useState(false);
+
+  const handleEditable = (event) => {
+    setEditable(!editable);
+  };
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    console.log(name, value);
+  };
+
+  return (
+    <>
+      {editable ? (
+        <EditableForm
+          {...props}
+          handleEditable={handleEditable}
+          handleChange={handleChange}
+        />
+      ) : (
+        <CardForm
+          {...props}
+          handleEditable={handleEditable}
+          handleChange={handleChange}
+        />
+      )}
+      {/* <Button onClick={handleEditable}>Editable</Button> */}
+    </>
+    // <Card>
+    //   <Card.Body>
+    //     <Card.Title>
+    //       {/* <EditableText editable={editable}> */}
+    //       {number + 1}번. {problem.question}
+    //       {/* </EditableText> */}
+    //     </Card.Title>
+    //     Answers
+    //     {problem.answers.map((answer, index) => {
+    //       return <Card.Text key={index}>{answer}</Card.Text>;
+    //     })}
+    //     <Button onClick={(event) => onUpdate(number)}>수정</Button>
+    //     <Button onClick={() => onRemove(number)}>삭제</Button>
+    //     {/* <EditableText editable={editable} text={"Hello"} /> */}
+    //     <Button onClick={handleEditable}>Editable</Button>
+    //   </Card.Body>
+    // </Card>
+  );
 }
 
-export default Problem;
+export default EditableProblem;

src/client/src/quiz/Quiz.jsx

@@ -4,6 +4,7 @@ import { read, removeProblem } from "./api-quiz";
 import auth from "../auth/auth-helpers";
 import Problem from './Problem'
 import Button from "react-bootstrap/Button";
+import EditableProblem from "./EditableProblem";
 
 function Quiz() {
   const { quizId } = useParams();
@@ -52,7 +53,8 @@ function Quiz() {
     <div>
       <h2>제목: {quiz.title}</h2>
       {quiz.problems?.map((problem, i) => {
-        return <Problem key={i} problem={problem} number={i} onUpdate={handleUpdate} onRemove={handleRemove} />;
+        // return <Problem key={i} problem={problem} number={i} onUpdate={handleUpdate} onRemove={handleRemove} />;
+        return <EditableProblem key={i} problem={problem} number={i} onUpdate={handleUpdate} onRemove={handleRemove} />;
       })}
       <Link to={`/quiz/problem/new/${quizId}`}>
         <Button>문제 추가</Button>