Merge pull request #169 from Team-Lecue/feature/Common

Merge Feature/common into dev
Team-Lecue · Jan 18, 2024 · 2b14574 · 2b14574
2 parents 1439e1d + 2e4d1a7
commit 2b14574
Show file tree

Hide file tree

Showing 18 changed files with 309 additions and 119 deletions.
diff --git a/src/Home/components/NavigateLecueBook/index.tsx b/src/Home/components/NavigateLecueBook/index.tsx
@@ -46,7 +46,13 @@ function NavigateLecueBook() {
         })}
       </S.ButtonWrapper>
 
-      {modalOn && <CommonModal category="login" setModalOn={setModalOn} />}
+      {modalOn && (
+        <CommonModal
+          category="login"
+          setModalOn={setModalOn}
+          handleFn={() => navigate('/login')}
+        />
+      )}
     </S.MainWrapper>
   );
 }

diff --git a/src/LecueNote/api/postLecueNote.ts b/src/LecueNote/api/postLecueNote.ts
@@ -1,5 +1,3 @@
-// import { useNavigate } from 'react-router-dom';
-
 import { api } from '../../libs/api';
 import { postLecueNoteProps } from '../type/lecueNoteType';
 
@@ -8,7 +6,7 @@ const postLecueNote = ({
   color,
   fileName,
   bgColor,
-  setModalOn,
+  isIconClicked,
 }: postLecueNoteProps) => {
   const response = api
     .post(
@@ -17,15 +15,17 @@ const postLecueNote = ({
         bookId: 1,
         content: contents,
         textColor: color,
-        background: fileName ? fileName : bgColor,
+        background: isIconClicked ? fileName : bgColor,
       },
       {
         headers: {
           Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
         },
       },
     )
-    .then(() => setModalOn(true));
+    .then((res) => {
+      console.log(res);
+    });
 
   return response;
 };

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
@@ -1,47 +1,14 @@
 import Button from '../../../components/common/Button';
-import usePostLecueNote from '../../hooks/usePostLecueNote';
-import usePutPresignedUrl from '../../hooks/usePutPresignedUrl';
 import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
-function Footer({
-  contents,
-  fileName,
-  textColor,
-  bgColor,
-  imgFile2,
-  presignedUrl,
-  file,
-  setModalOn,
-}: FooterProps) {
-  const putMutation = usePutPresignedUrl();
-  const postMutation = usePostLecueNote();
-
-  const handleClickBtn = () => {
-    if (imgFile2) {
-      if (imgFile2.result && file) {
-        putMutation.mutate({
-          presignedUrl: presignedUrl,
-          binaryFile: imgFile2.result,
-          fileType: file.type,
-        });
-      }
-    }
-    postMutation.mutate({
-      contents: contents,
-      color: textColor,
-      fileName: fileName,
-      bgColor: bgColor,
-      setModalOn: setModalOn,
-    });
-  };
-
+function Footer({ contents, setModalOn }: FooterProps) {
   return (
     <S.Wrapper>
       <Button
         variant="complete"
         disabled={contents.length === 0}
-        onClick={handleClickBtn}
+        onClick={() => setModalOn(true)}
       >
         작성 완료
       </Button>

diff --git a/src/LecueNote/hooks/usePostLecueNote.ts b/src/LecueNote/hooks/usePostLecueNote.ts
@@ -11,9 +11,15 @@ const usePostLecueNote = () => {
       color,
       fileName,
       bgColor,
-      setModalOn
+      isIconClicked,
     }: postLecueNoteProps) => {
-      return postLecueNote({ contents, color, fileName, bgColor, setModalOn });
+      return postLecueNote({
+        contents,
+        color,
+        fileName,
+        bgColor,
+        isIconClicked,
+      });
     },
     onError: (err: AxiosError) => console.log(err),
   });

diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { useNavigate } from 'react-router-dom';
 import Header from '../../../components/common/Header';
 import CommonModal from '../../../components/common/Modal/CommonModal';
 import CreateNote from '../../components/CreateNote';
@@ -9,21 +10,29 @@ import {
   CATEGORY,
   TEXT_COLOR_CHART,
 } from '../../constants/colorChart';
+import usePostLecueNote from '../../hooks/usePostLecueNote';
+import usePutPresignedUrl from '../../hooks/usePutPresignedUrl';
 import * as S from './LecueNotePage.style';
 
 function LecueNotePage() {
   const MAX_LENGTH = 1000;
+  const navigate = useNavigate();
+
   const [contents, setContents] = useState('');
   const [imgFile, setImgFile] = useState('');
   const [imgFile2, setImgFile2] = useState<FileReader>();
   const [clickedCategory, setclickedCategory] = useState(CATEGORY[0]);
   const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
   const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
   const [isIconClicked, setIsIconClicked] = useState(false);
-  const [fileName, setFileName] = useState('');
+  const [fileName, setFileName] = useState(BG_COLOR_CHART[0]);
   const [presignedUrl, setPresignedUrl] = useState('');
   const [file, setFile] = useState<File>();
   const [modalOn, setModalOn] = useState(false);
+  const [escapeModal, setEscapeModal] = useState(false);
+
+  const putMutation = usePutPresignedUrl();
+  const postMutation = usePostLecueNote();
 
   const handleClickCategory = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -54,12 +63,48 @@ function LecueNotePage() {
     setIsIconClicked(true);
   };
 
+  const handleClickCompleteModal = async () => {
+    if (imgFile2) {
+      if (imgFile2.result && file) {
+        putMutation.mutate({
+          presignedUrl: presignedUrl,
+          binaryFile: imgFile2.result,
+          fileType: file.type,
+        });
+      }
+    }
+    postMutation.mutate({
+      contents: contents,
+      color: clickedTextColor,
+      fileName: fileName,
+      bgColor: clickedBgColor,
+      isIconClicked: isIconClicked,
+    });
+    // 추후 수정 예정
+    navigate(`/lecue-book`);
+  };
+
   return (
     <S.Wrapper>
       {modalOn && (
-        <CommonModal category="note_complete" setModalOn={setModalOn} />
+        <CommonModal
+          handleFn={handleClickCompleteModal}
+          category="note_complete"
+          setModalOn={setModalOn}
+        />
       )}
-      <Header headerTitle="레큐노트 작성" />
+
+      {escapeModal && (
+        <CommonModal
+          handleFn={() => navigate(-1)}
+          category="note_escape"
+          setModalOn={setEscapeModal}
+        />
+      )}
+      <Header
+        headerTitle="레큐노트 작성"
+        handleFn={() => setEscapeModal(true)}
+      />
       <CreateNote
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
@@ -77,16 +122,7 @@ function LecueNotePage() {
         binaryImage={(file) => setImgFile2(file)}
         selectedFile={(file) => setFile(file)}
       />
-      <Footer
-        file={file}
-        contents={contents}
-        fileName={fileName}
-        textColor={clickedTextColor}
-        bgColor={clickedBgColor}
-        imgFile2={imgFile2}
-        presignedUrl={presignedUrl}
-        setModalOn={setModalOn}
-      />
+      <Footer contents={contents} setModalOn={setModalOn} />
     </S.Wrapper>
   );
 }

diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
@@ -61,13 +61,7 @@ export interface WriteNoteProps {
 
 export interface FooterProps {
   contents: string;
-  fileName: string;
-  textColor: string;
-  bgColor: string;
   setModalOn: React.Dispatch<React.SetStateAction<boolean>>;
-  imgFile2?: FileReader;
-  presignedUrl: string;
-  file?: File;
 }
 
 export interface getPresignedUrlPrps {
@@ -86,5 +80,5 @@ export interface postLecueNoteProps {
   color: string;
   fileName: string;
   bgColor: string;
-  setModalOn: React.Dispatch<React.SetStateAction<boolean>>;
+  isIconClicked: boolean;
 }