Merge pull request #102 from joog-lim/hotfix/v3Err

Hotfix/v3 err

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] };

package.json

@@ -63,6 +63,7 @@
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.3.8",
     "craco-alias": "^3.0.1",
-    "eslint-config-next": "^12.0.1"
+    "eslint-config-next": "^12.0.1",
+    "commitlint": "^16.2.3"
   }
 }

src/components/Sidebar/sidebarPresenter.tsx

@@ -11,7 +11,7 @@ import RequestApi from "utils/libs/requestApi";
 import { AxiosResponse } from "axios";
 
 const SideBar: React.FC = () => {
-  const { isAdmin } = useRecoilValue(hasTokenState);
+  const { isAdmin, isLogin } = useRecoilValue(hasTokenState);
   const [tagClicked, setTagClicked] = useState<boolean>(false);
   const question = useGetQuestion();
   const [count, setCount] = useState<Array<{ status: string; count: number }>>([
@@ -103,15 +103,19 @@ const SideBar: React.FC = () => {
             ))}
           </ul>
         </button>
-        <input
-          className={s.fullInput}
-          placeholder={`Q. ${question?.data.question ?? "질문을 준비 중입니다."}
+        {!isLogin && (
+          <input
+            className={s.fullInput}
+            placeholder={`Q. ${
+              question?.data.question ?? "질문을 준비 중입니다."
+            }
             `}
-          onChange={({ target: { value } }) => {
-            setQuestionAnswer(value);
-          }}
-          value={questionAnswer}
-        />
+            onChange={({ target: { value } }) => {
+              setQuestionAnswer(value);
+            }}
+            value={questionAnswer}
+          />
+        )}
         <div className={s.textareaBox}>
           <textarea
             className={s.fullTextarea}

src/components/algorithms/algorithms.tsx

@@ -8,22 +8,20 @@ import { useState } from "react";
 import emojiController from "utils/api/emoji";
 import { AxiosResponse } from "axios";
 import { emojiRes } from "types/api";
+import SpinnerBar from "components/spinner/spinnerPresenter";
 
 const Algorithms: React.FC<algorithmsProps> = (p: algorithmsProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const { isAdmin, isLogin } = useRecoilValue(hasTokenState);
   const AlgorithmFilter = useRecoilValue(algorithmFilterState);
-
-  const [emojiCnt, setEmojiCnt] = useState<number>(0);
-  const [isEmojiClick, setEmojiClick] = useState<boolean>(false);
-  const { algorithmNumber, idx } = p.data;
-
+  const [emojiCnt, setEmojiCnt] = useState<number>(p.data.emojiCount);
+  const [isEmojiClick, setEmojiClick] = useState<boolean>(p.data.isClicked);
+  const idx = p.data.idx;
   const addEmoji = () => {
     emojiController
       .addEmoji(isLogin, idx)
       .then((res: AxiosResponse<emojiRes> | void) => {
-        if (res?.status === 200) {
-          window.localStorage.setItem(String(idx), "true");
-        } else {
+        if (res?.status !== 200) {
           setEmojiClick(false);
           setEmojiCnt(emojiCnt);
         }
@@ -34,9 +32,7 @@ const Algorithms: React.FC<algorithmsProps> = (p: algorithmsProps) => {
     emojiController
       .deleteEmoji(isLogin, idx)
       .then((res: AxiosResponse<emojiRes> | void) => {
-        if (res?.status === 200) {
-          window.localStorage.setItem(String(idx), "false");
-        } else {
+        if (res?.status !== 200) {
           setEmojiClick(true);
           setEmojiCnt(emojiCnt);
         }
@@ -56,14 +52,16 @@ const Algorithms: React.FC<algorithmsProps> = (p: algorithmsProps) => {
 
   return (
     <article className={style.algorithmsBox}>
+      {isLoading && <SpinnerBar background={true} />}
       <Header
-        id={String(idx)}
+        idx={idx}
         status={AlgorithmFilter}
         createdAt={p.data.createdAt}
-        number={algorithmNumber}
+        number={p.data.algorithmNumber}
         tag={p.data.tag}
         content={p.data.content}
         title={p.data.title}
+        setIsLoading={setIsLoading}
       />
       <h4>{p.data.title}</h4>
       <p>{p.data.content}</p>

src/components/algorithms/item/header.module.scss

@@ -20,7 +20,6 @@
   }
   button {
     position: relative;
-    top: -2px;
     padding: 0 0 0 15px;
     font-size: 14px;
   }

src/components/algorithms/item/headerContainer.tsx

@@ -1,11 +1,14 @@
+import { Dispatch, SetStateAction } from "react";
+
 export interface HeaderProps {
-  id: string;
+  idx: number;
   status: string;
   createdAt: number;
   number: number | string;
   title?: string;
   content?: string;
   tag?: string;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
 }
 
 export const getDate = (timestamp: number): string => {

src/components/algorithms/item/headerPresenter.tsx

@@ -1,5 +1,4 @@
 import { useRecoilValue } from "recoil";
-
 import s from "./header.module.scss";
 import { HeaderProps, getDate } from "./headerContainer";
 import AlgorithmModal from "components/modal/AlgorithmModal/AlgorithmModalPresenter";
@@ -12,11 +11,13 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
   const { isAdmin } = useRecoilValue(hasTokenState);
 
   const setStatusAlgorithm = () => {
-    Algorithm.setStatusAlgorithm(p.id).then(
+    p.setIsLoading(true);
+    Algorithm.setStatusAlgorithm(p.idx).then(
       (res: AxiosResponse<setStatusRes> | void) => {
         res?.status === 200
           ? alert("성공적으로 수정되었습니다.")
           : alert("실패하였습니다.");
+        p.setIsLoading(false);
       }
     );
   };
@@ -48,7 +49,7 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isRed={false}
                   isHeading={false}
                   isReason
-                  algorithmId={p.id}
+                  algorithmIdx={p.idx}
                   title={p.title}
                   content={p.content}
                 >
@@ -58,7 +59,7 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isRed
                   isHeading
                   isReason={false}
-                  algorithmId={p.id}
+                  algorithmIdx={p.idx}
                 >
                   거절
                 </AlgorithmModal>
@@ -70,7 +71,7 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isRed={false}
                   isHeading={false}
                   isReason
-                  algorithmId={p.id}
+                  algorithmIdx={p.idx}
                   title={p.title}
                   content={p.content}
                 >
@@ -80,7 +81,7 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isRed
                   isHeading
                   isReason={false}
-                  algorithmId={p.id}
+                  algorithmIdx={p.idx}
                 >
                   삭제
                 </AlgorithmModal>
@@ -93,7 +94,7 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isRed
                   isHeading
                   isReason={false}
-                  algorithmId={p.id}
+                  algorithmIdx={p.idx}
                 >
                   삭제
                 </AlgorithmModal>
@@ -102,7 +103,7 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
             ),
           }[p.status]}
         {!isAdmin && (
-          <AlgorithmModal isRed isHeading isReason={false} algorithmId={p.id}>
+          <AlgorithmModal isRed isHeading isReason={false} algorithmIdx={p.idx}>
             신고
           </AlgorithmModal>
         )}

src/components/algorithms/style.module.scss

@@ -5,6 +5,7 @@
   width: calc(100vw - 32vw - 350px);
   padding: 15px;
   margin-bottom: 20px;
+  position: relative;
   h4 {
     font-size: 16px;
     font-weight: 700;

src/components/main/item/algorithmFilter.tsx

@@ -44,6 +44,7 @@ const AlgorithmFilter: React.FC = () => {
         idx: 0,
         emojiis: [],
         emojiCount: 0,
+        isClicked: false,
       },
     ]);
     setAlgorithmFilter(algorithmsState[tag]);

src/components/main/mainPresenter.tsx

@@ -17,7 +17,7 @@ import SpinnerBar from "components/spinner/spinnerPresenter";
 import { AxiosResponse } from "axios";
 
 const MainPresenter: React.FC = () => {
-  const { isAdmin } = useRecoilValue(hasTokenState);
+  const { isAdmin, isLogin } = useRecoilValue(hasTokenState);
   const algorithmFilter = useRecoilValue(algorithmFilterState);
   const [isReLoading, setReLoading] = useRecoilState(reLoadingState);
 
@@ -29,7 +29,7 @@ const MainPresenter: React.FC = () => {
 
   const getPostList = () => {
     let posts: algorithm[] | undefined;
-    Algorithm.getAlgorithm(isAdmin, cursor2, algorithmFilter).then(
+    Algorithm.getAlgorithm(isLogin, isAdmin, cursor2, algorithmFilter).then(
       (res: AxiosResponse<getAlgorithmsRes> | void) => {
         if (res?.data) {
           const algorithmData = res.data.data;
@@ -67,6 +67,8 @@ const MainPresenter: React.FC = () => {
   }, []);
 
   useEffect(() => {
+    cursor2 = undefined;
+    hasNext = true;
     getPostList();
     setReLoading(false);
   }, [isReLoading, isAdmin]);

src/components/modal/AlgorithmModal/AlgorithmModalContainer.ts

@@ -15,7 +15,7 @@ export interface algorithmModalProps {
   isHeading: boolean;
   isReason: boolean;
   children: React.ReactNode;
-  algorithmId: string;
+  algorithmIdx: number;
   title?: string;
   content?: string;
 }

src/components/modal/AlgorithmModal/AlgorithmModalPresenter.tsx

@@ -27,7 +27,7 @@ const AlgorithmModal: React.FC<algorithmModalProps> = (
   const [openModal, closeModal] = modalController(setModalIsOpen);
 
   const reportAlgorithm = () => {
-    Algorithm.reportAlgorithm(p.algorithmId, content).then(
+    Algorithm.reportAlgorithm(p.algorithmIdx, content).then(
       (res: AxiosResponse<reportRes> | void) => {
         setIsLoading(false);
         const result =
@@ -41,7 +41,7 @@ const AlgorithmModal: React.FC<algorithmModalProps> = (
   };
 
   const modifyAlgorithm = () => {
-    Algorithm.modifyAlgorithm(p.algorithmId, title, content).then(
+    Algorithm.modifyAlgorithm(p.algorithmIdx, title, content).then(
       (res: AxiosResponse<modifyRes> | void) => {
         setIsLoading(false);
         res?.status === 200
@@ -53,7 +53,7 @@ const AlgorithmModal: React.FC<algorithmModalProps> = (
   };
 
   const setStatusAlgorithm = (status: string) => {
-    Algorithm.setStatusAlgorithm(p.algorithmId, status, content).then(
+    Algorithm.setStatusAlgorithm(p.algorithmIdx, status, content).then(
       (res: AxiosResponse<setStatusRes> | void) => {
         setIsLoading(false);
         res?.status === 200
@@ -65,7 +65,7 @@ const AlgorithmModal: React.FC<algorithmModalProps> = (
   };
 
   const deleteAlgorithm = () => {
-    Algorithm.deleteAlgorithm(p.algorithmId, content).then(
+    Algorithm.deleteAlgorithm(p.algorithmIdx, content).then(
       (res: AxiosResponse<deleteRes> | void) => {
         setIsLoading(false);
         res?.status === 200

src/components/spinner/spinner.module.scss

@@ -1,6 +1,7 @@
 @use "styles/module" as c;
 
 .spinner {
+  z-index: 99;
   width: 100%;
   height: 100%;
   display: flex;

src/recoil/atom.ts

@@ -18,7 +18,14 @@ export const algorithmFilterState = atom<AlgorithmType>({
 export const algorithmState = atom<algorithm[]>({
   key: "algorithmState",
   default: [
-    { algorithmNumber: 0, createdAt: 0, idx: 0, emojiis: [], emojiCount: 0 },
+    {
+      algorithmNumber: 0,
+      createdAt: 0,
+      idx: 0,
+      emojiis: [],
+      emojiCount: 0,
+      isClicked: false,
+    },
   ],
 });
 

src/styles/global.scss

@@ -6,6 +6,9 @@ $default-font: "NanumSquareRound", sans-serif;
 body {
   font-family: $default-font;
   box-sizing: border-box;
+  button {
+    font-family: $default-font;
+  }
   &::selection {
     color: #5f9025;
     background-color: #ebf6e0;

src/types/api.ts

@@ -27,6 +27,7 @@ export interface algorithm extends defaultAlgorithm {
   reason?: string;
   emojiis: Array<number>;
   emojiCount: number;
+  isClicked: boolean;
 }
 
 export interface getAlgorithmsRes {