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

Feat/#99 [FEAT] handling qnaView depend on user (admin), change folder name
HanALL-all-of-korean-spelling · Sep 14, 2022 · db8a1f8 · db8a1f8
2 parents f438b25 + d02628f
commit db8a1f8
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 40 deletions.
diff --git a/client/pages/qna.tsx b/client/pages/qna.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from "next";
-import { QuestionInput } from "../src/component/QnaPage/QuestionInput";
-import { QuestionList } from "../src/component/QnaPage/QuestionList";
+import { QuestionInput } from "../src/component/QnAPage/QuestionInput";
+import { QuestionList } from "../src/component/QnAPage/QuestionList";
 import { MWContainer } from "../src/component/MWContainer/MWContainer";
 
 const Qna: NextPage = () => {

diff --git a/client/pages/scrap.tsx b/client/pages/scrap.tsx
@@ -2,6 +2,8 @@ import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { IScrap } from "../types";
+import { useAppSelector } from "../src/_app/hooks";
+import { getUser } from "../src/_reducer/userReducer";
 import { getScrapList } from "../src/services/auth-service";
 import { ScrapList } from "../src/component/ScrapPage/ScrapList";
 import { Title } from "../src/component/Title/Title";
@@ -10,6 +12,7 @@ import { Button } from "../src/component/Button/Button";
 
 const Scrap: NextPage = () => {
   const router = useRouter();
+  const user = useAppSelector(getUser).user;
 
   const [scraps, setScraps] = useState<IScrap>();
   const getData = async () => {
@@ -23,27 +26,33 @@ const Scrap: NextPage = () => {
 
   return (
     <div>
-      {scraps ? (
+      {user ? (
         <>
-          <Button onClick={() => router.push("/test")}>시험 응시</Button>
-          <MWContainer>
-            <div>
-              <Title size="mid">철자</Title>
-              <ScrapList scraps={scraps?.spelling} />
-            </div>
-            <div>
-              <Title size="mid">띄어쓰기</Title>
-              <ScrapList scraps={scraps?.spacing} />
-            </div>
-          </MWContainer>
+          {scraps ? (
+            <>
+              <Button onClick={() => router.push("/test")}>시험 응시</Button>
+              <MWContainer>
+                <div>
+                  <Title size="mid">철자</Title>
+                  <ScrapList scraps={scraps?.spelling} />
+                </div>
+                <div>
+                  <Title size="mid">띄어쓰기</Title>
+                  <ScrapList scraps={scraps?.spacing} />
+                </div>
+              </MWContainer>
+            </>
+          ) : (
+            <>
+              <div>보관된 정보가 없습니다.</div>
+              <div>
+                철자나 띄어쓰기 정보를 저장하고 맞춤법 퀴즈에 응시해 보세요!
+              </div>
+            </>
+          )}
         </>
       ) : (
-        <>
-          <div>보관된 정보가 없습니다.</div>
-          <div>
-            철자나 띄어쓰기 정보를 저장하고 맞춤법 퀴즈에 응시해 보세요!
-          </div>
-        </>
+        <div>로그인하고 보관함에 기억하고 싶은 맞춤법을 저장해 보세요!</div>
       )}
     </div>
   );

diff --git a/client/src/component/DetailPage/DetailPage.tsx b/client/src/component/DetailPage/DetailPage.tsx
@@ -45,7 +45,7 @@ export const DetailPage = ({ id }: { id: string | string[] }) => {
         <>
           <style jsx>{`
             .cont {
-              width: 15rem;
+              max-width: 20rem;
               display: flex;
               flex-direction: column;
               align-items: center;
@@ -59,6 +59,9 @@ export const DetailPage = ({ id }: { id: string | string[] }) => {
             .contDesc {
               margin: 1rem 0 2rem;
             }
+            .contDesc > div {
+              margin-bottom: 1.2rem;
+            }
             .BtnCont {
               margin-bottom: 2rem;
             }

diff --git a/client/src/component/QnAPage/QnaPage.module.scss b/client/src/component/QnAPage/QnaPage.module.scss
@@ -30,12 +30,16 @@
 
 .questionContent {
   div {
-    margin-bottom: 1rem;
-    max-width: fit-content;
+    margin-bottom: 0.5rem;
   }
-  div:last-child {
+  .userNickname {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: center;
+    // 버튼
+    div:last-child {
+      display: flex;
+    }
   }
 }
 

diff --git a/client/src/component/QnAPage/QuestionDetail.tsx b/client/src/component/QnAPage/QuestionDetail.tsx
@@ -4,6 +4,8 @@ import {
   deleteQuestionDetail,
   putQuestionDetail,
 } from "../../services/qna-service";
+import { useAppSelector } from "../../_app/hooks";
+import { getUser } from "../../_reducer/userReducer";
 import { AnswerInput } from "./AnswerInput";
 import { Button } from "../Button/Button";
 import { Input } from "../Input/Input";
@@ -21,6 +23,14 @@ export const QuestionDetail = ({
   const initialValues: QuestionInputs = { title: "", question: "" };
   const [inputs, setInputs] = useState<QuestionInputs>(initialValues);
 
+  const user = useAppSelector(getUser);
+
+  // 글 작성자인지 체크
+  let isWriter = false;
+  if (user.user?.nickname == qnaDetail.question?._source.nickname) {
+    isWriter = true;
+  }
+
   const handleInputChange = (e: React.ChangeEvent<any>) => {
     e.persist();
     setInputs({
@@ -66,16 +76,18 @@ export const QuestionDetail = ({
               ></Input>
             </>
           )}
-          <div>
+          <div className={style.userNickname}>
             <SmallText>{qnaDetail.question._source.nickname}</SmallText>
-            <div>
-              <Button shadow color="white" onClick={onClickEdit}>
-                {!isEdit ? <>수정</> : <>수정 완료</>}
-              </Button>
-              <Button shadow color="white" onClick={onClickDelete}>
-                삭제
-              </Button>
-            </div>
+            {isWriter && (
+              <div>
+                <Button shadow color="white" onClick={onClickEdit}>
+                  {!isEdit ? <>수정</> : <>수정 완료</>}
+                </Button>
+                <Button shadow color="white" onClick={onClickDelete}>
+                  삭제
+                </Button>
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -84,7 +96,7 @@ export const QuestionDetail = ({
       ) : (
         <>
           <div className={style.answer}>아직 답변이 등록되지 않았습니다.</div>
-          <AnswerInput id={id} />
+          {user.isAdmin && <AnswerInput id={id} />}
         </>
       )}
     </div>

diff --git a/client/src/component/QnAPage/QuestionInput.tsx b/client/src/component/QnAPage/QuestionInput.tsx
@@ -1,13 +1,15 @@
 import React, { useState } from "react";
 import { QuestionInputs } from "../../../types";
 import { postQuestions } from "../../services/qna-service";
+import { ShowAlertToast } from "../AlertToast/AlertToast";
 import { Button } from "../Button/Button";
 import { Input } from "../Input/Input";
 import style from "./QnaPage.module.scss";
 
 export const QuestionInput = () => {
   const initialValues: QuestionInputs = { title: "", question: "" };
   const [inputs, setInputs] = useState<QuestionInputs>(initialValues);
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleInputChange = (e: React.ChangeEvent<any>) => {
     e.persist();
@@ -20,7 +22,10 @@ export const QuestionInput = () => {
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     const res = await postQuestions(inputs);
-    console.log(res);
+
+    if (res.response.status === 401) {
+      setIsOpen(true);
+    }
   };
 
   return (
@@ -44,6 +49,7 @@ export const QuestionInput = () => {
         <Button type="submit" fullWidth>
           등록하기
         </Button>
+        {ShowAlertToast(isOpen, "로그인 후 이용해 주세요.")}
       </form>
     </div>
   );

diff --git a/client/src/services/auth-service.ts b/client/src/services/auth-service.ts
@@ -45,8 +45,12 @@ export async function login(inputs: LoginInputs) {
 
 export const logout = async () => {
   Cookie.remove(COOKIES.authToken);
-  console.log("logout");
-  await router.push("/login");
+  return await axios.get("/api/auth/logout").then((res) => {
+    //로그아웃 성공
+    if (res.status === 200) {
+      console.log("logout");
+    }
+  });
 };
 
 // users

diff --git a/client/src/services/qna-service.ts b/client/src/services/qna-service.ts
@@ -22,7 +22,7 @@ export const postQuestions = (inputs: QuestionInputs) => {
       }
     })
     .catch((error) => {
-      console.log(error);
+      return error;
     });
 };
 
@@ -55,7 +55,7 @@ export const deleteQuestionDetail = (id: string) => {
   return axios
     .delete("/api/questions/" + id)
     .then((response) => {
-      if (response.status === 200) {
+      if (response.status === 204) {
         return response.data;
       }
     })