From b096c4bb3d7293b467e930ffcf8a4529f81fa15d Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 04:44:22 +0900
Subject: [PATCH 01/19] =?UTF-8?q?chore:=20=EB=B3=80=EC=88=98=EC=84=A0?=
 =?UTF-8?q?=EC=96=B8=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/index.tsx | 40 ++++--------------
 src/LecueNote/page/LeceuNotePage/index.tsx    | 41 ++++++++++++++++++-
 src/LecueNote/type/lecueNoteType.ts           | 12 ++++++
 3 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index 67c5591c..e5fe073f 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -1,47 +1,21 @@
-import { useState } from 'react';
-
-import {
-  BG_COLOR_CHART,
-  CATEGORY,
-  TEXT_COLOR_CHART,
-} from '../../constants/colorChart';
 import { CreateNoteProps } from '../../type/lecueNoteType';
 import SelectColor from '../SelectColor';
 import WriteNote from '../WriteNote';
 import * as S from './CreateNote.style';
 
 function CreateNote({
+  clickedCategory,
+  clickedBgColor,
+  clickedTextColor,
+  isIconClicked,
   contents,
   handleChangeFn,
+  handleClickCategory,
+  handleClickedColorBtn,
+  handleClickedIcon,
   imgFile,
   uploadImage,
 }: CreateNoteProps) {
-  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 handleClickCategory = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    setclickedCategory(e.currentTarget.innerHTML);
-  };
-
-  const handleClickedColorBtn = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    if (clickedCategory === '텍스트색') {
-      setClickedTextColor(e.currentTarget.id);
-    } else {
-      setclickedBgColor(e.currentTarget.id);
-      setIsIconClicked(false);
-    }
-  };
-
-  const handleClickedIcon = () => {
-    setIsIconClicked(true);
-  };
-
   return (
     <S.Wrapper>
       <WriteNote
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 5974abc4..f43e441e 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -3,12 +3,27 @@ import { useState } from 'react';
 import Header from '../../../components/common/Header';
 import CreateNote from '../../components/CreateNote';
 import Footer from '../../components/Footer';
+import {
+  BG_COLOR_CHART,
+  CATEGORY,
+  TEXT_COLOR_CHART,
+} from '../../constants/colorChart';
 import * as S from './LecueNotePage.style';
 
 function LecueNotePage() {
   const MAX_LENGTH = 1000;
   const [contents, setContents] = useState('');
   const [imgFile, setImgFile] = useState('');
+  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 handleClickCategory = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    setclickedCategory(e.currentTarget.innerHTML);
+  };
 
   const handleChangeContents = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setContents(e.target.value);
@@ -18,16 +33,38 @@ function LecueNotePage() {
     }
   };
 
+  const handleClickedColorBtn = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    if (clickedCategory === '텍스트색') {
+      setClickedTextColor(e.currentTarget.id);
+    } else {
+      setclickedBgColor(e.currentTarget.id);
+      setIsIconClicked(false);
+    }
+  };
+
+  const handleClickedIcon = () => {
+    setIsIconClicked(true);
+  };
+
   return (
     <S.Wrapper>
       <Header headerTitle="레큐노트 작성" />
       <CreateNote
+        clickedCategory={clickedCategory}
+        clickedTextColor={clickedTextColor}
+        clickedBgColor={clickedBgColor}
+        isIconClicked={isIconClicked}
         contents={contents}
-        handleChangeFn={handleChangeContents}
         imgFile={imgFile}
         uploadImage={(file) => setImgFile(file)}
+        handleChangeFn={handleChangeContents}
+        handleClickCategory={handleClickCategory}
+        handleClickedColorBtn={handleClickedColorBtn}
+        handleClickedIcon={handleClickedIcon}
       />
-      <Footer contents={contents} />
+      <Footer contents={contents} imgFile={imgFile} />
     </S.Wrapper>
   );
 }
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 06e7f77f..9359bba0 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -1,7 +1,18 @@
 export interface CreateNoteProps {
+  clickedCategory: string;
+  clickedTextColor: string;
+  clickedBgColor: string;
+  isIconClicked: boolean;
   imgFile: string;
   contents: string;
   handleChangeFn: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleClickCategory: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+  handleClickedColorBtn: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+  handleClickedIcon: () => void;
   uploadImage: (file: string) => void;
 }
 
@@ -38,4 +49,5 @@ export interface WriteNoteProps {
 
 export interface FooterProps {
   contents: string;
+  imgFile: string;
 }

From 705382903e160971831d05e69ea7acc0d79c9d9d Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 08:17:19 +0900
Subject: [PATCH 02/19] =?UTF-8?q?feat:=20post=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/Footer/index.tsx | 29 +++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index b0dbafb5..504cc61b 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -1,11 +1,36 @@
 import Button from '../../../components/common/Button';
+import { api } from '../../../libs/api';
 import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
-function Footer({ contents }: FooterProps) {
+function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
+  const color = textColor === '#FFF' ? 1 : 0;
+  const handleClickBtn = () => {
+    api
+      .post(
+        '/api/notes',
+        {
+          bookId: 1,
+          content: `${contents}`,
+          textColor: color,
+          background: fileName ? `${fileName}` : `${bgColor}`,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+          },
+        },
+      )
+      .then((res) => console.log(res));
+  };
+
   return (
     <S.Wrapper>
-      <Button variant="complete" disabled={contents.length === 0}>
+      <Button
+        variant="complete"
+        disabled={contents.length === 0}
+        onClick={handleClickBtn}
+      >
         작성 완료
       </Button>
     </S.Wrapper>

From 74be707cc9e6c1298df9fac466df288339a45445 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 08:17:44 +0900
Subject: [PATCH 03/19] =?UTF-8?q?feat:=20presigned=20url=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/index.tsx |  2 ++
 .../components/SelectColor/index.tsx          |  3 ++
 .../components/ShowColorChart/index.tsx       | 28 +++++++++++++++----
 src/LecueNote/page/LeceuNotePage/index.tsx    |  9 +++++-
 src/LecueNote/type/lecueNoteType.ts           |  7 ++++-
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index e5fe073f..67b42f52 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -9,6 +9,7 @@ function CreateNote({
   clickedTextColor,
   isIconClicked,
   contents,
+  setFileName,
   handleChangeFn,
   handleClickCategory,
   handleClickedColorBtn,
@@ -31,6 +32,7 @@ function CreateNote({
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
         clickedBgColor={clickedBgColor}
+        setFileName={setFileName}
         handleCategoryFn={handleClickCategory}
         handleColorFn={handleClickedColorBtn}
         handleIconFn={handleClickedIcon}
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index 78216575..8163a7e1 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -12,6 +12,7 @@ function SelectColor({
   clickedCategory,
   clickedTextColor,
   clickedBgColor,
+  setFileName,
   handleCategoryFn,
   handleColorFn,
   handleIconFn,
@@ -39,6 +40,7 @@ function SelectColor({
           isIconClicked={isIconClicked}
           colorChart={TEXT_COLOR_CHART}
           state={clickedTextColor}
+          setFileName={setFileName}
           uploadImage={uploadImage}
           handleFn={handleColorFn}
           handleIconFn={handleIconFn}
@@ -48,6 +50,7 @@ function SelectColor({
           isIconClicked={isIconClicked}
           colorChart={BG_COLOR_CHART}
           state={clickedBgColor}
+          setFileName={setFileName}
           uploadImage={uploadImage}
           handleFn={handleColorFn}
           handleIconFn={handleIconFn}
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index bbd2fdf0..d2e69e5f 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 
 import { IcCameraSmall } from '../../../assets';
+import { api } from '../../../libs/api';
 import { BG_COLOR_CHART } from '../../constants/colorChart';
 import { ShowColorChartProps } from '../../type/lecueNoteType';
 import * as S from './ShowColorChart.style';
@@ -9,6 +10,7 @@ function ShowColorChart({
   isIconClicked,
   colorChart,
   state,
+  setFileName,
   uploadImage,
   handleFn,
   handleIconFn,
@@ -21,12 +23,28 @@ function ShowColorChart({
     if (fileInput && fileInput.files && fileInput.files.length > 0) {
       const file = fileInput.files[0];
 
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
+      // reader1: 파일을 base64로 읽어서 업로드
+      const reader1 = new FileReader();
+      reader1.readAsDataURL(file);
+      reader1.onloadend = () => {
+        if (reader1.result !== null) {
+          uploadImage(reader1.result as string);
+        }
+      };
 
-      reader.onloadend = () => {
-        if (reader.result !== null) {
-          uploadImage(reader.result as string);
+      // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
+      const reader2 = new FileReader();
+      reader2.readAsArrayBuffer(file);
+      reader2.onloadend = () => {
+        if (reader2.result !== null) {
+          api.get('/api/images/note').then((res) => {
+            setFileName(res.data.data.fileName);
+            api.put(res.data.data.url, reader2.result, {
+              headers: {
+                'Content-Type': file.type,
+              },
+            });
+          });
         }
       };
     }
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index f43e441e..d9ba845c 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -18,6 +18,7 @@ function LecueNotePage() {
   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 handleClickCategory = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -59,12 +60,18 @@ function LecueNotePage() {
         contents={contents}
         imgFile={imgFile}
         uploadImage={(file) => setImgFile(file)}
+        setFileName={setFileName}
         handleChangeFn={handleChangeContents}
         handleClickCategory={handleClickCategory}
         handleClickedColorBtn={handleClickedColorBtn}
         handleClickedIcon={handleClickedIcon}
       />
-      <Footer contents={contents} imgFile={imgFile} />
+      <Footer
+        contents={contents}
+        fileName={fileName}
+        textColor={clickedTextColor}
+        bgColor={clickedBgColor}
+      />
     </S.Wrapper>
   );
 }
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 9359bba0..3a912f06 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -5,6 +5,7 @@ export interface CreateNoteProps {
   isIconClicked: boolean;
   imgFile: string;
   contents: string;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
   handleChangeFn: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   handleClickCategory: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -21,6 +22,7 @@ export interface SelectColorProps {
   clickedCategory: string;
   clickedTextColor: string;
   clickedBgColor: string;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
   handleCategoryFn: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => void;
@@ -33,6 +35,7 @@ export interface ShowColorChartProps {
   isIconClicked: boolean;
   colorChart: string[];
   state: string;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
   uploadImage: (file: string) => void;
   handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   handleIconFn: () => void;
@@ -49,5 +52,7 @@ export interface WriteNoteProps {
 
 export interface FooterProps {
   contents: string;
-  imgFile: string;
+  fileName: string;
+  textColor: string;
+  bgColor: string;
 }

From 428f83a25ab2204113ff1c958352e028ab06fe82 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 12:46:58 +0900
Subject: [PATCH 04/19] =?UTF-8?q?feat:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=ED=8C=A8=EC=B9=AD=20=EC=84=B1=EA=B3=B5=20=EC=8B=9C,=20?=
 =?UTF-8?q?=EC=A7=84=EC=9E=85=ED=95=A0=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/Footer/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index 504cc61b..596fe00f 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -1,10 +1,14 @@
+// import { useNavigate } from 'react-router-dom';
+
 import Button from '../../../components/common/Button';
 import { api } from '../../../libs/api';
 import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
 function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
+  // const navigate = useNavigate();
   const color = textColor === '#FFF' ? 1 : 0;
+
   const handleClickBtn = () => {
     api
       .post(
@@ -21,7 +25,11 @@ function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
           },
         },
       )
-      .then((res) => console.log(res));
+      .then((res) => {
+        console.log(res);
+        // 나중에 주석코드를 활성화시킬 예정!
+        // navigate(`lecue-book/${res.data.data.bookUuid}`);
+      });
   };
 
   return (

From d4d479e77ee136594085f94fd9413665218b4a03 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 12:47:48 +0900
Subject: [PATCH 05/19] =?UTF-8?q?feat:=20get,=20put=20=EC=8B=A4=ED=96=89?=
 =?UTF-8?q?=20=EC=8B=9C=EC=A0=90=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ShowColorChart/index.tsx       | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index d2e69e5f..c78f9f37 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { IcCameraSmall } from '../../../assets';
 import { api } from '../../../libs/api';
@@ -16,6 +16,14 @@ function ShowColorChart({
   handleIconFn,
 }: ShowColorChartProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
+  const [presignedUrl, setPresignedUrl] = useState('');
+
+  const getPresignedUrl = () => {
+    api.get('/api/images/note').then((res) => {
+      setPresignedUrl(res.data.data.url);
+      setFileName(res.data.data.fileName);
+    });
+  };
 
   const handleImageUpload = () => {
     const fileInput = imgRef.current;
@@ -36,20 +44,21 @@ function ShowColorChart({
       const reader2 = new FileReader();
       reader2.readAsArrayBuffer(file);
       reader2.onloadend = () => {
-        if (reader2.result !== null) {
-          api.get('/api/images/note').then((res) => {
-            setFileName(res.data.data.fileName);
-            api.put(res.data.data.url, reader2.result, {
-              headers: {
-                'Content-Type': file.type,
-              },
-            });
+        if (reader2.result !== null && presignedUrl) {
+          api.put(presignedUrl, reader2.result, {
+            headers: {
+              'Content-Type': file.type,
+            },
           });
         }
       };
     }
   };
 
+  useEffect(() => {
+    getPresignedUrl();
+  }, []);
+
   return (
     <S.Wrapper>
       {colorChart === BG_COLOR_CHART && (

From 9ed4e985600f0c6c0d358db034621a11403a3693 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 13:49:56 +0900
Subject: [PATCH 06/19] =?UTF-8?q?chore:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=ED=95=A8=EC=88=98=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/Footer/index.tsx     | 26 +----------
 .../components/ShowColorChart/index.tsx       | 46 +++----------------
 2 files changed, 8 insertions(+), 64 deletions(-)

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index 596fe00f..cdec9a6f 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -1,35 +1,13 @@
-// import { useNavigate } from 'react-router-dom';
-
 import Button from '../../../components/common/Button';
-import { api } from '../../../libs/api';
+import postLecueNote from '../../api/postLecueNote';
 import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
 function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
-  // const navigate = useNavigate();
   const color = textColor === '#FFF' ? 1 : 0;
 
   const handleClickBtn = () => {
-    api
-      .post(
-        '/api/notes',
-        {
-          bookId: 1,
-          content: `${contents}`,
-          textColor: color,
-          background: fileName ? `${fileName}` : `${bgColor}`,
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
-          },
-        },
-      )
-      .then((res) => {
-        console.log(res);
-        // 나중에 주석코드를 활성화시킬 예정!
-        // navigate(`lecue-book/${res.data.data.bookUuid}`);
-      });
+    postLecueNote(contents, color, fileName, bgColor);
   };
 
   return (
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index c78f9f37..974a7601 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { IcCameraSmall } from '../../../assets';
-import { api } from '../../../libs/api';
+import getPresignedUrl from '../../api/getPresignedUrl';
+import handleImageUpload from '../../api/handleImageUpload';
 import { BG_COLOR_CHART } from '../../constants/colorChart';
 import { ShowColorChartProps } from '../../type/lecueNoteType';
 import * as S from './ShowColorChart.style';
@@ -18,45 +19,8 @@ function ShowColorChart({
   const imgRef = useRef<HTMLInputElement | null>(null);
   const [presignedUrl, setPresignedUrl] = useState('');
 
-  const getPresignedUrl = () => {
-    api.get('/api/images/note').then((res) => {
-      setPresignedUrl(res.data.data.url);
-      setFileName(res.data.data.fileName);
-    });
-  };
-
-  const handleImageUpload = () => {
-    const fileInput = imgRef.current;
-
-    if (fileInput && fileInput.files && fileInput.files.length > 0) {
-      const file = fileInput.files[0];
-
-      // reader1: 파일을 base64로 읽어서 업로드
-      const reader1 = new FileReader();
-      reader1.readAsDataURL(file);
-      reader1.onloadend = () => {
-        if (reader1.result !== null) {
-          uploadImage(reader1.result as string);
-        }
-      };
-
-      // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
-      const reader2 = new FileReader();
-      reader2.readAsArrayBuffer(file);
-      reader2.onloadend = () => {
-        if (reader2.result !== null && presignedUrl) {
-          api.put(presignedUrl, reader2.result, {
-            headers: {
-              'Content-Type': file.type,
-            },
-          });
-        }
-      };
-    }
-  };
-
   useEffect(() => {
-    getPresignedUrl();
+    getPresignedUrl(setPresignedUrl, setFileName);
   }, []);
 
   return (
@@ -66,7 +30,9 @@ function ShowColorChart({
           <S.Input
             type="file"
             accept="image/*"
-            onChange={handleImageUpload}
+            onChange={() =>
+              handleImageUpload(imgRef, uploadImage, presignedUrl)
+            }
             ref={imgRef}
           />
 

From b6c92a581e14af5ce647eebb92ef043853a9779f Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 13:50:31 +0900
Subject: [PATCH 07/19] =?UTF-8?q?chore:=20=ED=95=A8=EC=88=98=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EB=B0=8F=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/api/getPresignedUrl.ts   | 13 ++++++++++
 src/LecueNote/api/handleImageUpload.ts | 33 ++++++++++++++++++++++++
 src/LecueNote/api/postLecueNote.ts     | 35 ++++++++++++++++++++++++++
 src/LecueNote/api/putPresignedUrl.ts   | 15 +++++++++++
 4 files changed, 96 insertions(+)
 create mode 100644 src/LecueNote/api/getPresignedUrl.ts
 create mode 100644 src/LecueNote/api/handleImageUpload.ts
 create mode 100644 src/LecueNote/api/postLecueNote.ts
 create mode 100644 src/LecueNote/api/putPresignedUrl.ts

diff --git a/src/LecueNote/api/getPresignedUrl.ts b/src/LecueNote/api/getPresignedUrl.ts
new file mode 100644
index 00000000..06589ecd
--- /dev/null
+++ b/src/LecueNote/api/getPresignedUrl.ts
@@ -0,0 +1,13 @@
+import { api } from '../../libs/api';
+
+const getPresignedUrl = (
+  setPresignedUrl: React.Dispatch<React.SetStateAction<string>>,
+  setFileName: React.Dispatch<React.SetStateAction<string>>,
+) => {
+  api.get('/api/images/note').then((res) => {
+    setPresignedUrl(res.data.data.url);
+    setFileName(res.data.data.fileName);
+  });
+};
+
+export default getPresignedUrl;
diff --git a/src/LecueNote/api/handleImageUpload.ts b/src/LecueNote/api/handleImageUpload.ts
new file mode 100644
index 00000000..4ebb9138
--- /dev/null
+++ b/src/LecueNote/api/handleImageUpload.ts
@@ -0,0 +1,33 @@
+import putPresignedUrl from './putPresignedUrl';
+
+const handleImageUpload = (
+  imgRef: React.MutableRefObject<HTMLInputElement | null>,
+  uploadImage: (file: string) => void,
+  presignedUrl: string,
+) => {
+  const fileInput = imgRef.current;
+
+  if (fileInput && fileInput.files && fileInput.files.length > 0) {
+    const file = fileInput.files[0];
+
+    // reader1: 파일을 base64로 읽어서 업로드
+    const reader1 = new FileReader();
+    reader1.readAsDataURL(file);
+    reader1.onloadend = () => {
+      if (reader1.result !== null) {
+        uploadImage(reader1.result as string);
+      }
+    };
+
+    // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
+    const reader2 = new FileReader();
+    reader2.readAsArrayBuffer(file);
+    reader2.onloadend = () => {
+      if (reader2.result !== null && presignedUrl) {
+        putPresignedUrl(presignedUrl, reader2.result, file.type);
+      }
+    };
+  }
+};
+
+export default handleImageUpload;
diff --git a/src/LecueNote/api/postLecueNote.ts b/src/LecueNote/api/postLecueNote.ts
new file mode 100644
index 00000000..38031c3b
--- /dev/null
+++ b/src/LecueNote/api/postLecueNote.ts
@@ -0,0 +1,35 @@
+// import { useNavigate } from 'react-router-dom';
+
+import { api } from '../../libs/api';
+
+const postLecueNote = (
+  contents: string,
+  color: number,
+  fileName: string,
+  bgColor: string,
+) => {
+//   const navigate = useNavigate();
+
+  api
+    .post(
+      '/api/notes',
+      {
+        bookId: 1,
+        content: contents,
+        textColor: color,
+        background: fileName ? fileName : bgColor,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+        },
+      },
+    )
+    .then((res) => {
+      console.log(res);
+      // 나중에 주석코드를 활성화시킬 예정!
+      // navigate(`lecue-book/${res.data.data.bookUuid}`);
+    });
+};
+
+export default postLecueNote;
diff --git a/src/LecueNote/api/putPresignedUrl.ts b/src/LecueNote/api/putPresignedUrl.ts
new file mode 100644
index 00000000..004ca37b
--- /dev/null
+++ b/src/LecueNote/api/putPresignedUrl.ts
@@ -0,0 +1,15 @@
+import { api } from '../../libs/api';
+
+const putPresignedUrl = (
+  presignedUrl: string,
+  binaryFile: string | ArrayBuffer,
+  fileType: string,
+) => {
+  api.put(presignedUrl, binaryFile, {
+    headers: {
+      'Content-Type': fileType,
+    },
+  });
+};
+
+export default putPresignedUrl;

From 8cce4ae60f7ffca71a03a1078d2ebc0932380dc1 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 14:02:46 +0900
Subject: [PATCH 08/19] =?UTF-8?q?chore:=20type=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/api/getPresignedUrl.ts           |  9 +++++----
 src/LecueNote/api/handleImageUpload.ts         |  6 +++++-
 src/LecueNote/api/postLecueNote.ts             | 15 ++++++++-------
 src/LecueNote/api/putPresignedUrl.ts           | 11 ++++++-----
 src/LecueNote/components/Footer/index.tsx      |  7 ++++++-
 .../components/ShowColorChart/index.tsx        |  5 ++++-
 src/LecueNote/type/lecueNoteType.ts            | 18 ++++++++++++++++++
 7 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/LecueNote/api/getPresignedUrl.ts b/src/LecueNote/api/getPresignedUrl.ts
index 06589ecd..f2e0c203 100644
--- a/src/LecueNote/api/getPresignedUrl.ts
+++ b/src/LecueNote/api/getPresignedUrl.ts
@@ -1,9 +1,10 @@
 import { api } from '../../libs/api';
+import { getPresignedUrlPrps } from '../type/lecueNoteType';
 
-const getPresignedUrl = (
-  setPresignedUrl: React.Dispatch<React.SetStateAction<string>>,
-  setFileName: React.Dispatch<React.SetStateAction<string>>,
-) => {
+const getPresignedUrl = ({
+  setPresignedUrl,
+  setFileName,
+}: getPresignedUrlPrps) => {
   api.get('/api/images/note').then((res) => {
     setPresignedUrl(res.data.data.url);
     setFileName(res.data.data.fileName);
diff --git a/src/LecueNote/api/handleImageUpload.ts b/src/LecueNote/api/handleImageUpload.ts
index 4ebb9138..0cb76c75 100644
--- a/src/LecueNote/api/handleImageUpload.ts
+++ b/src/LecueNote/api/handleImageUpload.ts
@@ -24,7 +24,11 @@ const handleImageUpload = (
     reader2.readAsArrayBuffer(file);
     reader2.onloadend = () => {
       if (reader2.result !== null && presignedUrl) {
-        putPresignedUrl(presignedUrl, reader2.result, file.type);
+        putPresignedUrl({
+          presignedUrl: presignedUrl,
+          binaryFile: reader2.result,
+          fileType: file.type,
+        });
       }
     };
   }
diff --git a/src/LecueNote/api/postLecueNote.ts b/src/LecueNote/api/postLecueNote.ts
index 38031c3b..c0e21bbf 100644
--- a/src/LecueNote/api/postLecueNote.ts
+++ b/src/LecueNote/api/postLecueNote.ts
@@ -1,14 +1,15 @@
 // import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../libs/api';
+import { postLecueNoteProps } from '../type/lecueNoteType';
 
-const postLecueNote = (
-  contents: string,
-  color: number,
-  fileName: string,
-  bgColor: string,
-) => {
-//   const navigate = useNavigate();
+const postLecueNote = ({
+  contents,
+  color,
+  fileName,
+  bgColor,
+}: postLecueNoteProps) => {
+  //   const navigate = useNavigate();
 
   api
     .post(
diff --git a/src/LecueNote/api/putPresignedUrl.ts b/src/LecueNote/api/putPresignedUrl.ts
index 004ca37b..5da9b046 100644
--- a/src/LecueNote/api/putPresignedUrl.ts
+++ b/src/LecueNote/api/putPresignedUrl.ts
@@ -1,10 +1,11 @@
 import { api } from '../../libs/api';
+import { putPresignedUrlProps } from '../type/lecueNoteType';
 
-const putPresignedUrl = (
-  presignedUrl: string,
-  binaryFile: string | ArrayBuffer,
-  fileType: string,
-) => {
+const putPresignedUrl = ({
+  presignedUrl,
+  binaryFile,
+  fileType,
+}: putPresignedUrlProps) => {
   api.put(presignedUrl, binaryFile, {
     headers: {
       'Content-Type': fileType,
diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index cdec9a6f..56b3fa54 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -7,7 +7,12 @@ function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
   const color = textColor === '#FFF' ? 1 : 0;
 
   const handleClickBtn = () => {
-    postLecueNote(contents, color, fileName, bgColor);
+    postLecueNote({
+      contents: contents,
+      color: color,
+      fileName: fileName,
+      bgColor: bgColor,
+    });
   };
 
   return (
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 974a7601..efcec0ad 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -20,7 +20,10 @@ function ShowColorChart({
   const [presignedUrl, setPresignedUrl] = useState('');
 
   useEffect(() => {
-    getPresignedUrl(setPresignedUrl, setFileName);
+    getPresignedUrl({
+      setPresignedUrl: setPresignedUrl,
+      setFileName: setFileName,
+    });
   }, []);
 
   return (
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 3a912f06..903b60ad 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -56,3 +56,21 @@ export interface FooterProps {
   textColor: string;
   bgColor: string;
 }
+
+export interface getPresignedUrlPrps {
+  setPresignedUrl: React.Dispatch<React.SetStateAction<string>>;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export interface putPresignedUrlProps {
+  presignedUrl: string;
+  binaryFile: string | ArrayBuffer;
+  fileType: string;
+}
+
+export interface postLecueNoteProps {
+  contents: string;
+  color: number;
+  fileName: string;
+  bgColor: string;
+}

From b46b0b0af977ce62715bbfefee263998c0cd2d0a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 14:56:33 +0900
Subject: [PATCH 09/19] =?UTF-8?q?feat:=20react-query=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/hooks/useGetPresignedUrl.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/LecueNote/hooks/useGetPresignedUrl.tsx

diff --git a/src/LecueNote/hooks/useGetPresignedUrl.tsx b/src/LecueNote/hooks/useGetPresignedUrl.tsx
new file mode 100644
index 00000000..29b62bc2
--- /dev/null
+++ b/src/LecueNote/hooks/useGetPresignedUrl.tsx
@@ -0,0 +1,14 @@
+import { useQuery } from 'react-query';
+
+import getPresignedUrl from '../api/getPresignedUrl';
+
+const useGetPresignedUrl = () => {
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['get-presigned-url'],
+    queryFn: () => getPresignedUrl(),
+  });
+
+  return { isLoading, error, data };
+};
+
+export default useGetPresignedUrl;

From 9907513e0b10a0e2133cd199b90c0e948e0e065a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 14:57:20 +0900
Subject: [PATCH 10/19] =?UTF-8?q?chore:=20react-query=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=95=98=EB=A9=B4=EC=84=9C=20=EC=BD=94=EB=93=9C=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/api/getPresignedUrl.ts              | 12 +++---------
 src/LecueNote/components/ShowColorChart/index.tsx | 13 +++++++------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/LecueNote/api/getPresignedUrl.ts b/src/LecueNote/api/getPresignedUrl.ts
index f2e0c203..e232a2e6 100644
--- a/src/LecueNote/api/getPresignedUrl.ts
+++ b/src/LecueNote/api/getPresignedUrl.ts
@@ -1,14 +1,8 @@
 import { api } from '../../libs/api';
-import { getPresignedUrlPrps } from '../type/lecueNoteType';
 
-const getPresignedUrl = ({
-  setPresignedUrl,
-  setFileName,
-}: getPresignedUrlPrps) => {
-  api.get('/api/images/note').then((res) => {
-    setPresignedUrl(res.data.data.url);
-    setFileName(res.data.data.fileName);
-  });
+const getPresignedUrl = async () => {
+  const { data } = await api.get('/api/images/note');
+  return data;
 };
 
 export default getPresignedUrl;
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index efcec0ad..329fc1ba 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { IcCameraSmall } from '../../../assets';
-import getPresignedUrl from '../../api/getPresignedUrl';
 import handleImageUpload from '../../api/handleImageUpload';
 import { BG_COLOR_CHART } from '../../constants/colorChart';
+import useGetPresignedUrl from '../../hooks/useGetPresignedUrl';
 import { ShowColorChartProps } from '../../type/lecueNoteType';
 import * as S from './ShowColorChart.style';
 
@@ -18,13 +18,14 @@ function ShowColorChart({
 }: ShowColorChartProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
   const [presignedUrl, setPresignedUrl] = useState('');
+  const { data } = useGetPresignedUrl();
 
   useEffect(() => {
-    getPresignedUrl({
-      setPresignedUrl: setPresignedUrl,
-      setFileName: setFileName,
-    });
-  }, []);
+    if (data !== undefined) {
+      setPresignedUrl(data.data.url);
+      setFileName(data.data.fileName);
+    }
+  }, [data]);
 
   return (
     <S.Wrapper>

From e99c8f74e92e19212f4573092fbbe2a0c7592757 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 17:14:20 +0900
Subject: [PATCH 11/19] =?UTF-8?q?chore:=20textColor=20post=20type=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/Footer/index.tsx | 4 +---
 src/LecueNote/type/lecueNoteType.ts       | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index 56b3fa54..26b48fa6 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -4,12 +4,10 @@ import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
 function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
-  const color = textColor === '#FFF' ? 1 : 0;
-
   const handleClickBtn = () => {
     postLecueNote({
       contents: contents,
-      color: color,
+      color: textColor,
       fileName: fileName,
       bgColor: bgColor,
     });
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 903b60ad..f41247f8 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -70,7 +70,7 @@ export interface putPresignedUrlProps {
 
 export interface postLecueNoteProps {
   contents: string;
-  color: number;
+  color: string;
   fileName: string;
   bgColor: string;
 }

From 10be4a990c41d2ddd97fb2bb7ff845754f91606a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 17:15:17 +0900
Subject: [PATCH 12/19] =?UTF-8?q?chore:=20=EC=84=A0=EC=96=B8=20=ED=98=95?=
 =?UTF-8?q?=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/api/putPresignedUrl.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/api/putPresignedUrl.ts b/src/LecueNote/api/putPresignedUrl.ts
index 5da9b046..f09f1c8e 100644
--- a/src/LecueNote/api/putPresignedUrl.ts
+++ b/src/LecueNote/api/putPresignedUrl.ts
@@ -6,11 +6,13 @@ const putPresignedUrl = ({
   binaryFile,
   fileType,
 }: putPresignedUrlProps) => {
-  api.put(presignedUrl, binaryFile, {
+  const response = api.put(presignedUrl, binaryFile, {
     headers: {
       'Content-Type': fileType,
     },
   });
+
+  return response;
 };
 
 export default putPresignedUrl;

From 3c06347e44051f937f2c9da074aaa538a6c8cb8e Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 18:53:57 +0900
Subject: [PATCH 13/19] =?UTF-8?q?chore:=20yarn=20=EB=B0=9B=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/hooks/usePutPresignedUrl.ts |  21 ++
 yarn.lock                                 | 410 +++++++++++-----------
 2 files changed, 223 insertions(+), 208 deletions(-)
 create mode 100644 src/LecueNote/hooks/usePutPresignedUrl.ts

diff --git a/src/LecueNote/hooks/usePutPresignedUrl.ts b/src/LecueNote/hooks/usePutPresignedUrl.ts
new file mode 100644
index 00000000..83903085
--- /dev/null
+++ b/src/LecueNote/hooks/usePutPresignedUrl.ts
@@ -0,0 +1,21 @@
+import { AxiosError } from 'axios';
+import { useMutation } from 'react-query';
+
+import putPresignedUrl from '../api/putPresignedUrl';
+import { putPresignedUrlProps } from './../type/lecueNoteType';
+
+const usePutPresignedUrl = () => {
+  const mutation = useMutation({
+    mutationFn: ({
+      presignedUrl,
+      binaryFile,
+      fileType,
+    }: putPresignedUrlProps) => {
+      return putPresignedUrl({ presignedUrl, binaryFile, fileType });
+    },
+    onError: (err: AxiosError) => console.log(err),
+  });
+  return mutation;
+};
+
+export default usePutPresignedUrl;
diff --git a/yarn.lock b/yarn.lock
index c53d1f7c..496bf54f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -143,9 +143,9 @@
   integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
 
 "@babel/helpers@^7.23.7":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.7.tgz#eb543c36f81da2873e47b76ee032343ac83bba60"
-  integrity sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.8.tgz#fc6b2d65b16847fd50adddbd4232c76378959e34"
+  integrity sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==
   dependencies:
     "@babel/template" "^7.22.15"
     "@babel/traverse" "^7.23.7"
@@ -180,9 +180,9 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
-  integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -495,12 +495,12 @@
   integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
 "@humanwhocodes/config-array@^0.11.13":
-  version "0.11.13"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
-  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^2.0.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
@@ -508,10 +508,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
-  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
+  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
@@ -550,9 +550,9 @@
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
 "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.20"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
-  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz#5dc1df7b3dc4a6209e503a924e1ca56097a2bb15"
+  integrity sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
@@ -583,10 +583,10 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@remix-run/router@1.14.1":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.1.tgz#6d2dd03d52e604279c38911afc1079d58c50a755"
-  integrity sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==
+"@remix-run/router@1.14.2":
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.2.tgz#4d58f59908d9197ba3179310077f25c88e49ed17"
+  integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==
 
 "@rollup/pluginutils@^5.0.5":
   version "5.1.0"
@@ -597,70 +597,70 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.2.tgz#ccb02257556bacbc1e756ab9b0b973cea2c7a664"
-  integrity sha512-RKzxFxBHq9ysZ83fn8Iduv3A283K7zPPYuhL/z9CQuyFrjwpErJx0h4aeb/bnJ+q29GRLgJpY66ceQ/Wcsn3wA==
-
-"@rollup/rollup-android-arm64@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.2.tgz#21bd0fbafdf442c6a17645b840f6a94556b0e9bb"
-  integrity sha512-yZ+MUbnwf3SHNWQKJyWh88ii2HbuHCFQnAYTeeO1Nb8SyEiWASEi5dQUygt3ClHWtA9My9RQAYkjvrsZ0WK8Xg==
-
-"@rollup/rollup-darwin-arm64@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.2.tgz#9f2e5d5637677f9839dbe1622130d0592179136a"
-  integrity sha512-vqJ/pAUh95FLc/G/3+xPqlSBgilPnauVf2EXOQCZzhZJCXDXt/5A8mH/OzU6iWhb3CNk5hPJrh8pqJUPldN5zw==
-
-"@rollup/rollup-darwin-x64@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.2.tgz#1b06291ff1c41af94d2786cd167188c5bf7caec9"
-  integrity sha512-otPHsN5LlvedOprd3SdfrRNhOahhVBwJpepVKUN58L0RnC29vOAej1vMEaVU6DadnpjivVsNTM5eNt0CcwTahw==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.2.tgz#147069948bba00f435122f411210624e72638ebf"
-  integrity sha512-ewG5yJSp+zYKBYQLbd1CUA7b1lSfIdo9zJShNTyc2ZP1rcPrqyZcNlsHgs7v1zhgfdS+kW0p5frc0aVqhZCiYQ==
-
-"@rollup/rollup-linux-arm64-gnu@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.2.tgz#3a50f0e7ae6e444d11c61fce12783196454a4efb"
-  integrity sha512-pL6QtV26W52aCWTG1IuFV3FMPL1m4wbsRG+qijIvgFO/VBsiXJjDPE/uiMdHBAO6YcpV4KvpKtd0v3WFbaxBtg==
-
-"@rollup/rollup-linux-arm64-musl@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.2.tgz#82b5e75484d91c25d4e649d018d9523e72d6dac2"
-  integrity sha512-On+cc5EpOaTwPSNetHXBuqylDW+765G/oqB9xGmWU3npEhCh8xu0xqHGUA+4xwZLqBbIZNcBlKSIYfkBm6ko7g==
-
-"@rollup/rollup-linux-riscv64-gnu@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.2.tgz#ca96f2d43a553d73aec736e991c07010561bc7a9"
-  integrity sha512-Wnx/IVMSZ31D/cO9HSsU46FjrPWHqtdF8+0eyZ1zIB5a6hXaZXghUKpRrC4D5DcRTZOjml2oBhXoqfGYyXKipw==
-
-"@rollup/rollup-linux-x64-gnu@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.2.tgz#db1cece244ea46706c0e1a522ec19ca0173abc55"
-  integrity sha512-ym5x1cj4mUAMBummxxRkI4pG5Vht1QMsJexwGP8547TZ0sox9fCLDHw9KCH9c1FO5d9GopvkaJsBIOkTKxksdw==
-
-"@rollup/rollup-linux-x64-musl@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.2.tgz#c15b26b86827f75977bf59ebd41ce5d788713936"
-  integrity sha512-m0hYELHGXdYx64D6IDDg/1vOJEaiV8f1G/iO+tejvRCJNSwK4jJ15e38JQy5Q6dGkn1M/9KcyEOwqmlZ2kqaZg==
-
-"@rollup/rollup-win32-arm64-msvc@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.2.tgz#60152948f9fb08e8c50c1555e334ca9f9f1f53aa"
-  integrity sha512-x1CWburlbN5JjG+juenuNa4KdedBdXLjZMp56nHFSHTOsb/MI2DYiGzLtRGHNMyydPGffGId+VgjOMrcltOksA==
-
-"@rollup/rollup-win32-ia32-msvc@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.2.tgz#657288cff10311f997d8dbd648590441760ae6d9"
-  integrity sha512-VVzCB5yXR1QlfsH1Xw1zdzQ4Pxuzv+CPr5qpElpKhVxlxD3CRdfubAG9mJROl6/dmj5gVYDDWk8sC+j9BI9/kQ==
-
-"@rollup/rollup-win32-x64-msvc@4.9.2":
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.2.tgz#830f3a3fba67f6216a5884368431918029045afe"
-  integrity sha512-SYRedJi+mweatroB+6TTnJYLts0L0bosg531xnQWtklOI6dezEagx4Q0qDyvRdK+qgdA3YZpjjGuPFtxBmddBA==
+"@rollup/rollup-android-arm-eabi@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.5.tgz#b752b6c88a14ccfcbdf3f48c577ccc3a7f0e66b9"
+  integrity sha512-idWaG8xeSRCfRq9KpRysDHJ/rEHBEXcHuJ82XY0yYFIWnLMjZv9vF/7DOq8djQ2n3Lk6+3qfSH8AqlmHlmi1MA==
+
+"@rollup/rollup-android-arm64@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.5.tgz#33757c3a448b9ef77b6f6292d8b0ec45c87e9c1a"
+  integrity sha512-f14d7uhAMtsCGjAYwZGv6TwuS3IFaM4ZnGMUn3aCBgkcHAYErhV1Ad97WzBvS2o0aaDv4mVz+syiN0ElMyfBPg==
+
+"@rollup/rollup-darwin-arm64@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.5.tgz#5234ba62665a3f443143bc8bcea9df2cc58f55fb"
+  integrity sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w==
+
+"@rollup/rollup-darwin-x64@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.5.tgz#981256c054d3247b83313724938d606798a919d1"
+  integrity sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.5.tgz#120678a5a2b3a283a548dbb4d337f9187a793560"
+  integrity sha512-Q0LcU61v92tQB6ae+udZvOyZ0wfpGojtAKrrpAaIqmJ7+psq4cMIhT/9lfV6UQIpeItnq/2QDROhNLo00lOD1g==
+
+"@rollup/rollup-linux-arm64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.5.tgz#c99d857e2372ece544b6f60b85058ad259f64114"
+  integrity sha512-dkRscpM+RrR2Ee3eOQmRWFjmV/payHEOrjyq1VZegRUa5OrZJ2MAxBNs05bZuY0YCtpqETDy1Ix4i/hRqX98cA==
+
+"@rollup/rollup-linux-arm64-musl@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.5.tgz#3064060f568a5718c2a06858cd6e6d24f2ff8632"
+  integrity sha512-QaKFVOzzST2xzY4MAmiDmURagWLFh+zZtttuEnuNn19AiZ0T3fhPyjPPGwLNdiDT82ZE91hnfJsUiDwF9DClIQ==
+
+"@rollup/rollup-linux-riscv64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.5.tgz#987d30b5d2b992fff07d055015991a57ff55fbad"
+  integrity sha512-HeGqmRJuyVg6/X6MpE2ur7GbymBPS8Np0S/vQFHDmocfORT+Zt76qu+69NUoxXzGqVP1pzaY6QIi0FJWLC3OPA==
+
+"@rollup/rollup-linux-x64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.5.tgz#85946ee4d068bd12197aeeec2c6f679c94978a49"
+  integrity sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==
+
+"@rollup/rollup-linux-x64-musl@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.5.tgz#fe0b20f9749a60eb1df43d20effa96c756ddcbd4"
+  integrity sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg==
+
+"@rollup/rollup-win32-arm64-msvc@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.5.tgz#422661ef0e16699a234465d15b2c1089ef963b2a"
+  integrity sha512-aHSsMnUw+0UETB0Hlv7B/ZHOGY5bQdwMKJSzGfDfvyhnpmVxLMGnQPGNE9wgqkLUs3+gbG1Qx02S2LLfJ5GaRQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.5.tgz#7b73a145891c202fbcc08759248983667a035d85"
+  integrity sha512-AiqiLkb9KSf7Lj/o1U3SEP9Zn+5NuVKgFdRIZkvd4N0+bYrTOovVd0+LmYCPQGbocT4kvFyK+LXCDiXPBF3fyA==
+
+"@rollup/rollup-win32-x64-msvc@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.5.tgz#10491ccf4f63c814d4149e0316541476ea603602"
+  integrity sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ==
 
 "@sentry-internal/feedback@7.93.0":
   version "7.93.0"
@@ -936,7 +936,7 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
-"@types/estree@^1.0.0":
+"@types/estree@1.0.5", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
@@ -964,9 +964,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.2.43":
-  version "18.2.46"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.46.tgz#f04d6c528f8f136ea66333bc66abcae46e2680df"
-  integrity sha512-nNCvVBcZlvX4NU1nRRNV/mFl1nNRuTuslAJglQsq+8ldXe5Xv0Wd2f7WTE3jOxhLH2BFfiZGC6GCp+kHQbgG+w==
+  version "18.2.48"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
+  integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -983,15 +983,15 @@
   integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
 
 "@typescript-eslint/eslint-plugin@^6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.16.0.tgz#cc29fbd208ea976de3db7feb07755bba0ce8d8bc"
-  integrity sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz#0df881a47da1c1a9774f39495f5f7052f86b72e0"
+  integrity sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==
   dependencies:
     "@eslint-community/regexpp" "^4.5.1"
-    "@typescript-eslint/scope-manager" "6.16.0"
-    "@typescript-eslint/type-utils" "6.16.0"
-    "@typescript-eslint/utils" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+    "@typescript-eslint/scope-manager" "6.18.1"
+    "@typescript-eslint/type-utils" "6.18.1"
+    "@typescript-eslint/utils" "6.18.1"
+    "@typescript-eslint/visitor-keys" "6.18.1"
     debug "^4.3.4"
     graphemer "^1.4.0"
     ignore "^5.2.4"
@@ -1000,46 +1000,46 @@
     ts-api-utils "^1.0.1"
 
 "@typescript-eslint/parser@^6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.16.0.tgz#36f39f63b126aa25af2ad2df13d9891e9fd5b40c"
-  integrity sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==
-  dependencies:
-    "@typescript-eslint/scope-manager" "6.16.0"
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/typescript-estree" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.18.1.tgz#3c3987e186b38c77b30b6bfa5edf7c98ae2ec9d3"
+  integrity sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.18.1"
+    "@typescript-eslint/types" "6.18.1"
+    "@typescript-eslint/typescript-estree" "6.18.1"
+    "@typescript-eslint/visitor-keys" "6.18.1"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz#f3e9a00fbc1d0701356359cd56489c54d9e37168"
-  integrity sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==
+"@typescript-eslint/scope-manager@6.18.1":
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz#28c31c60f6e5827996aa3560a538693cb4bd3848"
+  integrity sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==
   dependencies:
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+    "@typescript-eslint/types" "6.18.1"
+    "@typescript-eslint/visitor-keys" "6.18.1"
 
-"@typescript-eslint/type-utils@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.16.0.tgz#5f21c3e49e540ad132dc87fc99af463c184d5ed1"
-  integrity sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==
+"@typescript-eslint/type-utils@6.18.1":
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz#115cf535f8b39db8301677199ce51151e2daee96"
+  integrity sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==
   dependencies:
-    "@typescript-eslint/typescript-estree" "6.16.0"
-    "@typescript-eslint/utils" "6.16.0"
+    "@typescript-eslint/typescript-estree" "6.18.1"
+    "@typescript-eslint/utils" "6.18.1"
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/types@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.16.0.tgz#a3abe0045737d44d8234708d5ed8fef5d59dc91e"
-  integrity sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==
+"@typescript-eslint/types@6.18.1":
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.18.1.tgz#91617d8080bcd99ac355d9157079970d1d49fefc"
+  integrity sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==
 
-"@typescript-eslint/typescript-estree@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz#d6e0578e4f593045f0df06c4b3a22bd6f13f2d03"
-  integrity sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==
+"@typescript-eslint/typescript-estree@6.18.1":
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz#a12b6440175b4cbc9d09ab3c4966c6b245215ab4"
+  integrity sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==
   dependencies:
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+    "@typescript-eslint/types" "6.18.1"
+    "@typescript-eslint/visitor-keys" "6.18.1"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -1047,25 +1047,25 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/utils@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.16.0.tgz#1c291492d34670f9210d2b7fcf6b402bea3134ae"
-  integrity sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==
+"@typescript-eslint/utils@6.18.1":
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.18.1.tgz#3451cfe2e56babb6ac657e10b6703393d4b82955"
+  integrity sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     "@types/json-schema" "^7.0.12"
     "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "6.16.0"
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/typescript-estree" "6.16.0"
+    "@typescript-eslint/scope-manager" "6.18.1"
+    "@typescript-eslint/types" "6.18.1"
+    "@typescript-eslint/typescript-estree" "6.18.1"
     semver "^7.5.4"
 
-"@typescript-eslint/visitor-keys@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz#d50da18a05d91318ed3e7e8889bda0edc35f3a10"
-  integrity sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==
+"@typescript-eslint/visitor-keys@6.18.1":
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz#704d789bda2565a15475e7d22f145b8fe77443f4"
+  integrity sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==
   dependencies:
-    "@typescript-eslint/types" "6.16.0"
+    "@typescript-eslint/types" "6.18.1"
     eslint-visitor-keys "^3.4.1"
 
 "@ungap/structured-clone@^1.2.0":
@@ -1357,9 +1357,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001565:
-  version "1.0.30001572"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz#1ccf7dc92d2ee2f92ed3a54e11b7b4a3041acfa0"
-  integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==
+  version "1.0.30001576"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
+  integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
 
 chalk@^2.4.2:
   version "2.4.2"
@@ -1512,7 +1512,7 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1592,9 +1592,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.4.601:
-  version "1.4.616"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz#4bddbc2c76e1e9dbf449ecd5da3d8119826ea4fb"
-  integrity sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==
+  version "1.4.630"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.630.tgz#1d9f4169653784997bec98975e11a2c05214ce39"
+  integrity sha512-osHqhtjojpCsACVnuD11xO5g9xaCyw7Qqn/C2KParkMv42i8jrJJgx3g7mkHfpxwhy9MnOJr8+pKOdZ7qzgizg==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -1985,9 +1985,9 @@ flatted@^3.2.9:
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
 follow-redirects@^1.15.4:
-  version "1.15.4"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
-  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -2192,7 +2192,7 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-property-descriptors@^1.0.0:
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz#52ba30b6c5ec87fd89fa574bc1c39125c6f65340"
   integrity sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==
@@ -2689,9 +2689,9 @@ mdn-data@2.0.30:
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
 meow@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-13.0.0.tgz#123daf9c2c3afa59c55c4c163d973848a448ff02"
-  integrity sha512-4Hu+75Vo7EOR+8C9RmkabfLijuwd9SrzQ8f0SyC4qZZwU6BlxeOt5ulF3PGCpcMJX4hI+ktpJhea0P6PN1RiWw==
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-13.1.0.tgz#62995b0e8c3951739fe6e0a4becdd4d0df23eb37"
+  integrity sha512-o5R/R3Tzxq0PJ3v3qcQJtSvSE9nKOLSAaDuuoMzDVuGTwHdccMWcYomh9Xolng2tjT6O/Y83d+0coVGof6tqmA==
 
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
@@ -2983,9 +2983,9 @@ postcss-sorting@^8.0.2:
   integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==
 
 postcss-styled-syntax@^0.6.3:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/postcss-styled-syntax/-/postcss-styled-syntax-0.6.3.tgz#9c7d646c11348e857cc3270294df471837fd9585"
-  integrity sha512-woEkwRaHWnVOVjToQKeQkRYasTwa3WY+0A7hcY0HmiBw458nxmWFbt7+XMvuGWwB4VYjNqeWYNr04Hx9/GVTpA==
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/postcss-styled-syntax/-/postcss-styled-syntax-0.6.4.tgz#16c07d2c55261a435031b6a9c7f1d5c2daa2246c"
+  integrity sha512-uWiLn+9rKgIghUYmTHvXMR6MnyPULMe9Gv3bV537Fg4FH6CA6cn21WMjKss2Qb98LUhT847tKfnRGG3FhSOgUQ==
   dependencies:
     typescript "^5.3.3"
 
@@ -2994,16 +2994,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.32:
-  version "8.4.32"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
-  integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.4.33:
+postcss@^8.4.32, postcss@^8.4.33:
   version "8.4.33"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
   integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
@@ -3018,9 +3009,9 @@ prelude-ls@^1.2.1:
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prettier@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
-  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.2.tgz#96e580f7ca9c96090ad054616c0c4597e2844b65"
+  integrity sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==
 
 progress@^2.0.3:
   version "2.0.3"
@@ -3087,19 +3078,19 @@ react-refresh@^0.14.0:
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
 react-router-dom@^6.21.1:
-  version "6.21.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.1.tgz#58b459d2fe1841388c95bb068f85128c45e27349"
-  integrity sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==
+  version "6.21.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.2.tgz#5fba851731a194fa32c31990c4829c5e247f650a"
+  integrity sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==
   dependencies:
-    "@remix-run/router" "1.14.1"
-    react-router "6.21.1"
+    "@remix-run/router" "1.14.2"
+    react-router "6.21.2"
 
-react-router@6.21.1:
-  version "6.21.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.1.tgz#8db7ee8d7cfc36513c9a66b44e0897208c33be34"
-  integrity sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==
+react-router@6.21.2:
+  version "6.21.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.2.tgz#8820906c609ae7e4e8f926cc8eb5ce161428b956"
+  integrity sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==
   dependencies:
-    "@remix-run/router" "1.14.1"
+    "@remix-run/router" "1.14.2"
 
 react@^18.2.0:
   version "18.2.0"
@@ -3199,23 +3190,25 @@ rimraf@^5.0.5:
     glob "^10.3.7"
 
 rollup@^4.2.0:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.2.tgz#19d730219b7ec5f51372c6cf15cfb841990489fe"
-  integrity sha512-66RB8OtFKUTozmVEh3qyNfH+b+z2RXBVloqO2KCC/pjFaGaHtxP9fVfOQKPSGXg2mElmjmxjW/fZ7iKrEpMH5Q==
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.5.tgz#62999462c90f4c8b5d7c38fc7161e63b29101b05"
+  integrity sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==
+  dependencies:
+    "@types/estree" "1.0.5"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.9.2"
-    "@rollup/rollup-android-arm64" "4.9.2"
-    "@rollup/rollup-darwin-arm64" "4.9.2"
-    "@rollup/rollup-darwin-x64" "4.9.2"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.9.2"
-    "@rollup/rollup-linux-arm64-gnu" "4.9.2"
-    "@rollup/rollup-linux-arm64-musl" "4.9.2"
-    "@rollup/rollup-linux-riscv64-gnu" "4.9.2"
-    "@rollup/rollup-linux-x64-gnu" "4.9.2"
-    "@rollup/rollup-linux-x64-musl" "4.9.2"
-    "@rollup/rollup-win32-arm64-msvc" "4.9.2"
-    "@rollup/rollup-win32-ia32-msvc" "4.9.2"
-    "@rollup/rollup-win32-x64-msvc" "4.9.2"
+    "@rollup/rollup-android-arm-eabi" "4.9.5"
+    "@rollup/rollup-android-arm64" "4.9.5"
+    "@rollup/rollup-darwin-arm64" "4.9.5"
+    "@rollup/rollup-darwin-x64" "4.9.5"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.9.5"
+    "@rollup/rollup-linux-arm64-gnu" "4.9.5"
+    "@rollup/rollup-linux-arm64-musl" "4.9.5"
+    "@rollup/rollup-linux-riscv64-gnu" "4.9.5"
+    "@rollup/rollup-linux-x64-gnu" "4.9.5"
+    "@rollup/rollup-linux-x64-musl" "4.9.5"
+    "@rollup/rollup-win32-arm64-msvc" "4.9.5"
+    "@rollup/rollup-win32-ia32-msvc" "4.9.5"
+    "@rollup/rollup-win32-x64-msvc" "4.9.5"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -3236,12 +3229,12 @@ safe-array-concat@^1.0.1:
     isarray "^2.0.5"
 
 safe-regex-test@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
-  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.2.tgz#3ba32bdb3ea35f940ee87e5087c60ee786c3f6c5"
+  integrity sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
+    call-bind "^1.0.5"
+    get-intrinsic "^1.2.2"
     is-regex "^1.1.4"
 
 scheduler@^0.23.0:
@@ -3264,14 +3257,15 @@ semver@^7.5.4:
     lru-cache "^6.0.0"
 
 set-function-length@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
-  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.0.tgz#2f81dc6c16c7059bda5ab7c82c11f03a515ed8e1"
+  integrity sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==
   dependencies:
     define-data-property "^1.1.1"
-    get-intrinsic "^1.2.1"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.2"
     gopd "^1.0.1"
-    has-property-descriptors "^1.0.0"
+    has-property-descriptors "^1.0.1"
 
 set-function-name@^2.0.0, set-function-name@^2.0.1:
   version "2.0.1"
@@ -3682,9 +3676,9 @@ vite-plugin-svgr@^4.2.0:
     "@svgr/plugin-jsx" "^8.1.0"
 
 vite@^5.0.8:
-  version "5.0.10"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.10.tgz#1e13ef5c3cf5aa4eed81f5df6d107b3c3f1f6356"
-  integrity sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.11.tgz#31562e41e004cb68e1d51f5d2c641ab313b289e4"
+  integrity sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==
   dependencies:
     esbuild "^0.19.3"
     postcss "^8.4.32"

From a7d26db2e059e1eea73eba984d375651b1fc44e2 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 18:55:08 +0900
Subject: [PATCH 14/19] =?UTF-8?q?feat:=20put=20react-query=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ShowColorChart/index.tsx       | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 329fc1ba..dfe80ffe 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { IcCameraSmall } from '../../../assets';
-import handleImageUpload from '../../api/handleImageUpload';
 import { BG_COLOR_CHART } from '../../constants/colorChart';
 import useGetPresignedUrl from '../../hooks/useGetPresignedUrl';
+import usePutPresignedUrl from '../../hooks/usePutPresignedUrl';
 import { ShowColorChartProps } from '../../type/lecueNoteType';
 import * as S from './ShowColorChart.style';
 
@@ -18,8 +18,40 @@ function ShowColorChart({
 }: ShowColorChartProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
   const [presignedUrl, setPresignedUrl] = useState('');
+  // 함수 컴포넌트 내에서 커스텀 훅 호출 시, 에러발생
+  const putMutation = usePutPresignedUrl();
   const { data } = useGetPresignedUrl();
 
+  const handleImageUpload = () => {
+    const fileInput = imgRef.current;
+
+    if (fileInput && fileInput.files && fileInput.files.length > 0) {
+      const file = fileInput.files[0];
+
+      // reader1: 파일을 base64로 읽어서 업로드
+      const reader1 = new FileReader();
+      reader1.readAsDataURL(file);
+      reader1.onloadend = () => {
+        if (reader1.result !== null) {
+          uploadImage(reader1.result as string);
+        }
+      };
+
+      // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
+      const reader2 = new FileReader();
+      reader2.readAsArrayBuffer(file);
+      reader2.onloadend = () => {
+        if (reader2.result !== null && presignedUrl) {
+          putMutation.mutate({
+            presignedUrl: presignedUrl,
+            binaryFile: reader2.result,
+            fileType: file.type,
+          });
+        }
+      };
+    }
+  };
+
   useEffect(() => {
     if (data !== undefined) {
       setPresignedUrl(data.data.url);
@@ -34,9 +66,7 @@ function ShowColorChart({
           <S.Input
             type="file"
             accept="image/*"
-            onChange={() =>
-              handleImageUpload(imgRef, uploadImage, presignedUrl)
-            }
+            onChange={handleImageUpload}
             ref={imgRef}
           />
 

From 837fa0844828183d7c73b2a437945d78d88e5e0a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 18:55:27 +0900
Subject: [PATCH 15/19] =?UTF-8?q?remove:=20=EB=8D=94=EC=9D=B4=EC=83=81=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/api/handleImageUpload.ts | 37 --------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 src/LecueNote/api/handleImageUpload.ts

diff --git a/src/LecueNote/api/handleImageUpload.ts b/src/LecueNote/api/handleImageUpload.ts
deleted file mode 100644
index 0cb76c75..00000000
--- a/src/LecueNote/api/handleImageUpload.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import putPresignedUrl from './putPresignedUrl';
-
-const handleImageUpload = (
-  imgRef: React.MutableRefObject<HTMLInputElement | null>,
-  uploadImage: (file: string) => void,
-  presignedUrl: string,
-) => {
-  const fileInput = imgRef.current;
-
-  if (fileInput && fileInput.files && fileInput.files.length > 0) {
-    const file = fileInput.files[0];
-
-    // reader1: 파일을 base64로 읽어서 업로드
-    const reader1 = new FileReader();
-    reader1.readAsDataURL(file);
-    reader1.onloadend = () => {
-      if (reader1.result !== null) {
-        uploadImage(reader1.result as string);
-      }
-    };
-
-    // reader2: 파일을 ArrayBuffer로 읽어서 PUT 요청 수행
-    const reader2 = new FileReader();
-    reader2.readAsArrayBuffer(file);
-    reader2.onloadend = () => {
-      if (reader2.result !== null && presignedUrl) {
-        putPresignedUrl({
-          presignedUrl: presignedUrl,
-          binaryFile: reader2.result,
-          fileType: file.type,
-        });
-      }
-    };
-  }
-};
-
-export default handleImageUpload;

From 34b0cec3a15f9c3cfb4dce023054f43a415e0648 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 19:56:51 +0900
Subject: [PATCH 16/19] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=ED=9B=85/=20=EB=A6=AC=EC=95=A1=ED=8A=B8=EC=BF=BC=EB=A6=AC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/hooks/usePostLecueNote.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/LecueNote/hooks/usePostLecueNote.ts

diff --git a/src/LecueNote/hooks/usePostLecueNote.ts b/src/LecueNote/hooks/usePostLecueNote.ts
new file mode 100644
index 00000000..0ac36e70
--- /dev/null
+++ b/src/LecueNote/hooks/usePostLecueNote.ts
@@ -0,0 +1,22 @@
+import { AxiosError } from 'axios';
+import { useMutation } from 'react-query';
+
+import postLecueNote from '../api/postLecueNote';
+import { postLecueNoteProps } from '../type/lecueNoteType';
+
+const usePostLecueNote = () => {
+  const mutation = useMutation({
+    mutationFn: ({
+      contents,
+      color,
+      fileName,
+      bgColor,
+    }: postLecueNoteProps) => {
+      return postLecueNote({ contents, color, fileName, bgColor });
+    },
+    onError: (err: AxiosError) => console.log(err),
+  });
+  return mutation;
+};
+
+export default usePostLecueNote;

From f532785292713b33e87f21f4130f5227cf00d259 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 19:58:21 +0900
Subject: [PATCH 17/19] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=ED=98=95?=
 =?UTF-8?q?=EC=8B=9D=20=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/api/postLecueNote.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/api/postLecueNote.ts b/src/LecueNote/api/postLecueNote.ts
index c0e21bbf..d23b5a36 100644
--- a/src/LecueNote/api/postLecueNote.ts
+++ b/src/LecueNote/api/postLecueNote.ts
@@ -11,7 +11,7 @@ const postLecueNote = ({
 }: postLecueNoteProps) => {
   //   const navigate = useNavigate();
 
-  api
+  const response = api
     .post(
       '/api/notes',
       {
@@ -31,6 +31,8 @@ const postLecueNote = ({
       // 나중에 주석코드를 활성화시킬 예정!
       // navigate(`lecue-book/${res.data.data.bookUuid}`);
     });
+
+  return response;
 };
 
 export default postLecueNote;

From 4b45b61ff930e53f57534ba30b99a8a0d207d147 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 19:59:30 +0900
Subject: [PATCH 18/19] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=ED=9B=85=20=ED=99=9C=EC=9A=A9=20=EC=BD=94=EB=93=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/Footer/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index 26b48fa6..e255dbd7 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -1,11 +1,13 @@
 import Button from '../../../components/common/Button';
-import postLecueNote from '../../api/postLecueNote';
+import usePostLecueNote from '../../hooks/usePostLecueNote';
 import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
 function Footer({ contents, fileName, textColor, bgColor }: FooterProps) {
+  const postMutation = usePostLecueNote();
+
   const handleClickBtn = () => {
-    postLecueNote({
+    postMutation.mutate({
       contents: contents,
       color: textColor,
       fileName: fileName,

From 549dca3fc7c5e6ed461529814e6e6525b00e4381 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 19:59:51 +0900
Subject: [PATCH 19/19] =?UTF-8?q?chore:=20=EB=B3=80=EC=88=98=EC=84=A0?=
 =?UTF-8?q?=EC=96=B8=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/ShowColorChart/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index dfe80ffe..4a68a0e1 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -18,9 +18,9 @@ function ShowColorChart({
 }: ShowColorChartProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
   const [presignedUrl, setPresignedUrl] = useState('');
+  const { data } = useGetPresignedUrl();
   // 함수 컴포넌트 내에서 커스텀 훅 호출 시, 에러발생
   const putMutation = usePutPresignedUrl();
-  const { data } = useGetPresignedUrl();
 
   const handleImageUpload = () => {
     const fileInput = imgRef.current;