Merge pull request #104 from seohyun319/feat/#99

Feat/#99 [FEAT] set UD of question

client/src/component/Input/Input.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import style from "./Input.module.scss";
 
 type inputType = {
-  placeholder: string;
+  placeholder?: string;
   value: string;
   name?: string;
   type?: string;

client/src/component/QnAPage/QuestionDetail.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { IQnaDetail, QuestionInputs } from "../../../types";
+import {
+  deleteQuestionDetail,
+  putQuestionDetail,
+} from "../../services/qna-service";
+import { AnswerInput } from "./AnswerInput";
+import { Button } from "../Button/Button";
+import { Input } from "../Input/Input";
+import { SmallText } from "../Title/Title";
+import style from "./QnaPage.module.scss";
+
+export const QuestionDetail = ({
+  qnaDetail,
+  id,
+}: {
+  qnaDetail: IQnaDetail;
+  id: string;
+}) => {
+  // 수정 입력 인풋
+  const initialValues: QuestionInputs = { title: "", question: "" };
+  const [inputs, setInputs] = useState<QuestionInputs>(initialValues);
+
+  const handleInputChange = (e: React.ChangeEvent<any>) => {
+    e.persist();
+    setInputs({
+      ...inputs,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  // 수정 중 여부
+  const [isEdit, setIsEdit] = useState(false);
+
+  const onClickEdit = async () => {
+    setIsEdit(!isEdit);
+    setInputs({
+      title: qnaDetail.question._source.title,
+      question: qnaDetail.question._source.question,
+    });
+    if (isEdit) await putQuestionDetail(id, inputs); // 수정 완료
+  };
+
+  const onClickDelete = async () => {
+    await deleteQuestionDetail(id);
+  };
+
+  return (
+    <div>
+      {qnaDetail?.question && (
+        <div className={style.questionContent}>
+          {!isEdit ? (
+            <div>{qnaDetail.question._source.question}</div>
+          ) : (
+            <>
+              <Input
+                name="title"
+                value={inputs.title}
+                onChange={handleInputChange}
+              ></Input>
+              <Input
+                textArea
+                name="question"
+                onChange={handleInputChange}
+                value={inputs.question}
+              ></Input>
+            </>
+          )}
+          <div>
+            <SmallText>{qnaDetail.question._source.nickname}</SmallText>
+            <div>
+              <Button shadow color="white" onClick={onClickEdit}>
+                {!isEdit ? <>수정</> : <>수정 완료</>}
+              </Button>
+              <Button shadow color="white" onClick={onClickDelete}>
+                삭제
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+      {qnaDetail?.answer ? (
+        <div className={style.answer}>{qnaDetail.answer._source.answer}</div>
+      ) : (
+        <>
+          <div className={style.answer}>아직 답변이 등록되지 않았습니다.</div>
+          <AnswerInput id={id} />
+        </>
+      )}
+    </div>
+  );
+};

client/src/component/QnAPage/QuestionList.tsx

@@ -3,7 +3,7 @@ import { IQnaDetail, IQuestion } from "../../../types";
 import { getQuestionDetail, getQuestions } from "../../services/qna-service";
 import { useAppSelector } from "../../_app/hooks";
 import { getTest } from "../../_reducer/testReducer";
-import { AnswerInput } from "./AnswerInput";
+import { QuestionDetail } from "./QuestionDetail";
 import { SmallText } from "../Title/Title";
 import { PaginationView } from "../PaginationView/PaginationView";
 import style from "./QnaPage.module.scss";
@@ -26,14 +26,13 @@ export const QuestionList = () => {
       setExpanded(isExpanded ? panel : false);
     };
 
-  const getData = async () => {
-    const list = await getQuestions(page);
-    const detail = await getQuestionDetail(id);
-    setQnaList(list);
-    setQnaDetail(detail);
-  };
-
   useEffect(() => {
+    const getData = async () => {
+      const list = await getQuestions(page);
+      const detail = await getQuestionDetail(id);
+      setQnaList(list);
+      setQnaDetail(detail);
+    };
     getData();
   }, [id, page]);
 
@@ -63,24 +62,7 @@ export const QuestionList = () => {
           </AccordionSummary>
           {/* 문의 상세 내용 */}
           <AccordionDetails>
-            {qnaDetail?.question && (
-              <div className={style.questionContent}>
-                <div>{qnaDetail.question._source.question}</div>
-                <SmallText>{qnaDetail.question._source.nickname}</SmallText>
-              </div>
-            )}
-            {qnaDetail?.answer ? (
-              <div className={style.answer}>
-                {qnaDetail.answer._source.answer}
-              </div>
-            ) : (
-              <>
-                <div className={style.answer}>
-                  아직 답변이 등록되지 않았습니다.
-                </div>
-                <AnswerInput id={id} />
-              </>
-            )}
+            {qnaDetail && <QuestionDetail qnaDetail={qnaDetail} id={id} />}
           </AccordionDetails>
         </Accordion>
       );

client/src/services/qna-service.ts

@@ -17,7 +17,9 @@ export const postQuestions = (inputs: QuestionInputs) => {
   return axios
     .post("/api/questions", inputs)
     .then((response) => {
-      return response.data;
+      if (response.status === 200) {
+        return response.data;
+      }
     })
     .catch((error) => {
       console.log(error);
@@ -36,12 +38,66 @@ export const getQuestionDetail = (id: string) => {
     });
 };
 
+export const putQuestionDetail = (id: string, inputs: QuestionInputs) => {
+  return axios
+    .put("/api/questions/" + id, inputs)
+    .then((response) => {
+      if (response.status === 200) {
+        return response.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+export const deleteQuestionDetail = (id: string) => {
+  return axios
+    .delete("/api/questions/" + id)
+    .then((response) => {
+      if (response.status === 200) {
+        return response.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
 // answer
 export const postAnswer = (id: string, input: string) => {
   return axios
     .post("/api/answers", { question_id: id, answer: input })
     .then((response) => {
-      return response.data;
+      if (response.status === 200) {
+        return response.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+export const putAnswer = (id: string, input: string) => {
+  return axios
+    .put("/api/answers/" + id, { answer: input })
+    .then((response) => {
+      if (response.status === 200) {
+        return response.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+export const deleteAnswer = (id: string) => {
+  return axios
+    .delete("/api/answers/" + id)
+    .then((response) => {
+      if (response.status === 200) {
+        return response.data;
+      }
     })
     .catch((error) => {
       console.log(error);