From 0fdb0e4c267cbed30be96bd34776536656a204b9 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 15:46:58 +0900
Subject: [PATCH 01/30] =?UTF-8?q?init:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=84=A4=EA=B3=84=20=EC=B4=88=EA=B8=B0=20=EC=84=B8?=
 =?UTF-8?q?=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BgColor/BgColor.style.ts          |  9 +++++++++
 src/LecueNote/components/BgColor/index.tsx       | 11 +++++++++++
 .../components/CreateNote/CreateNote.style.ts    |  6 ++++++
 src/LecueNote/components/CreateNote/index.tsx    | 14 ++++++++++++++
 src/LecueNote/components/Footer/Footer.style.ts  |  9 +++++++++
 src/LecueNote/components/Footer/index.tsx        | 11 +++++++++++
 .../components/SelectColor/SelectColor.style.ts  |  5 +++++
 src/LecueNote/components/SelectColor/index.tsx   | 14 ++++++++++++++
 .../components/TextColor/TextColor.style.ts      |  9 +++++++++
 src/LecueNote/components/TextColor/index.tsx     | 11 +++++++++++
 .../components/WriteNote/WriteNote.style.ts      |  9 +++++++++
 src/LecueNote/components/WriteNote/index.tsx     | 11 +++++++++++
 .../page/LeceuNotePage/LecueNotePage.style.ts    | 11 +++++++++++
 src/LecueNote/page/LeceuNotePage/index.tsx       | 16 ++++++++++++++++
 14 files changed, 146 insertions(+)
 create mode 100644 src/LecueNote/components/BgColor/BgColor.style.ts
 create mode 100644 src/LecueNote/components/BgColor/index.tsx
 create mode 100644 src/LecueNote/components/CreateNote/CreateNote.style.ts
 create mode 100644 src/LecueNote/components/CreateNote/index.tsx
 create mode 100644 src/LecueNote/components/Footer/Footer.style.ts
 create mode 100644 src/LecueNote/components/Footer/index.tsx
 create mode 100644 src/LecueNote/components/SelectColor/SelectColor.style.ts
 create mode 100644 src/LecueNote/components/SelectColor/index.tsx
 create mode 100644 src/LecueNote/components/TextColor/TextColor.style.ts
 create mode 100644 src/LecueNote/components/TextColor/index.tsx
 create mode 100644 src/LecueNote/components/WriteNote/WriteNote.style.ts
 create mode 100644 src/LecueNote/components/WriteNote/index.tsx
 create mode 100644 src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
 create mode 100644 src/LecueNote/page/LeceuNotePage/index.tsx

diff --git a/src/LecueNote/components/BgColor/BgColor.style.ts b/src/LecueNote/components/BgColor/BgColor.style.ts
new file mode 100644
index 00000000..9b074b19
--- /dev/null
+++ b/src/LecueNote/components/BgColor/BgColor.style.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+`;
+
+export const Contents = styled.p`
+  color: blue;
+`;
diff --git a/src/LecueNote/components/BgColor/index.tsx b/src/LecueNote/components/BgColor/index.tsx
new file mode 100644
index 00000000..6e28e513
--- /dev/null
+++ b/src/LecueNote/components/BgColor/index.tsx
@@ -0,0 +1,11 @@
+import * as S from './BgColor.style';
+
+function BgColor() {
+  return (
+    <S.Wrapper>
+      <S.Contents>BgColor</S.Contents>
+    </S.Wrapper>
+  );
+}
+
+export default BgColor;
diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
new file mode 100644
index 00000000..788baba2
--- /dev/null
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
new file mode 100644
index 00000000..db18f86b
--- /dev/null
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -0,0 +1,14 @@
+import SelectColor from '../SelectColor';
+import WriteNote from '../WriteNote';
+import * as S from './CreateNote.style';
+
+function CreateNote() {
+  return (
+    <S.Wrapper>
+      <WriteNote />
+      <SelectColor />
+    </S.Wrapper>
+  );
+}
+
+export default CreateNote;
diff --git a/src/LecueNote/components/Footer/Footer.style.ts b/src/LecueNote/components/Footer/Footer.style.ts
new file mode 100644
index 00000000..9b074b19
--- /dev/null
+++ b/src/LecueNote/components/Footer/Footer.style.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+`;
+
+export const Contents = styled.p`
+  color: blue;
+`;
diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
new file mode 100644
index 00000000..4bd7045c
--- /dev/null
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -0,0 +1,11 @@
+import * as S from './Footer.style';
+
+function Footer() {
+  return (
+    <S.Wrapper>
+      <S.Contents>Footer</S.Contents>
+    </S.Wrapper>
+  );
+}
+
+export default Footer;
diff --git a/src/LecueNote/components/SelectColor/SelectColor.style.ts b/src/LecueNote/components/SelectColor/SelectColor.style.ts
new file mode 100644
index 00000000..fa9ba94f
--- /dev/null
+++ b/src/LecueNote/components/SelectColor/SelectColor.style.ts
@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+`;
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
new file mode 100644
index 00000000..fc2b8f04
--- /dev/null
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -0,0 +1,14 @@
+import BgColor from '../BgColor';
+import TextColor from '../TextColor';
+import * as S from './SelectColor.style';
+
+function SelectColor() {
+  return (
+    <S.Wrapper>
+      <TextColor />
+      <BgColor />
+    </S.Wrapper>
+  );
+}
+
+export default SelectColor;
diff --git a/src/LecueNote/components/TextColor/TextColor.style.ts b/src/LecueNote/components/TextColor/TextColor.style.ts
new file mode 100644
index 00000000..9b074b19
--- /dev/null
+++ b/src/LecueNote/components/TextColor/TextColor.style.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+`;
+
+export const Contents = styled.p`
+  color: blue;
+`;
diff --git a/src/LecueNote/components/TextColor/index.tsx b/src/LecueNote/components/TextColor/index.tsx
new file mode 100644
index 00000000..390c1f3e
--- /dev/null
+++ b/src/LecueNote/components/TextColor/index.tsx
@@ -0,0 +1,11 @@
+import * as S from './TextColor.style';
+
+function TextColor() {
+  return (
+    <S.Wrapper>
+      <S.Contents>TextColor</S.Contents>
+    </S.Wrapper>
+  );
+}
+
+export default TextColor;
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
new file mode 100644
index 00000000..9b074b19
--- /dev/null
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+`;
+
+export const Contents = styled.p`
+  color: blue;
+`;
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
new file mode 100644
index 00000000..4458f422
--- /dev/null
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -0,0 +1,11 @@
+import * as S from './WriteNote.style';
+
+function WriteNote() {
+  return (
+    <S.Wrapper>
+      <S.Contents>WriteNote</S.Contents>
+    </S.Wrapper>
+  );
+}
+
+export default WriteNote;
diff --git a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
new file mode 100644
index 00000000..286cb659
--- /dev/null
+++ b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+`;
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
new file mode 100644
index 00000000..9c8283a7
--- /dev/null
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -0,0 +1,16 @@
+// import Header from '../../../components/common/Header';
+import CreateNote from '../../components/CreateNote';
+import Footer from '../../components/Footer';
+import * as S from './LecueNotePage.style';
+
+function LecueNotePage() {
+  return (
+    <S.Wrapper>
+      {/* <Header /> */}
+      <CreateNote />
+      <Footer />
+    </S.Wrapper>
+  );
+}
+
+export default LecueNotePage;

From d5de8f4da0c4a2f417b091b95ddd7e5eeb16c01f Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 15:47:26 +0900
Subject: [PATCH 02/30] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Router.tsx b/src/Router.tsx
index 16e4af3a..58eb3ce9 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,12 +1,14 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import HomePage from './Home/page/HomePage';
+import LecueNotePage from './LecueNote/page/LeceuNotePage';
 
 function Router() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="create-note" element={<LecueNotePage />} />
       </Routes>
     </BrowserRouter>
   );

From ccc7ca0850349a9c3c96b11a2a81e9d81c1684a1 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 16:16:39 +0900
Subject: [PATCH 03/30] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=20=EB=85=B8?=
 =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts | 1 -
 src/LecueNote/page/LeceuNotePage/index.tsx              | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
index 286cb659..e3c719f3 100644
--- a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
+++ b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   display: flex;
-  justify-content: center;
   align-items: center;
   flex-direction: column;
 
diff --git a/src/LecueNote/page/LeceuNotePage/index.tsx b/src/LecueNote/page/LeceuNotePage/index.tsx
index 9c8283a7..ed6e4301 100644
--- a/src/LecueNote/page/LeceuNotePage/index.tsx
+++ b/src/LecueNote/page/LeceuNotePage/index.tsx
@@ -1,4 +1,4 @@
-// import Header from '../../../components/common/Header';
+import Header from '../../../components/common/Header';
 import CreateNote from '../../components/CreateNote';
 import Footer from '../../components/Footer';
 import * as S from './LecueNotePage.style';
@@ -6,7 +6,7 @@ import * as S from './LecueNotePage.style';
 function LecueNotePage() {
   return (
     <S.Wrapper>
-      {/* <Header /> */}
+      <Header headerTitle='레큐 노트'/>
       <CreateNote />
       <Footer />
     </S.Wrapper>

From 2958528e6ba4fdcf5410dd89a697b14ae0f11954 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 16:18:12 +0900
Subject: [PATCH 04/30] =?UTF-8?q?feat:=20=ED=8F=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=9E=87=20=EC=9E=91=EC=84=B1=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 9b074b19..e1117fda 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -2,8 +2,20 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   display: flex;
+  flex-direction: column;
+
+  gap: 0.4rem;
+`;
+
+export const LecueNote = styled.article`
+  width: 34.2rem;
+  height: 34.2rem;
+  border-radius: 0.6rem;
+
+  background-color: ${({ theme }) => theme.colors.sub_pink};
 `;
 
-export const Contents = styled.p`
-  color: blue;
+export const Notice = styled.p`
+  color: ${({ theme }) => theme.colors.key};
+  ${({ theme }) => theme.fonts.Caption1_R_12};
 `;
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index 4458f422..f927524b 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -3,7 +3,8 @@ import * as S from './WriteNote.style';
 function WriteNote() {
   return (
     <S.Wrapper>
-      <S.Contents>WriteNote</S.Contents>
+      <S.LecueNote></S.LecueNote>
+      <S.Notice>욕설/비속어는 자동 필터링됩니다.</S.Notice>
     </S.Wrapper>
   );
 }

From 0b2bc29b53efd26dc44f60ebe8cc0c3251ea14a2 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 16:18:50 +0900
Subject: [PATCH 05/30] =?UTF-8?q?style:=20=ED=8F=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=9E=87=20=EC=83=9D=EC=84=B1=20=EA=B4=80=EB=A0=A8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=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/CreateNote/CreateNote.style.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
index 788baba2..efdba9a7 100644
--- a/src/LecueNote/components/CreateNote/CreateNote.style.ts
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -1,6 +1,13 @@
 import styled from '@emotion/styled';
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
+  justify-content: center;
+
+  height: 100%;
+
+  margin: 2.4rem 1.7rem 4rem;
+
+  gap: 3.2rem;
 `;

From c23eb09017cce259bbdc76afdb23e7f5d3447a4f Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 16:47:09 +0900
Subject: [PATCH 06/30] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=83=89/=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectColor/SelectColor.style.ts          | 27 ++++++++++++++++-
 .../components/SelectColor/index.tsx          | 29 ++++++++++++++++---
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/LecueNote/components/SelectColor/SelectColor.style.ts b/src/LecueNote/components/SelectColor/SelectColor.style.ts
index fa9ba94f..7f906d9c 100644
--- a/src/LecueNote/components/SelectColor/SelectColor.style.ts
+++ b/src/LecueNote/components/SelectColor/SelectColor.style.ts
@@ -1,5 +1,30 @@
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.article`
   display: flex;
+  flex-direction: column;
+
+  gap: 1.8rem;
+`;
+
+export const CategoryWrapper = styled.div`
+  display: flex;
+
+  gap: 1.4rem;
+`;
+
+export const Category = styled.button<{ variant: boolean }>`
+  ${({ theme, variant }) =>
+    variant
+      ? css`
+          ${theme.fonts.Title1_SB_16}
+          color: ${theme.colors.BG}
+        `
+      : css`
+          ${theme.fonts.Title2_M_16}
+          color: ${theme.colors.MG}
+        `}
+
+  background-color: none;
 `;
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index fc2b8f04..462bb986 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -1,12 +1,33 @@
-import BgColor from '../BgColor';
-import TextColor from '../TextColor';
+import { useState } from 'react';
 import * as S from './SelectColor.style';
 
 function SelectColor() {
+  const [isClicked, setIsClicked] = useState('텍스트색');
+
+  const handleClickCategory = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    setIsClicked(e.currentTarget.innerHTML);
+  };
+
   return (
     <S.Wrapper>
-      <TextColor />
-      <BgColor />
+      <S.CategoryWrapper>
+        <S.Category
+          type="button"
+          variant={isClicked === '텍스트색'}
+          onClick={(e) => handleClickCategory(e)}
+        >
+          텍스트색
+        </S.Category>
+        <S.Category
+          type="button"
+          variant={isClicked === '배경색'}
+          onClick={handleClickCategory}
+        >
+          배경색
+        </S.Category>
+      </S.CategoryWrapper>
     </S.Wrapper>
   );
 }

From 2ecccf6493e0b96b7d6ca96dd8e52e5bb16363c2 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:16:10 +0900
Subject: [PATCH 07/30] =?UTF-8?q?feat:=20=EC=83=89=EA=B9=94=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=81=EC=88=98=20=EB=B0=B0=EC=97=B4=20=EC=A0=95?=
 =?UTF-8?q?=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/constants/ColorChart.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/LecueNote/constants/ColorChart.tsx

diff --git a/src/LecueNote/constants/ColorChart.tsx b/src/LecueNote/constants/ColorChart.tsx
new file mode 100644
index 00000000..9cd2c433
--- /dev/null
+++ b/src/LecueNote/constants/ColorChart.tsx
@@ -0,0 +1,16 @@
+export const TEXT_COLOR_CHART = ['#191919', '#FFF'];
+
+export const BG_COLOR_CHART = [
+  '#EFB6B6',
+  '#E5E2CE',
+  '#F8E99A',
+  '#85CEAF',
+  '#B3CBE8',
+  '#929DD9',
+  '#FE394C',
+  '#9852F9',
+  '#FFD600',
+  '#98ED4D',
+  '#FF71B3',
+  '#CCC',
+];

From 9ab3c9b0246f92953323454be71d8a16609a024a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:18:09 +0900
Subject: [PATCH 08/30] =?UTF-8?q?feat:=20=EA=B8=80=EC=9E=90=EC=83=89=20?=
 =?UTF-8?q?=EC=BB=AC=EB=9F=AC=EC=B0=A8=ED=8A=B8=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/components/TextColor/TextColor.style.ts b/src/LecueNote/components/TextColor/TextColor.style.ts
index 9b074b19..a612ba05 100644
--- a/src/LecueNote/components/TextColor/TextColor.style.ts
+++ b/src/LecueNote/components/TextColor/TextColor.style.ts
@@ -1,9 +1,38 @@
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 export const Wrapper = styled.div`
   display: flex;
+  align-items: center;
+
+  gap: 1.9rem;
 `;
 
-export const Contents = styled.p`
-  color: blue;
+export const ColorWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 3.8rem;
+  height: 3.8rem;
+`;
+
+export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
+  border-radius: 3rem;
+  outline: 0.1rem solid ${({ theme }) => theme.colors.WG};
+
+  ${({ variant, theme }) =>
+    variant
+      ? css`
+          width: 3.8rem;
+          height: 3.8rem;
+          border: 0.4rem solid ${theme.colors.white};
+        `
+      : css`
+          width: 3rem;
+          height: 3rem;
+          border: none;
+        `};
+
+  background-color: ${({ $colorCode }) => $colorCode};
 `;
diff --git a/src/LecueNote/components/TextColor/index.tsx b/src/LecueNote/components/TextColor/index.tsx
index 390c1f3e..33294c0e 100644
--- a/src/LecueNote/components/TextColor/index.tsx
+++ b/src/LecueNote/components/TextColor/index.tsx
@@ -1,9 +1,29 @@
+import { useState } from 'react';
+import { TEXT_COLOR_CHART } from '../../constants/ColorChart';
 import * as S from './TextColor.style';
 
 function TextColor() {
+  const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
+
+  const handleClickedColorBtn = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    setClickedTextColor(e.currentTarget.id);
+  };
+
   return (
     <S.Wrapper>
-      <S.Contents>TextColor</S.Contents>
+      {TEXT_COLOR_CHART.map((colorCode) => (
+        <S.ColorWrapper>
+          <S.Color
+            type="button"
+            id={colorCode}
+            variant={clickedTextColor === colorCode}
+            $colorCode={colorCode}
+            onClick={handleClickedColorBtn}
+          ></S.Color>
+        </S.ColorWrapper>
+      ))}
     </S.Wrapper>
   );
 }

From decd7bf150bf19cfa9f4c449bdf4b0247c3bc16f Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:18:34 +0900
Subject: [PATCH 09/30] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B3=84=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index 462bb986..d3aac4a3 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import * as S from './SelectColor.style';
+import TextColor from '../TextColor';
+import BgColor from '../BgColor';
 
 function SelectColor() {
   const [isClicked, setIsClicked] = useState('텍스트색');
@@ -16,7 +18,7 @@ function SelectColor() {
         <S.Category
           type="button"
           variant={isClicked === '텍스트색'}
-          onClick={(e) => handleClickCategory(e)}
+          onClick={handleClickCategory}
         >
           텍스트색
         </S.Category>
@@ -28,6 +30,8 @@ function SelectColor() {
           배경색
         </S.Category>
       </S.CategoryWrapper>
+
+      {isClicked === '텍스트색' ? <TextColor /> : <BgColor />}
     </S.Wrapper>
   );
 }

From 14c3507fdba201a62221e4297d53ab040736c357 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:38:26 +0900
Subject: [PATCH 10/30] =?UTF-8?q?remove:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BgColor/BgColor.style.ts       |  9 -----
 .../components/TextColor/TextColor.style.ts   | 38 -------------------
 2 files changed, 47 deletions(-)
 delete mode 100644 src/LecueNote/components/BgColor/BgColor.style.ts
 delete mode 100644 src/LecueNote/components/TextColor/TextColor.style.ts

diff --git a/src/LecueNote/components/BgColor/BgColor.style.ts b/src/LecueNote/components/BgColor/BgColor.style.ts
deleted file mode 100644
index 9b074b19..00000000
--- a/src/LecueNote/components/BgColor/BgColor.style.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-
-export const Wrapper = styled.div`
-  display: flex;
-`;
-
-export const Contents = styled.p`
-  color: blue;
-`;
diff --git a/src/LecueNote/components/TextColor/TextColor.style.ts b/src/LecueNote/components/TextColor/TextColor.style.ts
deleted file mode 100644
index a612ba05..00000000
--- a/src/LecueNote/components/TextColor/TextColor.style.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-export const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  gap: 1.9rem;
-`;
-
-export const ColorWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 3.8rem;
-  height: 3.8rem;
-`;
-
-export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
-  border-radius: 3rem;
-  outline: 0.1rem solid ${({ theme }) => theme.colors.WG};
-
-  ${({ variant, theme }) =>
-    variant
-      ? css`
-          width: 3.8rem;
-          height: 3.8rem;
-          border: 0.4rem solid ${theme.colors.white};
-        `
-      : css`
-          width: 3rem;
-          height: 3rem;
-          border: none;
-        `};
-
-  background-color: ${({ $colorCode }) => $colorCode};
-`;

From e76aace0c35c3c4a2488ac836fcd4f327517fd48 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:39:12 +0900
Subject: [PATCH 11/30] =?UTF-8?q?chore:=20=EA=B3=B5=ED=86=B5=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?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/components/ColorChart.style.ts | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/LecueNote/components/ColorChart.style.ts

diff --git a/src/LecueNote/components/ColorChart.style.ts b/src/LecueNote/components/ColorChart.style.ts
new file mode 100644
index 00000000..a612ba05
--- /dev/null
+++ b/src/LecueNote/components/ColorChart.style.ts
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  gap: 1.9rem;
+`;
+
+export const ColorWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 3.8rem;
+  height: 3.8rem;
+`;
+
+export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
+  border-radius: 3rem;
+  outline: 0.1rem solid ${({ theme }) => theme.colors.WG};
+
+  ${({ variant, theme }) =>
+    variant
+      ? css`
+          width: 3.8rem;
+          height: 3.8rem;
+          border: 0.4rem solid ${theme.colors.white};
+        `
+      : css`
+          width: 3rem;
+          height: 3rem;
+          border: none;
+        `};
+
+  background-color: ${({ $colorCode }) => $colorCode};
+`;

From 652da9ae9820125ab7349e6050d368f36350afa3 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:40:19 +0900
Subject: [PATCH 12/30] =?UTF-8?q?chore:=20=EA=B3=B5=ED=86=B5=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC=ED=95=A8=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=9D=BC=20import=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/components/TextColor/index.tsx b/src/LecueNote/components/TextColor/index.tsx
index 33294c0e..a0939b49 100644
--- a/src/LecueNote/components/TextColor/index.tsx
+++ b/src/LecueNote/components/TextColor/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TEXT_COLOR_CHART } from '../../constants/ColorChart';
-import * as S from './TextColor.style';
+import * as S from '../ColorChart.style';
 
 function TextColor() {
   const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);

From db95e99f5eaaef9cff63b48698c461d0a1837932 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 10 Jan 2024 21:40:38 +0900
Subject: [PATCH 13/30] =?UTF-8?q?feat:=20=EB=B0=B0=EA=B2=BD=EC=83=89=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=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/BgColor/index.tsx | 24 ++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/LecueNote/components/BgColor/index.tsx b/src/LecueNote/components/BgColor/index.tsx
index 6e28e513..3fe6deb0 100644
--- a/src/LecueNote/components/BgColor/index.tsx
+++ b/src/LecueNote/components/BgColor/index.tsx
@@ -1,9 +1,29 @@
-import * as S from './BgColor.style';
+import * as S from '../ColorChart.style';
+import { BG_COLOR_CHART } from '../../constants/ColorChart';
+import { useState } from 'react';
 
 function BgColor() {
+  const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
+
+  const handleClickedColorBtn = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    setclickedBgColor(e.currentTarget.id);
+  };
+
   return (
     <S.Wrapper>
-      <S.Contents>BgColor</S.Contents>
+      {BG_COLOR_CHART.map((colorCode) => (
+        <S.ColorWrapper>
+          <S.Color
+            type="button"
+            id={colorCode}
+            variant={clickedBgColor === colorCode}
+            $colorCode={colorCode}
+            onClick={handleClickedColorBtn}
+          ></S.Color>
+        </S.ColorWrapper>
+      ))}
     </S.Wrapper>
   );
 }

From 96bb7ee24aca4cfde33ecb9bc90394d80da96ddb Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 00:31:39 +0900
Subject: [PATCH 14/30] =?UTF-8?q?fix:=20=EA=B0=80=EB=A1=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9=20=EC=8B=9C,=20?=
 =?UTF-8?q?=EC=99=BC=EC=AA=BD=EC=9C=BC=EB=A1=9C=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=B0=80=EB=A6=AC=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/ColorChart.style.ts  | 22 ++++++++++++++-----
 .../components/CreateNote/CreateNote.style.ts |  6 ++---
 .../page/LeceuNotePage/LecueNotePage.style.ts |  2 ++
 src/styles/GlobalStyles.ts                    |  2 ++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/LecueNote/components/ColorChart.style.ts b/src/LecueNote/components/ColorChart.style.ts
index a612ba05..b2fc8333 100644
--- a/src/LecueNote/components/ColorChart.style.ts
+++ b/src/LecueNote/components/ColorChart.style.ts
@@ -1,17 +1,23 @@
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   display: flex;
+  justify-content: flex-start;
   align-items: center;
 
-  gap: 1.9rem;
+  padding: 0.5rem 0 0.7rem 0.3rem;
+
+  overflow-x: scroll;
+
+  gap: 1.4rem;
 `;
 
 export const ColorWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
 
   width: 3.8rem;
   height: 3.8rem;
@@ -19,20 +25,26 @@ export const ColorWrapper = styled.div`
 
 export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
   border-radius: 3rem;
-  outline: 0.1rem solid ${({ theme }) => theme.colors.WG};
+  ${({ $colorCode, theme }) =>
+    $colorCode === '#FFF' &&
+    css`
+      outline: 0.1rem solid ${theme.colors.WG};
+    `};
+  background-color: ${({ $colorCode }) => $colorCode};
 
   ${({ variant, theme }) =>
     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;
         `};
-
-  background-color: ${({ $colorCode }) => $colorCode};
 `;
diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
index efdba9a7..167beedb 100644
--- a/src/LecueNote/components/CreateNote/CreateNote.style.ts
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -3,11 +3,9 @@ import styled from '@emotion/styled';
 export const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
-  justify-content: center;
 
-  height: 100%;
-
-  margin: 2.4rem 1.7rem 4rem;
+  padding: 0 1.7rem;
+  margin: 2.4rem 4rem;
 
   gap: 3.2rem;
 `;
diff --git a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
index e3c719f3..7cdf863c 100644
--- a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
+++ b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
@@ -4,6 +4,8 @@ export const Wrapper = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
+  position: relative;
+  overflow: hidden;
 
   width: 100vw;
   height: 100dvh;
diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts
index afcbed10..9370c829 100644
--- a/src/styles/GlobalStyles.ts
+++ b/src/styles/GlobalStyles.ts
@@ -116,6 +116,8 @@ const resetCss = css`
   }
 
   body {
+    position: relative;
+
     line-height: 1;
     touch-action: manipulation;
 

From 16158fd35da0dada4cf6a3c57a6b76359d5de4e8 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 00:31:49 +0900
Subject: [PATCH 15/30] =?UTF-8?q?chore:=20UX=20=EB=9D=BC=EC=9D=B4=ED=8C=85?=
 =?UTF-8?q?=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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index f927524b..d39ded13 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -4,7 +4,7 @@ function WriteNote() {
   return (
     <S.Wrapper>
       <S.LecueNote></S.LecueNote>
-      <S.Notice>욕설/비속어는 자동 필터링됩니다.</S.Notice>
+      <S.Notice>*욕설/비속어는 자동 필터링됩니다.</S.Notice>
     </S.Wrapper>
   );
 }

From 9ac899e802979a6c4b2483f13bf4078f57591f48 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 00:32:17 +0900
Subject: [PATCH 16/30] =?UTF-8?q?chore:=20sytlelint=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/SelectColor/SelectColor.style.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/LecueNote/components/SelectColor/SelectColor.style.ts b/src/LecueNote/components/SelectColor/SelectColor.style.ts
index 7f906d9c..e07545f1 100644
--- a/src/LecueNote/components/SelectColor/SelectColor.style.ts
+++ b/src/LecueNote/components/SelectColor/SelectColor.style.ts
@@ -1,5 +1,5 @@
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 export const Wrapper = styled.article`
   display: flex;
@@ -25,6 +25,5 @@ export const Category = styled.button<{ variant: boolean }>`
           ${theme.fonts.Title2_M_16}
           color: ${theme.colors.MG}
         `}
-
   background-color: none;
 `;

From dec4b3dc2f9c24eb4f358680fc052c40786c027a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 01:24:34 +0900
Subject: [PATCH 17/30] =?UTF-8?q?fix:=20=EB=B0=B0=EA=B2=BD=EC=83=89=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=8B=9C,=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=B0=80=EB=A6=AC=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
index 167beedb..5ef3d1b2 100644
--- a/src/LecueNote/components/CreateNote/CreateNote.style.ts
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -4,6 +4,7 @@ export const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
 
+  width: 100vw;
   padding: 0 1.7rem;
   margin: 2.4rem 4rem;
 
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index e1117fda..c6007ae6 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -8,14 +8,15 @@ export const Wrapper = styled.div`
 `;
 
 export const LecueNote = styled.article`
-  width: 34.2rem;
-  height: 34.2rem;
-  border-radius: 0.6rem;
+  width: 100%;
+  height: calc(100dvh - 32.5rem);
 
+  border-radius: 0.6rem;
   background-color: ${({ theme }) => theme.colors.sub_pink};
 `;
 
 export const Notice = styled.p`
   color: ${({ theme }) => theme.colors.key};
+
   ${({ theme }) => theme.fonts.Caption1_R_12};
 `;

From 4e00e220c2f2743cbedb1397c9fc1b7f27f4eace Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 01:54:42 +0900
Subject: [PATCH 18/30] =?UTF-8?q?remove:=20=EC=B6=94=EC=83=81=ED=99=94?=
 =?UTF-8?q?=ED=95=98=EB=A9=B4=EC=84=9C=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EC=96=B4=EC=A7=84=20=ED=8C=8C=EC=9D=BC=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/BgColor/index.tsx   | 31 ------------
 src/LecueNote/components/ColorChart.style.ts | 50 --------------------
 src/LecueNote/components/TextColor/index.tsx | 31 ------------
 3 files changed, 112 deletions(-)
 delete mode 100644 src/LecueNote/components/BgColor/index.tsx
 delete mode 100644 src/LecueNote/components/ColorChart.style.ts
 delete mode 100644 src/LecueNote/components/TextColor/index.tsx

diff --git a/src/LecueNote/components/BgColor/index.tsx b/src/LecueNote/components/BgColor/index.tsx
deleted file mode 100644
index 3fe6deb0..00000000
--- a/src/LecueNote/components/BgColor/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as S from '../ColorChart.style';
-import { BG_COLOR_CHART } from '../../constants/ColorChart';
-import { useState } from 'react';
-
-function BgColor() {
-  const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
-
-  const handleClickedColorBtn = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    setclickedBgColor(e.currentTarget.id);
-  };
-
-  return (
-    <S.Wrapper>
-      {BG_COLOR_CHART.map((colorCode) => (
-        <S.ColorWrapper>
-          <S.Color
-            type="button"
-            id={colorCode}
-            variant={clickedBgColor === colorCode}
-            $colorCode={colorCode}
-            onClick={handleClickedColorBtn}
-          ></S.Color>
-        </S.ColorWrapper>
-      ))}
-    </S.Wrapper>
-  );
-}
-
-export default BgColor;
diff --git a/src/LecueNote/components/ColorChart.style.ts b/src/LecueNote/components/ColorChart.style.ts
deleted file mode 100644
index b2fc8333..00000000
--- a/src/LecueNote/components/ColorChart.style.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-export const Wrapper = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  padding: 0.5rem 0 0.7rem 0.3rem;
-
-  overflow-x: scroll;
-
-  gap: 1.4rem;
-`;
-
-export const ColorWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-
-  width: 3.8rem;
-  height: 3.8rem;
-`;
-
-export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
-  border-radius: 3rem;
-  ${({ $colorCode, theme }) =>
-    $colorCode === '#FFF' &&
-    css`
-      outline: 0.1rem solid ${theme.colors.WG};
-    `};
-  background-color: ${({ $colorCode }) => $colorCode};
-
-  ${({ variant, theme }) =>
-    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/TextColor/index.tsx b/src/LecueNote/components/TextColor/index.tsx
deleted file mode 100644
index a0939b49..00000000
--- a/src/LecueNote/components/TextColor/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState } from 'react';
-import { TEXT_COLOR_CHART } from '../../constants/ColorChart';
-import * as S from '../ColorChart.style';
-
-function TextColor() {
-  const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
-
-  const handleClickedColorBtn = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    setClickedTextColor(e.currentTarget.id);
-  };
-
-  return (
-    <S.Wrapper>
-      {TEXT_COLOR_CHART.map((colorCode) => (
-        <S.ColorWrapper>
-          <S.Color
-            type="button"
-            id={colorCode}
-            variant={clickedTextColor === colorCode}
-            $colorCode={colorCode}
-            onClick={handleClickedColorBtn}
-          ></S.Color>
-        </S.ColorWrapper>
-      ))}
-    </S.Wrapper>
-  );
-}
-
-export default TextColor;

From 5c372507d8a8280b1c87c124e8a26f8d47aefacd Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 01:55:04 +0900
Subject: [PATCH 19/30] =?UTF-8?q?feat:=20=EB=B0=B0=EA=B2=BD,=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=83=89=20=EA=B3=A0=EB=A5=B4=EB=8A=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EC=83=81?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ShowColorChart/ShowColorChart.style.ts    | 50 +++++++++++++++++++
 .../components/ShowColorChart/index.tsx       | 27 ++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
 create mode 100644 src/LecueNote/components/ShowColorChart/index.tsx

diff --git a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
new file mode 100644
index 00000000..b2fc8333
--- /dev/null
+++ b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  padding: 0.5rem 0 0.7rem 0.3rem;
+
+  overflow-x: scroll;
+
+  gap: 1.4rem;
+`;
+
+export const ColorWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  width: 3.8rem;
+  height: 3.8rem;
+`;
+
+export const Color = styled.button<{ $colorCode: string; variant: boolean }>`
+  border-radius: 3rem;
+  ${({ $colorCode, theme }) =>
+    $colorCode === '#FFF' &&
+    css`
+      outline: 0.1rem solid ${theme.colors.WG};
+    `};
+  background-color: ${({ $colorCode }) => $colorCode};
+
+  ${({ variant, theme }) =>
+    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
new file mode 100644
index 00000000..9aa27316
--- /dev/null
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -0,0 +1,27 @@
+import * as S from './ShowColorChart.style';
+
+interface ShowColorChartProps {
+  colorChart: string[];
+  state: string;
+  handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) {
+  return (
+    <S.Wrapper>
+      {colorChart.map((colorCode) => (
+        <S.ColorWrapper>
+          <S.Color
+            type="button"
+            id={colorCode}
+            variant={state === colorCode}
+            $colorCode={colorCode}
+            onClick={handleFn}
+          ></S.Color>
+        </S.ColorWrapper>
+      ))}
+    </S.Wrapper>
+  );
+}
+
+export default ShowColorChart;

From cbf2e150cdd234537c58ec0c2e03bfac0a04dac3 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 01:55:25 +0900
Subject: [PATCH 20/30] =?UTF-8?q?chore:=20=EA=B8=B0=EC=A1=B4=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=B6=94=EC=83=81?=
 =?UTF-8?q?=ED=99=94=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SelectColor/index.tsx          | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index d3aac4a3..a257b930 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -1,37 +1,57 @@
 import { useState } from 'react';
+import { BG_COLOR_CHART, TEXT_COLOR_CHART } from '../../constants/ColorChart';
+import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
-import TextColor from '../TextColor';
-import BgColor from '../BgColor';
 
 function SelectColor() {
-  const [isClicked, setIsClicked] = useState('텍스트색');
+  const CATEGORY = ['텍스트색', '배경색'];
+  const [clickedCategory, setclickedCategory] = useState('텍스트색');
+  const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
+  const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
 
   const handleClickCategory = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
-    setIsClicked(e.currentTarget.innerHTML);
+    setclickedCategory(e.currentTarget.innerHTML);
+  };
+
+  const handleClickedColorBtn = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    clickedCategory === '텍스트색'
+      ? setClickedTextColor(e.currentTarget.id)
+      : setclickedBgColor(e.currentTarget.id);
   };
 
   return (
     <S.Wrapper>
       <S.CategoryWrapper>
-        <S.Category
-          type="button"
-          variant={isClicked === '텍스트색'}
-          onClick={handleClickCategory}
-        >
-          텍스트색
-        </S.Category>
-        <S.Category
-          type="button"
-          variant={isClicked === '배경색'}
-          onClick={handleClickCategory}
-        >
-          배경색
-        </S.Category>
+        {CATEGORY.map((it) => {
+          return (
+            <S.Category
+              type="button"
+              variant={clickedCategory === it}
+              onClick={handleClickCategory}
+            >
+              {it}
+            </S.Category>
+          );
+        })}
       </S.CategoryWrapper>
 
-      {isClicked === '텍스트색' ? <TextColor /> : <BgColor />}
+      {clickedCategory === '텍스트색' ? (
+        <ShowColorChart
+          colorChart={TEXT_COLOR_CHART}
+          state={clickedTextColor}
+          handleFn={handleClickedColorBtn}
+        />
+      ) : (
+        <ShowColorChart
+          colorChart={BG_COLOR_CHART}
+          state={clickedBgColor}
+          handleFn={handleClickedColorBtn}
+        />
+      )}
     </S.Wrapper>
   );
 }

From f11aab24c53cc82e25ff8ad517319c23918f3326 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 02:45:18 +0900
Subject: [PATCH 21/30] =?UTF-8?q?chore:=20=EC=83=81=EC=9C=84=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/index.tsx | 34 +++++++++++++-
 .../components/SelectColor/index.tsx          | 46 +++++++++----------
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index db18f86b..e8477ead 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -1,12 +1,44 @@
+import { useState } from 'react';
+import {
+  BG_COLOR_CHART,
+  CATEGORY,
+  TEXT_COLOR_CHART,
+} from '../../constants/ColorChart';
 import SelectColor from '../SelectColor';
 import WriteNote from '../WriteNote';
 import * as S from './CreateNote.style';
 
 function CreateNote() {
+  const [clickedCategory, setclickedCategory] = useState(CATEGORY[0]);
+  const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
+  const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
+
+  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);
+    }
+  };
+
   return (
     <S.Wrapper>
       <WriteNote />
-      <SelectColor />
+      <SelectColor
+        clickedCategory={clickedCategory}
+        clickedTextColor={clickedTextColor}
+        clickedBgColor={clickedBgColor}
+        handleCategoryFn={handleClickCategory}
+        handleColorFn={handleClickedColorBtn}
+      />
     </S.Wrapper>
   );
 }
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index a257b930..d7f4b79e 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -1,28 +1,28 @@
-import { useState } from 'react';
-import { BG_COLOR_CHART, TEXT_COLOR_CHART } from '../../constants/ColorChart';
+import {
+  BG_COLOR_CHART,
+  CATEGORY,
+  TEXT_COLOR_CHART,
+} from '../../constants/ColorChart';
 import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
 
-function SelectColor() {
-  const CATEGORY = ['텍스트색', '배경색'];
-  const [clickedCategory, setclickedCategory] = useState('텍스트색');
-  const [clickedTextColor, setClickedTextColor] = useState(TEXT_COLOR_CHART[0]);
-  const [clickedBgColor, setclickedBgColor] = useState(BG_COLOR_CHART[0]);
-
-  const handleClickCategory = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    setclickedCategory(e.currentTarget.innerHTML);
-  };
-
-  const handleClickedColorBtn = (
+interface SelectColorProps {
+  clickedCategory: string;
+  clickedTextColor: string;
+  clickedBgColor: string;
+  handleCategoryFn: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    clickedCategory === '텍스트색'
-      ? setClickedTextColor(e.currentTarget.id)
-      : setclickedBgColor(e.currentTarget.id);
-  };
+  ) => void;
+  handleColorFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
 
+function SelectColor({
+  clickedCategory,
+  clickedTextColor,
+  clickedBgColor,
+  handleCategoryFn,
+  handleColorFn,
+}: SelectColorProps) {
   return (
     <S.Wrapper>
       <S.CategoryWrapper>
@@ -31,7 +31,7 @@ function SelectColor() {
             <S.Category
               type="button"
               variant={clickedCategory === it}
-              onClick={handleClickCategory}
+              onClick={handleCategoryFn}
             >
               {it}
             </S.Category>
@@ -43,13 +43,13 @@ function SelectColor() {
         <ShowColorChart
           colorChart={TEXT_COLOR_CHART}
           state={clickedTextColor}
-          handleFn={handleClickedColorBtn}
+          handleFn={handleColorFn}
         />
       ) : (
         <ShowColorChart
           colorChart={BG_COLOR_CHART}
           state={clickedBgColor}
-          handleFn={handleClickedColorBtn}
+          handleFn={handleColorFn}
         />
       )}
     </S.Wrapper>

From 2e3f1f733616ba4f5c02c1b0f7ff824b0eb96e0c Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 02:45:33 +0900
Subject: [PATCH 22/30] =?UTF-8?q?chore:=20=EC=83=81=EC=88=98=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/constants/ColorChart.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/LecueNote/constants/ColorChart.tsx b/src/LecueNote/constants/ColorChart.tsx
index 9cd2c433..ea772d97 100644
--- a/src/LecueNote/constants/ColorChart.tsx
+++ b/src/LecueNote/constants/ColorChart.tsx
@@ -1,3 +1,5 @@
+export const CATEGORY = ['텍스트색', '배경색'];
+
 export const TEXT_COLOR_CHART = ['#191919', '#FFF'];
 
 export const BG_COLOR_CHART = [

From cfa5012074b4c52311f3d8b88d26ed6be2a0fc65 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 02:53:30 +0900
Subject: [PATCH 23/30] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=ED=95=9C=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=9E=98=ED=81=90=EB=85=B8?=
 =?UTF-8?q?=ED=8A=B8=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/CreateNote/index.tsx         | 2 +-
 src/LecueNote/components/WriteNote/WriteNote.style.ts | 4 ++--
 src/LecueNote/components/WriteNote/index.tsx          | 8 ++++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index e8477ead..da24e979 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -31,7 +31,7 @@ function CreateNote() {
 
   return (
     <S.Wrapper>
-      <WriteNote />
+      <WriteNote clickedBgColor={clickedBgColor}/>
       <SelectColor
         clickedCategory={clickedCategory}
         clickedTextColor={clickedTextColor}
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index c6007ae6..400b4a45 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -7,12 +7,12 @@ export const Wrapper = styled.div`
   gap: 0.4rem;
 `;
 
-export const LecueNote = styled.article`
+export const LecueNote = styled.article<{ $bgColor: string }>`
   width: 100%;
   height: calc(100dvh - 32.5rem);
 
   border-radius: 0.6rem;
-  background-color: ${({ theme }) => theme.colors.sub_pink};
+  background-color: ${({ $bgColor }) => $bgColor};
 `;
 
 export const Notice = styled.p`
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index d39ded13..0c2a8794 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,9 +1,13 @@
 import * as S from './WriteNote.style';
 
-function WriteNote() {
+interface WriteNoteProps {
+  clickedBgColor: string;
+}
+
+function WriteNote({ clickedBgColor }: WriteNoteProps) {
   return (
     <S.Wrapper>
-      <S.LecueNote></S.LecueNote>
+      <S.LecueNote $bgColor={clickedBgColor}></S.LecueNote>
       <S.Notice>*욕설/비속어는 자동 필터링됩니다.</S.Notice>
     </S.Wrapper>
   );

From 07cba2eb8e5a3c3307e58aaef3d7ff3b10f94c79 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 03:01:19 +0900
Subject: [PATCH 24/30] =?UTF-8?q?chore:=20type=20=EC=A0=95=EC=9D=98=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SelectColor/index.tsx          | 11 +----------
 .../components/ShowColorChart/index.tsx       |  7 +------
 src/LecueNote/components/WriteNote/index.tsx  |  5 +----
 src/LecueNote/type/lecueNoteType.ts           | 19 +++++++++++++++++++
 4 files changed, 22 insertions(+), 20 deletions(-)
 create mode 100644 src/LecueNote/type/lecueNoteType.ts

diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index d7f4b79e..33ec42f2 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -5,16 +5,7 @@ import {
 } from '../../constants/ColorChart';
 import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
-
-interface SelectColorProps {
-  clickedCategory: string;
-  clickedTextColor: string;
-  clickedBgColor: string;
-  handleCategoryFn: (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => void;
-  handleColorFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
+import { SelectColorProps } from '../../type/lecueNoteType';
 
 function SelectColor({
   clickedCategory,
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 9aa27316..4d36db8a 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,11 +1,6 @@
+import { ShowColorChartProps } from '../../type/lecueNoteType';
 import * as S from './ShowColorChart.style';
 
-interface ShowColorChartProps {
-  colorChart: string[];
-  state: string;
-  handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
 function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) {
   return (
     <S.Wrapper>
diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
index 0c2a8794..89196c1e 100644
--- a/src/LecueNote/components/WriteNote/index.tsx
+++ b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,9 +1,6 @@
+import { WriteNoteProps } from '../../type/lecueNoteType';
 import * as S from './WriteNote.style';
 
-interface WriteNoteProps {
-  clickedBgColor: string;
-}
-
 function WriteNote({ clickedBgColor }: WriteNoteProps) {
   return (
     <S.Wrapper>
diff --git a/src/LecueNote/type/lecueNoteType.ts b/src/LecueNote/type/lecueNoteType.ts
new file mode 100644
index 00000000..41dd02a3
--- /dev/null
+++ b/src/LecueNote/type/lecueNoteType.ts
@@ -0,0 +1,19 @@
+export interface SelectColorProps {
+  clickedCategory: string;
+  clickedTextColor: string;
+  clickedBgColor: string;
+  handleCategoryFn: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+  handleColorFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export interface ShowColorChartProps {
+  colorChart: string[];
+  state: string;
+  handleFn: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export interface WriteNoteProps {
+  clickedBgColor: string;
+}

From dd011c6ac8ac3b0d53072ec716b1ce9efac0bbdb Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 03:12:23 +0900
Subject: [PATCH 25/30] =?UTF-8?q?feat:=20footer=20=EC=B4=88=EA=B8=B0=20?=
 =?UTF-8?q?=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/Footer.style.ts | 6 +-----
 src/LecueNote/components/Footer/index.tsx       | 5 ++++-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/LecueNote/components/Footer/Footer.style.ts b/src/LecueNote/components/Footer/Footer.style.ts
index 9b074b19..621c5ae7 100644
--- a/src/LecueNote/components/Footer/Footer.style.ts
+++ b/src/LecueNote/components/Footer/Footer.style.ts
@@ -1,9 +1,5 @@
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
-  display: flex;
-`;
-
-export const Contents = styled.p`
-  color: blue;
+  margin-bottom: 2rem;
 `;
diff --git a/src/LecueNote/components/Footer/index.tsx b/src/LecueNote/components/Footer/index.tsx
index 4bd7045c..38a8f217 100644
--- a/src/LecueNote/components/Footer/index.tsx
+++ b/src/LecueNote/components/Footer/index.tsx
@@ -1,9 +1,12 @@
+import Button from '../../../components/common/Button';
 import * as S from './Footer.style';
 
 function Footer() {
   return (
     <S.Wrapper>
-      <S.Contents>Footer</S.Contents>
+      <Button variant="complete" disabled={true}>
+        작성 완료
+      </Button>
     </S.Wrapper>
   );
 }

From 493808cf1251366657a478bc8876c74d32413403 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 11 Jan 2024 18:04:22 +0900
Subject: [PATCH 26/30] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B0=80=EB=A6=AC=EB=8A=94=20=ED=98=84=EC=83=81=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/LecueNote/components/CreateNote/CreateNote.style.ts | 2 +-
 src/LecueNote/components/Footer/Footer.style.ts         | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
index 5ef3d1b2..17d0376d 100644
--- a/src/LecueNote/components/CreateNote/CreateNote.style.ts
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -6,7 +6,7 @@ export const Wrapper = styled.section`
 
   width: 100vw;
   padding: 0 1.7rem;
-  margin: 2.4rem 4rem;
+  margin: 7.8rem 4rem;
 
   gap: 3.2rem;
 `;
diff --git a/src/LecueNote/components/Footer/Footer.style.ts b/src/LecueNote/components/Footer/Footer.style.ts
index 621c5ae7..c9e4a94c 100644
--- a/src/LecueNote/components/Footer/Footer.style.ts
+++ b/src/LecueNote/components/Footer/Footer.style.ts
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
   margin-bottom: 2rem;
 `;

From 2fec453c5d904217eb68b6e6000beb7735839cfb Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 12 Jan 2024 20:23:25 +0900
Subject: [PATCH 27/30] =?UTF-8?q?chore:=20=ED=99=95=EC=9E=A5=EC=9E=90=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/constants/{ColorChart.tsx => colorChart.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/LecueNote/constants/{ColorChart.tsx => colorChart.ts} (100%)

diff --git a/src/LecueNote/constants/ColorChart.tsx b/src/LecueNote/constants/colorChart.ts
similarity index 100%
rename from src/LecueNote/constants/ColorChart.tsx
rename to src/LecueNote/constants/colorChart.ts

From 93594ecf6ec32be21c8342315af27f5fa47f859b Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 12 Jan 2024 20:48:57 +0900
Subject: [PATCH 28/30] =?UTF-8?q?chore:=20import=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20key=20props=20?=
 =?UTF-8?q?=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     | 2 +-
 src/LecueNote/components/SelectColor/index.tsx    | 5 +++--
 src/LecueNote/components/ShowColorChart/index.tsx | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx
index da24e979..783b7711 100644
--- a/src/LecueNote/components/CreateNote/index.tsx
+++ b/src/LecueNote/components/CreateNote/index.tsx
@@ -3,7 +3,7 @@ import {
   BG_COLOR_CHART,
   CATEGORY,
   TEXT_COLOR_CHART,
-} from '../../constants/ColorChart';
+} from '../../constants/colorChart';
 import SelectColor from '../SelectColor';
 import WriteNote from '../WriteNote';
 import * as S from './CreateNote.style';
diff --git a/src/LecueNote/components/SelectColor/index.tsx b/src/LecueNote/components/SelectColor/index.tsx
index 33ec42f2..a88032f9 100644
--- a/src/LecueNote/components/SelectColor/index.tsx
+++ b/src/LecueNote/components/SelectColor/index.tsx
@@ -2,10 +2,10 @@ import {
   BG_COLOR_CHART,
   CATEGORY,
   TEXT_COLOR_CHART,
-} from '../../constants/ColorChart';
+} from '../../constants/colorChart';
+import { SelectColorProps } from '../../type/lecueNoteType';
 import ShowColorChart from '../ShowColorChart';
 import * as S from './SelectColor.style';
-import { SelectColorProps } from '../../type/lecueNoteType';
 
 function SelectColor({
   clickedCategory,
@@ -20,6 +20,7 @@ function SelectColor({
         {CATEGORY.map((it) => {
           return (
             <S.Category
+              key={it}
               type="button"
               variant={clickedCategory === it}
               onClick={handleCategoryFn}
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 4d36db8a..3a853cc1 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -5,7 +5,7 @@ function ShowColorChart({ colorChart, state, handleFn }: ShowColorChartProps) {
   return (
     <S.Wrapper>
       {colorChart.map((colorCode) => (
-        <S.ColorWrapper>
+        <S.ColorWrapper key={colorCode}>
           <S.Color
             type="button"
             id={colorCode}

From 4b013b3d46da78566b7426d7e9aa6c9f0f5fd555 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 12 Jan 2024 20:49:17 +0900
Subject: [PATCH 29/30] =?UTF-8?q?style:=20=EC=A0=84=EB=B0=98=EC=A0=81?=
 =?UTF-8?q?=EC=9D=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=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/components/CreateNote/CreateNote.style.ts | 5 ++---
 src/LecueNote/components/Footer/Footer.style.ts         | 5 ++++-
 src/LecueNote/components/WriteNote/WriteNote.style.ts   | 2 +-
 src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts | 2 ++
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/LecueNote/components/CreateNote/CreateNote.style.ts b/src/LecueNote/components/CreateNote/CreateNote.style.ts
index 17d0376d..9fcb1774 100644
--- a/src/LecueNote/components/CreateNote/CreateNote.style.ts
+++ b/src/LecueNote/components/CreateNote/CreateNote.style.ts
@@ -4,9 +4,8 @@ export const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
 
-  width: 100vw;
-  padding: 0 1.7rem;
-  margin: 7.8rem 4rem;
+  width: 100%;
+  margin: 7.8rem 0 3.3rem;
 
   gap: 3.2rem;
 `;
diff --git a/src/LecueNote/components/Footer/Footer.style.ts b/src/LecueNote/components/Footer/Footer.style.ts
index c9e4a94c..8c2bec6b 100644
--- a/src/LecueNote/components/Footer/Footer.style.ts
+++ b/src/LecueNote/components/Footer/Footer.style.ts
@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.footer`
   display: flex;
   justify-content: center;
+  align-items: end;
+
+  width: 100%;
   margin-bottom: 2rem;
 `;
diff --git a/src/LecueNote/components/WriteNote/WriteNote.style.ts b/src/LecueNote/components/WriteNote/WriteNote.style.ts
index 400b4a45..63835995 100644
--- a/src/LecueNote/components/WriteNote/WriteNote.style.ts
+++ b/src/LecueNote/components/WriteNote/WriteNote.style.ts
@@ -9,7 +9,7 @@ export const Wrapper = styled.div`
 
 export const LecueNote = styled.article<{ $bgColor: string }>`
   width: 100%;
-  height: calc(100dvh - 32.5rem);
+  height: calc(100dvh - 33rem);
 
   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 7cdf863c..ca2763b5 100644
--- a/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
+++ b/src/LecueNote/page/LeceuNotePage/LecueNotePage.style.ts
@@ -9,4 +9,6 @@ export const Wrapper = styled.div`
 
   width: 100vw;
   height: 100dvh;
+
+  padding: 0 1.7rem;
 `;

From cae590bd2dae8645e1bdceed0d2dce8bbebc9b24 Mon Sep 17 00:00:00 2001
From: seoAreum <80264647+Arooming@users.noreply.github.com>
Date: Fri, 12 Jan 2024 23:04:24 +0900
Subject: [PATCH 30/30] Update
 src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts

Co-authored-by: Doyun Lee <108219121+doyn511@users.noreply.github.com>
---
 src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
index b2fc8333..b432ee29 100644
--- a/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
+++ b/src/LecueNote/components/ShowColorChart/ShowColorChart.style.ts
@@ -6,7 +6,7 @@ export const Wrapper = styled.div`
   justify-content: flex-start;
   align-items: center;
 
-  padding: 0.5rem 0 0.7rem 0.3rem;
+  padding: 0.5rem 0.1rem 0.7rem 0.3rem;
 
   overflow-x: scroll;