From 48916aa7c2b31ac110bb58015f7dfc2b640c465c Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 02:06:15 +0900
Subject: [PATCH 01/42] =?UTF-8?q?style:=20ux=20=EB=9D=BC=EC=9D=B4=ED=8C=85?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20stylelint=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/CreateNote.style.ts      | 3 +--
 src/LecueNote/components/CreateNote/index.tsx                | 3 ++-
 src/LecueNote/components/SelectColor/SelectColor.style.ts    | 4 +---
 .../components/ShowColorChart/ShowColorChart.style.ts        | 3 +--
 src/LecueNote/components/WriteNote/WriteNote.style.ts        | 5 ++---
 src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts      | 1 -
 src/LecueNote/page/LeceuNotePage/index.tsx                   | 2 +-
 7 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
index 9fcb1774..28ce432b 100644
--- a/src/LecueNote/components/CreateNote/CreateNote.style.ts
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -2,10 +2,9 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.section`
   display: flex;
+  gap: 3.2rem;
   flex-direction: column;
 
   width: 100%;
   margin: 7.8rem 0 3.3rem;
-
-  gap: 3.2rem;
 `;
diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index 783b7711..62c12302 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import {
   BG_COLOR_CHART,
   CATEGORY,
@@ -31,7 +32,7 @@ function CreateNote() {
 
   return (
     <S.Wrapper>
-      <WriteNote clickedBgColor={clickedBgColor}/>
+      <WriteNote clickedBgColor={clickedBgColor} />
       <SelectColor
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
diff --git a/src/LecueNote/components/SelectColor/SelectColor.style.ts b/src/LecueNote/components/SelectColor/SelectColor.style.ts
index e07545f1..4c0c4e56 100644
--- a/src/LecueNote/components/SelectColor/SelectColor.style.ts
+++ b/src/LecueNote/components/SelectColor/SelectColor.style.ts
@@ -3,14 +3,12 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.article`
   display: flex;
-  flex-direction: column;
-
   gap: 1.8rem;
+  flex-direction: column;
 `;
 
 export const CategoryWrapper = styled.div`
   display: flex;
-
   gap: 1.4rem;
 `;
 
diff --git a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
index b432ee29..826f4def 100644
--- a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
+++ b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
@@ -3,14 +3,13 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   display: flex;
+  gap: 1.4rem;
   justify-content: flex-start;
   align-items: center;
 
   padding: 0.5rem 0.1rem 0.7rem 0.3rem;
 
   overflow-x: scroll;
-
-  gap: 1.4rem;
 `;
 
 export const ColorWrapper = styled.div`
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 63835995..cb9b4cd4 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -2,14 +2,13 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   display: flex;
+  gap: 0.6rem;
   flex-direction: column;
-
-  gap: 0.4rem;
 `;
 
 export const LecueNote = styled.article<{ $bgColor: string }>`
   width: 100%;
-  height: calc(100dvh - 33rem);
+  height: calc(100dvh - 33.2rem);
 
   border-radius: 0.6rem;
   background-color: ${({ $bgColor }) => $bgColor};
diff --git a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
index ca2763b5..d65164c2 100644
--- a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
+++ b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
@@ -9,6 +9,5 @@ export const Wrapper = styled.div`
 
   width: 100vw;
   height: 100dvh;
-
   padding: 0 1.7rem;
 `;
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index ed6e4301..43083367 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -6,7 +6,7 @@ import * as S from './LecueNotePage.style';
 function LecueNotePage() {
   return (
     <S.Wrapper>
-      <Header headerTitle='레큐 노트'/>
+      <Header headerTitle='레큐노트 작성'/>
       <CreateNote />
       <Footer />
     </S.Wrapper>

From 9d97995d8562bafc237e00d00e1088a9be74fdda Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 17:41:05 +0900
Subject: [PATCH 02/42] =?UTF-8?q?chore:=20props=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/index.tsx | 5 ++++-
 src/LecueNote/type/lecueNoteType.ts           | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index 62c12302..8e4bce4f 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -32,7 +32,10 @@ function CreateNote() {
 
   return (
     <S.Wrapper>
-      <WriteNote clickedBgColor={clickedBgColor} />
+      <WriteNote
+        clickedBgColor={clickedBgColor}
+        clickedTextColor={clickedTextColor}
+      />
       <SelectColor
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 41dd02a3..dd91fb41 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -16,4 +16,5 @@ export interface ShowColorChartProps {
 
 export interface WriteNoteProps {
   clickedBgColor: string;
+  clickedTextColor: string;
 }

From 97a2d133e9f78e8358cec047ea1ff78aa4b2b8ab Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 17:41:54 +0900
Subject: [PATCH 03/42] =?UTF-8?q?style:=20=EB=A0=88=ED=81=90=EB=85=B8?=
 =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=EC=A0=84=EB=B0=98=EC=A0=81?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/WriteNote/WriteNote.style.ts   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index cb9b4cd4..9e901c40 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -7,6 +7,9 @@ export const Wrapper = styled.div`
 `;
 
 export const LecueNote = styled.article<{ $bgColor: string }>`
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
   height: calc(100dvh - 33.2rem);
 
@@ -14,6 +17,42 @@ export const LecueNote = styled.article<{ $bgColor: string }>`
   background-color: ${({ $bgColor }) => $bgColor};
 `;
 
+export const Nickname = styled.p`
+  margin: 2rem 0 1rem 2rem;
+
+  ${({ theme }) => theme.fonts.Head1_B_20}
+`;
+
+export const Contents = styled.textarea<{ $textColor: string }>`
+  width: calc(100% - 4rem);
+  height: 100%;
+  margin: 0 2rem 2rem;
+
+  border: none;
+  ${({ theme }) => theme.fonts.Body1_R_16};
+  background-color: transparent;
+  color: ${({ $textColor }) => $textColor};
+`;
+
+export const BottomContentsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  width: calc(100% - 4rem);
+  height: 1.7rem;
+  margin: 0 2rem 2rem;
+`;
+
+export const Date = styled.p`
+  ${({ theme }) => theme.fonts.E_Body2_R_14};
+  color: ${({ theme }) => theme.colors.DG50};
+`;
+
+export const Counter = styled.p`
+  ${({ theme }) => theme.fonts.E_Body2_R_14};
+  color: ${({ theme }) => theme.colors.DG};
+`;
+
 export const Notice = styled.p`
   color: ${({ theme }) => theme.colors.key};
 

From 9acf7fb92b85529a18ec9a8a5fda3c3f20a6dbad Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 17:42:36 +0900
Subject: [PATCH 04/42] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=85=B8?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=84=EB=B0=98=EC=A0=81=EC=9D=B8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B0=8F=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=BB=AC=EB=9F=AC=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81{?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/WriteNote/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index 89196c1e..36adc513 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,10 +1,19 @@
 import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
-function WriteNote({ clickedBgColor }: WriteNoteProps) {
+function WriteNote({ clickedBgColor, clickedTextColor }: WriteNoteProps) {
+  const nickname = '와라라라랄라';
+
   return (
     <S.Wrapper>
-      <S.LecueNote $bgColor={clickedBgColor}></S.LecueNote>
+      <S.LecueNote $bgColor={clickedBgColor}>
+        <S.Nickname>{nickname}</S.Nickname>
+        <S.Contents $textColor={clickedTextColor} />
+        <S.BottomContentsWrapper>
+          <S.Date>2020.10.23</S.Date>
+          <S.Counter>(1/1000)</S.Counter>
+        </S.BottomContentsWrapper>
+      </S.LecueNote>
       <S.Notice>*욕설/비속어는 자동 필터링됩니다.</S.Notice>
     </S.Wrapper>
   );

From 6dc975d9d82442d1dd7664974aafb5321bdff1e8 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 17:48:36 +0900
Subject: [PATCH 05/42] =?UTF-8?q?feat:=20=EC=9E=91=EC=84=B1=20=EB=82=A0?=
 =?UTF-8?q?=EC=A7=9C=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/WriteNote/index.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index 36adc513..c2b4b3ac 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,8 +1,16 @@
+import { useEffect, useState } from 'react';
+
 import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
 function WriteNote({ clickedBgColor, clickedTextColor }: WriteNoteProps) {
   const nickname = '와라라라랄라';
+  const today = new Date();
+  const [dateArr, setDateArr] = useState([0, 0, 0]);
+
+  useEffect(() => {
+    setDateArr([today.getFullYear(), today.getMonth() + 1, today.getDate()]);
+  }, [today.getDate()]);
 
   return (
     <S.Wrapper>
@@ -10,7 +18,9 @@ function WriteNote({ clickedBgColor, clickedTextColor }: WriteNoteProps) {
         <S.Nickname>{nickname}</S.Nickname>
         <S.Contents $textColor={clickedTextColor} />
         <S.BottomContentsWrapper>
-          <S.Date>2020.10.23</S.Date>
+          <S.Date>
+            {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
+          </S.Date>
           <S.Counter>(1/1000)</S.Counter>
         </S.BottomContentsWrapper>
       </S.LecueNote>

From 72e9d5cac647d5ee85497da19ad68764b7c0f918 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 18:26:37 +0900
Subject: [PATCH 06/42] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=A1=B0=EA=B1=B4=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 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index 38a8f217..b0dbafb5 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -1,10 +1,11 @@
 import Button from '../../../components/common/Button';
+import { FooterProps } from '../../type/lecueNoteType';
 import * as S from './Footer.style';
 
-function Footer() {
+function Footer({ contents }: FooterProps) {
   return (
     <S.Wrapper>
-      <Button variant="complete" disabled={true}>
+      <Button variant="complete" disabled={contents.length === 0}>
         작성 완료
       </Button>
     </S.Wrapper>

From 6c9b327794ff7e67596bf16fa00b2cf4c292f838 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 18:26:57 +0900
Subject: [PATCH 07/42] =?UTF-8?q?chore:=20props=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/page/LeceuNotePage/index.tsx | 18 +++++++++++++++---
 src/LecueNote/type/lecueNoteType.ts        | 11 ++++++++++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 43083367..d976af47 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -1,14 +1,26 @@
+import { useState } from 'react';
+
 import Header from '../../../components/common/Header';
 import CreateNote from '../../components/CreateNote';
 import Footer from '../../components/Footer';
 import * as S from './LecueNotePage.style';
 
 function LecueNotePage() {
+  const MAX_LENGTH = 1000;
+  const [contents, setContents] = useState('');
+
+  const handleChangeContents = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContents(e.target.value);
+    if (e.target.value.length > MAX_LENGTH) {
+      setContents((e.target.value = e.target.value.substring(0, 1000)));
+    }
+  };
+
   return (
     <S.Wrapper>
-      <Header headerTitle='레큐노트 작성'/>
-      <CreateNote />
-      <Footer />
+      <Header headerTitle="레큐노트 작성" />
+      <CreateNote contents={contents} handleChangeFn={handleChangeContents} />
+      <Footer contents={contents} />
     </S.Wrapper>
   );
 }
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index dd91fb41..18cb989b 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -1,3 +1,8 @@
+export interface CreateNoteProps {
+  contents: string;
+  handleChangeFn: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
 export interface SelectColorProps {
   clickedCategory: string;
   clickedTextColor: string;
@@ -14,7 +19,11 @@ export interface ShowColorChartProps {
   handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-export interface WriteNoteProps {
+export interface WriteNoteProps extends CreateNoteProps {
   clickedBgColor: string;
   clickedTextColor: string;
 }
+
+export interface FooterProps {
+  contents: string;
+}

From 2016920445dc167f8020805a5c5aa68013ab0265 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 18:27:17 +0900
Subject: [PATCH 08/42] =?UTF-8?q?feat:=20=EA=B8=80=EC=9E=90=EC=88=98=20?=
 =?UTF-8?q?=EC=A0=9C=ED=95=9C=20=EA=B8=B0=EB=8A=A5=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/WriteNote/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index c2b4b3ac..dd4b68ca 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -3,8 +3,14 @@ import { useEffect, useState } from 'react';
 import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
-function WriteNote({ clickedBgColor, clickedTextColor }: WriteNoteProps) {
+function WriteNote({
+  clickedBgColor,
+  clickedTextColor,
+  contents,
+  handleChangeFn,
+}: WriteNoteProps) {
   const nickname = '와라라라랄라';
+
   const today = new Date();
   const [dateArr, setDateArr] = useState([0, 0, 0]);
 
@@ -16,12 +22,12 @@ function WriteNote({ clickedBgColor, clickedTextColor }: WriteNoteProps) {
     <S.Wrapper>
       <S.LecueNote $bgColor={clickedBgColor}>
         <S.Nickname>{nickname}</S.Nickname>
-        <S.Contents $textColor={clickedTextColor} />
+        <S.Contents $textColor={clickedTextColor} onChange={handleChangeFn} />
         <S.BottomContentsWrapper>
           <S.Date>
             {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
           </S.Date>
-          <S.Counter>(1/1000)</S.Counter>
+          <S.Counter>({contents.length}/1000)</S.Counter>
         </S.BottomContentsWrapper>
       </S.LecueNote>
       <S.Notice>*욕설/비속어는 자동 필터링됩니다.</S.Notice>

From b7be986833b0e6e25e12426291e4efa51388f1a5 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 18:27:30 +0900
Subject: [PATCH 09/42] =?UTF-8?q?chore:=20props=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index 8e4bce4f..ed31acf1 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -5,11 +5,12 @@ import {
   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() {
+function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
   const [clickedCategory, setclickedCategory] = useState(CATEGORY[0]);
   const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
   const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
@@ -35,6 +36,8 @@ function CreateNote() {
       <WriteNote
         clickedBgColor={clickedBgColor}
         clickedTextColor={clickedTextColor}
+        contents={contents}
+        handleChangeFn={handleChangeFn}
       />
       <SelectColor
         clickedCategory={clickedCategory}

From 1689881ca60020b5bce053749620083973517beb Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 23:27:07 +0900
Subject: [PATCH 10/42] =?UTF-8?q?style:=20asset=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/ic_camera_small.svg | 6 ++++++
 src/assets/index.ts                 | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/icon/ic_camera_small.svg

diff --git a/src/assets/icon/ic_camera_small.svg b/src/assets/icon/ic_camera_small.svg
new file mode 100644
index 00000000..69aa278c
--- /dev/null
+++ b/src/assets/icon/ic_camera_small.svg
@@ -0,0 +1,6 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="19" cy="19" r="19" fill="#DDDDDD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7412 12C16.4113 12 16.1206 12.217 16.0269 12.5334L15.5925 14H12.4899C11.667 14 11 14.667 11 15.4899V24.5101C11 25.333 11.667 26 12.4899 26H25.5101C26.333 26 27 25.333 27 24.5101V15.4899C27 14.667 26.333 14 25.5101 14H24.4075L23.9731 12.5334C23.8794 12.217 23.5887 12 23.2588 12H16.7412Z" fill="#494949"/>
+<circle cx="19" cy="20" r="3.50889" fill="#9E9E9E" stroke="#DDDDDD" stroke-width="0.982211"/>
+<circle cx="23.5" cy="16.5" r="0.5" fill="#D9D9D9"/>
+</svg>
diff --git a/src/assets/index.ts b/src/assets/index.ts
index f5968f3a..a1111962 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -10,6 +10,7 @@ import BtnKakaologin from './button/btn_kakaologin.svg?react';
 import IcArrowLeftBlack from './icon/ic_arrow_left_black.svg?react';
 import IcArrowLeftWhite from './icon/ic_arrow_left_white.svg?react';
 import IcCamera from './icon/ic_camera.svg?react';
+import IcCameraSmall from './icon/ic_camera_small.svg?react';
 import IcCrown from './icon/ic_crown.svg?react';
 import IcDate from './icon/ic_date.svg?react';
 import IcHome from './icon/ic_home.svg?react';
@@ -43,6 +44,7 @@ export {
   IcArrowLeftBlack,
   IcArrowLeftWhite,
   IcCamera,
+  IcCameraSmall,
   IcCrown,
   IcDate,
   IcHome,
@@ -60,8 +62,8 @@ export {
   ImgKakaoStarWhite,
   ImgLe,
   ImgLogoLecue,
+  ImgSplashLogo,
   ImgStarOrangeLine,
   ImgStarPosit,
   ImgSticker,
-  ImgSplashLogo,
 };

From de49615020a21ed0a098d42f3da38059553818d9 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 13 Jan 2024 23:27:58 +0900
Subject: [PATCH 11/42] =?UTF-8?q?feat:=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?=
 =?UTF-8?q?=EB=8F=99=EC=9E=91=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/CreateNote/index.tsx |  9 ++++
 .../components/SelectColor/index.tsx          |  6 +++
 .../ShowColorChart/ShowColorChart.style.ts    | 47 ++++++++++++++-----
 .../components/ShowColorChart/index.tsx       | 18 ++++++-
 src/LecueNote/components/WriteNote/index.tsx  |  3 +-
 src/LecueNote/type/lecueNoteType.ts           |  5 ++
 6 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index ed31acf1..bcf18867 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -14,6 +14,7 @@ function CreateNote({ contents, handleChangeFn }: 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>,
@@ -28,23 +29,31 @@ function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
       setClickedTextColor(e.currentTarget.id);
     } else {
       setclickedBgColor(e.currentTarget.id);
+      setIsIconClicked(false);
     }
   };
 
+  const handleClickedIcon = () => {
+    setIsIconClicked(true);
+  };
+
   return (
     <S.Wrapper>
       <WriteNote
+        isIconClicked={isIconClicked}
         clickedBgColor={clickedBgColor}
         clickedTextColor={clickedTextColor}
         contents={contents}
         handleChangeFn={handleChangeFn}
       />
       <SelectColor
+        isIconClicked={isIconClicked}
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
         clickedBgColor={clickedBgColor}
         handleCategoryFn={handleClickCategory}
         handleColorFn={handleClickedColorBtn}
+        handleIconFn={handleClickedIcon}
       />
     </S.Wrapper>
   );
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index a88032f9..93e6f873 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -8,11 +8,13 @@ import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
 
 function SelectColor({
+  isIconClicked,
   clickedCategory,
   clickedTextColor,
   clickedBgColor,
   handleCategoryFn,
   handleColorFn,
+  handleIconFn,
 }: SelectColorProps) {
   return (
     <S.Wrapper>
@@ -33,15 +35,19 @@ function SelectColor({
 
       {clickedCategory === '텍스트색' ? (
         <ShowColorChart
+        isIconClicked={isIconClicked}
           colorChart={TEXT_COLOR_CHART}
           state={clickedTextColor}
           handleFn={handleColorFn}
+          handleIconFn={handleIconFn}
         />
       ) : (
         <ShowColorChart
+        isIconClicked={isIconClicked}
           colorChart={BG_COLOR_CHART}
           state={clickedBgColor}
           handleFn={handleColorFn}
+          handleIconFn={handleIconFn}
         />
       )}
     </S.Wrapper>
diff --git a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
index 826f4def..ca926251 100644
--- a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
+++ b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
@@ -12,6 +12,20 @@ export const Wrapper = styled.div`
   overflow-x: scroll;
 `;
 
+export const IconWrapper = styled.button<{ $isIconClicked: boolean }>`
+  ${({ theme, $isIconClicked }) =>
+    $isIconClicked &&
+    css`
+      outline: 0.1rem solid ${theme.colors.WG};
+    `};
+  flex-shrink: 0;
+
+  width: 3.8rem;
+  height: 3.8rem;
+
+  border-radius: 3rem;
+`;
+
 export const ColorWrapper = styled.div`
   display: flex;
   justify-content: center;
@@ -22,7 +36,11 @@ export const ColorWrapper = styled.div`
   height: 3.8rem;
 `;
 
-export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
+export const Color = styled.button<{
+  $isIconClicked: boolean;
+  $colorCode: string;
+  variant: boolean;
+}>`
   border-radius: 3rem;
   ${({ $colorCode, theme }) =>
     $colorCode === '#FFF' &&
@@ -31,19 +49,26 @@ export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
     `};
   background-color: ${({ $colorCode }) => $colorCode};
 
-  ${({ variant, theme }) =>
-    variant
+  ${({ variant, theme, $isIconClicked }) =>
+    $isIconClicked
       ? css`
-          width: 3.8rem;
-          height: 3.8rem;
-
-          border: 0.4rem solid ${theme.colors.white};
-          outline: 0.1rem solid ${theme.colors.WG};
-        `
-      : css`
           width: 3rem;
           height: 3rem;
 
           border: none;
-        `};
+        `
+      : variant
+        ? css`
+            width: 3.8rem;
+            height: 3.8rem;
+
+            border: 0.4rem solid ${theme.colors.white};
+            outline: 0.1rem solid ${theme.colors.WG};
+          `
+        : css`
+            width: 3rem;
+            height: 3rem;
+
+            border: none;
+          `};
 `;
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 3a853cc1..ebfd4cc0 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,15 +1,31 @@
+import { IcCameraSmall } from '../../../assets';
+import { BG_COLOR_CHART } from '../../constants/colorChart';
 import { ShowColorChartProps } from '../../type/lecueNoteType';
 import * as S from './ShowColorChart.style';
 
-function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) {
+function ShowColorChart({
+  isIconClicked,
+  colorChart,
+  state,
+  handleFn,
+  handleIconFn,
+}: ShowColorChartProps) {
   return (
     <S.Wrapper>
+      {colorChart === BG_COLOR_CHART && (
+        <S.IconWrapper onClick={handleIconFn} $isIconClicked={isIconClicked}>
+          <IcCameraSmall />
+        </S.IconWrapper>
+      )}
       {colorChart.map((colorCode) => (
         <S.ColorWrapper key={colorCode}>
           <S.Color
             type="button"
             id={colorCode}
             variant={state === colorCode}
+            $isIconClicked={
+              colorChart === BG_COLOR_CHART ? isIconClicked : false
+            }
             $colorCode={colorCode}
             onClick={handleFn}
           ></S.Color>
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index dd4b68ca..a0620067 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -4,6 +4,7 @@ import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
 function WriteNote({
+  isIconClicked,
   clickedBgColor,
   clickedTextColor,
   contents,
@@ -20,7 +21,7 @@ function WriteNote({
 
   return (
     <S.Wrapper>
-      <S.LecueNote $bgColor={clickedBgColor}>
+      <S.LecueNote $bgColor={isIconClicked ? 'white' : clickedBgColor}>
         <S.Nickname>{nickname}</S.Nickname>
         <S.Contents $textColor={clickedTextColor} onChange={handleChangeFn} />
         <S.BottomContentsWrapper>
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 18cb989b..c7b876d3 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -4,6 +4,7 @@ export interface CreateNoteProps {
 }
 
 export interface SelectColorProps {
+  isIconClicked: boolean;
   clickedCategory: string;
   clickedTextColor: string;
   clickedBgColor: string;
@@ -11,15 +12,19 @@ export interface SelectColorProps {
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => void;
   handleColorFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleIconFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 export interface ShowColorChartProps {
+  isIconClicked: boolean;
   colorChart: string[];
   state: string;
   handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleIconFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 export interface WriteNoteProps extends CreateNoteProps {
+  isIconClicked: boolean;
   clickedBgColor: string;
   clickedTextColor: string;
 }

From f51d3572d966780707ae2e0c85648705ea787798 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sun, 14 Jan 2024 03:06:44 +0900
Subject: [PATCH 12/42] =?UTF-8?q?feat:=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EB=9C=A8=EB=8F=84=EB=A1=9D=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

---
 .../components/WriteNote/WriteNote.style.ts   | 21 +++++++++++++++++--
 src/LecueNote/components/WriteNote/index.tsx  |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 9e901c40..883feaf3 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
@@ -6,7 +7,10 @@ export const Wrapper = styled.div`
   flex-direction: column;
 `;
 
-export const LecueNote = styled.article<{ $bgColor: string }>`
+export const LecueNote = styled.article<{
+  $bgColor: string;
+  $isIconClicked: boolean;
+}>`
   display: flex;
   flex-direction: column;
 
@@ -14,7 +18,20 @@ export const LecueNote = styled.article<{ $bgColor: string }>`
   height: calc(100dvh - 33.2rem);
 
   border-radius: 0.6rem;
-  background-color: ${({ $bgColor }) => $bgColor};
+
+  ${({ $isIconClicked, $bgColor }) =>
+    $isIconClicked
+      ? css`
+          width: 100%;
+          height: calc(100dvh - 33.2rem);
+
+          background-size: contain;
+
+          background-image: url('https://velog.velcdn.com/images/aroo_ming/post/a9437eb2-9104-4c8b-912f-1a8b6eaf6f9d/image.jpeg');
+        `
+      : css`
+          background-color: ${$bgColor};
+        `};
 `;
 
 export const Nickname = styled.p`
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index a0620067..afae617a 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -21,7 +21,7 @@ function WriteNote({
 
   return (
     <S.Wrapper>
-      <S.LecueNote $bgColor={isIconClicked ? 'white' : clickedBgColor}>
+      <S.LecueNote $bgColor={clickedBgColor} $isIconClicked={isIconClicked}>
         <S.Nickname>{nickname}</S.Nickname>
         <S.Contents $textColor={clickedTextColor} onChange={handleChangeFn} />
         <S.BottomContentsWrapper>

From 500e1c6884b3e18f7967d9a7770ba34ba1457606 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sun, 14 Jan 2024 22:58:54 +0900
Subject: [PATCH 13/42] =?UTF-8?q?chore:=20=EC=83=81=EC=88=98=ED=99=94=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index d976af47..5fa1df97 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -12,7 +12,7 @@ function LecueNotePage() {
   const handleChangeContents = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setContents(e.target.value);
     if (e.target.value.length > MAX_LENGTH) {
-      setContents((e.target.value = e.target.value.substring(0, 1000)));
+      setContents((e.target.value = e.target.value.substring(0, MAX_LENGTH)));
     }
   };
 

From c1d2d2ee2e5b6ff39ae5084d225b05720954294b Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 00:52:47 +0900
Subject: [PATCH 14/42] =?UTF-8?q?style:=20=EB=8B=89=EB=84=A4=EC=9E=84=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=EC=83=89=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/WriteNote/WriteNote.style.ts | 3 ++-
 src/LecueNote/components/WriteNote/index.tsx          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 883feaf3..909723ac 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -34,9 +34,10 @@ export const LecueNote = styled.article<{
         `};
 `;
 
-export const Nickname = styled.p`
+export const Nickname = styled.p<{ $textColor: string }>`
   margin: 2rem 0 1rem 2rem;
 
+  color: ${({ $textColor }) => $textColor};
   ${({ theme }) => theme.fonts.Head1_B_20}
 `;
 
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index afae617a..5a025395 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -22,7 +22,7 @@ function WriteNote({
   return (
     <S.Wrapper>
       <S.LecueNote $bgColor={clickedBgColor} $isIconClicked={isIconClicked}>
-        <S.Nickname>{nickname}</S.Nickname>
+        <S.Nickname $textColor={clickedTextColor}>{nickname}</S.Nickname>
         <S.Contents $textColor={clickedTextColor} onChange={handleChangeFn} />
         <S.BottomContentsWrapper>
           <S.Date>

From 64bf209b132e0aab5659a0c03c60a1dcab3cfc52 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 01:53:31 +0900
Subject: [PATCH 15/42] =?UTF-8?q?chore:=20=ED=83=80=EC=9E=85=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/type/lecueNoteType.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index c7b876d3..778c90c0 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -12,18 +12,21 @@ export interface SelectColorProps {
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => void;
   handleColorFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  handleIconFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleIconFn: () => void;
+  uploadImage: (file: string) => void;
 }
 
 export interface ShowColorChartProps {
   isIconClicked: boolean;
   colorChart: string[];
   state: string;
+  uploadImage: (file: string) => void;
   handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  handleIconFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleIconFn: () => void;
 }
 
 export interface WriteNoteProps extends CreateNoteProps {
+  imgFile: string;
   isIconClicked: boolean;
   clickedBgColor: string;
   clickedTextColor: string;

From 977bbe46e4d39c26cff39adc11e55bd7bf90995a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:10:07 +0900
Subject: [PATCH 16/42] =?UTF-8?q?chore:=201000=EC=9E=90=20=EC=A0=9C?=
 =?UTF-8?q?=ED=95=9C=20alert=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/page/LeceuNotePage/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 5fa1df97..4b661054 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -13,6 +13,7 @@ function LecueNotePage() {
     setContents(e.target.value);
     if (e.target.value.length > MAX_LENGTH) {
       setContents((e.target.value = e.target.value.substring(0, MAX_LENGTH)));
+      alert('1000자 내로 작성해주세요.');
     }
   };
 

From 0db9fc34eab1a6e4dc0c89fd2cb5a59cc22f794b Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:11:35 +0900
Subject: [PATCH 17/42] =?UTF-8?q?chore:=20props=20=EB=84=98=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/index.tsx  | 3 +++
 src/LecueNote/components/SelectColor/index.tsx | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index bcf18867..0d1f2719 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -15,6 +15,7 @@ function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
   const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
   const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
   const [isIconClicked, setIsIconClicked] = useState(false);
+  const [imgFile, setImgFile] = useState('');
 
   const handleClickCategory = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -40,6 +41,7 @@ function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
   return (
     <S.Wrapper>
       <WriteNote
+        imgFile={imgFile}
         isIconClicked={isIconClicked}
         clickedBgColor={clickedBgColor}
         clickedTextColor={clickedTextColor}
@@ -54,6 +56,7 @@ function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
         handleCategoryFn={handleClickCategory}
         handleColorFn={handleClickedColorBtn}
         handleIconFn={handleClickedIcon}
+        uploadImage={(file) => setImgFile(file)}
       />
     </S.Wrapper>
   );
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index 93e6f873..78216575 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -15,6 +15,7 @@ function SelectColor({
   handleCategoryFn,
   handleColorFn,
   handleIconFn,
+  uploadImage,
 }: SelectColorProps) {
   return (
     <S.Wrapper>
@@ -35,17 +36,19 @@ function SelectColor({
 
       {clickedCategory === '텍스트색' ? (
         <ShowColorChart
-        isIconClicked={isIconClicked}
+          isIconClicked={isIconClicked}
           colorChart={TEXT_COLOR_CHART}
           state={clickedTextColor}
+          uploadImage={uploadImage}
           handleFn={handleColorFn}
           handleIconFn={handleIconFn}
         />
       ) : (
         <ShowColorChart
-        isIconClicked={isIconClicked}
+          isIconClicked={isIconClicked}
           colorChart={BG_COLOR_CHART}
           state={clickedBgColor}
+          uploadImage={uploadImage}
           handleFn={handleColorFn}
           handleIconFn={handleIconFn}
         />

From f5d4cd9d0501ac48cea57f39ee86896222293709 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:12:39 +0900
Subject: [PATCH 18/42] =?UTF-8?q?feat:=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ShowColorChart/ShowColorChart.style.ts    |  4 ++
 .../components/ShowColorChart/index.tsx       | 43 +++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
index ca926251..4a376f32 100644
--- a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
+++ b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
@@ -12,6 +12,10 @@ export const Wrapper = styled.div`
   overflow-x: scroll;
 `;
 
+export const Input = styled.input`
+  display: none;
+`;
+
 export const IconWrapper = styled.button<{ $isIconClicked: boolean }>`
   ${({ theme, $isIconClicked }) =>
     $isIconClicked &&
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index ebfd4cc0..bbd2fdf0 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import { IcCameraSmall } from '../../../assets';
 import { BG_COLOR_CHART } from '../../constants/colorChart';
 import { ShowColorChartProps } from '../../type/lecueNoteType';
@@ -7,15 +9,50 @@ function ShowColorChart({
   isIconClicked,
   colorChart,
   state,
+  uploadImage,
   handleFn,
   handleIconFn,
 }: ShowColorChartProps) {
+  const imgRef = useRef<HTMLInputElement | null>(null);
+
+  const handleImageUpload = () => {
+    const fileInput = imgRef.current;
+
+    if (fileInput && fileInput.files && fileInput.files.length > 0) {
+      const file = fileInput.files[0];
+
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+
+      reader.onloadend = () => {
+        if (reader.result !== null) {
+          uploadImage(reader.result as string);
+        }
+      };
+    }
+  };
+
   return (
     <S.Wrapper>
       {colorChart === BG_COLOR_CHART && (
-        <S.IconWrapper onClick={handleIconFn} $isIconClicked={isIconClicked}>
-          <IcCameraSmall />
-        </S.IconWrapper>
+        <>
+          <S.Input
+            type="file"
+            accept="image/*"
+            onChange={handleImageUpload}
+            ref={imgRef}
+          />
+
+          <S.IconWrapper
+            onClick={() => {
+              handleIconFn();
+              imgRef.current?.click();
+            }}
+            $isIconClicked={isIconClicked}
+          >
+            <IcCameraSmall />
+          </S.IconWrapper>
+        </>
       )}
       {colorChart.map((colorCode) => (
         <S.ColorWrapper key={colorCode}>

From 2895b39549fcd3fd9af016e33deb45ec1dc53af9 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:13:06 +0900
Subject: [PATCH 19/42] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=ED=95=9C=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=A0=88=ED=81=90=EB=85=B8=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=97=90=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/WriteNote/WriteNote.style.ts | 5 +++--
 src/LecueNote/components/WriteNote/index.tsx          | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 909723ac..fcc1caca 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -10,6 +10,7 @@ export const Wrapper = styled.div`
 export const LecueNote = styled.article<{
   $bgColor: string;
   $isIconClicked: boolean;
+  $imgFile: string;
 }>`
   display: flex;
   flex-direction: column;
@@ -19,7 +20,7 @@ export const LecueNote = styled.article<{
 
   border-radius: 0.6rem;
 
-  ${({ $isIconClicked, $bgColor }) =>
+  ${({ $isIconClicked, $bgColor, $imgFile }) =>
     $isIconClicked
       ? css`
           width: 100%;
@@ -27,7 +28,7 @@ export const LecueNote = styled.article<{
 
           background-size: contain;
 
-          background-image: url('https://velog.velcdn.com/images/aroo_ming/post/a9437eb2-9104-4c8b-912f-1a8b6eaf6f9d/image.jpeg');
+          background-image: url(${$imgFile});
         `
       : css`
           background-color: ${$bgColor};
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index 5a025395..2904f0bc 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -4,6 +4,7 @@ import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
 function WriteNote({
+  imgFile,
   isIconClicked,
   clickedBgColor,
   clickedTextColor,
@@ -21,7 +22,11 @@ function WriteNote({
 
   return (
     <S.Wrapper>
-      <S.LecueNote $bgColor={clickedBgColor} $isIconClicked={isIconClicked}>
+      <S.LecueNote
+        $bgColor={clickedBgColor}
+        $isIconClicked={isIconClicked}
+        $imgFile={imgFile}
+      >
         <S.Nickname $textColor={clickedTextColor}>{nickname}</S.Nickname>
         <S.Contents $textColor={clickedTextColor} onChange={handleChangeFn} />
         <S.BottomContentsWrapper>

From a34c86d3c48e0b4b845545b2e0380e5deb8c6adc Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:23:54 +0900
Subject: [PATCH 20/42] =?UTF-8?q?style:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/WriteNote/WriteNote.style.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index fcc1caca..250d0a77 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -43,9 +43,9 @@ export const Nickname = styled.p<{ $textColor: string }>`
 `;
 
 export const Contents = styled.textarea<{ $textColor: string }>`
-  width: calc(100% - 4rem);
+  width: calc(100% - 3rem);
   height: 100%;
-  margin: 0 2rem 2rem;
+  margin: 0 1.5rem 2rem;
 
   border: none;
   ${({ theme }) => theme.fonts.Body1_R_16};

From 7d72335de3c89c672412f44631b9f69fdc75328c Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:42:31 +0900
Subject: [PATCH 21/42] =?UTF-8?q?feat:=20=EB=B3=80=EC=88=98=20=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 | 6 +++---
 src/LecueNote/page/LeceuNotePage/index.tsx    | 8 +++++++-
 src/LecueNote/type/lecueNoteType.ts           | 6 +++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index 0d1f2719..7a8213cf 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -10,12 +10,12 @@ import SelectColor from '../SelectColor';
 import WriteNote from '../WriteNote';
 import * as S from './CreateNote.style';
 
-function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
+function CreateNote({ contents, handleChangeFn, 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 [imgFile, setImgFile] = useState('');
+  // const [imgFile, setImgFile] = useState('');
 
   const handleClickCategory = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -56,7 +56,7 @@ function CreateNote({ contents, handleChangeFn }: CreateNoteProps) {
         handleCategoryFn={handleClickCategory}
         handleColorFn={handleClickedColorBtn}
         handleIconFn={handleClickedIcon}
-        uploadImage={(file) => setImgFile(file)}
+        uploadImage={uploadImage}
       />
     </S.Wrapper>
   );
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 4b661054..5974abc4 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -8,6 +8,7 @@ import * as S from './LecueNotePage.style';
 function LecueNotePage() {
   const MAX_LENGTH = 1000;
   const [contents, setContents] = useState('');
+  const [imgFile, setImgFile] = useState('');
 
   const handleChangeContents = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setContents(e.target.value);
@@ -20,7 +21,12 @@ function LecueNotePage() {
   return (
     <S.Wrapper>
       <Header headerTitle="레큐노트 작성" />
-      <CreateNote contents={contents} handleChangeFn={handleChangeContents} />
+      <CreateNote
+        contents={contents}
+        handleChangeFn={handleChangeContents}
+        imgFile={imgFile}
+        uploadImage={(file) => setImgFile(file)}
+      />
       <Footer contents={contents} />
     </S.Wrapper>
   );
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
index 778c90c0..06e7f77f 100644
--- a/src/LecueNote/type/lecueNoteType.ts
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -1,6 +1,8 @@
 export interface CreateNoteProps {
+  imgFile: string;
   contents: string;
   handleChangeFn: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  uploadImage: (file: string) => void;
 }
 
 export interface SelectColorProps {
@@ -25,11 +27,13 @@ export interface ShowColorChartProps {
   handleIconFn: () => void;
 }
 
-export interface WriteNoteProps extends CreateNoteProps {
+export interface WriteNoteProps {
   imgFile: string;
   isIconClicked: boolean;
   clickedBgColor: string;
   clickedTextColor: string;
+  contents: string;
+  handleChangeFn: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
 export interface FooterProps {

From 914465e5b345dc78074318cc3a736e03304c2f04 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 02:52:31 +0900
Subject: [PATCH 22/42] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index 7a8213cf..67c5591c 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -10,12 +10,16 @@ import SelectColor from '../SelectColor';
 import WriteNote from '../WriteNote';
 import * as S from './CreateNote.style';
 
-function CreateNote({ contents, handleChangeFn, imgFile, uploadImage }: CreateNoteProps) {
+function CreateNote({
+  contents,
+  handleChangeFn,
+  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 [imgFile, setImgFile] = useState('');
 
   const handleClickCategory = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,

From a96370133552705646ea83bc38994a7e2ac70a76 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Mon, 15 Jan 2024 03:29:24 +0900
Subject: [PATCH 23/42] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=98=EB=B3=B5=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/WriteNote/WriteNote.style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 250d0a77..b5f75df1 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -26,7 +26,7 @@ export const LecueNote = styled.article<{
           width: 100%;
           height: calc(100dvh - 33.2rem);
 
-          background-size: contain;
+          background-size: 100% calc(100dvh - 33.2rem);
 
           background-image: url(${$imgFile});
         `

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 24/42] =?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 25/42] =?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 26/42] =?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 27/42] =?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 28/42] =?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 29/42] =?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 30/42] =?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 31/42] =?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 32/42] =?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 33/42] =?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 34/42] =?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 35/42] =?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 36/42] =?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 37/42] =?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 38/42] =?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 39/42] =?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 40/42] =?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 41/42] =?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 42/42] =?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;