Merge pull request #265 from TeamBookTez/develop

[Release] 버그 수정 및 코드 개선된 v1.1.0 배포합니다.

README.md

@@ -121,133 +121,18 @@
 
 ## 🛠 기술 스택
 
-<img src="https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat" height=40>&nbsp;&nbsp;<img src="https://img.shields.io/badge/-Typescript-3074BF?logo=Typescript&logoColor=white&style=flat" height=40>&nbsp;&nbsp;
-
 ```json
 "axios": "^0.24.0",
-"react": "^17.0.2",
-"react-dom": "^17.0.2",
-"react-router-dom": "^6.2.1",
+"framer-motion": "^6.2.3",
+"react-hook-form": "^7.28.1",
+"react-responsive": "^9.0.0-beta.6",
+"react-textarea-autosize": "^8.3.3",
+"recoil": "^0.6.1",
+"recoil-persist": "^4.0.0",
 "styled-components": "^5.3.3",
 "styled-reset": "^4.3.4",
-"typescript": "^4.5.4",
-```
-
-<br/>
-
-## 🗂 프로젝트 폴더 구조
-
-```
-.
-├── components
-│   ├── addBook
-│   │   ├── AddBookDefault.tsx
-│   │   ├── BookEmpty.tsx
-│   │   ├── BookInfoWrapper.tsx
-│   │   ├── BookList.tsx
-│   │   ├── ModalWrapper.tsx
-│   │   ├── SearchBar.tsx
-│   │   └── ShowModal.tsx
-│   ├── bookcase
-│   │   ├── cardSection
-│   │   │   ├── AddBookCard.tsx
-│   │   │   ├── BookCard.tsx
-│   │   │   └── Empty.tsx
-│   │   ├── Card.tsx
-│   │   ├── Navigation.tsx
-│   │   ├── NoCards.tsx
-│   │   ├── PeriRead.tsx
-│   │   ├── PostRead.tsx
-│   │   ├── PreRead.tsx
-│   │   ├── Total.tsx
-│   │   └── index.ts
-│   ├── common
-│   │   ├── styled
-│   │   │   ├── Button.tsx
-│   │   │   ├── Input.tsx
-│   │   │   ├── LabelHidden.tsx
-│   │   │   ├── LabelQuestion.tsx
-│   │   │   ├── NoteModalWrapper.tsx
-│   │   │   └── Popup.tsx
-│   │   ├── AlertLabel.tsx
-│   │   ├── CommonLayout.tsx
-│   │   ├── NavHeader.tsx
-│   │   ├── InputEmail.tsx
-│   │   ├── InputPwd.tsx
-│   │   ├── MainHeader.tsx
-│   │   ├── MainLayout.tsx
-│   │   ├── NavHeader.tsx
-│   │   ├── NavWrapper.tsx
-│   │   ├── PopUpDelete.tsx
-│   │   ├── PopUpExit.tsx
-│   │   └── index.ts
-│   ├── detail
-│   │   ├── DetailArticleWrapper.tsx
-│   │   ├── DetailArticleWrapperLabeling.tsx
-│   │   ├── ExamplePeriNote.tsx
-│   │   ├── ExamplePreNote.tsx
-│   │   ├── ExamplePreNoteLabeling.tsx
-│   │   ├── StepUpOnExample.tsx
-│   │   └── index.ts
-│   ├── landing
-│   │   ├── LandingCard.tsx
-│   │   ├── LandingOne.tsx
-│   │   ├── LandingTwo.tsx
-│   │   ├── LandingThree.tsx
-│   │   ├── LandingFour.tsx
-│   │   ├── LandingFive.tsx
-│   │   ├── LandingHeader.tsx
-│   │   ├── LandingFooter.tsx
-│   │   └── index.ts
-│   ├── login
-│   │   ├── LoginForm.tsx
-│   │   ├── LoginNavSection.tsx
-│   │   └── index.ts
-│   ├── main
-│   │   ├── Banner.tsx
-│   │   ├── Recent.tsx
-│   │   └── index.ts
-│   ├── myPage
-│   │   ├── BookComment.tsx
-│   │   ├── BottomContent.tsx
-│   │   ├── TopBanner.tsx
-│   │   ├── TopContent.tsx
-│   │   └── index.ts
-│   ├── signup
-│   │   ├── FirstStep.tsx
-│   │   ├── SecondStep.tsx
-│   │   ├── ThirdStep.tsx
-│   │   ├── LastStep.tsx
-│   │   └── index.ts
-│   └── Router.tsx
-├── pages
-│   ├── AddBook.tsx
-│   ├── Bookcase.tsx
-│   ├── BookNote.tsx
-│   ├── DetailBookNote.tsx
-│   ├── DetailExample.tsx
-│   ├── Landing.tsx
-│   ├── Login.tsx
-│   ├── Main.tsx
-│   ├── MyPage.tsx
-│   ├── Signup.tsx
-│   ├── Test.tsx
-│   ├── ToBe.tsx
-│   └── index.ts
-├── styles
-│   ├── globalStyle.ts
-│   ├── styled.d.ts
-│   └── theme.ts
-├── utils
-│   ├── lib
-│   │   ├── api.ts
-│   │   └── index.ts
-│   ├── check.ts
-│   ├── dataType.ts
-│   └── mockData.ts
-├── App.tsx
-├── index.tsx
-└── tsconfig.json
+"swr": "^1.2.1",
+"typescript": "^4.5.4"
 ```
 
 <br />

src/components/addBook/ModalWrapper.tsx

@@ -1,28 +1,12 @@
 import React from "react";
-import styled from "styled-components";
+
+import { StBookModalWrapper } from "../common/styled/BookModalWrapper";
 
 interface ModalWrapperProps {
   children: React.ReactNode;
 }
 export default function ModalWrapper(props: ModalWrapperProps) {
   const { children } = props;
 
-  return <StModalWrapper>{children}</StModalWrapper>;
+  return <StBookModalWrapper>{children}</StBookModalWrapper>;
 }
-
-export const StModalWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-  height: 100%;
-
-  position: fixed;
-  z-index: 10;
-  left: 0;
-  top: 0;
-
-  background-color: ${({ theme }) => theme.colors.white};
-`;

src/components/addBook/ShowModal.tsx

@@ -153,7 +153,7 @@ const StWriteBtn = styled(Button)`
   ${({ theme }) => theme.fonts.button};
 `;
 
-export const StIcCancel = styled(IcCancelBlack)`
+const StIcCancel = styled(IcCancelBlack)`
   position: absolute;
   top: 3.2rem;
   left: 2.4rem;

src/components/addBook/index.ts

@@ -0,0 +1,7 @@
+export { default as AddBookDefault } from "./AddBookDefault";
+export { default as BookEmpty } from "./BookEmpty";
+export { default as BookInfoWrapper } from "./BookInfoWrapper";
+export { default as BookList } from "./BookList";
+export { default as ModalWrapper } from "./ModalWrapper";
+export { default as SearchBar } from "./SearchBar";
+export { default as ShowModal } from "./ShowModal";

src/components/bookNote/PeriNoteExample.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 import theme from "../../styles/theme";
-import LabelQuestion from "../common/styled/LabelQuestion";
+import LabelQuestion from "../common/LabelQuestion";
 
 export default function PeriNoteExample() {
   return (

src/components/bookNote/periNote/Complete.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import styled, { keyframes } from "styled-components";
 
-import { StModalWrapper } from "../../addBook/ModalWrapper";
+import { StBookModalWrapper } from "../../common/styled/BookModalWrapper";
 import { Button } from "../../common/styled/Button";
 import { BookData } from "./PeriNote";
 
@@ -56,7 +56,7 @@ const fadein = keyframes`
     }
 `;
 
-export const StCompleteWrapper = styled(StModalWrapper)`
+const StCompleteWrapper = styled(StBookModalWrapper)`
   z-index: 20;
 `;
 

src/components/bookNote/periNote/PeriNote.tsx

@@ -10,8 +10,8 @@ import { deepCopyTree, getNodeByPath } from "../../../utils/tree";
 import { useFetchNote } from "../../../utils/useHooks";
 import { Loading } from "../../common";
 import { Button } from "../../common/styled/Button";
+import { StStepModalWrapper } from "../../common/styled/StepModalWrapper";
 import { Complete, ExButton, PriorQuestion, StepUp, StepUpLayout } from "..";
-import { StStepModalWrapper } from "../preNote/PreNoteForm";
 
 export interface BookData {
   author: string[];
@@ -147,12 +147,37 @@ export default function PeriNote() {
       miniMenu.classList.remove("open");
     }
   }
+  const getFormData = () => {
+    const obj = getValues();
 
-  const submitPeriNote = async () => {
-    patchBookNote(userToken, `/review/${reviewId}/peri`, { answerThree: data.answerThree, reviewSt: 4 }).then((res) =>
-      setBookData(res.bookData),
-    );
-    setOpenSubmitModal(true);
+    const keys = Object.keys(obj);
+    const newRoot = deepCopyTree(data.answerThree);
+
+    keys.map((key) => {
+      const value = obj[key];
+      const pathKey = key.split(",").map((k) => parseInt(k));
+
+      const current = getNodeByPath(newRoot, pathKey);
+
+      current.content = value;
+    });
+
+    // data state에도 저장
+    setData((current) => ({ ...current, answerThree: newRoot }));
+
+    return newRoot;
+  };
+
+  const submitPeriNote = () => {
+    const dataToPatch = getFormData();
+
+    patchBookNote(userToken, `/review/${reviewId}/peri`, {
+      answerThree: dataToPatch,
+      reviewSt: 4,
+    }).then((res) => {
+      setBookData(res.bookData);
+      setOpenSubmitModal(true);
+    });
   };
 
   useEffect(() => {
@@ -165,41 +190,32 @@ export default function PeriNote() {
     };
   }, []);
 
-  // 이거 마쟈..?
   useEffect(() => {
-    // 질문이 모두 채워져 있으면 addQuestion의 isPrevented를 false
-    if (data.answerThree.children.every((nodeList) => nodeList.content !== "")) {
-      // 질문이 모두 채워진 상태에서 답변이 채워지면 모두 false
-      if (data.answerThree.children.every((nodeList) => nodeList.children.every((node) => node.content !== ""))) {
-        setIsPrevented({ addQuestion: false, isCompleted: false });
+    // 모든 질문 리스트가 지워졌을 경우에는 질문 리스트 추가만 가능하게 하고, 작성완료는 불가하게 함
+    if (!data.answerThree.children.length) {
+      setIsPrevented({ addQuestion: false, isCompleted: true });
+    } else {
+      // 질문이 모두 채워져 있으면 addQuestion의 isPrevented를 false
+      if (data.answerThree.children.every((nodeList) => nodeList.content !== "")) {
+        // 질문이 모두 채워진 상태에서 답변이 채워지면 모두 false
+        if (data.answerThree.children.every((nodeList) => nodeList.children.every((node) => node.content !== ""))) {
+          setIsPrevented({ addQuestion: false, isCompleted: false });
+        } else {
+          // 답변만 비워있으면 isCompleted만 true
+          setIsPrevented({ addQuestion: false, isCompleted: true });
+        }
       } else {
-        // 답변만 비워있으면 isCompleted만 true
-        setIsPrevented({ addQuestion: false, isCompleted: true });
+        // 질문이 비워져있으면 둘 다 true;
+        setIsPrevented({ addQuestion: true, isCompleted: true });
       }
-    } else {
-      // 질문이 비워져있으면 둘 다 true;
-      setIsPrevented({ addQuestion: true, isCompleted: true });
     }
   }, [data.answerThree]);
 
   useEffect(() => {
     if (navIndex && isSave) {
-      const obj = getValues();
-      const keys = Object.keys(obj);
-      const newRoot = deepCopyTree(data.answerThree);
-
-      keys.map((key) => {
-        const value = obj[key];
-        const pathKey = key.split(",").map((k) => parseInt(k));
-
-        const current = getNodeByPath(newRoot, pathKey);
-
-        current.content = value;
-      });
+      const dataToPatch = getFormData();
 
-      setTimeout(() => {
-        saveReview({ ...data, answerThree: newRoot });
-      }, 0);
+      saveReview({ ...data, answerThree: dataToPatch });
     }
   }, [isSave, navIndex]);
 

src/components/bookNote/periNote/PeriNoteInput.tsx

@@ -4,8 +4,10 @@ import styled, { css } from "styled-components";
 
 import theme from "../../../styles/theme";
 import { PeriNoteTreeNode } from "../../../utils/dataType";
+import { StAddAnswerButton, StMenuBtn } from "../../common/styled/Button";
+import { StMoreIcon } from "../../common/styled/Icon";
+import { StMenuWrapper } from "../../common/styled/MenuWrapper";
 import { FormController } from "./PeriNote";
-import { StAddAnswerButton, StMenu, StMenuBtn, StMoreIcon } from "./PriorQuestion";
 
 interface PeriNoteInputProps {
   path: number[];
@@ -78,7 +80,7 @@ export default function PeriNoteInput(props: PeriNoteInputProps) {
             </StAddAnswerButton>
           )}
           <StMore className="icn_more" />
-          <StMenu>
+          <StMenuWrapper>
             {!isQuestion && (
               <StMenuBtn type="button" onClick={() => onAddChild(path, index, !isQuestion)}>
                 꼬리질문 추가
@@ -87,7 +89,7 @@ export default function PeriNoteInput(props: PeriNoteInputProps) {
             <StMenuBtn type="button" onClick={() => onDeleteChild(path)}>
               삭제
             </StMenuBtn>
-          </StMenu>
+          </StMenuWrapper>
         </StInputWrapper>
       </StFieldset>
       <StFieldWrapper isanswer={!isQuestion}>

src/components/bookNote/periNote/PriorAnswer.tsx

@@ -4,9 +4,11 @@ import styled, { css } from "styled-components";
 
 import { IcPeriAnswer } from "../../../assets/icons";
 import { PeriNoteTreeNode } from "../../../utils/dataType";
+import { StMenuBtn } from "../../common/styled/Button";
+import { StMoreIcon } from "../../common/styled/Icon";
+import { StMenuWrapper } from "../../common/styled/MenuWrapper";
 import { PeriNoteInput } from "..";
 import { FormController } from "./PeriNote";
-import { StMenu, StMenuBtn, StMoreIcon } from "./PriorQuestion";
 
 interface PriorAnswerProps {
   path: number[];
@@ -73,14 +75,14 @@ export default function PriorAnswer(props: PriorAnswerProps) {
           onKeyPress={(e) => handleKeyPress(e, path, index, isQuestion)}
         />
         <StMore className="icn_more" />
-        <StMenu menuposition={"isPriQ"}>
+        <StMenuWrapper menuposition={"isPriQ"}>
           <StMenuBtn type="button" onClick={() => handleClickAddChild(path, index, !isQuestion)}>
             꼬리질문 추가
           </StMenuBtn>
           <StMenuBtn type="button" onClick={() => handleClickDeleteChild(path)}>
             삭제
           </StMenuBtn>
-        </StMenu>
+        </StMenuWrapper>
       </StAnswerWrapper>
       {node.children &&
         node.children.map((node, i) => (