From a63e31d982174822374e544be1f3fb0b9289fcc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:41:09 +0900
Subject: [PATCH 01/42] =?UTF-8?q?refactor(style):=20color=20dark=20<=3D>?=
 =?UTF-8?q?=20light=20=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/style/color.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/style/color.ts b/frontend/src/style/color.ts
index 5a746c9c5..3069030c0 100644
--- a/frontend/src/style/color.ts
+++ b/frontend/src/style/color.ts
@@ -1,4 +1,4 @@
-export const light = {
+export const dark = {
   white: '#ffffff',
   black: '#000000',
 
@@ -91,7 +91,7 @@ export const light = {
   triadic_secondary_900: '#00955c',
 };
 
-export const dark = {
+export const light = {
   white: '#ffffff',
   black: '#000000',
 

From 51f82fa0db5e3e4d1f5a99dc307959d30285d25d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:42:20 +0900
Subject: [PATCH 02/42] =?UTF-8?q?feat(types):=20Tag,=20Category=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=20=ED=83=80=EC=9E=85=EC=97=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/types/category.d.ts | 12 ++++++++++++
 frontend/src/types/tag.d.ts      |  4 ++++
 frontend/src/types/template.ts   | 12 ++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 frontend/src/types/category.d.ts
 create mode 100644 frontend/src/types/tag.d.ts

diff --git a/frontend/src/types/category.d.ts b/frontend/src/types/category.d.ts
new file mode 100644
index 000000000..a9acf4e64
--- /dev/null
+++ b/frontend/src/types/category.d.ts
@@ -0,0 +1,12 @@
+export interface Category {
+  id: number;
+  name: string;
+}
+
+export interface CategoryList {
+  categories: Category[];
+}
+
+export interface CategoryRequest {
+  name: string;
+}
diff --git a/frontend/src/types/tag.d.ts b/frontend/src/types/tag.d.ts
new file mode 100644
index 000000000..21ec96d0e
--- /dev/null
+++ b/frontend/src/types/tag.d.ts
@@ -0,0 +1,4 @@
+export interface Tag {
+  id: number;
+  name: string;
+}
diff --git a/frontend/src/types/template.ts b/frontend/src/types/template.ts
index 6e0977802..b4885412e 100644
--- a/frontend/src/types/template.ts
+++ b/frontend/src/types/template.ts
@@ -1,3 +1,6 @@
+import { Category } from './category';
+import { Tag } from './tag';
+
 export interface Snippet {
   id?: number;
   filename: string;
@@ -8,7 +11,10 @@ export interface Snippet {
 export interface Template {
   id: number;
   title: string;
+  description: string;
   snippets: Snippet[];
+  category: Category;
+  tags: Tag[];
   modifiedAt: string;
 }
 
@@ -28,12 +34,18 @@ export interface TemplateListResponse {
 
 export interface TemplateUploadRequest {
   title: string;
+  description: string;
   snippets: Snippet[];
+  categoryId: number;
+  tags: string[];
 }
 
 export interface TemplateEditRequest {
   title: string;
+  description: string;
   createSnippets: Snippet[];
   updateSnippets: Snippet[];
   deleteSnippetIds: number[];
+  categoryId: number;
+  tags: string[];
 }

From 589f15ddbec6eb8fad3d7b90c880ea79e1b82120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:43:31 +0900
Subject: [PATCH 03/42] =?UTF-8?q?refactor(mocks):=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=20mock=20data=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC,?=
 =?UTF-8?q?=20=ED=83=9C=EA=B7=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/template.json | 33 +++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/src/mocks/template.json b/frontend/src/mocks/template.json
index 538d7733c..de4c02f14 100644
--- a/frontend/src/mocks/template.json
+++ b/frontend/src/mocks/template.json
@@ -1,19 +1,38 @@
 {
   "id": 2024,
-  "title": "회원가입 유효성 검증",
+  "title": "React 컴포넌트 기본 구조",
+  "description": "React 함수형 컴포넌트의 기본 구조와 props 타이핑",
   "snippets": [
     {
-      "id": 305,
-      "filename": "filename1.txt",
-      "content": "import { Flex } from '@/components/Flex';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { monokaiSublime } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nconst Template = () => {\n  const content = '';\n  return (\n    <>\n      <Flex direction='column' justify='flex-start' align='center'>\n        <h1>회원 가입 검증</h1>\n        <span>CodeZap</span>\n\n        <SyntaxHighlighter language='javascript' style={monokaiSublime}>\n          {content}\n        </SyntaxHighlighter>\n      </Flex>\n    </>\n  );\n};\n\nexport default Template",
+      "id": 101,
+      "filename": "MyComponent.tsx",
+      "content": "import React from 'react';\n\ninterface MyComponentProps {\n  name: string;\n  age: number;\n}\n\nconst MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {\n  return (\n    <div>\n      <h1>Hello, {name}!</h1>\n      <p>You are {age} years old.</p>\n    </div>\n  );\n};\n\nexport default MyComponent;",
       "ordinal": 1
     },
     {
-      "id": 306,
-      "filename": "filename2.java",
-      "content": "import { Flex } from '@/components/Flex';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { monokaiSublime } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nconst Template = () => {\n  const content = '';\n  return (\n    <>\n      <Flex direction='column' justify='flex-start' align='center'>\n        <h1>회원 가입 검증</h1>\n        <span>CodeZap</span>\n\n        <SyntaxHighlighter language='javascript' style={monokaiSublime}>\n          {content}\n        </SyntaxHighlighter>\n      </Flex>\n    </>\n  );\n};\n\nexport default Template",
+      "id": 102,
+      "filename": "App.tsx",
+      "content": "import React from 'react';\nimport MyComponent from './MyComponent';\n\nconst App: React.FC = () => {\n  return (\n    <div>\n      <MyComponent name=\"John Doe\" age={30} />\n    </div>\n  );\n};\n\nexport default App;",
       "ordinal": 2
     }
   ],
+  "category": {
+    "id": 2,
+    "name": "React"
+  },
+  "tags": [
+    {
+      "id": 1,
+      "name": "typescript"
+    },
+    {
+      "id": 2,
+      "name": "component"
+    },
+    {
+      "id": 3,
+      "name": "functional"
+    }
+  ],
   "modifiedAt": "2024-07-11 12:34"
 }

From f2c54d124b92201b04ee3311cdab6900dfc3a78b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:43:51 +0900
Subject: [PATCH 04/42] =?UTF-8?q?feat(mocks):=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20mock=20data=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/categoryList.json | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 frontend/src/mocks/categoryList.json

diff --git a/frontend/src/mocks/categoryList.json b/frontend/src/mocks/categoryList.json
new file mode 100644
index 000000000..3c50e747d
--- /dev/null
+++ b/frontend/src/mocks/categoryList.json
@@ -0,0 +1,20 @@
+{
+  "categories": [
+    {
+      "id": 1,
+      "name": "카테고리 없음"
+    },
+    {
+      "id": 2,
+      "name": "카테고리1"
+    },
+    {
+      "id": 3,
+      "name": "카테고리2"
+    },
+    {
+      "id": 4,
+      "name": "카테고리3"
+    }
+  ]
+}

From 80a4be29000eaa36b7da76218b3620e55cca48f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:45:31 +0900
Subject: [PATCH 05/42] =?UTF-8?q?refactor(api):=20customFetch=20console.er?=
 =?UTF-8?q?ror(error)=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/customFetch.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/api/customFetch.ts b/frontend/src/api/customFetch.ts
index 848578e8f..11f3e880f 100644
--- a/frontend/src/api/customFetch.ts
+++ b/frontend/src/api/customFetch.ts
@@ -35,6 +35,7 @@ export const customFetch = async ({
 
     return data;
   } catch (error) {
+    console.error(error);
     throw new Error(errorMessage);
   }
 };

From 7d8ec71a306b6dc6e8e7a98d9eb347f8fe622853 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:46:40 +0900
Subject: [PATCH 06/42] =?UTF-8?q?feat(api):=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20api=20=EC=97=B0=EA=B2=B0=20=ED=95=A8=EC=88=98=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

---
 frontend/src/api/category.ts  | 18 ++++++++++++++++++
 frontend/src/api/index.ts     |  1 +
 frontend/src/api/queryKeys.ts |  1 +
 3 files changed, 20 insertions(+)
 create mode 100644 frontend/src/api/category.ts

diff --git a/frontend/src/api/category.ts b/frontend/src/api/category.ts
new file mode 100644
index 000000000..f8cf8b650
--- /dev/null
+++ b/frontend/src/api/category.ts
@@ -0,0 +1,18 @@
+import { CategoryList, CategoryRequest } from '@/types/category';
+import { customFetch } from './customFetch';
+
+const API_URL = process.env.REACT_APP_API_URL;
+
+export const CATEGORY_API_URL = `${API_URL}/categories`;
+
+export const getCategoryList = async (): Promise<CategoryList> =>
+  await customFetch({
+    url: `${CATEGORY_API_URL}`,
+  });
+
+export const postCategory = async (newCategory: CategoryRequest) =>
+  await customFetch({
+    method: 'POST',
+    url: `${CATEGORY_API_URL}`,
+    body: JSON.stringify(newCategory),
+  });
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index b23ac44fe..94277e752 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,3 +1,4 @@
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export { TEMPLATE_API_URL, getTemplateList, getTemplate, postTemplate } from './templates';
+export { CATEGORY_API_URL, getCategoryList, postCategory } from './category';
diff --git a/frontend/src/api/queryKeys.ts b/frontend/src/api/queryKeys.ts
index 59c59a78e..3c4bffd41 100644
--- a/frontend/src/api/queryKeys.ts
+++ b/frontend/src/api/queryKeys.ts
@@ -1,4 +1,5 @@
 export const QUERY_KEY = {
   TEMPLATE: 'template',
   TEMPLATE_LIST: 'templateList',
+  CATEGORY: 'category',
 };

From 401166582f51a71d8e6df34bb6026f2cd3314e5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:49:34 +0900
Subject: [PATCH 07/42] =?UTF-8?q?refactor(api):=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=20=EB=93=B1=EB=A1=9D=20=ED=9B=84=20=EB=B0=94=EB=A1=9C?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=EC=9D=84=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=B4=20postTemplate=20return=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/templates.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
index 5909a4f1d..f570253a0 100644
--- a/frontend/src/api/templates.ts
+++ b/frontend/src/api/templates.ts
@@ -15,13 +15,12 @@ export const getTemplate = async (id: number): Promise<Template> =>
     url: `${TEMPLATE_API_URL}/${id}`,
   });
 
-export const postTemplate = async (newTemplate: TemplateUploadRequest): Promise<void> => {
+export const postTemplate = async (newTemplate: TemplateUploadRequest) =>
   await customFetch({
     method: 'POST',
     url: `${TEMPLATE_API_URL}`,
     body: JSON.stringify(newTemplate),
   });
-};
 
 export const editTemplate = async ({ id, template }: { id: number; template: TemplateEditRequest }): Promise<void> => {
   await customFetch({

From 356eb5edb711172648f4aec53019a66198b47fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:50:25 +0900
Subject: [PATCH 08/42] =?UTF-8?q?feat(Dropdown):=20Dropdown=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

---
 frontend/src/assets/images/chevron.png        | Bin 0 -> 368 bytes
 .../components/Dropdown/Dropdown.stories.tsx  |  37 +++++++++
 .../src/components/Dropdown/Dropdown.style.ts |  45 +++++++++++
 frontend/src/components/Dropdown/Dropdown.tsx |  75 ++++++++++++++++++
 4 files changed, 157 insertions(+)
 create mode 100644 frontend/src/assets/images/chevron.png
 create mode 100644 frontend/src/components/Dropdown/Dropdown.stories.tsx
 create mode 100644 frontend/src/components/Dropdown/Dropdown.style.ts
 create mode 100644 frontend/src/components/Dropdown/Dropdown.tsx

diff --git a/frontend/src/assets/images/chevron.png b/frontend/src/assets/images/chevron.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ce5f6516d3d56571cd66d6ab7f6cca127ca5571
GIT binary patch
literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~!m9IK~`V@L(#+ewaGO#vdV``v!8NHyV<X}u6P
zo8^*6#wDX7$;KsrPdiVTQ1k1)G|P930GGYb8x#ecI22n1oKDQ2lqt9C-aG#}=6APg
zoOTwL*%{J**DOCfX1@RNzjr=Y23$O@{N~=r!=W-9emtLU99qT}>TtW%RqWR><0PH_
zwZ3<*>{<S+HDy5`bEV9QM-CY}^~*JXZqkuDyZaS`<feX)iR|4>DHrsVLgjS$COrJY
z!CkpQ%Yo&Zd&J4+tBgvUYz_s<sjzlTusakbr^4QGqo$?Z#(<MyztWy3jgbs9x+;$T
zj{9`LgrUa$!My1<2K)?<IV3+$oStuO=<?u}_dJL%CLLkdc4OsP{q6xMY#BUV{an^L
HB{Ts5tyhZY

literal 0
HcmV?d00001

diff --git a/frontend/src/components/Dropdown/Dropdown.stories.tsx b/frontend/src/components/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 000000000..a67077df2
--- /dev/null
+++ b/frontend/src/components/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useDropdown } from '@/hooks/utils/useDropdown';
+import Dropdown from './Dropdown';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Dropdown',
+  component: Dropdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  args: {
+    currentValue: '',
+  },
+
+  render: () => {
+    const options = ['보기1', '보기2', '보기3'];
+    const { isOpen, toggleDropdown, currentValue, handleCurrentValue, dropdownRef } =
+      useDropdown<string>('선택해주세요');
+
+    const props = {
+      isOpen,
+      dropdownRef,
+      toggleDropdown,
+      options,
+      getOptionLabel: (string: string) => string,
+      currentValue,
+      handleCurrentValue,
+    };
+
+    return <Dropdown {...props} />;
+  },
+};
diff --git a/frontend/src/components/Dropdown/Dropdown.style.ts b/frontend/src/components/Dropdown/Dropdown.style.ts
new file mode 100644
index 000000000..8a084c5b8
--- /dev/null
+++ b/frontend/src/components/Dropdown/Dropdown.style.ts
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+export const DropdownContainer = styled.div`
+  font-size: '0.875rem';
+`;
+
+export const Wrapper = styled.div`
+  width: 10rem;
+  background-color: white;
+  border: 1px solid #788496;
+  border-radius: 8px;
+`;
+
+export const SelectedButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  padding: 0.75rem;
+
+  border-radius: 8px;
+`;
+
+export const OptionList = styled.ul`
+  position: absolute;
+  z-index: 1;
+
+  width: 10rem;
+  margin: 2px 0 0 0;
+
+  background-color: white;
+  border: 1px solid #788496;
+  border-radius: 8px;
+`;
+
+export const Option = styled.li`
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 7px;
+  &:hover {
+    color: ${({ theme }) => theme.color.light.white};
+    background-color: ${({ theme }) => theme.color.light.primary_500};
+  }
+`;
diff --git a/frontend/src/components/Dropdown/Dropdown.tsx b/frontend/src/components/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..c39711bd3
--- /dev/null
+++ b/frontend/src/components/Dropdown/Dropdown.tsx
@@ -0,0 +1,75 @@
+import { chevron } from '@/assets/images';
+import * as S from './Dropdown.style';
+
+interface Props<T> {
+  dropdownRef: React.MutableRefObject<HTMLDivElement | null>;
+  isOpen: boolean;
+  toggleDropdown: () => void;
+  options: T[];
+  getOptionLabel: (option: T) => string;
+  currentValue: T;
+  handleCurrentValue: (value: T) => void;
+  replaceChildrenWhenIsOpen?: React.ReactNode;
+}
+
+const Dropdown = <T,>({
+  dropdownRef,
+  isOpen,
+  toggleDropdown,
+  options,
+  getOptionLabel,
+  currentValue,
+  handleCurrentValue,
+  replaceChildrenWhenIsOpen,
+}: Props<T>) => (
+  <S.DropdownContainer ref={dropdownRef}>
+    <S.Wrapper>
+      {isOpen ? (
+        replaceChildrenWhenIsOpen || (
+          <SelectedButton
+            isOpen={isOpen}
+            toggleDropdown={toggleDropdown}
+            getOptionLabel={getOptionLabel}
+            currentValue={currentValue}
+          />
+        )
+      ) : (
+        <SelectedButton
+          isOpen={isOpen}
+          toggleDropdown={toggleDropdown}
+          getOptionLabel={getOptionLabel}
+          currentValue={currentValue}
+        />
+      )}
+    </S.Wrapper>
+    {isOpen && (
+      <S.OptionList>
+        {options?.map((option, idx) => (
+          <S.Option key={idx} onClick={() => handleCurrentValue(option)}>
+            {getOptionLabel(option)}
+          </S.Option>
+        ))}
+      </S.OptionList>
+    )}
+  </S.DropdownContainer>
+);
+
+export default Dropdown;
+
+type SelectedButtonProps<T> = Pick<Props<T>, 'toggleDropdown' | 'getOptionLabel' | 'currentValue' | 'isOpen'>;
+
+const SelectedButton = <T,>({ toggleDropdown, getOptionLabel, currentValue, isOpen }: SelectedButtonProps<T>) => (
+  <S.SelectedButton onClick={toggleDropdown}>
+    {getOptionLabel(currentValue)}
+    <img
+      src={chevron}
+      width={24}
+      height={24}
+      alt=''
+      css={{
+        transition: 'transform 0.3s ease',
+        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+      }}
+    />
+  </S.SelectedButton>
+);

From 9e8de895528448bb953a8b0761888c02fdd07b91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:52:03 +0900
Subject: [PATCH 09/42] =?UTF-8?q?feat(src):=20HeaderContext=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20headerRef=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.tsx   |  4 +--
 frontend/src/components/Layout/Layout.tsx   | 29 +++++++++++++++------
 frontend/src/context/HeaderContext.tsx      | 14 ++++++++++
 frontend/src/hooks/utils/useHeaderHeight.ts | 13 +++++++++
 frontend/src/index.tsx                      |  7 +++--
 5 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/context/HeaderContext.tsx
 create mode 100644 frontend/src/hooks/utils/useHeaderHeight.ts

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index 96e45eb0e..ea7b26359 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -5,8 +5,8 @@ import { Flex, Heading, Text } from '@/components';
 import { theme } from '../../style/theme';
 import * as S from './Header.style';
 
-const Header = () => (
-  <S.HeaderContainer>
+const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) => (
+  <S.HeaderContainer ref={headerRef}>
     <S.HeaderContentContainer>
       <Logo />
 
diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
index e5f99b131..3f4533167 100644
--- a/frontend/src/components/Layout/Layout.tsx
+++ b/frontend/src/components/Layout/Layout.tsx
@@ -1,15 +1,28 @@
+import { useEffect, useRef } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { Header } from '@/components';
+import { useHeaderHeight } from '@/hooks/utils/useHeaderHeight';
 import * as S from './Layout.style';
 
-const Layout = () => (
-  <S.LayoutContainer>
-    <Header />
-    <S.Wrapper>
-      <Outlet />
-    </S.Wrapper>
-  </S.LayoutContainer>
-);
+const Layout = () => {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const { setHeaderHeight } = useHeaderHeight();
+
+  useEffect(() => {
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight);
+    }
+  }, [setHeaderHeight]);
+
+  return (
+    <S.LayoutContainer>
+      <Header headerRef={headerRef} />
+      <S.Wrapper>
+        <Outlet />
+      </S.Wrapper>
+    </S.LayoutContainer>
+  );
+};
 
 export default Layout;
diff --git a/frontend/src/context/HeaderContext.tsx b/frontend/src/context/HeaderContext.tsx
new file mode 100644
index 000000000..da4a0384c
--- /dev/null
+++ b/frontend/src/context/HeaderContext.tsx
@@ -0,0 +1,14 @@
+import { createContext, useState, PropsWithChildren } from 'react';
+
+type HeaderContextType = {
+  headerHeight: number;
+  setHeaderHeight: (height: number) => void;
+};
+
+export const HeaderContext = createContext<HeaderContextType | undefined>(undefined);
+
+export const HeaderProvider = ({ children }: PropsWithChildren) => {
+  const [headerHeight, setHeaderHeight] = useState(0);
+
+  return <HeaderContext.Provider value={{ headerHeight, setHeaderHeight }}>{children}</HeaderContext.Provider>;
+};
diff --git a/frontend/src/hooks/utils/useHeaderHeight.ts b/frontend/src/hooks/utils/useHeaderHeight.ts
new file mode 100644
index 000000000..10f6bbb67
--- /dev/null
+++ b/frontend/src/hooks/utils/useHeaderHeight.ts
@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { HeaderContext } from '@/context/HeaderContext';
+
+export const useHeaderHeight = () => {
+  const context = useContext(HeaderContext);
+
+  if (context === undefined) {
+    throw new Error('useHeaderHeight must be used within a HeaderProvider');
+  }
+
+  return context;
+};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 851bc6e7e..de1c13db1 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
+import { HeaderProvider } from './context/HeaderContext';
 import router from './routes/router';
 import GlobalStyles from './style/GlobalStyles';
 import { theme } from './style/theme';
@@ -27,8 +28,10 @@ enableMocking().then(() => {
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <GlobalStyles />
-          <RouterProvider router={router} />
+          <HeaderProvider>
+            <GlobalStyles />
+            <RouterProvider router={router} />
+          </HeaderProvider>
         </ThemeProvider>
       </QueryClientProvider>
     </React.StrictMode>,

From ab824e86bdaf12d21289e6614beacf54e1e27057 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:52:59 +0900
Subject: [PATCH 10/42] =?UTF-8?q?refactor(style):=20GlobalStyle=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20css=20reset=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/style/GlobalStyles.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/style/GlobalStyles.tsx b/frontend/src/style/GlobalStyles.tsx
index b639128d5..b91701953 100644
--- a/frontend/src/style/GlobalStyles.tsx
+++ b/frontend/src/style/GlobalStyles.tsx
@@ -31,6 +31,7 @@ const globalStyles = css`
 
     font: inherit;
     vertical-align: baseline;
+    list-style: none;
 
     border: 0;
   }
@@ -39,8 +40,6 @@ const globalStyles = css`
     font-family: 'Pretendard', sans-serif;
     line-height: '100%';
     color: ${theme.color.dark.secondary_800};
-    list-style: none;
-
     background-color: ${theme.mode === 'dark' ? theme.color.dark.tertiary_900 : theme.color.light.white};
   }
 
@@ -48,6 +47,15 @@ const globalStyles = css`
     color: inherit;
     text-decoration: none;
   }
+
+  button {
+    padding: 0;
+
+    background: inherit;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
 `;
 
 const GlobalStyles = () => <Global styles={globalStyles} />;

From 5402cd8f59300fb08ccddc2f4898a246fd0383d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:54:13 +0900
Subject: [PATCH 11/42] feat(utils): removeAllWhitespace

---
 frontend/src/utils/removeAllWhitespace.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 frontend/src/utils/removeAllWhitespace.ts

diff --git a/frontend/src/utils/removeAllWhitespace.ts b/frontend/src/utils/removeAllWhitespace.ts
new file mode 100644
index 000000000..376c8dbbb
--- /dev/null
+++ b/frontend/src/utils/removeAllWhitespace.ts
@@ -0,0 +1 @@
+export const removeAllWhitespace = (str: string) => str.replace(/\s/g, '');

From d57fc8550656a40af7f61832deb9ba7f842cf0d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:55:41 +0900
Subject: [PATCH 12/42] =?UTF-8?q?feat(asset):=20=ED=83=9C=EA=B7=B8=20x=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20index=EC=97=90=EC=84=9C=20export?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/images/index.ts     |   2 ++
 frontend/src/assets/images/x_circle.png | Bin 0 -> 1380 bytes
 2 files changed, 2 insertions(+)
 create mode 100644 frontend/src/assets/images/x_circle.png

diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts
index 632d6d2fb..a8209c834 100644
--- a/frontend/src/assets/images/index.ts
+++ b/frontend/src/assets/images/index.ts
@@ -4,3 +4,5 @@ export { default as pencilIcon } from './pencil.png';
 export { default as searchIcon } from './search.png';
 export { default as trashcanIcon } from './trashcan.png';
 export { default as userMenuIcon } from './userMenu_38x38.png';
+export { default as chevron } from './chevron.png';
+export { default as xCircle } from './x_circle.png';
diff --git a/frontend/src/assets/images/x_circle.png b/frontend/src/assets/images/x_circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..58f22d16ed5dd5e24d99be3e66789d8c4fb5eefd
GIT binary patch
literal 1380
zcmV-q1)KVbP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1o=rsK~#7F?O9E7
z8aWhxl9~yV%7P=bPY`=Ki?Lxb<soG|<^*9*VCMwj6U1|Z!6)d9?HZRo3j<!v(%c{%
zfvQXr%Cw}sr*5!;{!!E5P53sbX|?oy($jm=6Tlj4{McZyB6!|?saPDAs5~4N2esPP
z09Jsd2q3b~tN%Bd(r-2BGBD<XhSE$=B%sGM^b|nnV0Zf?ECIO$cvt_q1wJ~`4C-@)
z(|aCZ=O2YEoK&m7^kG3PB!EU-y!_n2kB?_sYcmCZD+YbRM4wA;%ti@Sl3Kb9^d`>E
z4vH;Lea4`*sF2J8F8;kMgVx@7#F11VH2ZV(O}1*aij|#vSGTSJQRZAXG%z=42l{AQ
z@3Wd#CIJ`McMSmD48GI@rr62e@7t%41Ls%W`commS#$rlUr%hmw-zu(9(2!9s#dL5
z`mhAhj5vbhtg=n>M+OmA0-lmbFLQRVyHkf1;QYGNV!+;+2TKvD0?x0yhgiv@@+!$c
z_BSP>f+E^U^%DhzZt_+GxMVi_yE|L(47j-I+><%c!XAB<TS?A=CpA<MqXv;DPeV2j
z&jep$Ul=E-Z}CbrlIq6J0FA!GN1v#y75s5f-EP4%;_{#Fu@>-w%8n{*#Knl%8KBXp
zUmE>1@)X!018nN=z1coBF$UqYhvT?<u>x@V4(V5+uZI*AUVgs6yzYLw!dXkJYt~g*
z-}7#hg<ya*zl^<$s~ahRJkL1N7C^QkiO?-ItVysdalt2vm~je_7P&_+WGgJ<X3^OM
zTLGNGTT{TjO<J(3RVss#QWcu+BoR-^Q(b}IKnkdB;$R-6I*jBR^(Th)K&{ptus{t(
zCW(k5ZyUvFa~Lw+0b2pc+zo~Fz!GsH@{lLc&NiULT(A*fY&x`m!DJsYAWB3Y@`i&i
z#`Q~43weG9hK~mmE+O+Va8^Vf@`MNeFyT-vf`x#kpa|13l7;^*A3UP(iDD%(9ur}H
z!KQhqG&tb6<MMDgZxM3>Lf2&~N-bQ-L7vRU#>FN<b3Go!K~&s`F(KABFEs_6#mSS+
zr@7cPm~*r#1ltNb0ZJMFuXz~I79>A@pGyQK0gRAnmmV!Z^Wb2O*@M*m3c|)!Mu|vk
zn+9f_!B9F3Xf^`;qTd^@gTl|E4oRJadm$TFIVFPW)PWIVR1S-SxNJqF0JD&lJ~Iyt
zjvxV4cW-xRWAs&R+4y-Q0_*x;)JEE74%c9?rDqVEYDqZIV5WeJ;6S4>Uz0O^k`)&>
zcSqQ<>C;hiBW`eF0~w7JHemMSI0B7DeE6au+h<xIhkdt_W;QVr`!7^8Tni<iKX~v=
zaJcVHoPv~z2dYE?W-Uk-9_HER<xTf5STTY=0^hGBd!M$hQujjpRm{sMZAJmtLVcAY
zsBP*ac+w{aZ_@Lm_Nm3IP7{x6VTyxNi$B%!q{W{i$bk6Xc;tyZ=AfE3-&*fR_p8`o
zI1^+}6o}4mx^>72@-~hb-7iAkFoBGq13w4-VJa=o;G`f6ZQB_MZ*-3EMyDPe@WEue
zLGqe0*$i0hf`jt=oHr*q%*WQ+bdIK@XygS4XRq;ndG>;X+_nErHEr(~rn}66i4e+S
zXqNGc2}fMPnWNQdo;3Z^ZYfPJ3G^X~c@1P1vx0~)nj4bt&}Pve`n^R)d=@LbX1&F0
m)?#?gIvgy6>>6vVF^}(g-U=AdwPR-h0000<MNUMnLSTZ!jCKqF

literal 0
HcmV?d00001


From 843eeff500b50ad21b20c21db9fd2f36d095c287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:56:30 +0900
Subject: [PATCH 13/42] feat(TagInput): TagInput

---
 .../src/components/TagInput/TagInput.style.ts | 15 +++++
 frontend/src/components/TagInput/TagInput.tsx | 67 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 frontend/src/components/TagInput/TagInput.style.ts
 create mode 100644 frontend/src/components/TagInput/TagInput.tsx

diff --git a/frontend/src/components/TagInput/TagInput.style.ts b/frontend/src/components/TagInput/TagInput.style.ts
new file mode 100644
index 000000000..dd9cbc408
--- /dev/null
+++ b/frontend/src/components/TagInput/TagInput.style.ts
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const Tag = styled.span`
+  display: inline-block;
+  align-items: center;
+
+  max-width: 100%;
+  padding: 0.25rem 0.75rem;
+
+  word-break: break-word;
+
+  background-color: ${({ theme }) => theme.color.light.tertiary_50};
+  border: 1px solid ${({ theme }) => theme.color.light.tertiary_200};
+  border-radius: 40px;
+`;
diff --git a/frontend/src/components/TagInput/TagInput.tsx b/frontend/src/components/TagInput/TagInput.tsx
new file mode 100644
index 000000000..884d9440b
--- /dev/null
+++ b/frontend/src/components/TagInput/TagInput.tsx
@@ -0,0 +1,67 @@
+import { xCircle } from '@/assets/images';
+import { removeAllWhitespace } from '@/utils/removeAllWhitespace';
+import Flex from '../Flex/Flex';
+import Input from '../Input/Input';
+import * as S from './TagInput.style';
+
+interface Props {
+  value: string;
+  handleValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  resetValue: () => void;
+  tags: string[];
+  setTags: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const TagInput = ({ value, handleValue, resetValue, tags, setTags }: Props) => {
+  const handleSpaceBarAndEnterKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      addTag();
+      resetValue();
+    }
+  };
+
+  const addTag = () => {
+    if (removeAllWhitespace(value) === '') {
+      return;
+    }
+
+    setTags((prev) => [...prev, removeAllWhitespace(value)]);
+  };
+
+  return (
+    <Flex
+      justify='center'
+      align='center'
+      css={{
+        width: '100%',
+        flexWrap: 'wrap',
+        borderBottom: 'solid 1px #788496',
+      }}
+    >
+      <Flex gap='0.125rem' css={{ flexWrap: 'wrap', width: '100%' }}>
+        {tags?.map((tag, idx) => (
+          <S.Tag
+            key={idx}
+            onClick={() => {
+              setTags((prev) => prev.filter((el) => el !== tag));
+            }}
+          >
+            {tag}
+            <img src={xCircle} width={12} height={12} alt='' />
+          </S.Tag>
+        ))}
+      </Flex>
+      <Input>
+        <Input.TextField
+          placeholder='태그를 입력해주세요'
+          value={value}
+          onChange={handleValue}
+          onKeyUpCapture={handleSpaceBarAndEnterKeydown}
+          onBlur={() => resetValue()}
+        />
+      </Input>
+    </Flex>
+  );
+};
+
+export default TagInput;

From 9ba389cdbdf7533f3abb030dcee4015dd5a3437b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:57:31 +0900
Subject: [PATCH 14/42] =?UTF-8?q?refactor(Input):=20focus=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=9D=BC=20=EB=95=8C=20placeholder=20color=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Input/Input.style.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/Input/Input.style.ts b/frontend/src/components/Input/Input.style.ts
index 8bfe7d91c..5db1dca69 100644
--- a/frontend/src/components/Input/Input.style.ts
+++ b/frontend/src/components/Input/Input.style.ts
@@ -90,9 +90,6 @@ export const TextField = styled.input<TextFieldProps>`
 
   &:focus {
     outline: none;
-    &::placeholder {
-      color: transparent;
-    }
   }
 
   &:disabled {

From beb994ef49229053e27c9990af120e55d5c69462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:59:05 +0900
Subject: [PATCH 15/42] =?UTF-8?q?refactor(SelectList):=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SelectList/style.ts | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/style.ts
index 40a52fb3a..830ef01a0 100644
--- a/frontend/src/components/SelectList/style.ts
+++ b/frontend/src/components/SelectList/style.ts
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { theme } from '@/style/theme';
 import type { OptionProps } from './SelectList';
 
 export const SelectListContainer = styled.div`
@@ -7,9 +8,9 @@ export const SelectListContainer = styled.div`
 
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
+  gap: 0.5rem;
 
-  border-radius: 0.8rem;
+  border-radius: 8px;
 
   transition: all 0.2s ease-in-out;
 
@@ -19,10 +20,10 @@ export const SelectListContainer = styled.div`
   }
 
   &:hover a {
-    width: 24rem;
-    height: 3.2rem;
+    width: 11rem;
+    height: 3rem;
     padding: 0 0.8rem;
-    border-radius: 0.8rem;
+    border-radius: 8px;
   }
 
   &:hover .select-list-text {
@@ -31,12 +32,12 @@ export const SelectListContainer = styled.div`
     transition: all 0.3s ease-in-out;
   }
 
-  @media (min-width: 86rem) {
+  @media (min-width: 80rem) {
     gap: 0;
     background: #fff;
     a {
-      width: 24rem;
-      height: 3.2rem;
+      width: 11rem;
+      height: 3rem;
       padding: 0 0.8rem;
       border-radius: 0.8rem;
     }
@@ -58,13 +59,14 @@ export const SelectListOption = styled.a<OptionProps>`
 
   text-decoration: none;
 
-  background-color: ${({ isSelected, theme }) => (isSelected ? theme.color.dark.primary_100 : theme.color.dark.white)};
+  background-color: ${({ isSelected, theme }) =>
+    isSelected ? theme.color.light.primary_100 : theme.color.light.secondary_50};
   border-radius: 50%;
 
   transition: all 0.2s ease-in-out;
 
   &:hover {
-    background: ${({ isSelected }) => isSelected || '#eee'};
+    background: ${({ isSelected }) => isSelected || theme.color.light.primary_50};
   }
 `;
 

From 6121b3d604db43146cefc7c62d620ea460eb4dbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 17:59:44 +0900
Subject: [PATCH 16/42] feat(hooks): useInput

---
 frontend/src/hooks/utils/useInput.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 frontend/src/hooks/utils/useInput.ts

diff --git a/frontend/src/hooks/utils/useInput.ts b/frontend/src/hooks/utils/useInput.ts
new file mode 100644
index 000000000..f677cdc94
--- /dev/null
+++ b/frontend/src/hooks/utils/useInput.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export const useInput = (initValue: string = '') => {
+  const [value, setValue] = useState(initValue);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value);
+
+  const resetValue = () => {
+    setValue('');
+  };
+
+  return [value, handleChange, resetValue] as const;
+};

From 696dd329038f93d38f60ded5ecab572d79d38ae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:00:01 +0900
Subject: [PATCH 17/42] feat(hooks): useScrollToTargetElement

---
 .../hooks/utils/useScrollToTargetElement.ts   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 frontend/src/hooks/utils/useScrollToTargetElement.ts

diff --git a/frontend/src/hooks/utils/useScrollToTargetElement.ts b/frontend/src/hooks/utils/useScrollToTargetElement.ts
new file mode 100644
index 000000000..bfef744d5
--- /dev/null
+++ b/frontend/src/hooks/utils/useScrollToTargetElement.ts
@@ -0,0 +1,19 @@
+import { useHeaderHeight } from './useHeaderHeight';
+
+export const useScrollToTargetElement = () => {
+  const { headerHeight } = useHeaderHeight();
+
+  const scrollToTargetElement = (targetElement: HTMLDivElement | null) => {
+    if (targetElement) {
+      const elementPosition = targetElement.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.scrollY - headerHeight;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  return scrollToTargetElement;
+};

From 956e942b77629fda8042abafd7688fc55c70ca16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:00:23 +0900
Subject: [PATCH 18/42] feat(hooks): useDropdown

---
 frontend/src/hooks/utils/useDropdown.ts | 35 +++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 frontend/src/hooks/utils/useDropdown.ts

diff --git a/frontend/src/hooks/utils/useDropdown.ts b/frontend/src/hooks/utils/useDropdown.ts
new file mode 100644
index 000000000..56b987be6
--- /dev/null
+++ b/frontend/src/hooks/utils/useDropdown.ts
@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useDropdown = <T>(initValue: T) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentValue, setCurrentValue] = useState<T>(initValue);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const toggleDropdown = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleCurrentValue = useCallback((newValue: T) => {
+    setCurrentValue(newValue);
+    setIsOpen(false);
+  }, []);
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && isOpen) {
+        setIsOpen(false);
+      }
+    },
+    [isOpen],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  return { isOpen, toggleDropdown, currentValue, handleCurrentValue, dropdownRef };
+};

From 1a797349dccbf3d8f54904f7d2efe57ceb3537af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:03:01 +0900
Subject: [PATCH 19/42] feat(hooks): useCategoryQuery

---
 .../category/query/useCategoryQuery.spec.tsx  | 22 +++++++++++++++++++
 .../hooks/category/query/useCategoryQuery.ts  | 10 +++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 frontend/src/hooks/category/query/useCategoryQuery.spec.tsx
 create mode 100644 frontend/src/hooks/category/query/useCategoryQuery.ts

diff --git a/frontend/src/hooks/category/query/useCategoryQuery.spec.tsx b/frontend/src/hooks/category/query/useCategoryQuery.spec.tsx
new file mode 100644
index 000000000..e95d6e08a
--- /dev/null
+++ b/frontend/src/hooks/category/query/useCategoryQuery.spec.tsx
@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+
+import { useCategoryQuery } from './useCategoryQuery';
+
+const queryClient = new QueryClient();
+
+const queryWrapper = ({ children }: PropsWithChildren) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useCategoryQuery', () => {
+  it('category를 조회할 수 있다.', async () => {
+    const { result } = renderHook(() => useCategoryQuery(), { wrapper: queryWrapper });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+      expect(result.current.data?.categories[0].name).toBe('카테고리 없음');
+    });
+  });
+});
diff --git a/frontend/src/hooks/category/query/useCategoryQuery.ts b/frontend/src/hooks/category/query/useCategoryQuery.ts
new file mode 100644
index 000000000..9ecf7bc06
--- /dev/null
+++ b/frontend/src/hooks/category/query/useCategoryQuery.ts
@@ -0,0 +1,10 @@
+import { UseQueryResult, useQuery } from '@tanstack/react-query';
+
+import { QUERY_KEY, getCategoryList } from '@/api';
+import { CategoryList } from '@/types/category';
+
+export const useCategoryQuery = (): UseQueryResult<CategoryList, Error> =>
+  useQuery<CategoryList, Error>({
+    queryKey: [QUERY_KEY.CATEGORY],
+    queryFn: () => getCategoryList(),
+  });

From 0da5791fd7866eb738d31fa8a63798908a7e42c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:04:38 +0900
Subject: [PATCH 20/42] =?UTF-8?q?refactor(hooks):=20useTemplateQuery,=20us?=
 =?UTF-8?q?eTemplateUploadQuery,=20useTemplateEditQuery=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/template/useTemplateEditQuery.spec.tsx   | 3 +++
 frontend/src/hooks/template/useTemplateQuery.spec.tsx       | 2 +-
 frontend/src/hooks/template/useTemplateUploadQuery.spec.tsx | 6 +++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/hooks/template/useTemplateEditQuery.spec.tsx b/frontend/src/hooks/template/useTemplateEditQuery.spec.tsx
index ee66257c6..410fe49bd 100644
--- a/frontend/src/hooks/template/useTemplateEditQuery.spec.tsx
+++ b/frontend/src/hooks/template/useTemplateEditQuery.spec.tsx
@@ -17,6 +17,7 @@ describe('useTemplateEditQuery', () => {
 
     const template: TemplateEditRequest = {
       title: 'editTemplate',
+      description: '',
       createSnippets: [],
       updateSnippets: [
         {
@@ -26,6 +27,8 @@ describe('useTemplateEditQuery', () => {
         },
       ],
       deleteSnippetIds: [],
+      categoryId: 1,
+      tags: [],
     };
 
     await result.current.mutateAsync({ id: 2024, template });
diff --git a/frontend/src/hooks/template/useTemplateQuery.spec.tsx b/frontend/src/hooks/template/useTemplateQuery.spec.tsx
index f6a5c01d4..aa2735a16 100644
--- a/frontend/src/hooks/template/useTemplateQuery.spec.tsx
+++ b/frontend/src/hooks/template/useTemplateQuery.spec.tsx
@@ -16,7 +16,7 @@ describe('useTemplateQuery', () => {
     await waitFor(() => {
       expect(result.current.isSuccess).toBe(true);
       expect(result.current.data?.id).toBe(2024);
-      expect(result.current.data?.title).toBe('회원가입 유효성 검증');
+      expect(result.current.data?.title).toBe('React 컴포넌트 기본 구조');
     });
   });
 });
diff --git a/frontend/src/hooks/template/useTemplateUploadQuery.spec.tsx b/frontend/src/hooks/template/useTemplateUploadQuery.spec.tsx
index 2382c44ff..c39ed16c4 100644
--- a/frontend/src/hooks/template/useTemplateUploadQuery.spec.tsx
+++ b/frontend/src/hooks/template/useTemplateUploadQuery.spec.tsx
@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { TemplateUploadRequest } from '@/types/template';
 import { useTemplateUploadQuery } from './useTemplateUploadQuery';
 
 const queryClient = new QueryClient();
@@ -13,8 +14,11 @@ describe('useTemplateUploadQuery', () => {
   it('template을 생성할 수 있다.', async () => {
     const { result } = renderHook(() => useTemplateUploadQuery(), { wrapper: queryWrapper });
 
-    const body = {
+    const body: TemplateUploadRequest = {
       title: 'Upload Test',
+      description: '',
+      categoryId: 1,
+      tags: [],
       snippets: [
         {
           filename: 'filename1.txt',

From f138bc1334e59c89d9a78aa01925ba0b353e2f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:07:04 +0900
Subject: [PATCH 21/42] feat(hooks): useCategory

---
 frontend/src/hooks/category/useCategory.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 frontend/src/hooks/category/useCategory.ts

diff --git a/frontend/src/hooks/category/useCategory.ts b/frontend/src/hooks/category/useCategory.ts
new file mode 100644
index 000000000..75c4fcfc8
--- /dev/null
+++ b/frontend/src/hooks/category/useCategory.ts
@@ -0,0 +1,15 @@
+import { Category } from '@/types/category';
+import { useDropdown } from '../utils/useDropdown';
+import { useCategoryQuery } from './query/useCategoryQuery';
+
+const INIT_CATEGORY = { id: 1, name: '카테고리 선택' };
+
+export const useCategory = (initCategory: Category = INIT_CATEGORY) => {
+  const { data } = useCategoryQuery();
+  const options = data?.categories || [];
+  const { isOpen, toggleDropdown, currentValue, handleCurrentValue, dropdownRef } = useDropdown<Category>(initCategory);
+
+  const getOptionLabel = (category: Category) => category.name;
+
+  return { options, isOpen, toggleDropdown, currentValue, handleCurrentValue, getOptionLabel, dropdownRef };
+};

From 72b9dec75a83b2a608e28a397922e95eceba6918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:07:34 +0900
Subject: [PATCH 22/42] feat(hooks): useCategoryUpload

---
 .../src/hooks/category/query/useCategoryUpload.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 frontend/src/hooks/category/query/useCategoryUpload.ts

diff --git a/frontend/src/hooks/category/query/useCategoryUpload.ts b/frontend/src/hooks/category/query/useCategoryUpload.ts
new file mode 100644
index 000000000..3a1926c27
--- /dev/null
+++ b/frontend/src/hooks/category/query/useCategoryUpload.ts
@@ -0,0 +1,15 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { QUERY_KEY } from '@/api';
+import { postCategory } from '@/api/category';
+
+export const useCategoryUpload = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: postCategory,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.CATEGORY] });
+    },
+  });
+};

From 277d545481b7c94e19eb95df3dacc82f87690566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:08:35 +0900
Subject: [PATCH 23/42] =?UTF-8?q?feat(components):=20TemplateEdit=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B0=8F=20TemplateTitleInput=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TemplateEdit/TemplateEdit.style.ts        |  10 ++
 .../components/TemplateEdit/TemplateEdit.tsx  | 148 ++++++++++++++++++
 .../TemplateTitleInput/TemplateTitleInput.tsx |  15 --
 .../components/TemplateTitleInput/style.ts    |  28 ----
 frontend/src/components/index.ts              |   4 +-
 5 files changed, 161 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/components/TemplateEdit/TemplateEdit.style.ts
 create mode 100644 frontend/src/components/TemplateEdit/TemplateEdit.tsx
 delete mode 100644 frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx
 delete mode 100644 frontend/src/components/TemplateTitleInput/style.ts

diff --git a/frontend/src/components/TemplateEdit/TemplateEdit.style.ts b/frontend/src/components/TemplateEdit/TemplateEdit.style.ts
new file mode 100644
index 000000000..f33bf3924
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/TemplateEdit.style.ts
@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+import { Button } from '@/components';
+
+export const DeleteButton = styled(Button)`
+  position: absolute;
+  top: 0.3rem;
+  right: 0.4rem;
+  height: 2.4rem;
+`;
diff --git a/frontend/src/components/TemplateEdit/TemplateEdit.tsx b/frontend/src/components/TemplateEdit/TemplateEdit.tsx
new file mode 100644
index 000000000..c04166328
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/TemplateEdit.tsx
@@ -0,0 +1,148 @@
+import { trashcanIcon } from '@/assets/images';
+import { useCategoryUpload } from '@/hooks/category/query/useCategoryUpload';
+import { Category } from '@/types/category';
+import { Snippet } from '@/types/template';
+import { Button } from '../Button/style';
+import Dropdown from '../Dropdown/Dropdown';
+import Flex from '../Flex/Flex';
+import Input from '../Input/Input';
+import SnippetEditor from '../SnippetEditor/SnippetEditor';
+import TagInput from '../TagInput/TagInput';
+import * as S from './TemplateEdit.style';
+
+interface Props {
+  title: string;
+  description: string;
+  snippets: Snippet[];
+  categoryProps: {
+    options: Category[];
+    isOpen: boolean;
+    toggleDropdown: () => void;
+    currentValue: Category;
+    handleCurrentValue: (newValue: Category) => void;
+    getOptionLabel: (category: Category) => string;
+    dropdownRef: React.MutableRefObject<HTMLDivElement | null>;
+  };
+  tagProps: {
+    tags: string[];
+    setTags: React.Dispatch<React.SetStateAction<string[]>>;
+    value: string;
+    handleValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    resetValue: () => void;
+  };
+  handleTitleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleDescriptionChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleAddButtonClick: () => void;
+  handleCancelButton: () => void;
+  handleCodeChange: (newContent: string, idx: number) => void;
+  handleFileNameChange: (newFileName: string, idx: number) => void;
+  handleDeleteSnippet: (index: number) => void;
+  handleSaveButtonClick: () => Promise<void>;
+  error: Error | null;
+}
+
+const TemplateEdit = ({
+  title,
+  description,
+  snippets,
+  tagProps,
+  categoryProps,
+  handleTitleChange,
+  handleDescriptionChange,
+  handleAddButtonClick,
+  handleCancelButton,
+  handleCodeChange,
+  handleFileNameChange,
+  handleDeleteSnippet,
+  handleSaveButtonClick,
+  error,
+}: Props) => {
+  const { mutateAsync: postCategory } = useCategoryUpload();
+
+  return (
+    <Flex
+      direction='column'
+      justify='center'
+      align='flex-start'
+      gap='1.5rem'
+      margin='1rem 0 0 0'
+      css={{ maxWidth: '53rem', margin: 'auto', marginTop: '3rem' }}
+    >
+      <Flex direction='column' justify='center' align='flex-start' gap='1rem' width='100%'>
+        <Dropdown
+          {...categoryProps}
+          replaceChildrenWhenIsOpen={
+            <Input size='medium'>
+              <Input.TextField
+                autoFocus
+                placeholder='+ 새 카테고리 생성'
+                onKeyUpCapture={(e) => {
+                  if (e.target instanceof HTMLInputElement && e.key === 'Enter') {
+                    console.log(e.target.value);
+
+                    const newCategory = { name: e.target.value };
+
+                    postCategory(newCategory);
+                    e.target.value = '';
+                  }
+                }}
+              />
+            </Input>
+          }
+        />
+
+        <div css={{ borderBottom: '1px solid #788496', width: '100%' }}>
+          <Input size='medium' variant='text'>
+            <Input.TextField placeholder='제목을 입력해주세요' value={title} onChange={handleTitleChange} />
+          </Input>
+        </div>
+
+        <div css={{ borderBottom: '1px solid #788496', width: '100%' }}>
+          <Input size='medium' variant='text'>
+            <Input.TextField placeholder='설명을 입력해주세요' value={description} onChange={handleDescriptionChange} />
+          </Input>
+        </div>
+
+        <TagInput {...tagProps} />
+        {snippets.map((snippet, idx) => (
+          <Flex key={idx} style={{ position: 'relative' }} width='100%'>
+            <SnippetEditor
+              key={idx}
+              fileName={snippet.filename}
+              content={snippet.content}
+              onChangeContent={(newContent) => handleCodeChange(newContent, idx)}
+              onChangeFileName={(newFileName) => handleFileNameChange(newFileName, idx)}
+            />
+            <S.DeleteButton
+              size='small'
+              variant='text'
+              onClick={() => {
+                handleDeleteSnippet(idx);
+              }}
+            >
+              <img src={trashcanIcon} width={20} height={20} alt='Delete snippet' />
+            </S.DeleteButton>
+          </Flex>
+        ))}
+
+        <Flex justify='space-between' padding='3rem 0 0 0' width='100%'>
+          <Button size='small' variant='outlined' onClick={handleAddButtonClick}>
+            + Add Snippet
+          </Button>
+          <Flex gap='1.6rem'>
+            <Button size='small' variant='outlined' onClick={handleCancelButton}>
+              cancel
+            </Button>
+            <Button size='small' variant='contained' onClick={handleSaveButtonClick} disabled={snippets.length === 0}>
+              Save
+            </Button>
+          </Flex>
+        </Flex>
+
+        {error && <div style={{ color: 'red' }}>Error: {error.message}</div>}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default TemplateEdit;
diff --git a/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx b/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx
deleted file mode 100644
index 5deb289c8..000000000
--- a/frontend/src/components/TemplateTitleInput/TemplateTitleInput.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as S from './style';
-
-interface Props {
-  placeholder: string;
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const TemplateTitleInput = ({ placeholder, value, onChange }: Props) => (
-  <S.TemplateTitleInputWrapper>
-    <S.TemplateTitleInput placeholder={placeholder} value={value} onChange={onChange} />
-  </S.TemplateTitleInputWrapper>
-);
-
-export default TemplateTitleInput;
diff --git a/frontend/src/components/TemplateTitleInput/style.ts b/frontend/src/components/TemplateTitleInput/style.ts
deleted file mode 100644
index 0eaa23c4a..000000000
--- a/frontend/src/components/TemplateTitleInput/style.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import styled from '@emotion/styled';
-
-export const TemplateTitleInput = styled.input`
-  width: 100%;
-  padding: 10px 0;
-
-  font-size: 16px;
-  color: #ccc;
-
-  background: none;
-  border: none;
-  border-bottom: 1px solid #555;
-
-  &::placeholder {
-    color: #808080;
-  }
-
-  &:focus {
-    border-bottom: 1px solid #ccc;
-    outline: none;
-  }
-`;
-
-export const TemplateTitleInputWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  margin: 20px 0;
-`;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 252824a3b..4b0dfe586 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -7,5 +7,7 @@ export { default as Layout } from './Layout/Layout';
 export { default as SelectList } from './SelectList/SelectList';
 export { default as SnippetEditor } from './SnippetEditor/SnippetEditor';
 export { default as TemplateItem } from './TemplateItem/TemplateItem';
-export { default as TemplateTitleInput } from './TemplateTitleInput/TemplateTitleInput';
 export { default as Text } from './Text/Text';
+export { default as Dropdown } from './Dropdown/Dropdown';
+export { default as TagInput } from './TagInput/TagInput';
+export { default as TemplateEdit } from './TemplateEdit/TemplateEdit';

From e214e69d63dbca1706819f3f4720e69cd29d650a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:09:34 +0900
Subject: [PATCH 24/42] feat(hooks): useTemplate, useTemplateEdit,
 useTemplateUpload

---
 frontend/src/hooks/template/useTemplate.ts    |  67 ++++++++++
 .../src/hooks/template/useTemplateEdit.ts     | 119 ++++++++++++++++++
 .../src/hooks/template/useTemplateUpload.ts   | 108 ++++++++++++++++
 3 files changed, 294 insertions(+)
 create mode 100644 frontend/src/hooks/template/useTemplate.ts
 create mode 100644 frontend/src/hooks/template/useTemplateEdit.ts
 create mode 100644 frontend/src/hooks/template/useTemplateUpload.ts

diff --git a/frontend/src/hooks/template/useTemplate.ts b/frontend/src/hooks/template/useTemplate.ts
new file mode 100644
index 000000000..e7ca39637
--- /dev/null
+++ b/frontend/src/hooks/template/useTemplate.ts
@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useScrollToTargetElement } from '../utils/useScrollToTargetElement';
+import { useTemplateDeleteQuery } from './useTemplateDeleteQuery';
+import { useTemplateQuery } from './useTemplateQuery';
+
+export const useTemplate = (id: number) => {
+  const navigate = useNavigate();
+  const scrollTo = useScrollToTargetElement();
+
+  const { data: template } = useTemplateQuery(Number(id));
+  const { mutateAsync: deleteTemplate } = useTemplateDeleteQuery(Number(id));
+
+  const [currentFile, setCurrentFile] = useState<number | null>(null);
+  const [isEdit, setIsEdit] = useState(false);
+
+  const snippetRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    if (template && template.snippets.length > 0) {
+      setCurrentFile(template.snippets[0].id as number);
+    }
+  }, [template]);
+
+  const toggleEditButton = () => {
+    setIsEdit((prev) => !prev);
+  };
+
+  const handleEditButtonClick = () => {
+    toggleEditButton();
+  };
+
+  const handleSelectOption = (index: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+
+    const targetElement = snippetRefs.current[index];
+
+    scrollTo(targetElement);
+
+    const id = template?.snippets[index].id;
+
+    if (!id) {
+      console.error('snippet id가 존재하지 않습니다.');
+
+      return;
+    }
+
+    setCurrentFile(() => id);
+  };
+
+  const handleDelete = () => {
+    deleteTemplate();
+    navigate('/');
+  };
+
+  return {
+    currentFile,
+    template,
+    isEdit,
+    snippetRefs,
+    toggleEditButton,
+    handleEditButtonClick,
+    handleSelectOption,
+    handleDelete,
+  };
+};
diff --git a/frontend/src/hooks/template/useTemplateEdit.ts b/frontend/src/hooks/template/useTemplateEdit.ts
new file mode 100644
index 000000000..7f42e12bd
--- /dev/null
+++ b/frontend/src/hooks/template/useTemplateEdit.ts
@@ -0,0 +1,119 @@
+import { useCallback, useState } from 'react';
+
+import { Template, TemplateEditRequest } from '@/types/template';
+import { useCategory } from '../category/useCategory';
+import { useInput } from '../utils/useInput';
+import { useTemplateEditQuery } from './useTemplateEditQuery';
+
+interface Props {
+  template: Template;
+  toggleEditButton: () => void;
+}
+
+export const useTemplateEdit = ({ template, toggleEditButton }: Props) => {
+  const [title, handleTitleChange] = useInput(template.title);
+  const [description, handleDescriptionChange] = useInput(template.description);
+
+  const [snippets, setSnippets] = useState([...template.snippets]);
+  const [deleteSnippetIds, setDeleteSnippetIds] = useState<number[]>([]);
+
+  const categoryProps = useCategory(template.category);
+
+  const initTags = template.tags.map((tag) => tag.name);
+  const [tags, setTags] = useState<string[]>(initTags);
+  const [value, handleValue, resetValue] = useInput('');
+
+  const { mutateAsync, error } = useTemplateEditQuery(template.id);
+
+  const handleAddButtonClick = () => {
+    setSnippets((prevSnippets) => [
+      ...prevSnippets,
+      {
+        filename: '',
+        content: '',
+        ordinal: prevSnippets.length + 1,
+      },
+    ]);
+  };
+
+  const handleCancelButton = () => {
+    toggleEditButton();
+  };
+
+  const handleCodeChange = useCallback((newContent: string, idx: number) => {
+    setSnippets((prevSnippets) =>
+      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, content: newContent } : snippet)),
+    );
+  }, []);
+
+  const handleFileNameChange = useCallback((newFileName: string, idx: number) => {
+    setSnippets((prevSnippets) =>
+      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, filename: newFileName } : snippet)),
+    );
+  }, []);
+
+  const handleDeleteSnippet = (index: number) => {
+    const deletedSnippetId = snippets[index].id;
+
+    if (!snippets[index]) {
+      console.error('존재하지 않는 스니펫 인덱스입니다.');
+    }
+
+    if (deletedSnippetId) {
+      setDeleteSnippetIds((prevSnippetsId) => [...prevSnippetsId, deletedSnippetId]);
+    }
+
+    setSnippets((prevSnippets) => prevSnippets.filter((_, idx) => index !== idx));
+  };
+
+  const handleSaveButtonClick = async () => {
+    const orderedSnippets = snippets.map((snippet, index) => ({
+      ...snippet,
+      ordinal: index + 1,
+    }));
+    const createSnippets = orderedSnippets.filter((snippet) => !snippet.id);
+    const updateSnippets = orderedSnippets.filter((snippet) => snippet.id);
+
+    const templateUpdate: TemplateEditRequest = {
+      title,
+      description,
+      createSnippets,
+      updateSnippets,
+      deleteSnippetIds,
+      categoryId: categoryProps.currentValue.id,
+      tags,
+    };
+
+    console.log(templateUpdate, '???');
+
+    try {
+      await mutateAsync({ id: template.id, template: templateUpdate });
+      toggleEditButton();
+    } catch (error) {
+      console.error('Failed to update template:', error);
+    }
+  };
+
+  return {
+    title,
+    description,
+    snippets,
+    categoryProps,
+    tagProps: {
+      tags,
+      setTags,
+      value,
+      handleValue,
+      resetValue,
+    },
+    handleTitleChange,
+    handleDescriptionChange,
+    handleAddButtonClick,
+    handleCancelButton,
+    handleCodeChange,
+    handleFileNameChange,
+    handleDeleteSnippet,
+    handleSaveButtonClick,
+    error,
+  };
+};
diff --git a/frontend/src/hooks/template/useTemplateUpload.ts b/frontend/src/hooks/template/useTemplateUpload.ts
new file mode 100644
index 000000000..00eadb667
--- /dev/null
+++ b/frontend/src/hooks/template/useTemplateUpload.ts
@@ -0,0 +1,108 @@
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Snippet, TemplateUploadRequest } from '@/types/template';
+import { useCategory } from '../category/useCategory';
+import { useInput } from '../utils/useInput';
+import { useTemplateUploadQuery } from './useTemplateUploadQuery';
+
+export const useTemplateUpload = () => {
+  const navigate = useNavigate();
+
+  const categoryProps = useCategory();
+
+  const [title, handleTitleChange] = useInput('');
+  const [description, handleDescriptionChange] = useInput('');
+
+  const [snippets, setSnippets] = useState<Snippet[]>([
+    {
+      filename: '',
+      content: '',
+      ordinal: 1,
+    },
+  ]);
+
+  const [value, handleValue, resetValue] = useInput('');
+  const [tags, setTags] = useState<string[]>([]);
+
+  const { mutateAsync: uploadTemplate, error } = useTemplateUploadQuery();
+
+  const handleCodeChange = useCallback((newContent: string, idx: number) => {
+    setSnippets((prevSnippets) =>
+      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, content: newContent } : snippet)),
+    );
+  }, []);
+
+  const handleFileNameChange = useCallback((newFileName: string, idx: number) => {
+    setSnippets((prevSnippets) =>
+      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, filename: newFileName } : snippet)),
+    );
+  }, []);
+
+  const handleAddButtonClick = () => {
+    setSnippets((prevSnippets) => [
+      ...prevSnippets,
+      {
+        filename: '',
+        content: '',
+        ordinal: prevSnippets.length + 1,
+      },
+    ]);
+  };
+
+  const handleDeleteSnippet = (index: number) => {
+    if (!snippets[index]) {
+      console.error('존재하지 않는 스니펫 인덱스입니다.');
+    }
+
+    setSnippets((prevSnippets) => prevSnippets.filter((_, idx) => index !== idx));
+  };
+
+  const handleCancelButton = () => {
+    navigate(-1);
+  };
+
+  const handleSaveButtonClick = async () => {
+    const newTemplate: TemplateUploadRequest = {
+      title,
+      description,
+      snippets,
+      categoryId: categoryProps.currentValue.id,
+      tags,
+    };
+
+    try {
+      await uploadTemplate(newTemplate, {
+        onSuccess: (res) => {
+          navigate(res.headers.get('Location'));
+        },
+      });
+    } catch (error) {
+      console.error('Failed to update template:', error);
+    }
+  };
+
+  return {
+    title,
+    description,
+    snippets,
+    error,
+    handleDescriptionChange,
+    handleTitleChange,
+    handleCodeChange,
+    handleFileNameChange,
+    handleAddButtonClick,
+    handleDeleteSnippet,
+    handleCancelButton,
+    handleSaveButtonClick,
+
+    categoryProps,
+    tagProps: {
+      value,
+      handleValue,
+      resetValue,
+      tags,
+      setTags,
+    },
+  };
+};

From fe58e9fc39243733db4120686fec8aea116774cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:10:39 +0900
Subject: [PATCH 25/42] =?UTF-8?q?refactor(pages):=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=20=EC=83=9D=EC=84=B1,=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20TemplateEdit=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TemplateEditPage.style.ts                 |  19 ---
 .../TemplateEditPage/TemplateEditPage.tsx     | 124 +----------------
 .../TemplateUploadPage.style.ts               |  10 --
 .../TemplateUploadPage/TemplateUploadPage.tsx | 125 +-----------------
 4 files changed, 8 insertions(+), 270 deletions(-)
 delete mode 100644 frontend/src/pages/TemplateEditPage/TemplateEditPage.style.ts
 delete mode 100644 frontend/src/pages/TemplateUploadPage/TemplateUploadPage.style.ts

diff --git a/frontend/src/pages/TemplateEditPage/TemplateEditPage.style.ts b/frontend/src/pages/TemplateEditPage/TemplateEditPage.style.ts
deleted file mode 100644
index d0fd0c7d8..000000000
--- a/frontend/src/pages/TemplateEditPage/TemplateEditPage.style.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Button } from '@/components';
-
-export const MainContainer = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-
-  width: 100%;
-  max-width: 80rem;
-`;
-
-export const DeleteButton = styled(Button)`
-  position: absolute;
-  top: 0.3rem;
-  right: 0.4rem;
-  height: 2.4rem;
-`;
diff --git a/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx b/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
index 6176a91fa..163bb17ba 100644
--- a/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
+++ b/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
@@ -1,10 +1,6 @@
-import { ChangeEvent, useCallback, useState } from 'react';
-
-import { trashcanIcon } from '@/assets/images';
-import { Button, Flex, SnippetEditor, TemplateTitleInput } from '@/components';
-import { useTemplateEditQuery } from '@/hooks/template';
+import { TemplateEdit } from '@/components';
+import { useTemplateEdit } from '@/hooks/template/useTemplateEdit';
 import { Template } from '@/types/template';
-import * as S from './TemplateEditPage.style';
 
 interface Props {
   template: Template;
@@ -12,121 +8,9 @@ interface Props {
 }
 
 const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
-  const [title, setTitle] = useState<string>(template.title);
-  const [snippets, setSnippets] = useState([...template.snippets]);
-  const [deleteSnippetIds, setDeleteSnippetIds] = useState<number[]>([]);
-
-  const { mutateAsync } = useTemplateEditQuery(template.id);
-
-  const handleAddButtonClick = () => {
-    setSnippets((prevSnippets) => [
-      ...prevSnippets,
-      {
-        filename: '',
-        content: '',
-        ordinal: prevSnippets.length + 1,
-      },
-    ]);
-  };
-
-  const handleCancelButton = () => {
-    toggleEditButton();
-  };
-
-  const handleCodeChange = useCallback((newContent: string, idx: number) => {
-    setSnippets((prevSnippets) =>
-      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, content: newContent } : snippet)),
-    );
-  }, []);
-
-  const handleFileNameChange = useCallback((newFileName: string, idx: number) => {
-    setSnippets((prevSnippets) =>
-      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, filename: newFileName } : snippet)),
-    );
-  }, []);
-
-  const handleDeleteSnippet = (index: number) => {
-    const deletedSnippetId = snippets[index].id;
-
-    if (!snippets[index]) {
-      console.error('존재하지 않는 스니펫 인덱스입니다.');
-    }
-
-    if (deletedSnippetId) {
-      setDeleteSnippetIds((prevSnippetsId) => [...prevSnippetsId, deletedSnippetId]);
-    }
-
-    setSnippets((prevSnippets) => prevSnippets.filter((_, idx) => index !== idx));
-  };
-
-  const handleSaveButtonClick = async () => {
-    const orderedSnippets = snippets.map((snippet, index) => ({
-      ...snippet,
-      ordinal: index + 1,
-    }));
-    const createSnippets = orderedSnippets.filter((snippet) => !snippet.id);
-    const updateSnippets = orderedSnippets.filter((snippet) => snippet.id);
-
-    const templateUpdate = {
-      title,
-      createSnippets,
-      updateSnippets,
-      deleteSnippetIds,
-    };
-
-    try {
-      await mutateAsync({ id: template.id, template: templateUpdate });
-      toggleEditButton();
-    } catch (error) {
-      console.error('Failed to update template:', error);
-    }
-  };
-
-  return (
-    <Flex direction='column' align='center' width='100%'>
-      <S.MainContainer>
-        <TemplateTitleInput
-          placeholder='템플릿명을 입력해주세요'
-          value={title}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
-        />
-        {snippets.map((snippet, idx) => (
-          <Flex key={idx} style={{ position: 'relative' }}>
-            <SnippetEditor
-              key={idx}
-              fileName={snippet.filename}
-              content={snippet.content}
-              onChangeContent={(newContent) => handleCodeChange(newContent, idx)}
-              onChangeFileName={(newFileName) => handleFileNameChange(newFileName, idx)}
-            />
-            <S.DeleteButton
-              size='small'
-              variant='text'
-              onClick={() => {
-                handleDeleteSnippet(idx);
-              }}
-            >
-              <img src={trashcanIcon} width={20} height={20} alt='Delete snippet' />
-            </S.DeleteButton>
-          </Flex>
-        ))}
+  const props = useTemplateEdit({ template, toggleEditButton });
 
-        <Flex justify='space-between' padding='3rem 0 0 0'>
-          <Button size='medium' variant='outlined' onClick={handleAddButtonClick}>
-            + Add Snippet
-          </Button>
-          <Flex gap='1.6rem'>
-            <Button size='medium' variant='outlined' onClick={handleCancelButton}>
-              cancel
-            </Button>
-            <Button size='medium' variant='contained' onClick={handleSaveButtonClick} disabled={snippets.length === 0}>
-              Save
-            </Button>
-          </Flex>
-        </Flex>
-      </S.MainContainer>
-    </Flex>
-  );
+  return <TemplateEdit {...props} />;
 };
 
 export default TemplateEditPage;
diff --git a/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.style.ts b/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.style.ts
deleted file mode 100644
index f33bf3924..000000000
--- a/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.style.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Button } from '@/components';
-
-export const DeleteButton = styled(Button)`
-  position: absolute;
-  top: 0.3rem;
-  right: 0.4rem;
-  height: 2.4rem;
-`;
diff --git a/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx b/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx
index 418453c0a..b622a80a0 100644
--- a/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx
+++ b/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx
@@ -1,127 +1,10 @@
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { trashcanIcon } from '@/assets/images';
-import { Button, Flex, SnippetEditor, TemplateTitleInput } from '@/components';
-import { useTemplateUploadQuery } from '@/hooks/template';
-import { TemplateUploadRequest } from '@/types/template';
-import * as S from './TemplateUploadPage.style';
+import { TemplateEdit } from '@/components';
+import { useTemplateUpload } from '@/hooks/template/useTemplateUpload';
 
 const TemplateUploadPage = () => {
-  const navigate = useNavigate();
-  const [title, setTitle] = useState('');
-  const [snippets, setSnippets] = useState([
-    {
-      filename: '',
-      content: '',
-      ordinal: 1,
-    },
-  ]);
-
-  const { mutate: uploadTemplate, error } = useTemplateUploadQuery();
-
-  const handleCodeChange = useCallback((newContent: string, idx: number) => {
-    setSnippets((prevSnippets) =>
-      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, content: newContent } : snippet)),
-    );
-  }, []);
-
-  const handleFileNameChange = useCallback((newFileName: string, idx: number) => {
-    setSnippets((prevSnippets) =>
-      prevSnippets.map((snippet, index) => (index === idx ? { ...snippet, filename: newFileName } : snippet)),
-    );
-  }, []);
-
-  const handleAddButtonClick = () => {
-    setSnippets((prevSnippets) => [
-      ...prevSnippets,
-      {
-        filename: '',
-        content: '',
-        ordinal: prevSnippets.length + 1,
-      },
-    ]);
-  };
-
-  const handleDeleteSnippet = (index: number) => {
-    if (!snippets[index]) {
-      console.error('존재하지 않는 스니펫 인덱스입니다.');
-    }
-
-    setSnippets((prevSnippets) => prevSnippets.filter((_, idx) => index !== idx));
-  };
-
-  const handleCancelButton = () => {
-    navigate(-1);
-  };
-
-  const handleSaveButtonClick = () => {
-    const newTemplate: TemplateUploadRequest = {
-      title,
-      snippets,
-    };
-
-    uploadTemplate(newTemplate, {
-      onSuccess: () => {
-        navigate('/');
-      },
-    });
-  };
-
-  return (
-    <>
-      <Flex direction='column' justify='center' align='flex-start' gap='1.5rem'>
-        <Flex direction='column' justify='center' align='flex-start' gap='1rem' width='100%'>
-          <TemplateTitleInput
-            placeholder='템플릿명을 입력해주세요'
-            value={title}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
-          />
-          {snippets.map((snippet, idx) => (
-            <Flex key={idx} style={{ position: 'relative' }} width='100%'>
-              <SnippetEditor
-                key={idx}
-                fileName={snippet.filename}
-                content={snippet.content}
-                onChangeContent={(newContent) => handleCodeChange(newContent, idx)}
-                onChangeFileName={(newFileName) => handleFileNameChange(newFileName, idx)}
-              />
-              <S.DeleteButton
-                size='small'
-                variant='text'
-                onClick={() => {
-                  handleDeleteSnippet(idx);
-                }}
-              >
-                <img src={trashcanIcon} width={20} height={20} alt='Delete snippet' />
-              </S.DeleteButton>
-            </Flex>
-          ))}
-
-          <Flex justify='space-between' padding='3rem 0 0 0' width='100%'>
-            <Button size='medium' variant='outlined' onClick={handleAddButtonClick}>
-              + Add Snippet
-            </Button>
-            <Flex gap='1.6rem'>
-              <Button size='medium' variant='outlined' onClick={handleCancelButton}>
-                cancel
-              </Button>
-              <Button
-                size='medium'
-                variant='contained'
-                onClick={handleSaveButtonClick}
-                disabled={snippets.length === 0}
-              >
-                Save
-              </Button>
-            </Flex>
-          </Flex>
+  const props = useTemplateUpload();
 
-          {error && <div style={{ color: 'red' }}>Error: {error.message}</div>}
-        </Flex>
-      </Flex>
-    </>
-  );
+  return <TemplateEdit {...props} />;
 };
 
 export default TemplateUploadPage;

From 17397924a4141fd1950c21b642b34429d5b2d9d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:12:04 +0900
Subject: [PATCH 26/42] =?UTF-8?q?refactor(TemplatePage):=20useTemplate=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/TemplatePage/TemplatePage.tsx   | 106 ++++++------------
 1 file changed, 34 insertions(+), 72 deletions(-)

diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
index 383e18ea7..a79af0721 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.tsx
+++ b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,99 +1,61 @@
-import { useRef, useState, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import { useParams } from 'react-router-dom';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { pencilIcon, trashcanIcon } from '@/assets/images';
-import { Flex, SelectList, Text } from '@/components';
-import { useTemplateDeleteQuery, useTemplateQuery } from '@/hooks/template';
+import { Flex, Heading, SelectList, Text } from '@/components';
+import { useTemplate } from '@/hooks/template/useTemplate';
 import { TemplateEditPage } from '@/pages';
 import { formatRelativeTime, getLanguageByFilename } from '@/utils';
 import * as S from './TemplatePage.style';
 
 const TemplatePage = () => {
-  const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
-  const { data: template, error, isLoading } = useTemplateQuery(Number(id));
-  const { mutateAsync: deleteTemplate } = useTemplateDeleteQuery(Number(id));
-
-  const [currentFile, setCurrentFile] = useState<number | null>(null);
-  const [isEdit, setIsEdit] = useState(false);
-
-  const snippetRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    if (template && template.snippets.length > 0) {
-      setCurrentFile(template.snippets[0].id as number);
-    }
-  }, [template]);
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (error) {
-    return <div>Error: {error.message}</div>;
-  }
+  const theme = useTheme();
+
+  const {
+    currentFile,
+    template,
+    isEdit,
+    snippetRefs,
+    toggleEditButton,
+    handleEditButtonClick,
+    handleSelectOption,
+    handleDelete,
+  } = useTemplate(Number(id));
 
   if (!template) {
-    return <div>No data available</div>;
+    return <div>템플릿을 불러오는 중...</div>;
   }
 
-  const toggleEditButton = () => {
-    setIsEdit((prev) => !prev);
-  };
-
-  const handleEditButtonClick = () => {
-    toggleEditButton();
-  };
-
-  const handleSelectOption = (index: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-
-    const targetElement = snippetRefs.current[index];
-    const headerHeight = 68;
-
-    if (targetElement) {
-      const elementPosition = targetElement.getBoundingClientRect().top;
-      const offsetPosition = elementPosition + window.scrollY - headerHeight;
-
-      window.scrollTo({
-        top: offsetPosition,
-        behavior: 'smooth',
-      });
-    }
-
-    const id = template.snippets[index].id;
-
-    if (!id) {
-      console.error('snippet id가 존재하지 않습니다.');
-
-      return;
-    }
-
-    setCurrentFile(() => id);
-  };
-
-  const handleDelete = () => {
-    deleteTemplate();
-    navigate('/');
-  };
-
   return (
     <>
       {isEdit ? (
         <TemplateEditPage template={template} toggleEditButton={toggleEditButton} />
       ) : (
-        <Flex direction='column' align='center' width='100%'>
+        <Flex
+          direction='column'
+          align='center'
+          width='100%'
+          css={{ maxWidth: '53rem', margin: 'auto', marginTop: '3rem' }}
+        >
           <S.MainContainer>
             <Flex justify='space-between'>
-              <Flex direction='column' gap='1.6rem'>
-                <Text.XLarge color='white'>{template.title}</Text.XLarge>
-                <Text.Small color='#ffd369' weight='bold'>
+              <Flex direction='column' gap='0.5rem'>
+                <Text.Medium color={theme.color.dark.secondary_500}>{template.category?.name}</Text.Medium>
+                <Heading.Medium color={theme.mode === 'dark' ? theme.color.dark.white : theme.color.light.black}>
+                  {template.title}
+                </Heading.Medium>
+                <Text.Medium color={theme.color.dark.secondary_500}>{template.description}</Text.Medium>
+                <Text.Small
+                  color={theme.mode === 'dark' ? theme.color.dark.primary_300 : theme.color.light.primary_500}
+                  weight='bold'
+                >
                   {formatRelativeTime(template.modifiedAt)}
                 </Text.Small>
               </Flex>
-              <Flex align='center' gap='1.6rem'>
+              <Flex align='center' gap='1rem'>
                 <S.EditButton
                   size='small'
                   variant='text'

From 846c346b9238a87e971397c7913f8df34c361d6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:12:35 +0900
Subject: [PATCH 27/42] =?UTF-8?q?feat(mocks):=20categoryHandlers=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

---
 frontend/src/mocks/handlers.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 7851785f4..9acf45ff6 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -1,10 +1,12 @@
 import { HttpResponse, http } from 'msw';
 
+import { CATEGORY_API_URL } from '@/api';
 import { TEMPLATE_API_URL } from '@/api/templates';
+import mockCategoryList from './categoryList.json';
 import mockTemplate from './template.json';
 import mockTemplateList from './templateList.json';
 
-export const handlers = [
+const templateHandlers = [
   http.get(`${TEMPLATE_API_URL}`, () => {
     const response = HttpResponse.json(mockTemplateList);
 
@@ -19,3 +21,14 @@ export const handlers = [
   http.post(`${TEMPLATE_API_URL}/:id`, async () => HttpResponse.json({ status: 200 })),
   http.delete(`${TEMPLATE_API_URL}/:id`, async () => HttpResponse.json({ status: 204 })),
 ];
+
+const categoryHandlers = [
+  http.get(`${CATEGORY_API_URL}`, () => {
+    const response = HttpResponse.json(mockCategoryList);
+
+    return response;
+  }),
+  http.post(`${CATEGORY_API_URL}`, async () => HttpResponse.json({ status: 201 })),
+];
+
+export const handlers = [...templateHandlers, ...categoryHandlers];

From d6e481ccb10d23e8f06786a2f0a164af7b1aa6da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Mon, 5 Aug 2024 18:14:07 +0900
Subject: [PATCH 28/42] =?UTF-8?q?chore:=20gitignore=EC=97=90=20.env*=20?=
 =?UTF-8?q?=EC=9C=BC=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

---
 frontend/.gitignore | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/.gitignore b/frontend/.gitignore
index b305b6731..836ea43b5 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -4,6 +4,4 @@ node_modules
 
 dist
 
-.env
-.env.development
-.env.production
+.env*

From 3992f505787400b32c5a1b1027415f986afaf691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 11:48:09 +0900
Subject: [PATCH 29/42] feat(components): Toast

---
 frontend/src/components/Toast/Toast.style.ts | 60 ++++++++++++++++++++
 frontend/src/components/Toast/Toast.tsx      | 28 +++++++++
 frontend/src/components/index.ts             |  1 +
 3 files changed, 89 insertions(+)
 create mode 100644 frontend/src/components/Toast/Toast.style.ts
 create mode 100644 frontend/src/components/Toast/Toast.tsx

diff --git a/frontend/src/components/Toast/Toast.style.ts b/frontend/src/components/Toast/Toast.style.ts
new file mode 100644
index 000000000..9d8bef67c
--- /dev/null
+++ b/frontend/src/components/Toast/Toast.style.ts
@@ -0,0 +1,60 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const slideIn = keyframes`
+  from {
+    transform: translateY(20px) translateX(-50%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) translateX(-50%);
+    opacity: 1;
+  }
+`;
+
+const slideOut = keyframes`
+  from {
+    transform: translateY(0) translateX(-50%);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(20px) translateX(-50%);
+    opacity: 0;
+  }
+`;
+
+export const BaseToast = styled.div<{ visible: boolean; type: 'success' | 'fail' | 'info' }>`
+  position: fixed;
+  z-index: 1000;
+  top: 6rem;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: inline-block;
+
+  padding: 16px;
+
+  font-size: 16px;
+  color: white;
+
+  background-color: ${({ theme, type }) => {
+    switch (type) {
+      case 'success':
+        return theme.color.light.complementary_300;
+
+      case 'fail':
+        return theme.color.light.analogous_primary_300;
+
+      case 'info':
+        return theme.color.light.primary_400;
+
+      default:
+        return theme.color.light.primary_400;
+    }
+  }};
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  animation: ${({ visible }) => (visible ? slideIn : slideOut)} 0.5s ease-out;
+  animation-fill-mode: forwards;
+`;
diff --git a/frontend/src/components/Toast/Toast.tsx b/frontend/src/components/Toast/Toast.tsx
new file mode 100644
index 000000000..073506517
--- /dev/null
+++ b/frontend/src/components/Toast/Toast.tsx
@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+
+import * as S from './Toast.style';
+
+interface ToastProps {
+  children: React.ReactNode;
+  type: 'success' | 'fail' | 'info';
+}
+
+const Toast = ({ children, type }: ToastProps) => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <S.BaseToast visible={visible} type={type}>
+      {children}
+    </S.BaseToast>
+  );
+};
+
+export default Toast;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 4b0dfe586..d192fbc81 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -11,3 +11,4 @@ export { default as Text } from './Text/Text';
 export { default as Dropdown } from './Dropdown/Dropdown';
 export { default as TagInput } from './TagInput/TagInput';
 export { default as TemplateEdit } from './TemplateEdit/TemplateEdit';
+export { default as Toast } from './Toast/Toast';

From 265fd47891a592bbfa70a0118598714372e7fc8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 11:48:59 +0900
Subject: [PATCH 30/42] =?UTF-8?q?feat(src):=20useCustonContext,=20ToastCon?=
 =?UTF-8?q?text=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/context/ToastContext.tsx         | 58 +++++++++++++++++++
 frontend/src/hooks/utils/useCustomContext.tsx | 13 +++++
 frontend/src/index.tsx                        | 11 ++--
 3 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/context/ToastContext.tsx
 create mode 100644 frontend/src/hooks/utils/useCustomContext.tsx

diff --git a/frontend/src/context/ToastContext.tsx b/frontend/src/context/ToastContext.tsx
new file mode 100644
index 000000000..cf2ced08c
--- /dev/null
+++ b/frontend/src/context/ToastContext.tsx
@@ -0,0 +1,58 @@
+import React, { createContext, useState, ReactNode } from 'react';
+
+import { Toast } from '@/components';
+
+type ToastContextType = {
+  failAlert: (message: string) => void;
+  successAlert: (message: string) => void;
+  infoAlert: (message: string) => void;
+};
+
+export const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [toastList, setToastList] = useState<{ id: number; type: 'success' | 'fail' | 'info'; message: string }[]>([]);
+  const [nextId, setNextId] = useState(0);
+
+  const removeToast = (id: number) => {
+    setToastList((prev) => prev.filter((toast) => toast.id !== id));
+  };
+
+  const failAlert = (message: string) => {
+    const id = nextId;
+
+    setToastList((prev) => [...prev, { id, type: 'fail', message }]);
+    setNextId(nextId + 1);
+
+    setTimeout(() => removeToast(id), 4000);
+  };
+
+  const successAlert = (message: string) => {
+    const id = nextId;
+
+    setToastList((prev) => [...prev, { id, type: 'success', message }]);
+    setNextId(nextId + 1);
+
+    setTimeout(() => removeToast(id), 4000);
+  };
+
+  const infoAlert = (message: string) => {
+    const id = nextId;
+
+    setToastList((prev) => [...prev, { id, type: 'info', message }]);
+    setNextId(nextId + 1);
+
+    setTimeout(() => removeToast(id), 4000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ failAlert, successAlert, infoAlert }}>
+      {toastList.map((toast) => (
+        <Toast key={toast.id} type={toast.type}>
+          {toast.message}
+        </Toast>
+      ))}
+      {children}
+    </ToastContext.Provider>
+  );
+};
diff --git a/frontend/src/hooks/utils/useCustomContext.tsx b/frontend/src/hooks/utils/useCustomContext.tsx
new file mode 100644
index 000000000..5afcb67a2
--- /dev/null
+++ b/frontend/src/hooks/utils/useCustomContext.tsx
@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+const useCustomContext = <T,>(context: React.Context<T>) => {
+  const value = useContext(context);
+
+  if (!value) {
+    throw new Error('컨텍스트가 존재하지 않습니다.');
+  }
+
+  return value;
+};
+
+export default useCustomContext;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index de1c13db1..997d201fb 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
 import { HeaderProvider } from './context/HeaderContext';
+import { ToastProvider } from './context/ToastContext';
 import router from './routes/router';
 import GlobalStyles from './style/GlobalStyles';
 import { theme } from './style/theme';
@@ -28,10 +29,12 @@ enableMocking().then(() => {
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <HeaderProvider>
-            <GlobalStyles />
-            <RouterProvider router={router} />
-          </HeaderProvider>
+          <ToastProvider>
+            <HeaderProvider>
+              <GlobalStyles />
+              <RouterProvider router={router} />
+            </HeaderProvider>
+          </ToastProvider>
         </ThemeProvider>
       </QueryClientProvider>
     </React.StrictMode>,

From cd84a35d047f6e8be481556046346792045beddc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 11:51:35 +0900
Subject: [PATCH 31/42] feat(components): TagButton

---
 .../TagButton/TagButton.stories.tsx           | 25 +++++++++++++++++++
 .../components/TagButton/TagButton.style.ts   | 17 +++++++++++++
 .../src/components/TagButton/TagButton.tsx    | 23 +++++++++++++++++
 frontend/src/components/index.ts              |  1 +
 4 files changed, 66 insertions(+)
 create mode 100644 frontend/src/components/TagButton/TagButton.stories.tsx
 create mode 100644 frontend/src/components/TagButton/TagButton.style.ts
 create mode 100644 frontend/src/components/TagButton/TagButton.tsx

diff --git a/frontend/src/components/TagButton/TagButton.stories.tsx b/frontend/src/components/TagButton/TagButton.stories.tsx
new file mode 100644
index 000000000..bc4c99d44
--- /dev/null
+++ b/frontend/src/components/TagButton/TagButton.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import TagButton from './TagButton';
+
+const meta: Meta<typeof TagButton> = {
+  title: 'TagButton',
+  component: TagButton,
+  args: {
+    id: 1,
+    name: 'Tag',
+    onClick: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TagButton>;
+
+export const Enabled: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
diff --git a/frontend/src/components/TagButton/TagButton.style.ts b/frontend/src/components/TagButton/TagButton.style.ts
new file mode 100644
index 000000000..3296eb5da
--- /dev/null
+++ b/frontend/src/components/TagButton/TagButton.style.ts
@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const TagButtonWrapper = styled.button<{ bgColor: string; borderColor: string }>`
+  cursor: pointer;
+
+  box-sizing: border-box;
+  height: 1.75rem;
+  padding: 0 0.75rem;
+
+  background-color: ${({ bgColor }) => bgColor};
+  border: 1px solid ${({ borderColor }) => borderColor};
+  border-radius: 2.5rem;
+
+  &:not(:disabled):hover {
+    box-shadow: 0 1px 4px #00000030;
+  }
+`;
diff --git a/frontend/src/components/TagButton/TagButton.tsx b/frontend/src/components/TagButton/TagButton.tsx
new file mode 100644
index 000000000..bf674b858
--- /dev/null
+++ b/frontend/src/components/TagButton/TagButton.tsx
@@ -0,0 +1,23 @@
+import { Text } from '@/components';
+import { theme } from '@/style/theme';
+import * as S from './TagButton.style';
+
+interface Props {
+  id: number;
+  name: string;
+  disabled?: boolean;
+  onClick?: (id: number) => void;
+}
+
+const TagButton = ({ id, name, disabled, onClick }: Props) => (
+  <S.TagButtonWrapper
+    bgColor={theme.color.light.tertiary_50}
+    borderColor={theme.color.light.tertiary_200}
+    disabled={disabled}
+    onClick={() => onClick && onClick(id)}
+  >
+    <Text.Small color={theme.color.light.secondary_700}>{name}</Text.Small>
+  </S.TagButtonWrapper>
+);
+
+export default TagButton;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index d192fbc81..5447db98e 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -11,4 +11,5 @@ export { default as Text } from './Text/Text';
 export { default as Dropdown } from './Dropdown/Dropdown';
 export { default as TagInput } from './TagInput/TagInput';
 export { default as TemplateEdit } from './TemplateEdit/TemplateEdit';
+export { default as TagButton } from './TagButton/TagButton';
 export { default as Toast } from './Toast/Toast';

From 1d0e6d1d182a0e960891c473d0b035abcad47063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 11:54:08 +0900
Subject: [PATCH 32/42] =?UTF-8?q?refactor(SelectList):=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B2=BD=EC=83=89=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20SelectLis?=
 =?UTF-8?q?t.style.ts=20=EB=A1=9C=20=ED=8C=8C=EC=9D=BC=EB=AA=85=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

---
 .../{style.ts => SelectList.style.ts}         | 23 ++++++++++++++-----
 .../src/components/SelectList/SelectList.tsx  | 23 ++++++++++++-------
 2 files changed, 32 insertions(+), 14 deletions(-)
 rename frontend/src/components/SelectList/{style.ts => SelectList.style.ts} (60%)

diff --git a/frontend/src/components/SelectList/style.ts b/frontend/src/components/SelectList/SelectList.style.ts
similarity index 60%
rename from frontend/src/components/SelectList/style.ts
rename to frontend/src/components/SelectList/SelectList.style.ts
index 830ef01a0..9ad19f8ac 100644
--- a/frontend/src/components/SelectList/style.ts
+++ b/frontend/src/components/SelectList/SelectList.style.ts
@@ -4,6 +4,8 @@ import { theme } from '@/style/theme';
 import type { OptionProps } from './SelectList';
 
 export const SelectListContainer = styled.div`
+  --select-list-background-color: ${theme.color.light.secondary_100};
+
   position: relative;
 
   display: flex;
@@ -16,7 +18,7 @@ export const SelectListContainer = styled.div`
 
   &:hover {
     gap: 0;
-    background: #fff;
+    background: var(--select-list-background-color);
   }
 
   &:hover a {
@@ -34,12 +36,12 @@ export const SelectListContainer = styled.div`
 
   @media (min-width: 80rem) {
     gap: 0;
-    background: #fff;
+    background: var(--select-list-background-color);
     a {
       width: 11rem;
       height: 3rem;
       padding: 0 0.8rem;
-      border-radius: 0.8rem;
+      border-radius: 8px;
     }
 
     .select-list-text {
@@ -59,14 +61,14 @@ export const SelectListOption = styled.a<OptionProps>`
 
   text-decoration: none;
 
-  background-color: ${({ isSelected, theme }) =>
-    isSelected ? theme.color.light.primary_100 : theme.color.light.secondary_50};
+  background-color: ${({ isSelected }) =>
+    isSelected ? theme.color.light.primary_500 : 'var(--select-list-background-color)'};
   border-radius: 50%;
 
   transition: all 0.2s ease-in-out;
 
   &:hover {
-    background: ${({ isSelected }) => isSelected || theme.color.light.primary_50};
+    background: ${({ isSelected }) => isSelected || `rgba(${hexToRgb(theme.color.light.secondary_400)}, 0.1)`};
   }
 `;
 
@@ -81,3 +83,12 @@ export const SelectListText = styled.div`
 
   transition: all 0.1s ease-in-out;
 `;
+
+const hexToRgb = (hex: string) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+
+  hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : null;
+};
diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx
index 48ccb06c6..7a91e8a3d 100644
--- a/frontend/src/components/SelectList/SelectList.tsx
+++ b/frontend/src/components/SelectList/SelectList.tsx
@@ -1,7 +1,8 @@
+import { useTheme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 
 import { Text } from '@/components';
-import * as S from './style';
+import * as S from './SelectList.style';
 
 export interface OptionProps {
   isSelected: boolean;
@@ -10,13 +11,19 @@ export interface OptionProps {
 
 const SelectListBase = ({ children }: PropsWithChildren) => <S.SelectListContainer>{children}</S.SelectListContainer>;
 
-const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren<OptionProps>) => (
-  <S.SelectListOption href={`#${children}`} onClick={onClick} isSelected={isSelected}>
-    <S.SelectListText className='select-list-text'>
-      <Text.Medium color={isSelected ? 'black' : '#393E46'}>{children}</Text.Medium>
-    </S.SelectListText>
-  </S.SelectListOption>
-);
+const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren<OptionProps>) => {
+  const theme = useTheme();
+
+  return (
+    <S.SelectListOption href={`#${children}`} onClick={onClick} isSelected={isSelected}>
+      <S.SelectListText className='select-list-text'>
+        <Text.Medium color={isSelected ? theme.color.light.white : theme.color.light.secondary_600}>
+          {children}
+        </Text.Medium>
+      </S.SelectListText>
+    </S.SelectListOption>
+  );
+};
 
 const SelectList = Object.assign(SelectListBase, {
   Option: SelectListOption,

From 514f8e4f2f2dee265de18828c71653e152b66d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 12:00:52 +0900
Subject: [PATCH 33/42] =?UTF-8?q?feat(template):=20useTemplateEdit,=20useT?=
 =?UTF-8?q?emplateUpload=EC=97=90=EC=84=9C=20validate=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=95=8C=EB=A6=BC=EC=9A=A9=20=ED=86=A0=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/hooks/template/useTemplateEdit.ts     | 28 +++++++++++++++++--
 .../src/hooks/template/useTemplateUpload.ts   | 27 +++++++++++++++++-
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/template/useTemplateEdit.ts b/frontend/src/hooks/template/useTemplateEdit.ts
index 7f42e12bd..ea2f6f303 100644
--- a/frontend/src/hooks/template/useTemplateEdit.ts
+++ b/frontend/src/hooks/template/useTemplateEdit.ts
@@ -1,7 +1,9 @@
 import { useCallback, useState } from 'react';
 
+import { ToastContext } from '@/context/ToastContext';
 import { Template, TemplateEditRequest } from '@/types/template';
 import { useCategory } from '../category/useCategory';
+import useCustomContext from '../utils/useCustomContext';
 import { useInput } from '../utils/useInput';
 import { useTemplateEditQuery } from './useTemplateEditQuery';
 
@@ -11,6 +13,8 @@ interface Props {
 }
 
 export const useTemplateEdit = ({ template, toggleEditButton }: Props) => {
+  const { failAlert } = useCustomContext(ToastContext);
+
   const [title, handleTitleChange] = useInput(template.title);
   const [description, handleDescriptionChange] = useInput(template.description);
 
@@ -66,7 +70,29 @@ export const useTemplateEdit = ({ template, toggleEditButton }: Props) => {
     setSnippets((prevSnippets) => prevSnippets.filter((_, idx) => index !== idx));
   };
 
+  const validateTemplate = () => {
+    if (!title) {
+      return '제목을 입력해주세요';
+    }
+
+    if (snippets.filter((snippet) => !snippet.filename).length) {
+      return '파일 명을 입력해주세요';
+    }
+
+    if (snippets.filter((snippet) => !snippet.content).length) {
+      return '스니펫 내용을 입력해주세요';
+    }
+
+    return '';
+  };
+
   const handleSaveButtonClick = async () => {
+    if (validateTemplate()) {
+      failAlert(validateTemplate());
+
+      return;
+    }
+
     const orderedSnippets = snippets.map((snippet, index) => ({
       ...snippet,
       ordinal: index + 1,
@@ -84,8 +110,6 @@ export const useTemplateEdit = ({ template, toggleEditButton }: Props) => {
       tags,
     };
 
-    console.log(templateUpdate, '???');
-
     try {
       await mutateAsync({ id: template.id, template: templateUpdate });
       toggleEditButton();
diff --git a/frontend/src/hooks/template/useTemplateUpload.ts b/frontend/src/hooks/template/useTemplateUpload.ts
index 00eadb667..25255777d 100644
--- a/frontend/src/hooks/template/useTemplateUpload.ts
+++ b/frontend/src/hooks/template/useTemplateUpload.ts
@@ -1,13 +1,16 @@
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { ToastContext } from '@/context/ToastContext';
 import { Snippet, TemplateUploadRequest } from '@/types/template';
 import { useCategory } from '../category/useCategory';
+import useCustomContext from '../utils/useCustomContext';
 import { useInput } from '../utils/useInput';
 import { useTemplateUploadQuery } from './useTemplateUploadQuery';
 
 export const useTemplateUpload = () => {
   const navigate = useNavigate();
+  const { failAlert } = useCustomContext(ToastContext);
 
   const categoryProps = useCategory();
 
@@ -62,7 +65,29 @@ export const useTemplateUpload = () => {
     navigate(-1);
   };
 
+  const validateTemplate = () => {
+    if (!title) {
+      return '제목을 입력해주세요';
+    }
+
+    if (snippets.filter((snippet) => !snippet.filename).length) {
+      return '파일 명을 입력해주세요';
+    }
+
+    if (snippets.filter((snippet) => !snippet.content).length) {
+      return '스니펫 내용을 입력해주세요';
+    }
+
+    return '';
+  };
+
   const handleSaveButtonClick = async () => {
+    if (validateTemplate()) {
+      failAlert(validateTemplate());
+
+      return;
+    }
+
     const newTemplate: TemplateUploadRequest = {
       title,
       description,
@@ -74,7 +99,7 @@ export const useTemplateUpload = () => {
     try {
       await uploadTemplate(newTemplate, {
         onSuccess: (res) => {
-          navigate(res.headers.get('Location'));
+          navigate(res.headers.get('Location') || '/');
         },
       });
     } catch (error) {

From d7c18527014d4274a3a821b15053fdc3fe6f4bf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 12:02:11 +0900
Subject: [PATCH 34/42] =?UTF-8?q?feat(template):=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=B3=84=20=EC=97=B4=EB=A6=BC=20=EC=97=AC=EB=B6=80=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EB=B0=8F=20=EC=83=81=ED=83=9C=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/template/useTemplate.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/hooks/template/useTemplate.ts b/frontend/src/hooks/template/useTemplate.ts
index e7ca39637..e81619c03 100644
--- a/frontend/src/hooks/template/useTemplate.ts
+++ b/frontend/src/hooks/template/useTemplate.ts
@@ -17,9 +17,12 @@ export const useTemplate = (id: number) => {
 
   const snippetRefs = useRef<(HTMLDivElement | null)[]>([]);
 
+  const [isOpenList, setIsOpenList] = useState<boolean[]>(template?.snippets.map(() => true) || []);
+
   useEffect(() => {
     if (template && template.snippets.length > 0) {
       setCurrentFile(template.snippets[0].id as number);
+      setIsOpenList(template?.snippets.map(() => true));
     }
   }, [template]);
 
@@ -54,6 +57,10 @@ export const useTemplate = (id: number) => {
     navigate('/');
   };
 
+  const handleIsOpenList = (index: number) => () => {
+    setIsOpenList((prev) => prev.map((isOpen, idx) => (index === idx ? !isOpen : isOpen)));
+  };
+
   return {
     currentFile,
     template,
@@ -63,5 +70,7 @@ export const useTemplate = (id: number) => {
     handleEditButtonClick,
     handleSelectOption,
     handleDelete,
+    isOpenList,
+    handleIsOpenList,
   };
 };

From a3ba9fc502010e28db7477aa05c0736095546fef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 12:05:33 +0900
Subject: [PATCH 35/42] =?UTF-8?q?feat(TemplatePage):=20=EB=B3=B5=EC=82=AC?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC,=20=ED=83=9C=EA=B7=B8,=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=97=B4=EB=A6=BC=20=EC=97=AC=EB=B6=80=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/TemplatePage/TemplatePage.style.ts  | 41 +++++++-
 .../src/pages/TemplatePage/TemplatePage.tsx   | 94 +++++++++++++------
 2 files changed, 102 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/TemplatePage/TemplatePage.style.ts b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
index b5db02bcf..3ba2a9a96 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.style.ts
+++ b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
@@ -1,20 +1,55 @@
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { Button } from '@/components';
 
+const expand = keyframes`
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: 1000rem;
+  }
+`;
+
+const collapse = keyframes`
+  from {
+    max-height: 1000rem;
+  }
+  to {
+    max-height: 0;
+  }
+`;
+
 export const MainContainer = styled.main`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.5rem;
 
   width: 100%;
-  max-width: 80rem;
+  max-width: 53rem;
+  margin: auto;
+  margin-top: 3rem;
 `;
 
 export const SidebarContainer = styled.aside`
   position: fixed;
   top: 20rem;
-  right: 2rem;
+  right: 1.5rem;
+  margin-left: -10rem;
+
+  @media (min-width: 80rem) {
+    position: sticky;
+    top: 20rem;
+    right: 0;
+    align-self: flex-start;
+  }
+`;
+
+export const SyntaxHighlighterWrapper = styled.div<{ isOpen: boolean }>`
+  overflow: hidden;
+  max-height: ${({ isOpen }) => (isOpen ? '1000rem' : '0')};
+  animation: ${({ isOpen }) => (!isOpen ? collapse : expand)} 0.7s ease-in-out forwards;
 `;
 
 export const EditButton = styled(Button)``;
diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
index a79af0721..ff5f94bb7 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.tsx
+++ b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -3,10 +3,13 @@ import { useParams } from 'react-router-dom';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-import { pencilIcon, trashcanIcon } from '@/assets/images';
-import { Flex, Heading, SelectList, Text } from '@/components';
+import { chevron, pencilIcon, trashcanIcon } from '@/assets/images';
+import { Button, Flex, Heading, SelectList, TagButton, Text } from '@/components';
+import { ToastContext } from '@/context/ToastContext';
 import { useTemplate } from '@/hooks/template/useTemplate';
+import useCustomContext from '@/hooks/utils/useCustomContext';
 import { TemplateEditPage } from '@/pages';
+import { Snippet } from '@/types/template';
 import { formatRelativeTime, getLanguageByFilename } from '@/utils';
 import * as S from './TemplatePage.style';
 
@@ -14,6 +17,13 @@ const TemplatePage = () => {
   const { id } = useParams<{ id: string }>();
   const theme = useTheme();
 
+  const { infoAlert } = useCustomContext(ToastContext);
+
+  const copyCode = (snippet: Snippet) => () => {
+    navigator.clipboard.writeText(snippet.content);
+    infoAlert('코드가 복사되었습니다!');
+  };
+
   const {
     currentFile,
     template,
@@ -23,6 +33,8 @@ const TemplatePage = () => {
     handleEditButtonClick,
     handleSelectOption,
     handleDelete,
+    isOpenList,
+    handleIsOpenList,
   } = useTemplate(Number(id));
 
   if (!template) {
@@ -34,15 +46,10 @@ const TemplatePage = () => {
       {isEdit ? (
         <TemplateEditPage template={template} toggleEditButton={toggleEditButton} />
       ) : (
-        <Flex
-          direction='column'
-          align='center'
-          width='100%'
-          css={{ maxWidth: '53rem', margin: 'auto', marginTop: '3rem' }}
-        >
+        <Flex justify='space-between' align='center' width='100%' css={{ position: 'relative' }}>
           <S.MainContainer>
             <Flex justify='space-between'>
-              <Flex direction='column' gap='0.5rem'>
+              <Flex direction='column' gap='0.75rem'>
                 <Text.Medium color={theme.color.dark.secondary_500}>{template.category?.name}</Text.Medium>
                 <Heading.Medium color={theme.mode === 'dark' ? theme.color.dark.white : theme.color.light.black}>
                   {template.title}
@@ -54,6 +61,11 @@ const TemplatePage = () => {
                 >
                   {formatRelativeTime(template.modifiedAt)}
                 </Text.Small>
+                <Flex gap='0.25rem'>
+                  {template.tags.map((tag) => (
+                    <TagButton key={tag.id} id={tag.id} name={tag.name}></TagButton>
+                  ))}
+                </Flex>
               </Flex>
               <Flex align='center' gap='1rem'>
                 <S.EditButton
@@ -80,33 +92,55 @@ const TemplatePage = () => {
             {template.snippets.map((snippet, index) => (
               <div id={snippet.filename} key={snippet.id} ref={(el) => (snippetRefs.current[index] = el)}>
                 <Flex
+                  justify='space-between'
                   align='center'
                   height='3rem'
                   padding='1rem 1.5rem'
                   style={{ background: '#393e46', borderRadius: '8px 8px 0 0' }}
                 >
-                  <Text.Small color='#fff' weight='bold'>
-                    {snippet.filename}
-                  </Text.Small>
+                  <Flex align='center' gap='0.5rem' onClick={handleIsOpenList(index)} css={{ cursor: 'pointer' }}>
+                    <img
+                      src={chevron}
+                      width={24}
+                      height={24}
+                      alt=''
+                      css={{
+                        transition: 'transform 0.3s ease',
+                        transform: isOpenList[index] ? 'rotate(180deg)' : 'rotate(0deg)',
+                      }}
+                    />
+                    <Text.Small color='#fff' weight='bold'>
+                      {snippet.filename}
+                    </Text.Small>
+                  </Flex>
+                  <Button size='small' variant='text' onClick={copyCode(snippet)}>
+                    <Text.Small color={theme.color.light.primary_500} weight='bold'>
+                      {'복사'}
+                    </Text.Small>
+                  </Button>
                 </Flex>
-                <SyntaxHighlighter
-                  language={getLanguageByFilename(snippet.filename)}
-                  style={vscDarkPlus}
-                  showLineNumbers={true}
-                  customStyle={{
-                    borderRadius: '0 0 8px 8px',
-                    width: '100%',
-                    tabSize: 2,
-                    margin: 0,
-                  }}
-                  codeTagProps={{
-                    style: {
-                      fontSize: '1rem',
-                    },
-                  }}
-                >
-                  {snippet.content}
-                </SyntaxHighlighter>
+                <S.SyntaxHighlighterWrapper isOpen={isOpenList[index]}>
+                  {isOpenList[index] && (
+                    <SyntaxHighlighter
+                      language={getLanguageByFilename(snippet.filename)}
+                      style={vscDarkPlus}
+                      showLineNumbers={true}
+                      customStyle={{
+                        borderRadius: '0 0 8px 8px',
+                        width: '100%',
+                        tabSize: 2,
+                        margin: 0,
+                      }}
+                      codeTagProps={{
+                        style: {
+                          fontSize: '1rem',
+                        },
+                      }}
+                    >
+                      {snippet.content}
+                    </SyntaxHighlighter>
+                  )}
+                </S.SyntaxHighlighterWrapper>
               </div>
             ))}
           </S.MainContainer>

From c93365b8f1633f1a33812a7aa77e268be94f6c94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 12:06:27 +0900
Subject: [PATCH 36/42] =?UTF-8?q?feat(SnippetEditor):=20=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EB=AA=85,=20=EC=BD=94=EB=93=9C=20input=EC=97=90=20pla?=
 =?UTF-8?q?ceholder=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SnippetEditor/SnippetEditor.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/SnippetEditor/SnippetEditor.tsx b/frontend/src/components/SnippetEditor/SnippetEditor.tsx
index 3c975ba2b..d81e1b46a 100644
--- a/frontend/src/components/SnippetEditor/SnippetEditor.tsx
+++ b/frontend/src/components/SnippetEditor/SnippetEditor.tsx
@@ -23,8 +23,9 @@ const SnippetEditor = ({ fileName, content, onChangeContent, onChangeFileName }:
 
   return (
     <S.SnippetEditorContainer>
-      <S.SnippetFileNameInput value={fileName} onChange={handleFileNameChange} />
+      <S.SnippetFileNameInput value={fileName} onChange={handleFileNameChange} placeholder={'파일명.js'} />
       <ReactCodeMirror
+        placeholder={'// your code'}
         value={content}
         height='200px'
         style={{ width: '100%' }}

From bbf46ae0990814cf1d5a1087cca17f6e3b10007d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 13:24:39 +0900
Subject: [PATCH 37/42] =?UTF-8?q?feat(Input):=20xlarge=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Input/Input.style.ts | 11 +++++++++++
 frontend/src/components/Input/Input.tsx      |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Input/Input.style.ts b/frontend/src/components/Input/Input.style.ts
index 5db1dca69..d2ce49daa 100644
--- a/frontend/src/components/Input/Input.style.ts
+++ b/frontend/src/components/Input/Input.style.ts
@@ -24,6 +24,17 @@ const sizes = {
     font-size: 1rem;
     line-height: 100%;
 
+    border-radius: 12px;
+  `,
+  xlarge: css`
+    gap: 0.75rem;
+
+    height: 4rem;
+    padding: 1rem;
+
+    font-size: 2rem;
+    line-height: 100%;
+
     border-radius: 12px;
   `,
 };
diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx
index 043607d0e..312e70318 100644
--- a/frontend/src/components/Input/Input.tsx
+++ b/frontend/src/components/Input/Input.tsx
@@ -11,7 +11,7 @@ import {
 import * as S from './Input.style';
 
 export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'xlarge';
   variant?: 'filled' | 'outlined' | 'text';
   isValid?: boolean;
 }

From b519522b91f001efb6fd6ed3a1d37cda8e831bc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 13:25:17 +0900
Subject: [PATCH 38/42] =?UTF-8?q?refactor(TagInput):=20borderBottom=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20placeholder=20=EB=AC=B8?=
 =?UTF-8?q?=EA=B5=AC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TagInput/TagInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TagInput/TagInput.tsx b/frontend/src/components/TagInput/TagInput.tsx
index 884d9440b..ffa28c8dc 100644
--- a/frontend/src/components/TagInput/TagInput.tsx
+++ b/frontend/src/components/TagInput/TagInput.tsx
@@ -35,7 +35,7 @@ const TagInput = ({ value, handleValue, resetValue, tags, setTags }: Props) => {
       css={{
         width: '100%',
         flexWrap: 'wrap',
-        borderBottom: 'solid 1px #788496',
+        marginTop: '1rem',
       }}
     >
       <Flex gap='0.125rem' css={{ flexWrap: 'wrap', width: '100%' }}>
@@ -53,7 +53,7 @@ const TagInput = ({ value, handleValue, resetValue, tags, setTags }: Props) => {
       </Flex>
       <Input>
         <Input.TextField
-          placeholder='태그를 입력해주세요'
+          placeholder='enter 또는 space bar로 태그를 등록해보세요'
           value={value}
           onChange={handleValue}
           onKeyUpCapture={handleSpaceBarAndEnterKeydown}

From aa666a1a8fa41c8cc14e9b8268a5edfafe72d36c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 13:27:12 +0900
Subject: [PATCH 39/42] =?UTF-8?q?refactor(TemplateEdit):=20TagInput=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9=20input=20xlarge=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/TemplateEdit/TemplateEdit.tsx    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/TemplateEdit/TemplateEdit.tsx b/frontend/src/components/TemplateEdit/TemplateEdit.tsx
index c04166328..b4b896c9d 100644
--- a/frontend/src/components/TemplateEdit/TemplateEdit.tsx
+++ b/frontend/src/components/TemplateEdit/TemplateEdit.tsx
@@ -2,7 +2,7 @@ import { trashcanIcon } from '@/assets/images';
 import { useCategoryUpload } from '@/hooks/category/query/useCategoryUpload';
 import { Category } from '@/types/category';
 import { Snippet } from '@/types/template';
-import { Button } from '../Button/style';
+import Button from '../Button/Button';
 import Dropdown from '../Dropdown/Dropdown';
 import Flex from '../Flex/Flex';
 import Input from '../Input/Input';
@@ -78,8 +78,6 @@ const TemplateEdit = ({
                 placeholder='+ 새 카테고리 생성'
                 onKeyUpCapture={(e) => {
                   if (e.target instanceof HTMLInputElement && e.key === 'Enter') {
-                    console.log(e.target.value);
-
                     const newCategory = { name: e.target.value };
 
                     postCategory(newCategory);
@@ -92,7 +90,7 @@ const TemplateEdit = ({
         />
 
         <div css={{ borderBottom: '1px solid #788496', width: '100%' }}>
-          <Input size='medium' variant='text'>
+          <Input size='xlarge' variant='text'>
             <Input.TextField placeholder='제목을 입력해주세요' value={title} onChange={handleTitleChange} />
           </Input>
         </div>
@@ -103,7 +101,6 @@ const TemplateEdit = ({
           </Input>
         </div>
 
-        <TagInput {...tagProps} />
         {snippets.map((snippet, idx) => (
           <Flex key={idx} style={{ position: 'relative' }} width='100%'>
             <SnippetEditor
@@ -124,11 +121,13 @@ const TemplateEdit = ({
             </S.DeleteButton>
           </Flex>
         ))}
+        <Button size='filled' variant='outlined' onClick={handleAddButtonClick}>
+          + Add Snippet
+        </Button>
+
+        <TagInput {...tagProps} />
 
-        <Flex justify='space-between' padding='3rem 0 0 0' width='100%'>
-          <Button size='small' variant='outlined' onClick={handleAddButtonClick}>
-            + Add Snippet
-          </Button>
+        <Flex justify='flex-end' padding='0.5rem 0 0 0' width='100%'>
           <Flex gap='1.6rem'>
             <Button size='small' variant='outlined' onClick={handleCancelButton}>
               cancel

From a7cac5deb95790f830783957e7dbbe7ba2627cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 15:21:03 +0900
Subject: [PATCH 40/42] =?UTF-8?q?design(Button):=20=EB=B2=84=ED=8A=BC=20sm?=
 =?UTF-8?q?all=20size=20padding=201=3D>=200.5rem=EC=9C=BC=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

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

diff --git a/frontend/src/components/Button/Button.style.ts b/frontend/src/components/Button/Button.style.ts
index e65de9c53..9574b9087 100644
--- a/frontend/src/components/Button/Button.style.ts
+++ b/frontend/src/components/Button/Button.style.ts
@@ -27,7 +27,7 @@ const sizes = {
   small: css`
     gap: 0.25rem;
     height: 1.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
     font-size: ${theme.font.size.text.xsmall};
   `,
   medium: css`

From fd303d69ccd4270d3835f8efeecff4c9db1c25a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 15:22:01 +0900
Subject: [PATCH 41/42] =?UTF-8?q?refactor(TemplateEdit):=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=82=AC=EC=9D=B4=EC=A6=88=20medium=EC=9C=BC?=
 =?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

---
 frontend/src/components/TemplateEdit/TemplateEdit.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/TemplateEdit/TemplateEdit.tsx b/frontend/src/components/TemplateEdit/TemplateEdit.tsx
index b4b896c9d..308196678 100644
--- a/frontend/src/components/TemplateEdit/TemplateEdit.tsx
+++ b/frontend/src/components/TemplateEdit/TemplateEdit.tsx
@@ -121,18 +121,18 @@ const TemplateEdit = ({
             </S.DeleteButton>
           </Flex>
         ))}
-        <Button size='filled' variant='outlined' onClick={handleAddButtonClick}>
+        <Button size='medium' variant='outlined' fullWidth onClick={handleAddButtonClick}>
           + Add Snippet
         </Button>
 
         <TagInput {...tagProps} />
 
         <Flex justify='flex-end' padding='0.5rem 0 0 0' width='100%'>
-          <Flex gap='1.6rem'>
-            <Button size='small' variant='outlined' onClick={handleCancelButton}>
+          <Flex gap='0.5rem'>
+            <Button size='medium' variant='outlined' onClick={handleCancelButton}>
               cancel
             </Button>
-            <Button size='small' variant='contained' onClick={handleSaveButtonClick} disabled={snippets.length === 0}>
+            <Button size='medium' variant='contained' onClick={handleSaveButtonClick} disabled={snippets.length === 0}>
               Save
             </Button>
           </Flex>

From 0220885e824bfa6d75c9e3fa218d3db704fc33e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <hain7ce@gmail.com>
Date: Tue, 6 Aug 2024 15:23:20 +0900
Subject: [PATCH 42/42] =?UTF-8?q?design(TemplatePage):=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95,=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=20gap=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TemplatePage/TemplatePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
index ff5f94bb7..fcecbf42c 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.tsx
+++ b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -67,7 +67,7 @@ const TemplatePage = () => {
                   ))}
                 </Flex>
               </Flex>
-              <Flex align='center' gap='1rem'>
+              <Flex align='center'>
                 <S.EditButton
                   size='small'
                   variant='text'