From 500ef334453a0f69aeee260884550ae9c39eff88 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Tue, 4 Jun 2024 14:53:13 +0900
Subject: [PATCH 01/13] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                                  |  2 +-
 .gitignore                                            |  3 +++
 apis/api.ts                                           |  2 +-
 apis/getArticles.ts                                   | 11 ++++++-----
 hooks/useSetNumberOfItemsToShow.ts                    |  5 ++---
 .../boards/BestPost/components/PostElement/index.tsx  |  7 +++++--
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/.env b/.env
index fbea1b7f7..82504247e 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
-REACT_APP_API_KEY = https://panda-market-api.vercel.app/
+REACT_APP_API_URL = https://panda-market-api.vercel.app/
 
 NEXT_PUBLIC_BASE_URL=https://panda-market-api.vercel.app/
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 8f322f0d8..9472f45e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+.env
\ No newline at end of file
diff --git a/apis/api.ts b/apis/api.ts
index 497f36349..4586456d6 100644
--- a/apis/api.ts
+++ b/apis/api.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 const panda_market_backend_api = process.env.NEXT_PUBLIC_BASE_URL;
 
-export const baseAxios = axios.create({
+export const axiosInstance = axios.create({
   baseURL: panda_market_backend_api,
   timeout: 20000,
 });
diff --git a/apis/getArticles.ts b/apis/getArticles.ts
index 31079cefd..322876edc 100644
--- a/apis/getArticles.ts
+++ b/apis/getArticles.ts
@@ -1,6 +1,6 @@
-import { baseAxios } from "./api";
+import { axiosInstance } from "./api";
 
-interface propTypes {
+interface GetArticleParams {
   page: number;
   pageSize: number;
   orderBy: string;
@@ -26,7 +26,7 @@ interface Articles {
   totalCount: number;
 }
 
-export type GetArticleType = (prop: propTypes) => Promise<Articles | undefined>;
+export type GetArticleType = (prop: GetArticleParams) => Promise<Articles>;
 
 const getArticle: GetArticleType = async ({
   page,
@@ -35,11 +35,12 @@ const getArticle: GetArticleType = async ({
   keyword,
 }) => {
   try {
-    const response = await baseAxios.get<Articles>(`articles`, {
+    const { data } = await axiosInstance.get<Articles>(`articles`, {
       params: { page, pageSize, orderBy, keyword },
     });
-    return response.data;
+    return data;
   } catch (error) {
+    console.error("APP ERROR: ", error);
     if (error instanceof Error) {
       throw new Error(`게시글을 가져오는 데 실패했습니다: ${error.message}`);
     }
diff --git a/hooks/useSetNumberOfItemsToShow.ts b/hooks/useSetNumberOfItemsToShow.ts
index 4ab1b071d..ff346cab6 100644
--- a/hooks/useSetNumberOfItemsToShow.ts
+++ b/hooks/useSetNumberOfItemsToShow.ts
@@ -1,13 +1,12 @@
 import { useEffect, useState } from "react";
 import { TABLET_WIDTH, MOBILE_WIDTH } from "@/constants/screenSizes";
 
-
-interface propType {
+interface PropType {
   desktop: number;
   tablet: number;
   mobile: number;
 }
-type useSetNumOfItemsToShowType = (prop: propType) => number;
+type useSetNumOfItemsToShowType = (prop: PropType) => number;
 
 const useSetNumOfItemsToShow: useSetNumOfItemsToShowType = ({
   desktop,
diff --git a/pageComponents/boards/BestPost/components/PostElement/index.tsx b/pageComponents/boards/BestPost/components/PostElement/index.tsx
index 7a3e93c90..defad7fc3 100644
--- a/pageComponents/boards/BestPost/components/PostElement/index.tsx
+++ b/pageComponents/boards/BestPost/components/PostElement/index.tsx
@@ -19,8 +19,11 @@ interface PostType {
   };
 }
 
-const PostElement = ({ post }: { post: PostType }) => {
-  const { title, image, likeCount, updatedAt, writer } = post;
+const PostElement = ({
+  post: { title, image, likeCount, updatedAt, writer },
+}: {
+  post: PostType;
+}) => {
   const postingDate = formatTime(updatedAt);
   return (
     <Link href="/boards" className={styles.container}>

From 20934c637c3042999b874d752ef6feddc94023a1 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Tue, 4 Jun 2024 19:58:50 +0900
Subject: [PATCH 02/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EA=B8=80=EC=93=B0?=
 =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=201=EC=B0=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Inputs/CustomFileInput/index.tsx   |   75 ++
 .../Inputs/CustomFileInput/style.module.css   |   97 ++
 components/Inputs/CustomInput/index.tsx       |   39 +
 .../Inputs/CustomInput/style.module.css       |   31 +
 components/Inputs/CustomTextArea/index.tsx    |   35 +
 .../Inputs/CustomTextArea/style.module.css    |   31 +
 images/ic_X_for_img.png                       |  Bin 0 -> 578 bytes
 images/ic_plus.png                            |  Bin 0 -> 316 bytes
 package-lock.json                             | 1186 ++++++++++++++++-
 package.json                                  |    3 +
 pageComponents/boards/SearchPost/index.tsx    |   10 +-
 pages/newArticle/index.tsx                    |   35 +
 postcss.config.js                             |    6 +
 styles/globals.css                            |   24 +-
 tailwind.config.js                            |   14 +
 15 files changed, 1556 insertions(+), 30 deletions(-)
 create mode 100644 components/Inputs/CustomFileInput/index.tsx
 create mode 100644 components/Inputs/CustomFileInput/style.module.css
 create mode 100644 components/Inputs/CustomInput/index.tsx
 create mode 100644 components/Inputs/CustomInput/style.module.css
 create mode 100644 components/Inputs/CustomTextArea/index.tsx
 create mode 100644 components/Inputs/CustomTextArea/style.module.css
 create mode 100644 images/ic_X_for_img.png
 create mode 100644 images/ic_plus.png
 create mode 100644 pages/newArticle/index.tsx
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.js

diff --git a/components/Inputs/CustomFileInput/index.tsx b/components/Inputs/CustomFileInput/index.tsx
new file mode 100644
index 000000000..058be261d
--- /dev/null
+++ b/components/Inputs/CustomFileInput/index.tsx
@@ -0,0 +1,75 @@
+import { useRef, useState, useEffect, ChangeEvent } from "react";
+import plusIcon from "@/images/ic_plus.png";
+import deleteImgButton from "@/images/ic_X_for_img.png";
+import Image from "next/image";
+import styles from "./style.module.css";
+
+interface PropType {
+  value?: File | null;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onDelete: () => void;
+  name: string;
+}
+
+const CustomFileInput = ({ value, onChange, onDelete, name }: PropType) => {
+  const [preview, setPreview] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!value) return;
+    const nextPreview = URL.createObjectURL(value);
+    setPreview(nextPreview);
+
+    return () => {
+      setPreview("");
+      URL.revokeObjectURL(nextPreview);
+    };
+  }, [value]);
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+    inputNode.value = "";
+    onDelete();
+  };
+
+  return (
+    <div className={styles.container}>
+      <label>상품 이미지</label>
+      <div className={styles.content}>
+        <label htmlFor="fileInput">
+          <div className={styles.btn_upload}>
+            <Image src={plusIcon} alt="플러스 버튼" />
+            <span>이미지 등록</span>
+          </div>
+        </label>
+        <input
+          id="fileInput"
+          type="file"
+          name={name}
+          ref={inputRef}
+          accept="image/png, image/jpeg"
+          onChange={onChange}
+          className={styles.fileInput}
+        />
+        {value && (
+          <div className={styles.preview_section}>
+            <Image
+              src={preview}
+              alt="이미지 미리보기"
+              className={styles.image_preview}
+            />
+            <Image
+              src={deleteImgButton}
+              alt="이미지 삭제"
+              className={styles.preview_delete_btn}
+              onClick={handleClearClick}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CustomFileInput;
diff --git a/components/Inputs/CustomFileInput/style.module.css b/components/Inputs/CustomFileInput/style.module.css
new file mode 100644
index 000000000..85de2fcc7
--- /dev/null
+++ b/components/Inputs/CustomFileInput/style.module.css
@@ -0,0 +1,97 @@
+/* 이미지 인풋 */
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  height: 28.2rem;
+}
+.container label {
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 2.1rem;
+  color: var(--coolGray800);
+}
+
+.content {
+  display: flex;
+  height: 28.2rem;
+  gap: 2.4rem;
+}
+
+.fileInput {
+  display: none;
+}
+
+.btn_upload {
+  width: 28.2rem;
+  height: 100%;
+  background-color: var(--coolGray100);
+  border: none;
+  border-radius: 1.2rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.2rem;
+}
+.btn_upload:hover {
+  background-color: white;
+  color: black;
+}
+.btn_upload span {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+}
+.preview_section {
+  width: 28.2rem;
+  height: 100%;
+  border-radius: 1.2rem;
+  background-color: var(--coolGray100);
+  position: relative;
+}
+.image_preview {
+  width: 100%;
+  height: 100%;
+}
+
+.preview_delete_btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  cursor: pointer;
+}
+
+@media (max-width: 744px) {
+  .content {
+    gap: 1.6rem;
+    height: 16.2rem;
+  }
+  .btn_upload {
+    width: 16.2rem;
+  }
+  .preview_section {
+    width: 16.2rem;
+  }
+}
+
+@media (max-width: 375px) {
+
+  .content {
+    gap: 0.8rem;
+    height: 16.8rem;
+  }
+  .btn_upload {
+    width: 16.8rem;
+  }
+  .preview_section {
+    width: 16.8rem;
+  }
+  .container label {
+    font-size: 1.4rem;
+  }
+  .container {
+    gap: 1.6rem;
+  }
+}
diff --git a/components/Inputs/CustomInput/index.tsx b/components/Inputs/CustomInput/index.tsx
new file mode 100644
index 000000000..0f84bdb35
--- /dev/null
+++ b/components/Inputs/CustomInput/index.tsx
@@ -0,0 +1,39 @@
+import { ChangeEvent } from "react";
+import styles from "./style.module.css";
+
+interface PropType {
+  label: string;
+  placeholder: string;
+  value?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  id: string;
+  name: string;
+  type?: string;
+}
+
+const CustomInput = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  id,
+  name,
+  type = "text",
+}: PropType) => {
+  return (
+    //일반
+    <div className={styles.container}>
+      <label htmlFor={id}>{label}</label>
+      <input
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        type={type}
+      />
+    </div>
+  );
+};
+
+export default CustomInput;
diff --git a/components/Inputs/CustomInput/style.module.css b/components/Inputs/CustomInput/style.module.css
new file mode 100644
index 000000000..090077ead
--- /dev/null
+++ b/components/Inputs/CustomInput/style.module.css
@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+.container label {
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 2.1rem;
+  color: var(--coolGray800);
+}
+
+.container input {
+  height: 5.6rem;
+  border-radius: 1.2rem;
+  border: none;
+  background-color: var(--coolGray100);
+  padding: 1.6rem 2.4rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+}
+
+@media (max-width: 375px) {
+  .container label {
+    font-size: 1.4rem;
+  }
+  .container {
+    gap: 1.6rem;
+  }
+}
diff --git a/components/Inputs/CustomTextArea/index.tsx b/components/Inputs/CustomTextArea/index.tsx
new file mode 100644
index 000000000..224499627
--- /dev/null
+++ b/components/Inputs/CustomTextArea/index.tsx
@@ -0,0 +1,35 @@
+import { ChangeEvent } from "react";
+import styles from "./style.module.css";
+
+interface PropType {
+  label: string;
+  placeholder: string;
+  value?: string;
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  id: string;
+  name: string;
+}
+
+const CustomTextArea = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  id,
+  name,
+}: PropType) => {
+  return (
+    <div className={styles.container}>
+      <label htmlFor={id}>{label}</label>
+      <textarea
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export default CustomTextArea;
diff --git a/components/Inputs/CustomTextArea/style.module.css b/components/Inputs/CustomTextArea/style.module.css
new file mode 100644
index 000000000..00c2cfcdc
--- /dev/null
+++ b/components/Inputs/CustomTextArea/style.module.css
@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+.container label {
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 2.1rem;
+  color: var(--coolGray800);
+}
+
+.container textarea {
+  height: 20rem;
+  padding: 1.6rem 2.4rem;
+  border-radius: 1.2rem;
+  border: none;
+  background-color: var(--coolGray100);
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+}
+
+@media (max-width: 375px) {
+  .container label {
+    font-size: 1.4rem;
+  }
+  .container {
+    gap: 1.6rem;
+  }
+}
diff --git a/images/ic_X_for_img.png b/images/ic_X_for_img.png
new file mode 100644
index 0000000000000000000000000000000000000000..c982173518352692f84323e4435ecbfea38387d2
GIT binary patch
literal 578
zcmV-I0=@l-P)<h;3K|Lk000e1NJLTq000&M000;W1^@s6{=N-M00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0oO@HK~#7F-IOa&
z13?hS|67`XC`ko%h%*gAae=fF5Ot97`U0)2A>0Q5N^qE?AdpmIcqKRtwKPr6Auxx)
zA(~V{=q<DN>UHmWEv<sT=woL0H?uRl1N=3yehyXV=_F80Okf2ZDw!15Wza5@cW~d(
zSnXHfyv{dy0+-}WBVH!Aa1<3FAscdMTqo=85Ktk7Q3CmMeu%h??FAMp7(txjw6V*y
z5ICpvqKJ-hWMS)BV|U`GUkZZu97kIQF1CT`$?$$*6TX9j<e<bv(|xeW7TvDfO3~)U
z*)ZIO?l`{GR48Ve+(jQuS879Ear_88ya3ru7w$o`Gr;SIvqlyNR>gPH{=<8-4Z?-i
z=N-7{hzBiS1MSa<O$jXcV3LYH3c`hAp^g-XKS1L6bD4mFV<>rGvmZ2AQ@Q3*;^N7}
zEd^sR<T}gH;PJhhmv6!)VHV!}j5{6F<;eSmXlU@ZoU9=#<L(3b25Mwz1sAlxfaZI2
zqXhiQu%EFk(;G;>Yl$Y>1PvdIA)0h05A5HHCcSZTR57Zg@fkV{&Eg8AxiLhhRf6sX
zZIOfCopb`OAPz`<p<7V$CfY!7PXK1m5rtN&F3qG*!{Vr?sOe7{YvEt$2TJa(5G>W~
Q8vp<R07*qoM6N<$f}dRZqyPW_

literal 0
HcmV?d00001

diff --git a/images/ic_plus.png b/images/ic_plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ad8ffab1ac46a9b72b4dcf0a0b34cd6b86ffc5c
GIT binary patch
literal 316
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5|DvahV@L(#+v^884>^diT=3NL;4D+QC#s)$
zfG>$%?1AeSy|O7nYZ9)@U!2jrtJ~l=|2b<GCdJ?Ft*K%Hf)ne*8dK_btr0wYE^G%=
z>2<y5>;hL7aL%=rayj$P(W8Q~?O?pr1cCAeJggs<G29b5Fq^3&m?8h9nbkJ0r1_Pr
zo#tOoGA?^?QOo;u&c>Gv2NQoRx45Ia&zp_oz_Ge3i%q2OUAwo;?(y9dea|gw^TWAM
zMOnG+)od__n^t3zJL!m#2e-kt8)w2am6SepOV_?LQHi}LRS)zWgQu&X%Q~loCIF1i
BbDRJG

literal 0
HcmV?d00001

diff --git a/package-lock.json b/package-lock.json
index 31801148d..26b7ae118 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,11 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "autoprefixer": "^10.4.19",
         "eslint": "^8",
         "eslint-config-next": "13.5.6",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.3",
         "typescript": "^5"
       }
     },
@@ -31,6 +34,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
@@ -132,6 +148,106 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.5.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
@@ -316,6 +432,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz",
@@ -546,6 +673,34 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -712,6 +867,44 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -759,6 +952,19 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -781,6 +987,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -815,10 +1054,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001564",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
-      "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+      "version": "1.0.30001627",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz",
+      "integrity": "sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==",
       "funding": [
         {
           "type": "opencollective",
@@ -832,7 +1081,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -850,6 +1100,44 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -885,6 +1173,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -905,6 +1203,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -989,6 +1300,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1001,6 +1319,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1013,6 +1338,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.789",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.789.tgz",
+      "integrity": "sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1147,6 +1486,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1713,6 +2062,23 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -1727,12 +2093,41 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2108,6 +2503,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2184,6 +2592,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -2406,13 +2824,42 @@
         "set-function-name": "^2.0.1"
       }
     },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/js-yaml": {
-      "version": "4.1.0",
+    "node_modules/jackspeak": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.2.3.tgz",
+      "integrity": "sha512-htOzIMPbpLid/Gq9/zaz9SfExABxqRe1sSCdxntlO/aMD6u0issZQiY25n2GKQUtJ02j7z5sfptlAOMpWWOmvw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
@@ -2508,6 +2955,23 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2616,12 +3080,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -2690,6 +3176,61 @@
         }
       }
     },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2699,6 +3240,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -2909,6 +3460,33 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -2919,9 +3497,10 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -2935,10 +3514,31 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2953,15 +3553,144 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
+      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3046,6 +3775,29 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -3291,6 +4043,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3301,9 +4066,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3316,6 +4082,76 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
@@ -3393,6 +4229,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -3436,6 +4286,78 @@
         }
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
+      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3460,6 +4382,44 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
+      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -3475,6 +4435,29 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3499,6 +4482,13 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -3639,6 +4629,37 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
+      "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3648,6 +4669,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -3751,6 +4779,107 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -3763,6 +4892,19 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.3.tgz",
+      "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index b52e30130..fb27e97e3 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,11 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5"
   }
 }
diff --git a/pageComponents/boards/SearchPost/index.tsx b/pageComponents/boards/SearchPost/index.tsx
index c31dd46d7..05085f53f 100644
--- a/pageComponents/boards/SearchPost/index.tsx
+++ b/pageComponents/boards/SearchPost/index.tsx
@@ -8,6 +8,7 @@ import { FAVORITE, RECENT } from "@/constants/sortBy";
 import useLoad from "@/hooks/useLoad";
 import { getArticle } from "@/apis/getArticles";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
+import { useRouter } from "next/router";
 
 interface ArticleType {
   id: number;
@@ -29,6 +30,7 @@ const SearchPost = () => {
   const [keyword, setKeyword] = useState("");
   const [page, setPage] = useState(1);
   const [isLoading, loadingError, handleLoad] = useLoad(getArticle);
+  const router = useRouter();
 
   const scrollAction = async () => {
     const nextPosts = await handleLoad({
@@ -80,6 +82,10 @@ const SearchPost = () => {
     }
   };
 
+  const handleWriteBtn = () => {
+    router.push("/newArticle");
+  };
+
   useEffect(() => {
     handlePostLoad();
   }, [order]);
@@ -88,7 +94,9 @@ const SearchPost = () => {
     <div className={styles.container}>
       <header>
         <h2 className={styles.title}>게시글</h2>
-        <button className={styles.write_btn}>글쓰기</button>
+        <button className={styles.write_btn} onClick={handleWriteBtn}>
+          글쓰기
+        </button>
       </header>
       <div className={styles.search}>
         <form className={styles.search_input} onSubmit={handleSearchSubmit}>
diff --git a/pages/newArticle/index.tsx b/pages/newArticle/index.tsx
new file mode 100644
index 000000000..a2836f90d
--- /dev/null
+++ b/pages/newArticle/index.tsx
@@ -0,0 +1,35 @@
+import CustomFileInput from "@/components/Inputs/CustomFileInput";
+import CustomInput from "@/components/Inputs/CustomInput";
+import CustomTextArea from "@/components/Inputs/CustomTextArea";
+
+const NewArticle = () => {
+  return (
+    <div className="max-w-[122rem] h-screen px-[1rem] mx-auto my-0 flex flex-col gap-[2.4rem]">
+        
+      <div className="flex justify-between">
+        <h2 className="font-bold text-[2rem] leading-[2.4rem] my-auto mx-0">
+          게시글
+        </h2>
+        <button className="py-[1.2rem] px-[2.3rem] rounded-[0.8rem] bg-gray-400 font-semibold text-[1.6rem] text-white leading-[1.9rem]">
+          등록
+        </button>
+      </div>
+
+      <CustomInput
+        label="*제목"
+        placeholder="제목을 입력하세요"
+        id="title"
+        name="title"
+      />
+      <CustomTextArea
+        label="*내용"
+        placeholder="내용을 입력하세요"
+        id="content"
+        name="content"
+      />
+      <CustomFileInput onDelete={() => {}} name="image" />
+    </div>
+  );
+};
+
+export default NewArticle;
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/styles/globals.css b/styles/globals.css
index eac15da0f..31ef148df 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -23,13 +23,13 @@
   --btn5: #4b5563;
 
   --bannerbg: #cfe5ff;
-  --coolGray50:#F9FAFB;
+  --coolGray50: #f9fafb;
   --coolGray800: #1f2937;
   --coolGray100: #f3f4f6;
-  --coolGray400: #9CA3AF;
-  --coolGray500: #6B7280;
-  --coolGray600: #4B5563;
-  --coolGray800: #1F2937;
+  --coolGray400: #9ca3af;
+  --coolGray500: #6b7280;
+  --coolGray600: #4b5563;
+  --coolGray800: #1f2937;
   /* font-size */
   --font-15: 1.5rem;
   --font-16: 1.6rem;
@@ -60,7 +60,17 @@ a {
   text-decoration: none;
 }
 
-button{
+button {
   cursor: pointer;
   border: none;
-}
\ No newline at end of file
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .flexcenter {
+    @aplly flex items-center justify-center;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..68d6ef645
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pageComponents/**/*.{js,ts,jsx,tsx,mdx}",
+
+    
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

From 44b8d6bc4d148a39b3b55bba2175f0b2ca3a246b Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Wed, 5 Jun 2024 20:28:01 +0900
Subject: [PATCH 03/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8+=EC=84=9C=EB=B2=84=EC=82=AC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B6=88=EB=9F=AC=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/getArticle.ts                            |  40 +++++
 apis/getArticleComments.ts                    |  51 ++++++
 apis/getArticles.ts                           |   8 +-
 components/BackToListButton/index.tsx         |  24 +++
 components/Comment/index.tsx                  |  42 +++++
 components/HeartButton/index.tsx              |  13 ++
 components/Inputs/CustomTextArea/index.tsx    |   3 +
 .../Inputs/CustomTextArea/style.module.css    |   1 -
 components/KebabButton/index.tsx              |  21 +++
 components/NoContentSign/index.tsx            |  31 ++++
 components/RegisterButton/index.tsx           |  36 +++++
 constants/mock.ts                             | 151 +++++++++++-------
 images/Img_reply_empty.png                    | Bin 0 -> 1868 bytes
 images/ic_back.svg                            |   4 +
 images/ic_kebab.svg                           |   5 +
 .../BestPost/components/PostElement/index.tsx |   4 +-
 pageComponents/boards/BestPost/index.tsx      |   4 +-
 .../components/PostElement/index.tsx          |   4 +-
 pageComponents/boards/SearchPost/index.tsx    |   6 +-
 .../boards/[Id]/ArticleContent/index.tsx      |  79 +++++++++
 pages/{newArticle => addArticle}/index.tsx    |  10 +-
 pages/boards/[id]/index.tsx                   | 140 ++++++++++++++++
 tailwind.config.js                            |   7 +-
 23 files changed, 607 insertions(+), 77 deletions(-)
 create mode 100644 apis/getArticle.ts
 create mode 100644 apis/getArticleComments.ts
 create mode 100644 components/BackToListButton/index.tsx
 create mode 100644 components/Comment/index.tsx
 create mode 100644 components/HeartButton/index.tsx
 create mode 100644 components/KebabButton/index.tsx
 create mode 100644 components/NoContentSign/index.tsx
 create mode 100644 components/RegisterButton/index.tsx
 create mode 100644 images/Img_reply_empty.png
 create mode 100644 images/ic_back.svg
 create mode 100644 images/ic_kebab.svg
 create mode 100644 pageComponents/boards/[Id]/ArticleContent/index.tsx
 rename pages/{newArticle => addArticle}/index.tsx (86%)
 create mode 100644 pages/boards/[id]/index.tsx

diff --git a/apis/getArticle.ts b/apis/getArticle.ts
new file mode 100644
index 000000000..43933827f
--- /dev/null
+++ b/apis/getArticle.ts
@@ -0,0 +1,40 @@
+import { axiosInstance } from "./api";
+
+interface GetArticleParams {
+  articleId: number;
+}
+
+interface ArticleType {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export type GetArticleType = (prop: GetArticleParams) => Promise<ArticleType>;
+
+const getArticle: GetArticleType = async ({ articleId }) => {
+  try {
+    const { data } = await axiosInstance.get<ArticleType>(
+      `articles/${articleId}`
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`게시글을 가져오는 데 실패했습니다: ${error.message}`);
+    }
+    throw new Error(
+      "알 수 없는 오류로 인해 게시글을 가져오는 데 실패했습니다."
+    );
+  }
+};
+
+export default getArticle;
diff --git a/apis/getArticleComments.ts b/apis/getArticleComments.ts
new file mode 100644
index 000000000..e2ae077fb
--- /dev/null
+++ b/apis/getArticleComments.ts
@@ -0,0 +1,51 @@
+import { axiosInstance } from "./api";
+
+interface GetArticleCommentsParams {
+  articleId: number;
+  limit: number;
+  cursor?: number;
+}
+
+interface GetArticleCommentsReturn {
+  list: {
+    id: number;
+    content: string;
+    createdAt: string;
+    updatedAt: string;
+    writer: {
+      id: number;
+      nickname: string;
+      image: string | null;
+    };
+  }[];
+  nextCursor: number;
+}
+
+
+export type getArticleCommentsType = (
+  prop: GetArticleCommentsParams
+) => Promise<GetArticleCommentsReturn>;
+
+const getArticleComments: getArticleCommentsType = async ({
+  articleId,
+  limit,
+  cursor,
+}) => {
+  try {
+    const { data } = await axiosInstance.get<GetArticleCommentsReturn>(
+      `articles/${articleId}/comments`,
+      {
+        params: { limit, cursor },
+      }
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`댓글을 가져오는 데 실패했습니다: ${error.message}`);
+    }
+    throw new Error("알 수 없는 오류가 발생했어요 ㅠ.");
+  }
+};
+
+export default getArticleComments;
diff --git a/apis/getArticles.ts b/apis/getArticles.ts
index 322876edc..b9ab094b1 100644
--- a/apis/getArticles.ts
+++ b/apis/getArticles.ts
@@ -1,6 +1,6 @@
 import { axiosInstance } from "./api";
 
-interface GetArticleParams {
+interface GetArticlesParams {
   page: number;
   pageSize: number;
   orderBy: string;
@@ -26,9 +26,9 @@ interface Articles {
   totalCount: number;
 }
 
-export type GetArticleType = (prop: GetArticleParams) => Promise<Articles>;
+export type GetArticleType = (prop: GetArticlesParams) => Promise<Articles>;
 
-const getArticle: GetArticleType = async ({
+const getArticles: GetArticleType = async ({
   page,
   pageSize,
   orderBy,
@@ -50,4 +50,4 @@ const getArticle: GetArticleType = async ({
   }
 };
 
-export { getArticle };
+export { getArticles };
diff --git a/components/BackToListButton/index.tsx b/components/BackToListButton/index.tsx
new file mode 100644
index 000000000..9db36d56e
--- /dev/null
+++ b/components/BackToListButton/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Image from "next/image";
+import ic_back from "@/images/ic_back.svg";
+import { useRouter } from "next/router";
+
+const BackToListButton = () => {
+  const router = useRouter();
+
+  return (
+    <button
+      className="w-[24rem] h-[4.8rem] bg-[#3692FF] rounded-[4rem] border-none flex justify-center items-center gap-[1rem] cursor-pointer"
+      onClick={() => {
+        router.push("/boards");
+      }}
+    >
+      <span className="font-semibold text-[1.8rem] leading-[2.4rem] text-white">
+        목록으로 돌아가기
+      </span>
+      <Image src={ic_back} alt="목록으로 돌아가기" width={24} height={24} />
+    </button>
+  );
+};
+
+export default BackToListButton;
diff --git a/components/Comment/index.tsx b/components/Comment/index.tsx
new file mode 100644
index 000000000..0809b79e3
--- /dev/null
+++ b/components/Comment/index.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import KebabButton from "../KebabButton";
+import Image from "next/image";
+import ic_user from "@/images/ic_user.png";
+import formatTime from "@/utils/formatTime";
+
+interface CommentProp {
+  nickname: string;
+  image: string | null;
+  updatedAt: string;
+  content: string;
+}
+
+const Comment = ({ nickname, image, updatedAt, content }: CommentProp) => {
+  const date = formatTime(updatedAt);
+  return (
+    <div className="min-h-[9.7rem] pb-[2.4rem] sm:pb-[1.6rem] border-b-[0.1rem] border-gray-200">
+      <div className="flex justify-between mb-[2.4rem]">
+        <h3 className="font-normal text-[1.4rem] leading-[1.7rem] text-gray-800">
+          {content}
+        </h3>
+        <div className="align-top">
+          <KebabButton width={24} height={24} />
+        </div>
+      </div>
+
+      <div className="flex gap-[0.8rem]">
+        {image ? (
+          <Image src={image} alt="유저 아이콘" width={32} height={32} />
+        ) : (
+          <Image src={ic_user} alt="유저 아이콘" width={32} height={32} />
+        )}
+        <div className="flex flex-col gap-[0.4rem]">
+          <span className="font-normal text-[1.2rem] leading-[1.4rem] text-gray-600">{nickname}</span>
+          <span className="font-normal text-[1.2rem] leading-[1.4rem] text-gray-400">{date}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/components/HeartButton/index.tsx b/components/HeartButton/index.tsx
new file mode 100644
index 000000000..0ccd67f87
--- /dev/null
+++ b/components/HeartButton/index.tsx
@@ -0,0 +1,13 @@
+import Image from "next/image";
+import ic_heart from "@/images/ic_heart.svg";
+
+interface HeartButtonProp {
+  width: number;
+  height: number;
+}
+
+const HeartButton = ({ width, height }: HeartButtonProp) => {
+  return <Image src={ic_heart} alt="하트 버튼" width={width} height={height} />;
+};
+
+export default HeartButton;
diff --git a/components/Inputs/CustomTextArea/index.tsx b/components/Inputs/CustomTextArea/index.tsx
index 224499627..f512aa162 100644
--- a/components/Inputs/CustomTextArea/index.tsx
+++ b/components/Inputs/CustomTextArea/index.tsx
@@ -8,6 +8,7 @@ interface PropType {
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   id: string;
   name: string;
+  textAreaHeight: number;
 }
 
 const CustomTextArea = ({
@@ -17,6 +18,7 @@ const CustomTextArea = ({
   onChange,
   id,
   name,
+  textAreaHeight,
 }: PropType) => {
   return (
     <div className={styles.container}>
@@ -27,6 +29,7 @@ const CustomTextArea = ({
         placeholder={placeholder}
         value={value}
         onChange={onChange}
+        style={{ height: `${textAreaHeight}px` }}
       />
     </div>
   );
diff --git a/components/Inputs/CustomTextArea/style.module.css b/components/Inputs/CustomTextArea/style.module.css
index 00c2cfcdc..fda851f67 100644
--- a/components/Inputs/CustomTextArea/style.module.css
+++ b/components/Inputs/CustomTextArea/style.module.css
@@ -11,7 +11,6 @@
 }
 
 .container textarea {
-  height: 20rem;
   padding: 1.6rem 2.4rem;
   border-radius: 1.2rem;
   border: none;
diff --git a/components/KebabButton/index.tsx b/components/KebabButton/index.tsx
new file mode 100644
index 000000000..784c7c490
--- /dev/null
+++ b/components/KebabButton/index.tsx
@@ -0,0 +1,21 @@
+import Image from "next/image";
+import ic_kabab from "@/images/ic_kebab.svg";
+
+interface KebabButtonProp {
+  width: number;
+  height: number;
+}
+
+const KebabButton = ({ width = 24, height = 24 }: KebabButtonProp) => {
+  return (
+    <Image
+      src={ic_kabab}
+      alt="메뉴 아이콘"
+      width={width}
+      height={height}
+      style={{ cursor: "pointer" }}
+    />
+  );
+};
+
+export default KebabButton;
diff --git a/components/NoContentSign/index.tsx b/components/NoContentSign/index.tsx
new file mode 100644
index 000000000..7f436d36c
--- /dev/null
+++ b/components/NoContentSign/index.tsx
@@ -0,0 +1,31 @@
+import Image, { StaticImageData } from "next/image";
+import React from "react";
+
+interface NoContentSignProp {
+  image: StaticImageData;
+  children: string;
+  imageWidth: number;
+  imageHeight: number;
+}
+const NoContentSign = ({
+  image,
+  imageWidth,
+  imageHeight,
+  children,
+}: NoContentSignProp) => {
+  return (
+    <div className="flex flex-col gap-[0.7rem] items-center whitespace-pre-wrap">
+      <Image
+        src={image}
+        alt="안내 사진"
+        width={imageWidth}
+        height={imageHeight}
+      />
+      <p className="text-center font-normal text-[1.6rem] leading-[2.4rem] text-gray-400">
+        {children}
+      </p>
+    </div>
+  );
+};
+
+export default NoContentSign;
diff --git a/components/RegisterButton/index.tsx b/components/RegisterButton/index.tsx
new file mode 100644
index 000000000..195b95740
--- /dev/null
+++ b/components/RegisterButton/index.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+interface RegisterButtonProp {
+  width: number;
+  height: number;
+  disabled: boolean;
+  children: string;
+  onClick: () => void;
+}
+
+const RegisterButton = ({
+  width,
+  height,
+  disabled,
+  children,
+  onClick
+}: RegisterButtonProp) => {
+  const style = {
+    width: `${width}px`,
+    height: `${height}px`,
+    backgroundColor: disabled ? "#9CA3AF" : "#3692FF",
+    color: "white",
+    cursor: disabled ? "not-allowed" : "pointer",
+    border: "none",
+    borderRadius: "8px",
+    fontSize: "16px",
+  };
+
+  return (
+    <button style={style} disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export default RegisterButton;
diff --git a/constants/mock.ts b/constants/mock.ts
index 9443b2300..031cdaf36 100644
--- a/constants/mock.ts
+++ b/constants/mock.ts
@@ -59,73 +59,112 @@ export const bestPost: PostType[] = [
 ];
 
 export const posts: PostType[] = [
-    {
-      id: 6,
-      title: "모각공 하실 분 구해요~",
-      content: "모각공 하실 분 구해요~",
-      image: null,
-      likeCount: 0,
-      createdAt: "2024-05-27T16:54:59.925Z",
-      updatedAt: "2024-05-27T16:54:59.925Z",
-      writer: {
-        id: 33,
-        nickname: "신승화",
-      },
+  {
+    id: 6,
+    title: "모각공 하실 분 구해요~",
+    content: "모각공 하실 분 구해요~",
+    image: null,
+    likeCount: 0,
+    createdAt: "2024-05-27T16:54:59.925Z",
+    updatedAt: "2024-05-27T16:54:59.925Z",
+    writer: {
+      id: 33,
+      nickname: "신승화",
     },
-    {
-      id: 5,
-      title: "혹시 오늘 도림천 같이 산책할 분 계신가요~?",
-      content: "혹시 오늘 도림천 같이 산책할 분 계신가요~?",
-      image: null,
-      likeCount: 0,
-      createdAt: "2024-05-27T16:54:39.090Z",
-      updatedAt: "2024-05-27T16:54:39.090Z",
-      writer: {
-        id: 33,
-        nickname: "신승화",
-      },
+  },
+  {
+    id: 5,
+    title: "혹시 오늘 도림천 같이 산책할 분 계신가요~?",
+    content: "혹시 오늘 도림천 같이 산책할 분 계신가요~?",
+    image: null,
+    likeCount: 0,
+    createdAt: "2024-05-27T16:54:39.090Z",
+    updatedAt: "2024-05-27T16:54:39.090Z",
+    writer: {
+      id: 33,
+      nickname: "신승화",
+    },
+  },
+  {
+    id: 4,
+    title: "오늘 모각공하실 분 구합니다~",
+    content:
+      "오늘 모각공하실 분 구합니다~ 장소는 홍대입니다. 010-1234-1234 연락주시거나 댓글을 달아주세요",
+    image: null,
+    likeCount: 3,
+    createdAt: "2024-05-27T07:17:29.557Z",
+    updatedAt: "2024-05-27T16:50:28.178Z",
+    writer: {
+      id: 28,
+      nickname: "용섭이",
     },
+  },
+  {
+    id: 3,
+    title: "심심풀이 사주 봐드려요~",
+    content: "심심풀이 사주 봐드려요~ 댓글 마구 남겨주세요!!",
+    image:
+      "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Sprint_Mission/user/28/1716791726725/saju.jpeg",
+    likeCount: 4,
+    createdAt: "2024-05-27T06:35:44.517Z",
+    updatedAt: "2024-05-27T16:51:04.178Z",
+    writer: {
+      id: 28,
+      nickname: "용섭이",
+    },
+  },
+  {
+    id: 2,
+    title: "맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요?",
+    content:
+      "맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요? 알려주시면 감사합니당~ 사진도 같이 첨부해요",
+    image:
+      "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Sprint_Mission/user/28/1716791518729/mac.jpeg",
+    likeCount: 5,
+    createdAt: "2024-05-27T06:32:16.745Z",
+    updatedAt: "2024-05-27T16:51:28.147Z",
+    writer: {
+      id: 28,
+      nickname: "용섭이",
+    },
+  },
+];
+
+export const articleComments = {
+  list: [
     {
-      id: 4,
-      title: "오늘 모각공하실 분 구합니다~",
-      content:
-        "오늘 모각공하실 분 구합니다~ 장소는 홍대입니다. 010-1234-1234 연락주시거나 댓글을 달아주세요",
-      image: null,
-      likeCount: 3,
-      createdAt: "2024-05-27T07:17:29.557Z",
-      updatedAt: "2024-05-27T16:50:28.178Z",
+      id: 39,
+      content: "asdasd",
+      createdAt: "2024-06-05T01:13:18.067Z",
+      updatedAt: "2024-06-05T01:13:18.067Z",
       writer: {
-        id: 28,
-        nickname: "용섭이",
+        id: 34,
+        nickname: "Bermuda",
+        image: null,
       },
     },
     {
-      id: 3,
-      title: "심심풀이 사주 봐드려요~",
-      content: "심심풀이 사주 봐드려요~ 댓글 마구 남겨주세요!!",
-      image:
-        "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Sprint_Mission/user/28/1716791726725/saju.jpeg",
-      likeCount: 4,
-      createdAt: "2024-05-27T06:35:44.517Z",
-      updatedAt: "2024-05-27T16:51:04.178Z",
+      id: 38,
+      content: "123",
+      createdAt: "2024-06-05T01:12:38.038Z",
+      updatedAt: "2024-06-05T01:12:38.038Z",
       writer: {
-        id: 28,
-        nickname: "용섭이",
+        id: 34,
+        nickname: "Bermuda",
+        image: null,
       },
     },
     {
-      id: 2,
-      title: "맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요?",
-      content:
-        "맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요? 알려주시면 감사합니당~ 사진도 같이 첨부해요",
-      image:
-        "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Sprint_Mission/user/28/1716791518729/mac.jpeg",
-      likeCount: 5,
-      createdAt: "2024-05-27T06:32:16.745Z",
-      updatedAt: "2024-05-27T16:51:28.147Z",
+      id: 37,
+      content: "asd",
+      createdAt: "2024-06-05T01:12:26.144Z",
+      updatedAt: "2024-06-05T01:12:26.144Z",
       writer: {
-        id: 28,
-        nickname: "용섭이",
+        id: 34,
+        nickname: "Bermuda",
+        image: null,
       },
     },
-  ];
\ No newline at end of file
+  ],
+  nextCursor: 37,
+};
diff --git a/images/Img_reply_empty.png b/images/Img_reply_empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac38f73b59df38f842e0c6cf71b08dadabfc2f43
GIT binary patch
literal 1868
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
GLSTYrTy?4d

literal 0
HcmV?d00001

diff --git a/images/ic_back.svg b/images/ic_back.svg
new file mode 100644
index 000000000..253a47d7b
--- /dev/null
+++ b/images/ic_back.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5332 3.6C6.03615 3.6 5.6332 4.00294 5.6332 4.5C5.6332 4.99706 6.03615 5.4 6.5332 5.4V3.6ZM6.5332 5.4H16.6665V3.6H6.5332V5.4ZM21.0999 9.83333V10.9H22.8999V9.83333H21.0999ZM16.6665 15.3333H6.5332V17.1333H16.6665V15.3333ZM21.0999 10.9C21.0999 13.3485 19.115 15.3333 16.6665 15.3333V17.1333C20.1091 17.1333 22.8999 14.3426 22.8999 10.9H21.0999ZM16.6665 5.4C19.115 5.4 21.0999 7.38487 21.0999 9.83333H22.8999C22.8999 6.39076 20.1091 3.6 16.6665 3.6V5.4Z" fill="white"/>
+<path d="M3 16.2333L10.2 12.5383L10.2 19.9284L3 16.2333Z" fill="white"/>
+</svg>
diff --git a/images/ic_kebab.svg b/images/ic_kebab.svg
new file mode 100644
index 000000000..dd7ed7f5e
--- /dev/null
+++ b/images/ic_kebab.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="6.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="11.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="16.5" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/pageComponents/boards/BestPost/components/PostElement/index.tsx b/pageComponents/boards/BestPost/components/PostElement/index.tsx
index defad7fc3..305a3e989 100644
--- a/pageComponents/boards/BestPost/components/PostElement/index.tsx
+++ b/pageComponents/boards/BestPost/components/PostElement/index.tsx
@@ -20,13 +20,13 @@ interface PostType {
 }
 
 const PostElement = ({
-  post: { title, image, likeCount, updatedAt, writer },
+  post: { id, title, image, likeCount, updatedAt, writer },
 }: {
   post: PostType;
 }) => {
   const postingDate = formatTime(updatedAt);
   return (
-    <Link href="/boards" className={styles.container}>
+    <Link href={`/boards/${id}`} className={styles.container}>
       <div className={styles.contents}>
         <div className={styles.best}>
           <div className={styles.best_contents}>
diff --git a/pageComponents/boards/BestPost/index.tsx b/pageComponents/boards/BestPost/index.tsx
index 45b5339ee..735783bb6 100644
--- a/pageComponents/boards/BestPost/index.tsx
+++ b/pageComponents/boards/BestPost/index.tsx
@@ -3,7 +3,7 @@ import PostElement from "./components/PostElement";
 import styles from "./style.module.css";
 import useSetNumOfItemsToShow from "@/hooks/useSetNumberOfItemsToShow";
 import useLoad from "@/hooks/useLoad";
-import { getArticle } from "@/apis/getArticles";
+import { getArticles } from "@/apis/getArticles";
 import { FAVORITE, RECENT } from "@/constants/sortBy";
 
 interface ArticleType {
@@ -28,7 +28,7 @@ const BestPost = () => {
     mobile: 1,
   });
   const showedPost = posts.slice(0, numOfItemsToShow);
-  const [isLoading, loadingError, handleLoad] = useLoad(getArticle);
+  const [isLoading, loadingError, handleLoad] = useLoad(getArticles);
 
   const handleBestPostLoad = async () => {
     const nextPosts = await handleLoad({
diff --git a/pageComponents/boards/SearchPost/components/PostElement/index.tsx b/pageComponents/boards/SearchPost/components/PostElement/index.tsx
index 7c57ffef9..8bf5528e8 100644
--- a/pageComponents/boards/SearchPost/components/PostElement/index.tsx
+++ b/pageComponents/boards/SearchPost/components/PostElement/index.tsx
@@ -19,10 +19,10 @@ interface PostType {
   };
 }
 const PostElement = ({ post }: { post: PostType }) => {
-  const { title, image, likeCount, updatedAt, writer } = post;
+  const { id, title, image, likeCount, updatedAt, writer } = post;
   const postingDate = formatTime(updatedAt);
   return (
-    <Link href="/boards" className={styles.container}>
+    <Link href={`/boards/${id}`} className={styles.container}>
       <div className={styles.title_img}>
         <h2 className={styles.title}>{title}</h2>
         {image && (
diff --git a/pageComponents/boards/SearchPost/index.tsx b/pageComponents/boards/SearchPost/index.tsx
index 05085f53f..2750740c7 100644
--- a/pageComponents/boards/SearchPost/index.tsx
+++ b/pageComponents/boards/SearchPost/index.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 import ic_search from "@/images/ic_search.svg";
 import { FAVORITE, RECENT } from "@/constants/sortBy";
 import useLoad from "@/hooks/useLoad";
-import { getArticle } from "@/apis/getArticles";
+import { getArticles } from "@/apis/getArticles";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
 import { useRouter } from "next/router";
 
@@ -29,7 +29,7 @@ const SearchPost = () => {
   const [order, setOrder] = useState(RECENT);
   const [keyword, setKeyword] = useState("");
   const [page, setPage] = useState(1);
-  const [isLoading, loadingError, handleLoad] = useLoad(getArticle);
+  const [isLoading, loadingError, handleLoad] = useLoad(getArticles);
   const router = useRouter();
 
   const scrollAction = async () => {
@@ -83,7 +83,7 @@ const SearchPost = () => {
   };
 
   const handleWriteBtn = () => {
-    router.push("/newArticle");
+    router.push("/addArticle");
   };
 
   useEffect(() => {
diff --git a/pageComponents/boards/[Id]/ArticleContent/index.tsx b/pageComponents/boards/[Id]/ArticleContent/index.tsx
new file mode 100644
index 000000000..70f5417ba
--- /dev/null
+++ b/pageComponents/boards/[Id]/ArticleContent/index.tsx
@@ -0,0 +1,79 @@
+import HeartButton from "@/components/HeartButton";
+import Image from "next/image";
+import ic_kabab from "@/images/ic_kebab.svg";
+import ic_user from "@/images/ic_user.png";
+import formatTime from "@/utils/formatTime";
+import KebabButton from "@/components/KebabButton";
+
+interface PropType {
+  id: number;
+  title: string;
+  content: string;
+  image: string | null;
+  likeCount: number;
+  updatedAt: string;
+  nickname: string;
+}
+
+const ArticleContent = ({
+  id,
+  title,
+  content,
+  image,
+  likeCount,
+  updatedAt,
+  nickname,
+}: PropType) => {
+  const date = formatTime(updatedAt);
+  return (
+    <div className="w-full flex flex-col gap-[1.6rem]">
+      <div className="flex justify-between">
+        <h2 className="font-bold text-[2rem] leading-[2.4rem]">{title}</h2>
+        <div className="align-top">
+          <KebabButton width={24} height={24} />
+        </div>
+      </div>
+
+      <div className="flex gap-[1.6rem]">
+        <div className="flex gap-[0.8rem] items-center">
+          <Image src={ic_user} alt="유저 아이콘" width={24} height={24} />
+          <span className="font-normal text-[1.4rem] leading-[1.7rem] text-gray-600">
+            {nickname}
+          </span>
+          <span className="font-normal text-[1.2rem] leading-[1.4rem] text-gray-400">
+            {date}
+          </span>
+        </div>
+
+        <div
+          className="w-[0.1rem] bg-gray-200
+          h-full"
+        />
+
+        <div className="flex items-center gap-[0.4rem]">
+          <HeartButton width={24} height={24} />
+          <span className="font-normal text-[1.4rem] leading-[1.7rem] text-gray-500">
+            {likeCount}
+          </span>
+        </div>
+      </div>
+
+      <div
+        className="h-[0.1rem] bg-gray-200
+          w-full"
+      />
+
+      <div className="flex justify-between">
+        <p className="font-normal text-[1.6rem] leading-[2.4rem] text-gray-800">
+          {content}
+        </p>
+
+        {image && (
+          <Image src={image} alt="게시물 사진" width={72} height={72} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ArticleContent;
diff --git a/pages/newArticle/index.tsx b/pages/addArticle/index.tsx
similarity index 86%
rename from pages/newArticle/index.tsx
rename to pages/addArticle/index.tsx
index a2836f90d..88fc73709 100644
--- a/pages/newArticle/index.tsx
+++ b/pages/addArticle/index.tsx
@@ -2,13 +2,12 @@ import CustomFileInput from "@/components/Inputs/CustomFileInput";
 import CustomInput from "@/components/Inputs/CustomInput";
 import CustomTextArea from "@/components/Inputs/CustomTextArea";
 
-const NewArticle = () => {
+const AddArticle = () => {
   return (
-    <div className="max-w-[122rem] h-screen px-[1rem] mx-auto my-0 flex flex-col gap-[2.4rem]">
-        
+    <div className="max-w-[122rem] h-screen px-[1rem] mx-auto my-[2.4rem] flex flex-col gap-[2.4rem]">
       <div className="flex justify-between">
         <h2 className="font-bold text-[2rem] leading-[2.4rem] my-auto mx-0">
-          게시글
+          게시글 쓰기
         </h2>
         <button className="py-[1.2rem] px-[2.3rem] rounded-[0.8rem] bg-gray-400 font-semibold text-[1.6rem] text-white leading-[1.9rem]">
           등록
@@ -26,10 +25,11 @@ const NewArticle = () => {
         placeholder="내용을 입력하세요"
         id="content"
         name="content"
+        textAreaHeight={200}
       />
       <CustomFileInput onDelete={() => {}} name="image" />
     </div>
   );
 };
 
-export default NewArticle;
+export default AddArticle;
diff --git a/pages/boards/[id]/index.tsx b/pages/boards/[id]/index.tsx
new file mode 100644
index 000000000..c203ec398
--- /dev/null
+++ b/pages/boards/[id]/index.tsx
@@ -0,0 +1,140 @@
+import BackToListButton from "@/components/BackToListButton";
+import Comment from "@/components/Comment";
+import CustomTextArea from "@/components/Inputs/CustomTextArea";
+import RegisterButton from "@/components/RegisterButton";
+import ArticleContent from "@/pageComponents/boards/[Id]/ArticleContent";
+import { ChangeEvent, useEffect, useState } from "react";
+import getArticle from "@/apis/getArticle";
+import { GetServerSidePropsContext } from "next";
+import getArticleComments from "@/apis/getArticleComments";
+import NoContentSign from "@/components/NoContentSign";
+import empty_sign from "@/images/Img_reply_empty.png";
+
+interface ArticleType {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+}
+interface ArticleComments {
+  list: {
+    id: number;
+    content: string;
+    createdAt: string;
+    updatedAt: string;
+    writer: {
+      id: number;
+      nickname: string;
+      image: string | null;
+    };
+  }[];
+  nextCursor: number;
+}
+
+interface ArticleDetailProps {
+  article: ArticleType;
+  articleComments: ArticleComments;
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { id } = context.query;
+  const articleId = Number(id);
+
+  if (isNaN(articleId)) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const article = await getArticle({ articleId });
+  const articleComments = await getArticleComments({ articleId, limit: 3 });
+
+  return {
+    props: {
+      article,
+      articleComments,
+    },
+  };
+}
+
+const ArticleDetail = ({ article, articleComments }: ArticleDetailProps) => {
+  const { id, title, content, image, likeCount, updatedAt, writer } = article;
+  const comments = articleComments.list;
+  const [newComment, setNewComment] = useState("");
+
+  const handleTextArea = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setNewComment(e.target.value);
+  };
+
+  useEffect(() => {}, []);
+
+  return (
+    <div className="max-w-[122rem] h-screen px-[1rem] mx-auto flex flex-col gap-[2.4rem] my-[2.4rem]">
+      <ArticleContent
+        id={id}
+        title={title}
+        content={content}
+        image={image}
+        likeCount={likeCount}
+        updatedAt={updatedAt}
+        nickname={writer.nickname}
+      />
+
+      <div className="h-[4rem] sm:h-[1.6rem]" />
+
+      <div className="flex flex-col gap-[1.6rem]">
+        <CustomTextArea
+          label="댓글 달기"
+          placeholder="좋은 말할 때 댓글 달아라"
+          id="comment"
+          name="content"
+          textAreaHeight={104}
+          onChange={handleTextArea}
+          value={newComment}
+        />
+        <div className="text-end">
+          <RegisterButton
+            width={74}
+            height={42}
+            disabled={newComment === ""}
+            onClick={() => {}}
+          >
+            등록
+          </RegisterButton>
+        </div>
+      </div>
+
+      <div className="w-full max-h-[34rem] flex flex-col gap-[2.4rem]">
+        {comments.length === 0 && (
+          <NoContentSign image={empty_sign} imageHeight={140} imageWidth={140}>
+            {"아직 댓글이 없어요,\n 지금 댓글을 달아주세요"}
+          </NoContentSign>
+        )}
+        {comments.map((comment) => {
+          return (
+            <Comment
+              key={comment.id}
+              nickname={comment.writer.nickname}
+              image={comment.writer.image}
+              updatedAt={comment.updatedAt}
+              content={comment.content}
+            />
+          );
+        })}
+      </div>
+      <div className="h-[1.6rem]" />
+      <div className="flex justify-center">
+        <BackToListButton />
+      </div>
+    </div>
+  );
+};
+
+export default ArticleDetail;
diff --git a/tailwind.config.js b/tailwind.config.js
index 68d6ef645..d15b8d8ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,11 +4,14 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./pageComponents/**/*.{js,ts,jsx,tsx,mdx}",
-
-    
   ],
   theme: {
     extend: {},
+    screens: {
+      sm: { min: "0px", max: "375px" },
+      md: { min: "376px", max: "744px" },
+      lg: { min: "1920px" },
+    },
   },
   plugins: [],
 };

From 747843af18c206195b8de68ef2a16008dfb65289 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Wed, 5 Jun 2024 20:32:53 +0900
Subject: [PATCH 04/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=9E=90=EC=9C=A0?=
 =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=ED=97=A4=EB=8D=94=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EB=8F=84=20?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 7e3ca3854..ebe8f785b 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -19,7 +19,7 @@ const Header = () => {
           <Link
             href="/boards"
             className={`${styles.navLink} ${
-              pathname === "/boards" ? styles.active : ""
+              pathname.includes("/boards") ? styles.active : ""
             }`}
           >
             자유게시판

From 2a8d35284e51815c1315bc15b701410f420337eb Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Wed, 5 Jun 2024 20:34:34 +0900
Subject: [PATCH 05/13] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EA=B8=80=EC=9E=90=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pageComponents/boards/SearchPost/style.module.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pageComponents/boards/SearchPost/style.module.css b/pageComponents/boards/SearchPost/style.module.css
index 42ca9f962..3365fae04 100644
--- a/pageComponents/boards/SearchPost/style.module.css
+++ b/pageComponents/boards/SearchPost/style.module.css
@@ -64,6 +64,10 @@
   background-color: var(--coolGray100);
   border: none;
   padding-left: 4.4rem;
+
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: black;
 }
 
 .search_input input::placeholder {
@@ -88,4 +92,4 @@
   .selectOrderBtn {
     width: 4.2rem;
   }
-}
\ No newline at end of file
+}

From c5c1c655752c2183a3952c732d495b37f40c0551 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Thu, 6 Jun 2024 15:33:02 +0900
Subject: [PATCH 06/13] =?UTF-8?q?=E2=9C=A8=20Feat:=EC=A2=8B=EC=95=84?=
 =?UTF-8?q?=EC=9A=94=20=EB=B2=84=ED=8A=BC=20api=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/getArticles.ts                           |  6 ++-
 apis/postArticleLike.ts                       | 42 +++++++++++++++++++
 components/HeartButton/index.tsx              | 14 ++++++-
 hooks/useLoad.ts                              |  6 +--
 next.config.js                                | 17 ++++----
 .../boards/[Id]/ArticleContent/index.tsx      | 15 ++++++-
 6 files changed, 83 insertions(+), 17 deletions(-)
 create mode 100644 apis/postArticleLike.ts

diff --git a/apis/getArticles.ts b/apis/getArticles.ts
index b9ab094b1..f51af7c97 100644
--- a/apis/getArticles.ts
+++ b/apis/getArticles.ts
@@ -26,9 +26,11 @@ interface Articles {
   totalCount: number;
 }
 
-export type GetArticleType = (prop: GetArticlesParams) => Promise<Articles>;
+export type GetArticlesType = (
+  prop: GetArticlesParams
+) => Promise<Articles | undefined>;
 
-const getArticles: GetArticleType = async ({
+const getArticles: GetArticlesType = async ({
   page,
   pageSize,
   orderBy,
diff --git a/apis/postArticleLike.ts b/apis/postArticleLike.ts
new file mode 100644
index 000000000..006e0e602
--- /dev/null
+++ b/apis/postArticleLike.ts
@@ -0,0 +1,42 @@
+import { axiosInstance } from "./api";
+
+interface PostArticleLikeParams {
+  articleId: number;
+}
+
+interface Response {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+  isLiked: boolean;
+}
+
+export type PostArticleLike = (
+  prop: PostArticleLikeParams
+) => Promise<Response>;
+//Post 요청일 경우 보통 리스폰스를 받아서 확인하나요?
+
+const postArticleLike: PostArticleLike = async ({ articleId }) => {
+  try {
+    const { data } = await axiosInstance.get<Response>(
+      `articles/${articleId}/like`
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`좋아요를 할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 인해 좋아요를 할 수 없습니다.");
+  }
+};
+
+export default postArticleLike;
diff --git a/components/HeartButton/index.tsx b/components/HeartButton/index.tsx
index 0ccd67f87..bcfc5ccd1 100644
--- a/components/HeartButton/index.tsx
+++ b/components/HeartButton/index.tsx
@@ -4,10 +4,20 @@ import ic_heart from "@/images/ic_heart.svg";
 interface HeartButtonProp {
   width: number;
   height: number;
+  onClick?: () => void;
 }
 
-const HeartButton = ({ width, height }: HeartButtonProp) => {
-  return <Image src={ic_heart} alt="하트 버튼" width={width} height={height} />;
+const HeartButton = ({ width, height, onClick }: HeartButtonProp) => {
+  return (
+    <Image
+      src={ic_heart}
+      alt="하트 버튼"
+      width={width}
+      height={height}
+      className="cursor-pointer"
+      onClick={onClick}
+    />
+  );
 };
 
 export default HeartButton;
diff --git a/hooks/useLoad.ts b/hooks/useLoad.ts
index 74ee5c109..053129bed 100644
--- a/hooks/useLoad.ts
+++ b/hooks/useLoad.ts
@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { GetArticleType } from "@/apis/getArticles";
+import { GetArticlesType } from "@/apis/getArticles";
+
+type PropGetData = GetArticlesType;
 
-type PropGetData = GetArticleType;
-// 나중에 다른 api 함수들도 유니온 |로 추가 할 예정인데, 좀 귀찮은 것 같아요. 더 좋은 방법 없나여?
 type HandleLoadType = (
   ...arg: Parameters<PropGetData>
 ) => ReturnType<PropGetData>;
diff --git a/next.config.js b/next.config.js
index adf5c7e49..e4f344fe4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,14 +2,15 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
-        port: "",
-        pathname: "/Sprint_Mission/user/28/**",
-      },
-    ],
+    domains: ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com"],
+    // remotePatterns: [
+    //   {
+    //     protocol: "https",
+    //     hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+    //     port: "",
+    //     pathname: "/Sprint_Mission/user/28/**",
+    //   },
+    // ],
   },
 };
 
diff --git a/pageComponents/boards/[Id]/ArticleContent/index.tsx b/pageComponents/boards/[Id]/ArticleContent/index.tsx
index 70f5417ba..8ff368d18 100644
--- a/pageComponents/boards/[Id]/ArticleContent/index.tsx
+++ b/pageComponents/boards/[Id]/ArticleContent/index.tsx
@@ -1,9 +1,9 @@
 import HeartButton from "@/components/HeartButton";
 import Image from "next/image";
-import ic_kabab from "@/images/ic_kebab.svg";
 import ic_user from "@/images/ic_user.png";
 import formatTime from "@/utils/formatTime";
 import KebabButton from "@/components/KebabButton";
+import postArticleLike from "@/apis/postArticleLike";
 
 interface PropType {
   id: number;
@@ -25,6 +25,17 @@ const ArticleContent = ({
   nickname,
 }: PropType) => {
   const date = formatTime(updatedAt);
+
+  const handleHeartButton = async () => {
+    try {
+      await postArticleLike({ articleId: id });
+    } catch (error) {
+      if (error instanceof Error) {
+        window.alert(error.message);
+      }
+    }
+  };
+
   return (
     <div className="w-full flex flex-col gap-[1.6rem]">
       <div className="flex justify-between">
@@ -51,7 +62,7 @@ const ArticleContent = ({
         />
 
         <div className="flex items-center gap-[0.4rem]">
-          <HeartButton width={24} height={24} />
+          <HeartButton width={24} height={24} onClick={handleHeartButton} />
           <span className="font-normal text-[1.4rem] leading-[1.7rem] text-gray-500">
             {likeCount}
           </span>

From cd525a15eb1b0c6db51982f88bec84d76b9e8e88 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Thu, 6 Jun 2024 17:08:25 +0900
Subject: [PATCH 07/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EA=B8=80=20=EB=93=B1=EB=A1=9D=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/postArticle.ts                         | 43 +++++++++++
 apis/postArticleLike.ts                     |  2 +-
 components/Inputs/CustomFileInput/index.tsx |  6 +-
 components/RegisterButton/index.tsx         |  2 +-
 pages/addArticle/index.tsx                  | 85 ++++++++++++++++++++-
 5 files changed, 128 insertions(+), 10 deletions(-)
 create mode 100644 apis/postArticle.ts

diff --git a/apis/postArticle.ts b/apis/postArticle.ts
new file mode 100644
index 000000000..d1839346f
--- /dev/null
+++ b/apis/postArticle.ts
@@ -0,0 +1,43 @@
+import { axiosInstance } from "./api";
+
+interface PostArticleParams {
+  image: File | null;
+  content: string;
+  title: string;
+}
+
+interface Response {
+  createdAt: string;
+  updatedAt: string;
+  likeCount: number;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+  image: string | null;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export type PostArticle = (prop: PostArticleParams) => Promise<Response>;
+//Post 요청일 경우 보통 리스폰스를 받아서 확인하나요?
+
+const postArticle: PostArticle = async ({ image, content, title }) => {
+  try {
+    const { data } = await axiosInstance.post<Response>(`articles`, {
+      image,
+      content,
+      title,
+    });
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`게시글을 등록할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 게시글을 등록할 수 없습니다.");
+  }
+};
+
+export default postArticle;
diff --git a/apis/postArticleLike.ts b/apis/postArticleLike.ts
index 006e0e602..a3cc3b4f9 100644
--- a/apis/postArticleLike.ts
+++ b/apis/postArticleLike.ts
@@ -26,7 +26,7 @@ export type PostArticleLike = (
 
 const postArticleLike: PostArticleLike = async ({ articleId }) => {
   try {
-    const { data } = await axiosInstance.get<Response>(
+    const { data } = await axiosInstance.post<Response>(
       `articles/${articleId}/like`
     );
     return data;
diff --git a/components/Inputs/CustomFileInput/index.tsx b/components/Inputs/CustomFileInput/index.tsx
index 058be261d..143e30a29 100644
--- a/components/Inputs/CustomFileInput/index.tsx
+++ b/components/Inputs/CustomFileInput/index.tsx
@@ -54,11 +54,7 @@ const CustomFileInput = ({ value, onChange, onDelete, name }: PropType) => {
         />
         {value && (
           <div className={styles.preview_section}>
-            <Image
-              src={preview}
-              alt="이미지 미리보기"
-              className={styles.image_preview}
-            />
+            <Image src={preview} alt="이미지 미리보기" fill />
             <Image
               src={deleteImgButton}
               alt="이미지 삭제"
diff --git a/components/RegisterButton/index.tsx b/components/RegisterButton/index.tsx
index 195b95740..c3ec951ad 100644
--- a/components/RegisterButton/index.tsx
+++ b/components/RegisterButton/index.tsx
@@ -5,7 +5,7 @@ interface RegisterButtonProp {
   height: number;
   disabled: boolean;
   children: string;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 const RegisterButton = ({
diff --git a/pages/addArticle/index.tsx b/pages/addArticle/index.tsx
index 88fc73709..8600de912 100644
--- a/pages/addArticle/index.tsx
+++ b/pages/addArticle/index.tsx
@@ -1,17 +1,87 @@
+import postArticle from "@/apis/postArticle";
 import CustomFileInput from "@/components/Inputs/CustomFileInput";
 import CustomInput from "@/components/Inputs/CustomInput";
 import CustomTextArea from "@/components/Inputs/CustomTextArea";
+import RegisterButton from "@/components/RegisterButton";
+import React, { ChangeEvent, useState } from "react";
+
+interface NewArticle {
+  title: string;
+  content: string;
+  image: File | null;
+}
 
 const AddArticle = () => {
+  const [newArticle, setNewArticle] = useState<NewArticle>({
+    title: "",
+    content: "",
+    image: null,
+  });
+  const buttonActivate = newArticle.title && newArticle.content;
+
+  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setNewArticle((prevValues: NewArticle) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+  const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setNewArticle((prevValues: NewArticle) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+
+  //사진 입력
+  const upLoadImg = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, files } = e.target;
+
+    if (files && files.length > 0) {
+      setNewArticle((prevValues) => ({
+        ...prevValues,
+        [name]: files[0],
+      }));
+    }
+  };
+
+  //사진 삭제
+  const cancelUPLoadImg = () => {
+    setNewArticle((prevValues) => ({
+      ...prevValues,
+      image: null,
+    }));
+  };
+
+  const handleEnrollButton = async () => {
+    try {
+      await postArticle({
+        image: newArticle.image,
+        content: newArticle.content,
+        title: newArticle.title,
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        alert(error.message);
+      }
+    }
+  };
+
   return (
     <div className="max-w-[122rem] h-screen px-[1rem] mx-auto my-[2.4rem] flex flex-col gap-[2.4rem]">
       <div className="flex justify-between">
         <h2 className="font-bold text-[2rem] leading-[2.4rem] my-auto mx-0">
           게시글 쓰기
         </h2>
-        <button className="py-[1.2rem] px-[2.3rem] rounded-[0.8rem] bg-gray-400 font-semibold text-[1.6rem] text-white leading-[1.9rem]">
+        <RegisterButton
+          width={74}
+          height={42}
+          disabled={!buttonActivate}
+          onClick={handleEnrollButton}
+        >
           등록
-        </button>
+        </RegisterButton>
       </div>
 
       <CustomInput
@@ -19,6 +89,8 @@ const AddArticle = () => {
         placeholder="제목을 입력하세요"
         id="title"
         name="title"
+        value={newArticle.title}
+        onChange={handleTitleChange}
       />
       <CustomTextArea
         label="*내용"
@@ -26,8 +98,15 @@ const AddArticle = () => {
         id="content"
         name="content"
         textAreaHeight={200}
+        value={newArticle.content}
+        onChange={handleContentChange}
+      />
+      <CustomFileInput
+        name="image"
+        value={newArticle.image}
+        onChange={upLoadImg}
+        onDelete={cancelUPLoadImg}
       />
-      <CustomFileInput onDelete={() => {}} name="image" />
     </div>
   );
 };

From 8db6d7a2f37b69dbd82274dc9ea3b7df2f636ea9 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Thu, 6 Jun 2024 17:44:38 +0900
Subject: [PATCH 08/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20api=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/postArticleComment.ts  | 44 +++++++++++++++++++++++++++++++++++
 pages/boards/[id]/index.tsx | 46 ++++++++++++++++++++++++++-----------
 2 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 apis/postArticleComment.ts

diff --git a/apis/postArticleComment.ts b/apis/postArticleComment.ts
new file mode 100644
index 000000000..bea7d5df6
--- /dev/null
+++ b/apis/postArticleComment.ts
@@ -0,0 +1,44 @@
+import { axiosInstance } from "./api";
+
+interface PostArticleCommentParams {
+  articleId: number;
+  content: string;
+}
+
+interface Response {
+  writer: {
+    image: string;
+    nickname: string;
+    id: number;
+  };
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+}
+
+export type PostArticleComment = (
+  prop: PostArticleCommentParams
+) => Promise<Response>;
+//Post 요청일 경우 보통 리스폰스를 받아서 확인하나요?
+
+const postArticleComment: PostArticleComment = async ({
+  articleId,
+  content,
+}) => {
+  try {
+    const { data } = await axiosInstance.post<Response>(
+      `articles/${articleId}/comments`,
+      { content }
+    );
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`댓글을 등록할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 댓글을 등록할 수 없습니다.");
+  }
+};
+
+export default postArticleComment;
diff --git a/pages/boards/[id]/index.tsx b/pages/boards/[id]/index.tsx
index c203ec398..e2ba83d57 100644
--- a/pages/boards/[id]/index.tsx
+++ b/pages/boards/[id]/index.tsx
@@ -9,6 +9,7 @@ import { GetServerSidePropsContext } from "next";
 import getArticleComments from "@/apis/getArticleComments";
 import NoContentSign from "@/components/NoContentSign";
 import empty_sign from "@/images/Img_reply_empty.png";
+import postArticleComment from "@/apis/postArticleComment";
 
 interface ArticleType {
   updatedAt: string;
@@ -23,18 +24,20 @@ interface ArticleType {
   title: string;
   id: number;
 }
-interface ArticleComments {
-  list: {
+interface ArticleComment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
     id: number;
-    content: string;
-    createdAt: string;
-    updatedAt: string;
-    writer: {
-      id: number;
-      nickname: string;
-      image: string | null;
-    };
-  }[];
+    nickname: string;
+    image: string | null;
+  };
+}
+
+interface ArticleComments {
+  list: ArticleComment[];
   nextCursor: number;
 }
 
@@ -66,13 +69,30 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
 const ArticleDetail = ({ article, articleComments }: ArticleDetailProps) => {
   const { id, title, content, image, likeCount, updatedAt, writer } = article;
-  const comments = articleComments.list;
+  const [comments, setComments] = useState(articleComments.list);
   const [newComment, setNewComment] = useState("");
 
   const handleTextArea = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setNewComment(e.target.value);
   };
 
+  const handleEnrollButton = async () => {
+    try {
+      const result = await postArticleComment({
+        articleId: id,
+        content: newComment,
+      });
+      const newComments = [result, ...comments];
+      setComments(newComments);
+    } catch (error) {
+      if (error instanceof Error) {
+        alert(error.message);
+      }
+    } finally {
+      setNewComment("");
+    }
+  };
+
   useEffect(() => {}, []);
 
   return (
@@ -104,7 +124,7 @@ const ArticleDetail = ({ article, articleComments }: ArticleDetailProps) => {
             width={74}
             height={42}
             disabled={newComment === ""}
-            onClick={() => {}}
+            onClick={handleEnrollButton}
           >
             등록
           </RegisterButton>

From bad1deefa59b3bdfce34504d4677eb0bfa4a9464 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Thu, 6 Jun 2024 21:24:47 +0900
Subject: [PATCH 09/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=ED=86=A0=ED=81=B0=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EB=B0=8F=20=EB=8C=93=EA=B8=80=20=EB=8B=AC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/postArticle.ts           |  45 ++++++--
 apis/postArticleComment.ts    |   8 +-
 apis/postArticleLike.ts       |   9 +-
 apis/postImage.ts             |  33 ++++++
 apis/postSignin.ts            |  42 +++++++
 apis/postSignup.ts            |  48 ++++++++
 images/btn_visibility_off.svg |   3 +
 images/btn_visibility_on.svg  |   3 +
 images/ic_google.png          | Bin 0 -> 1608 bytes
 images/ic_kakao.png           | Bin 0 -> 1439 bytes
 images/login_logo.png         | Bin 0 -> 6326 bytes
 pages/addArticle/index.tsx    |   5 +
 pages/signin/index.tsx        | 141 +++++++++++++++++++++++
 pages/signin/style.module.css | 175 ++++++++++++++++++++++++++++
 pages/signup/index.tsx        | 208 ++++++++++++++++++++++++++++++++++
 utils/validateLogin.ts        |  41 +++++++
 16 files changed, 749 insertions(+), 12 deletions(-)
 create mode 100644 apis/postImage.ts
 create mode 100644 apis/postSignin.ts
 create mode 100644 apis/postSignup.ts
 create mode 100644 images/btn_visibility_off.svg
 create mode 100644 images/btn_visibility_on.svg
 create mode 100644 images/ic_google.png
 create mode 100644 images/ic_kakao.png
 create mode 100644 images/login_logo.png
 create mode 100644 pages/signin/index.tsx
 create mode 100644 pages/signin/style.module.css
 create mode 100644 pages/signup/index.tsx
 create mode 100644 utils/validateLogin.ts

diff --git a/apis/postArticle.ts b/apis/postArticle.ts
index d1839346f..1b6a6c463 100644
--- a/apis/postArticle.ts
+++ b/apis/postArticle.ts
@@ -1,7 +1,8 @@
 import { axiosInstance } from "./api";
+import postImage from "./postImage";
 
 interface PostArticleParams {
-  image: File | null;
+  image?: File | null;
   content: string;
   title: string;
 }
@@ -21,20 +22,46 @@ interface Response {
 }
 
 export type PostArticle = (prop: PostArticleParams) => Promise<Response>;
-//Post 요청일 경우 보통 리스폰스를 받아서 확인하나요?
 
 const postArticle: PostArticle = async ({ image, content, title }) => {
   try {
-    const { data } = await axiosInstance.post<Response>(`articles`, {
-      image,
-      content,
-      title,
-    });
-    return data;
+    const accessToken = localStorage.getItem("accessToken");
+    if (image) {
+      const imageUrl = await postImage({ image });
+      console.log(imageUrl);
+      const { data } = await axiosInstance.post<Response>(
+        `articles`,
+        {
+          image: imageUrl,
+          content,
+          title,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      return data;
+    } else {
+      const { data } = await axiosInstance.post<Response>(
+        `articles`,
+        {
+          content,
+          title,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      return data;
+    }
   } catch (error) {
     console.error("APP ERROR: ", error);
     if (error instanceof Error) {
-      throw new Error(`게시글을 등록할 수 없습니다`);
+      throw new Error(`게시글을 등록할 수 없습니다`, error);
     }
     throw new Error("알 수 없는 오류로 게시글을 등록할 수 없습니다.");
   }
diff --git a/apis/postArticleComment.ts b/apis/postArticleComment.ts
index bea7d5df6..248ccb569 100644
--- a/apis/postArticleComment.ts
+++ b/apis/postArticleComment.ts
@@ -27,9 +27,15 @@ const postArticleComment: PostArticleComment = async ({
   content,
 }) => {
   try {
+    const accessToken = localStorage.getItem("accessToken");
     const { data } = await axiosInstance.post<Response>(
       `articles/${articleId}/comments`,
-      { content }
+      { content },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
     );
     return data;
   } catch (error) {
diff --git a/apis/postArticleLike.ts b/apis/postArticleLike.ts
index a3cc3b4f9..8fb89c015 100644
--- a/apis/postArticleLike.ts
+++ b/apis/postArticleLike.ts
@@ -22,12 +22,17 @@ interface Response {
 export type PostArticleLike = (
   prop: PostArticleLikeParams
 ) => Promise<Response>;
-//Post 요청일 경우 보통 리스폰스를 받아서 확인하나요?
 
 const postArticleLike: PostArticleLike = async ({ articleId }) => {
   try {
+    const accessToken = localStorage.getItem("accessToken");
     const { data } = await axiosInstance.post<Response>(
-      `articles/${articleId}/like`
+      `articles/${articleId}/like`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
     );
     return data;
   } catch (error) {
diff --git a/apis/postImage.ts b/apis/postImage.ts
new file mode 100644
index 000000000..dc5cc30ea
--- /dev/null
+++ b/apis/postImage.ts
@@ -0,0 +1,33 @@
+import { axiosInstance } from "./api";
+
+interface PostImageParams {
+  image: File;
+}
+export type PostImage = (prop: PostImageParams) => Promise<string>;
+
+const postImage: PostImage = async ({ image }) => {
+  const formData = new FormData();
+  formData.append("image", image);
+  try {
+    const accessToken = localStorage.getItem("accessToken");
+    const { data } = await axiosInstance.post<Response>(
+      `images/upload`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "multipart/form-data",
+        },
+      }
+    );
+    return data.url;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`이미지 업로드 실패`);
+    }
+    throw new Error("알 수 없는 오류로 이미지 업로드 실패");
+  }
+};
+
+export default postImage;
diff --git a/apis/postSignin.ts b/apis/postSignin.ts
new file mode 100644
index 000000000..b41739d05
--- /dev/null
+++ b/apis/postSignin.ts
@@ -0,0 +1,42 @@
+import { axiosInstance } from "./api";
+
+interface PostSigninParams {
+  email: string;
+  password: string;
+}
+
+interface Response {
+  accessToken: string;
+  refreshToken: string;
+  user: {
+    email: string;
+    id: number;
+    image: null;
+    nickname: string;
+    updatedAt: string;
+    createdAt: number;
+  };
+}
+
+export type PostSignin = (prop: PostSigninParams) => Promise<Response>;
+
+const postSignin: PostSignin = async ({
+  email,
+  password,
+}) => {
+  try {
+    const { data } = await axiosInstance.post<Response>(`auth/signIn`, {
+      email,
+      password,
+    });
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`로그인을 할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 회원 가입을 할 수 없습니다.");
+  }
+};
+
+export default postSignin;
diff --git a/apis/postSignup.ts b/apis/postSignup.ts
new file mode 100644
index 000000000..cae091f01
--- /dev/null
+++ b/apis/postSignup.ts
@@ -0,0 +1,48 @@
+import { axiosInstance } from "./api";
+
+interface PostSignupParams {
+  email: string;
+  nickName: string;
+  password: string;
+  passwordConfirmation: string;
+}
+
+interface Response {
+  accessToken: string;
+  refreshToken: string;
+  user: {
+    email: string;
+    id: number;
+    image: null;
+    nickname: string;
+    updatedAt: string;
+    createdAt: number;
+  };
+}
+
+export type PostSignup = (prop: PostSignupParams) => Promise<Response>;
+
+const postSignup: PostSignup = async ({
+  email,
+  nickName,
+  password,
+  passwordConfirmation,
+}) => {
+  try {
+    const { data } = await axiosInstance.post<Response>(`auth/signUp`, {
+      email,
+      nickName,
+      password,
+      passwordConfirmation,
+    });
+    return data;
+  } catch (error) {
+    console.error("APP ERROR: ", error);
+    if (error instanceof Error) {
+      throw new Error(`회원 가입을 할 수 없습니다`);
+    }
+    throw new Error("알 수 없는 오류로 회원 가입을 할 수 없습니다.");
+  }
+};
+
+export default postSignup;
diff --git a/images/btn_visibility_off.svg b/images/btn_visibility_off.svg
new file mode 100644
index 000000000..90e67f10c
--- /dev/null
+++ b/images/btn_visibility_off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.773 12.9729L14.65 11.8499C14.8205 10.9601 14.5865 10.2012 13.948 9.57296C13.3096 8.94476 12.5435 8.70374 11.65 8.84989L10.5269 7.72684C10.759 7.61914 10.9977 7.54157 11.2432 7.49414C11.4887 7.44671 11.741 7.42299 12 7.42299C13.1346 7.42299 14.0977 7.81882 14.8894 8.61049C15.681 9.40216 16.0769 10.3653 16.0769 11.4999C16.0769 11.7589 16.0547 12.0111 16.0105 12.2566C15.9663 12.5021 15.8871 12.7409 15.773 12.9729ZM18.9538 16.0845L17.85 15.0499C18.4833 14.5666 19.05 14.0291 19.55 13.4374C20.05 12.8457 20.4666 12.1999 20.8 11.4999C19.9666 9.81656 18.7625 8.47906 17.1875 7.48739C15.6125 6.49572 13.8833 5.99989 12 5.99989C11.5166 5.99989 11.0458 6.03322 10.5875 6.09989C10.1291 6.16656 9.66662 6.26656 9.19995 6.39989L8.0346 5.23454C8.67049 4.98326 9.31888 4.798 9.97978 4.67877C10.6407 4.55953 11.3141 4.49991 12 4.49991C14.1487 4.49991 16.1224 5.05825 17.9211 6.17491C19.7198 7.29158 21.1031 8.80247 22.0711 10.7076C22.1377 10.8345 22.1861 10.9624 22.2163 11.0912C22.2464 11.2201 22.2615 11.3563 22.2615 11.4999C22.2615 11.6435 22.249 11.7797 22.224 11.9085C22.199 12.0374 22.1531 12.1653 22.0865 12.2922C21.7326 13.0448 21.2884 13.7396 20.7538 14.3768C20.2192 15.014 19.6192 15.5832 18.9538 16.0845ZM12 18.4999C9.89484 18.4999 7.96536 17.9374 6.21153 16.8124C4.45768 15.6874 3.06344 14.2056 2.02883 12.3672C1.94549 12.2403 1.8846 12.1025 1.84615 11.9537C1.80769 11.805 1.78845 11.6537 1.78845 11.4999C1.78845 11.346 1.80512 11.1973 1.83845 11.0537C1.87179 10.9102 1.93012 10.7698 2.01345 10.6326C2.38525 9.95311 2.80641 9.30599 3.27693 8.69124C3.74744 8.07649 4.28847 7.52553 4.9 7.03837L2.6423 4.76526C2.50384 4.61655 2.43557 4.43995 2.4375 4.23546C2.43942 4.03098 2.51281 3.85631 2.65768 3.71144C2.80254 3.56657 2.97819 3.49414 3.1846 3.49414C3.391 3.49414 3.56664 3.56657 3.7115 3.71144L20.2884 20.2883C20.4269 20.4268 20.5002 20.5983 20.5086 20.8027C20.5169 21.0072 20.4435 21.187 20.2884 21.3422C20.1435 21.487 19.9679 21.5595 19.7615 21.5595C19.5551 21.5595 19.3794 21.487 19.2346 21.3422L15.7154 17.8537C15.1256 18.0819 14.5195 18.2467 13.8971 18.3479C13.2746 18.4492 12.6423 18.4999 12 18.4999ZM5.95383 8.09216C5.36793 8.54473 4.84132 9.0566 4.374 9.62777C3.90669 10.1989 3.51534 10.823 3.19995 11.4999C4.03329 13.1832 5.23745 14.5207 6.81245 15.5124C8.38745 16.5041 10.1166 16.9999 12 16.9999C12.4295 16.9999 12.8522 16.971 13.2683 16.9133C13.6843 16.8557 14.0974 16.7666 14.5077 16.646L13.2423 15.3499C13.0397 15.4383 12.8375 15.4982 12.6355 15.5297C12.4336 15.5611 12.2218 15.5768 12 15.5768C10.8654 15.5768 9.90222 15.181 9.11055 14.3893C8.31889 13.5976 7.92305 12.6345 7.92305 11.4999C7.92305 11.2781 7.94036 11.0662 7.97498 10.8643C8.00959 10.6624 8.06793 10.4601 8.14998 10.2576L5.95383 8.09216Z" fill="#9FA6B2"/>
+</svg>
diff --git a/images/btn_visibility_on.svg b/images/btn_visibility_on.svg
new file mode 100644
index 000000000..41bbde9ce
--- /dev/null
+++ b/images/btn_visibility_on.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0022 15.5769C13.1353 15.5769 14.0977 15.1803 14.8894 14.3871C15.681 13.5939 16.0769 12.6308 16.0769 11.4977C16.0769 10.3646 15.6803 9.40224 14.8871 8.61058C14.0939 7.81891 13.1308 7.42308 11.9977 7.42308C10.8646 7.42308 9.90223 7.81966 9.11056 8.61282C8.31889 9.40601 7.92306 10.3692 7.92306 11.5023C7.92306 12.6353 8.31964 13.5977 9.11281 14.3894C9.90599 15.181 10.8691 15.5769 12.0022 15.5769ZM12 14.2C11.25 14.2 10.6125 13.9375 10.0875 13.4125C9.56246 12.8875 9.29996 12.25 9.29996 11.5C9.29996 10.75 9.56246 10.1125 10.0875 9.58748C10.6125 9.06248 11.25 8.79998 12 8.79998C12.75 8.79998 13.3875 9.06248 13.9125 9.58748C14.4375 10.1125 14.7 10.75 14.7 11.5C14.7 12.25 14.4375 12.8875 13.9125 13.4125C13.3875 13.9375 12.75 14.2 12 14.2ZM12 18.5C9.89484 18.5 7.96953 17.9384 6.22403 16.8153C4.47852 15.6923 3.08525 14.2147 2.04423 12.3827C1.9609 12.2391 1.9 12.0944 1.86153 11.9485C1.82307 11.8027 1.80383 11.653 1.80383 11.4995C1.80383 11.346 1.82307 11.1965 1.86153 11.051C1.9 10.9054 1.9609 10.7609 2.04423 10.6173C3.08525 8.78525 4.47852 7.30769 6.22403 6.18463C7.96953 5.06154 9.89484 4.5 12 4.5C14.1051 4.5 16.0304 5.06154 17.7759 6.18463C19.5214 7.30769 20.9147 8.78525 21.9557 10.6173C22.039 10.7609 22.0999 10.9056 22.1384 11.0514C22.1768 11.1973 22.1961 11.347 22.1961 11.5005C22.1961 11.654 22.1768 11.8035 22.1384 11.949C22.0999 12.0945 22.039 12.2391 21.9557 12.3827C20.9147 14.2147 19.5214 15.6923 17.7759 16.8153C16.0304 17.9384 14.1051 18.5 12 18.5ZM12 17C13.8833 17 15.6125 16.5041 17.1875 15.5125C18.7625 14.5208 19.9666 13.1833 20.8 11.5C19.9666 9.81664 18.7625 8.47914 17.1875 7.48748C15.6125 6.49581 13.8833 5.99998 12 5.99998C10.1166 5.99998 8.38746 6.49581 6.81246 7.48748C5.23746 8.47914 4.03329 9.81664 3.19996 11.5C4.03329 13.1833 5.23746 14.5208 6.81246 15.5125C8.38746 16.5041 10.1166 17 12 17Z" fill="#9FA6B2"/>
+</svg>
diff --git a/images/ic_google.png b/images/ic_google.png
new file mode 100644
index 0000000000000000000000000000000000000000..64db8acb02398ab97b35c24be447d2f2358e8952
GIT binary patch
literal 1608
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
GLSTZ0R{hTa

literal 0
HcmV?d00001

diff --git a/images/ic_kakao.png b/images/ic_kakao.png
new file mode 100644
index 0000000000000000000000000000000000000000..d38e36cc0b0bb199fe0fc4e3d941df35807a612c
GIT binary patch
literal 1439
zcmV;Q1z`G#P)<h;3K|Lk000e1NJLTq001fg001fo1^@s6#ly*400009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1vE)SK~#7F#aT^E
z8%Gp=Gd2(h6PczeMrs?o0;#v!_tKghkVvElI0xU8=GyeoaA?wFAw5HLg-Yen2BaQv
zLe4eEN<oEGm7r}}w!v-+WOwquvDes!-5nd7e9~&i-nX;gzQ1|%R#21J-OR+obS@Q=
zp>Yx_p%kSQiI^aY;kqKSc)TS9S+=bn5;?h^<Vud3grEkow>gplIfv+)OUe|Qyr3mz
zAIwCPKdm=%uQ5?gFckWNHJ70lfC=aJZF{OWxw2&>A0z-1cZIq^@FukZO!(`4yExsO
z%vrv2eiwH)M-rVfw93N-wHI3ljy>$BUFmgUcXKS&Awzj;KS@9<q`=Sg5;#$#C6Z#b
z(O_u-Eaj--X!60aKs!eC49)EYi`^hy?*=tQ5jdT)`>f3E2lm-wx;nsWd=$}5ub(84
zD08WxqS3O+H>m*>_8eM!{4eEyF4D%v3)<N}q(Z^g*P_u7#rr#GU?4*2bT=PS{ksu3
zju`Gq{*bF7TKMhqsxVCEAT&4k2R&YUULj_Jk<nhtX8Vi@V^KK&?vKM2qDTuuioD6q
z^GtAl?oT=mrm}DG(Pt#<YE}Cvll(O32AKKA^<Pg-62Kgo%fuRjoU5fXqxkglE(PSw
z?6nQ;hpj}4eRuZWdqHBHu8K*CVuJ!m!rZMU39RRfdhP&lIT=l{>1D=G3W3uKb9(`E
z2e|;uFGWav>?gFi_*Z3&0D!5g514Oa@=ZNPN&<$4F4UMb9`C4Jk47ckxqFEQ2G1Qm
zW8oS36QzXYYS!26c{Y!WLg6KC?;L1y@pz{mL*o;Z7t4e%YB`X=Zx_g+`W{Y8v)}N`
zrJ_1GU93HNPQH-h11SPlqKzm2SH_DAf79JBf7j#X<$v@zT_%l(4SjUMZz`?Hcwd)}
z_#J*p7dtzL6o44gQ&Sa^Yv$3hUaj@T#b<gIs@7yZTr1QEra_vD$sh@@RV3OI(!K{`
z{VbC$Cvf<u7v?x{2H7pH-{`NMtNhY_2=jpo#Z#-$68x|pg+04s>g5N!`pla*tzq}~
zt<T@q=e@m>##Y!}dN`O6e6RwRU?A;dg)*!#DP{4Z>PZxnx)ZuUl;S}!B}lpHE0r#4
z`8Adw7>rOKUx!&AvH!;VJ9Plvo88v;RpY}Uf8Qo-yNg>_zUO`URX?fh)RUT^Y9-)4
z3*Wu(E5pT7PCCkYN&)!n);mUi)C`cWf?zB45G&JCkl;xH&<a2S^=@!7WKO=MFg8+F
zkSKy=hF2Gu>a@V>gq3P^%qTNjy3FfME?JJF?wj0!=!B_8xd3h!xEDT|3Xb#=xCK-?
z5!y9ZGE%BlG6d4q<iszg;yTZcjJ}~YXlCjoDCZ!JJ{9sPLAAUU$(e3N^7+EC|4^{N
zq}6+-eojfq!;S8hTp-%J%gwZKg}E)Jg;W`n391Vf`0SmpE@?uohEVpDJFYCD&?@gw
zW=tknFB3&_pZj*OEhM>PG83t4LWHX?at65FMTg_cr=mjD1E0h4XdDm?0uA8v^xy5e
z|7!7q_xDbzId;~4Cn^)#65QE~)U|YuRZkE=qlyf2Ya4)6`AOu2_T!0V9=d5Di?^e*
zgJ&lX@NMM64HS3wRGa%zUgoZbZ{ds^_nnTkX*OsEI=Z=Y7YXR)8-Hwoc5M-w=YCLz
zS^)kgkW)%byG^hlH2nFd)V>xsg`{z6JTt%#?<=m@ObNPZm}oUnBXAolBZTe^#8}%2
tIwEiB-2=&W#WgR;@g{j)1bqGQ!Yhw{G}-7Ix!nK&002ovPDHLkV1nMxsz(3-

literal 0
HcmV?d00001

diff --git a/images/login_logo.png b/images/login_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..da7b53e935159c2e7eced4f506452c313ca3e2db
GIT binary patch
literal 6326
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
Hv;6WOvp+H&

literal 0
HcmV?d00001

diff --git a/pages/addArticle/index.tsx b/pages/addArticle/index.tsx
index 8600de912..3b2bd6820 100644
--- a/pages/addArticle/index.tsx
+++ b/pages/addArticle/index.tsx
@@ -3,6 +3,7 @@ import CustomFileInput from "@/components/Inputs/CustomFileInput";
 import CustomInput from "@/components/Inputs/CustomInput";
 import CustomTextArea from "@/components/Inputs/CustomTextArea";
 import RegisterButton from "@/components/RegisterButton";
+import { useRouter } from "next/router";
 import React, { ChangeEvent, useState } from "react";
 
 interface NewArticle {
@@ -12,6 +13,7 @@ interface NewArticle {
 }
 
 const AddArticle = () => {
+  const router = useRouter();
   const [newArticle, setNewArticle] = useState<NewArticle>({
     title: "",
     content: "",
@@ -61,10 +63,13 @@ const AddArticle = () => {
         content: newArticle.content,
         title: newArticle.title,
       });
+      alert("게시글을 등록하였습니다");
     } catch (error) {
       if (error instanceof Error) {
         alert(error.message);
       }
+    } finally {
+      router.push("/boards");
     }
   };
 
diff --git a/pages/signin/index.tsx b/pages/signin/index.tsx
new file mode 100644
index 000000000..780d83bbc
--- /dev/null
+++ b/pages/signin/index.tsx
@@ -0,0 +1,141 @@
+import React, { ChangeEvent, useState } from "react";
+import ic_kakao from "@/images/ic_kakao.png";
+import ic_google from "@/images/ic_google.png";
+import ic_hidden from "@/images/btn_visibility_off.svg";
+import ic_visible from "@/images/btn_visibility_on.svg";
+import logo from "@/images/login_logo.png";
+import { validateEmailAddress, validatePassword } from "@/utils/validateLogin";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "./style.module.css";
+import postSignin from "@/apis/postSignin";
+import { FormEvent } from 'react';
+
+const Signin = () => {
+  const [email, setEmail] = useState<string>("");
+  const [passWord, setPassWord] = useState<string>("");
+  const [visible, setVisible] = useState<boolean>(false);
+  const eyeIcon = visible ? ic_visible : ic_hidden;
+
+  const buttonActivate: boolean =
+    validateEmailAddress(email) && validatePassword(passWord);
+
+  const emailErrorMessage: string =
+    email === ""
+      ? "이메일을 입력해주세요"
+      : validateEmailAddress(email)
+      ? ""
+      : "잘못된 이메일 형식입니다";
+
+  const passWordErrorMessage: string =
+    passWord === ""
+      ? "비밀번호을 입력해주세요"
+      : validatePassword(passWord)
+      ? ""
+      : "비밀번호를 8자 이상 입력해주세요";
+
+  const handleEmailInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+  const handlePassWordInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassWord(e.target.value);
+  };
+  const handleVisibleBtn = () => {
+    setVisible((prev) => !prev);
+  };
+
+  const handleSignInButton = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      const result = await postSignin({
+        email: email,
+        password: passWord,
+      });
+      // 결과에서 accessToken 가져오기
+      const accessToken = result.accessToken;
+
+      // 로컬 스토리지에 accessToken 저장
+      localStorage.setItem("accessToken", accessToken);
+    } catch (error) {
+      if (error instanceof Error) {
+        alert(error.message);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.sign_header}>
+        <div className={styles.logo}>
+          <Link href="/">
+            <Image src={logo} alt="판다마켓 로고" />
+          </Link>
+        </div>
+      </div>
+      <main className={styles.sign_main}>
+        <div className={styles.login_content}>
+          <form className={styles.login_form}>
+            <div className={styles.user_input}>
+              <div className={styles.user_input_section}>
+                <label htmlFor="userEmail">이메일</label>
+                <input
+                  id="userEmail"
+                  type="email"
+                  name="userEmail"
+                  placeholder="이메일을 입력해주세요"
+                  value={email}
+                  onChange={handleEmailInput}
+                />
+              </div>
+              <span className={styles.input_err_message}>
+                {emailErrorMessage}
+              </span>
+            </div>
+            <div className={styles.user_input}>
+              <div className={styles.user_input_section}>
+                <label htmlFor="userPassword">비밀번호</label>
+                <input
+                  id="userPassword"
+                  type={visible ? "text" : "password"}
+                  name="userPassword"
+                  placeholder="비밀번호를 입력해주세요"
+                  value={passWord}
+                  onChange={handlePassWordInput}
+                />
+                <Image
+                  src={eyeIcon}
+                  className={styles.password_visible_btn}
+                  alt="비밀번호 숨기기 버튼"
+                  onClick={handleVisibleBtn}
+                />
+              </div>
+              <span className={styles.input_err_message}>
+                {passWordErrorMessage}
+              </span>
+            </div>
+            <button disabled={!buttonActivate} onClick={handleSignInButton}>
+              로그인
+            </button>
+          </form>
+          <div className={styles.login_easy}>
+            <span>간편 로그인하기</span>
+            <div className={styles.sns_icon}>
+              <Link href="https://www.google.com/">
+                <Image src={ic_google} alt="구글 아이콘" />
+              </Link>
+              <Link href="https://www.kakaocorp.com/page/">
+                <Image src={ic_kakao} alt="카카오 아이콘" />
+              </Link>
+            </div>
+          </div>
+          <div className={styles.login_first}>
+            <span>판다마켓이 처음이신가요?</span>
+            <Link href="/signup">회원가입</Link>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default Signin;
diff --git a/pages/signin/style.module.css b/pages/signin/style.module.css
new file mode 100644
index 000000000..0901b24b8
--- /dev/null
+++ b/pages/signin/style.module.css
@@ -0,0 +1,175 @@
+/* 판다마켓 로고 */
+.sign_header {
+  padding-top: 6rem;
+  padding-bottom: 4rem;
+  display: flex;
+  justify-content: center;
+}
+
+.logo {
+  width: 39.6rem;
+  height: 13.2rem;
+}
+
+/* 메인 */
+.sign_main {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 1.5rem;
+}
+.login_content {
+  width: 64rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+/* 이메일 아이디 로그인 버튼 */
+.login_form {
+  display: flex;
+  flex-direction: column;
+}
+.login_form input {
+  margin: 1.6rem 0 0 0;
+  background-color: var(--coolGray100);
+  width: 64rem;
+  height: 5.6rem;
+  border-radius: 1.2rem;
+  border: none;
+  padding-left: 2.4rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  text-align: left;
+}
+.login_form input:focus {
+  outline-color: var(--btn1);
+}
+.login_form label {
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 2.1rem;
+  text-align: left;
+  color: var(--coolGray800);
+}
+.user_input {
+  margin-bottom: 2.4rem;
+}
+.user_input_section {
+  position: relative;
+  height: 9.3rem;
+}
+.password_visible_btn {
+  width: 2.4rem;
+  height: 2.4rem;
+  position: absolute;
+  top: 57%;
+  right: 2.4rem;
+  cursor: pointer;
+}
+
+.login_form .err_input {
+  border: 1.5px solid var(--error);
+  margin-bottom: 0.8rem;
+}
+
+.input_err_message {
+  margin-left: 1.6rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--error);
+}
+.login_form button {
+  padding: 1.6rem 0 1.6rem 0;
+  border-radius: 4rem;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 2.4rem;
+  background-color: var(--btn1);
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+.login_form button:disabled {
+  background-color: var(--btn4);
+  cursor: not-allowed;
+}
+/* 간편 로그인 */
+.login_easy {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #e6f2ff;
+  padding: 1.6rem 2.3rem 1.6rem 2.3rem;
+  border-radius: 0.8rem;
+  font-size: 1.6rem;
+}
+
+.sns_icon img {
+  width: 4.2rem;
+  height: 4.2rem;
+}
+.sns_icon img:first-child {
+  margin-right: 1.6rem;
+}
+
+/* 처음이신가요? */
+.login_first {
+  text-align: center;
+}
+.login_first span {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.8rem;
+  text-align: left;
+  color: var(--coolGray800);
+}
+.login_first span {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.8rem;
+  color: var(--coolGray800);
+}
+.login_first a {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.8rem;
+  color: #3182f6;
+}
+
+@media (max-width: 375px) {
+  .sign_header {
+    padding: 2.4rem 0rem;
+    text-align: center;
+  }
+  .logo {
+    width: 19.8rem;
+    height: 6.6rem;
+  }
+  .sign_main {
+    padding: 0px 1.6rem;
+  }
+  .login_content {
+    width: 100%;
+    max-width: 40rem;
+  }
+
+  .login_form label {
+    font-size: 1.4rem;
+    line-height: 1.67rem;
+  }
+
+  .login_form input {
+    margin: 0.8px 0 1.6rem 0;
+    width: 100%;
+    height: 5.6rem;
+  }
+
+  .login_form button {
+    padding: 1.6rem 12.4rem;
+  }
+  .password_visible_btn {
+    top: 40%;
+  }
+}
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
new file mode 100644
index 000000000..33f6b6c9f
--- /dev/null
+++ b/pages/signup/index.tsx
@@ -0,0 +1,208 @@
+import { ChangeEvent, useState } from "react";
+import ic_kakao from "@/images/ic_kakao.png";
+import ic_google from "@/images/ic_google.png";
+import ic_hidden from "@/images/btn_visibility_off.svg";
+import ic_visible from "@/images/btn_visibility_on.svg";
+import logo from "@/images/login_logo.png";
+import {
+  validateEmailAddress,
+  validatePassword,
+  validateNickName,
+  validatePasswordTwice,
+} from "@/utils/validateLogin";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "@/pages/signin/style.module.css";
+import postSignup from "@/apis/postSignup";
+import { FormEvent } from 'react';
+const Signup = () => {
+  const [email, setEmail] = useState<string>("");
+  const [passWord, setPassWord] = useState<string>("");
+  const [passWordCheck, setPassWordCheck] = useState<string>("");
+  const [nickName, setNickName] = useState<string>("");
+  const [visiblePassWord, setVisiblePassWord] = useState<boolean>(false);
+  const [visiblePassWordCheck, setVisiblePassWordCheck] =
+    useState<boolean>(false);
+  const eyeIconPassWord: string = visiblePassWord ? ic_visible : ic_hidden;
+  const eyeIconPassWordCheck: string = visiblePassWordCheck
+    ? ic_visible
+    : ic_hidden;
+
+  const buttonActivate: boolean =
+    validateEmailAddress(email) &&
+    validatePassword(passWord) &&
+    validateNickName(nickName) &&
+    validatePasswordTwice(passWord, passWordCheck);
+  const emailErrorMessage: string =
+    email === ""
+      ? "이메일을 입력해주세요"
+      : validateEmailAddress(email)
+      ? ""
+      : "잘못된 이메일 형식입니다";
+  const passWordErrorMessage: string =
+    passWord === ""
+      ? "비밀번호 재입력해주세요"
+      : validatePassword(passWord)
+      ? ""
+      : "비밀번호를 8자 이상 입력해주세요";
+  const passWordCheckErrorMessage: string = validatePasswordTwice(
+    passWord,
+    passWordCheck
+  )
+    ? ""
+    : "비밀번호가 일치하지 않습니다";
+
+  const nickNameErrorMessage: string = validateNickName(nickName)
+    ? ""
+    : "닉네임을 입력해주세요";
+
+  const handleEmailInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+  const handleNickNameInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setNickName(e.target.value);
+  };
+  const handlePassWordInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassWord(e.target.value);
+  };
+  const handlePassWordCheckInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassWordCheck(e.target.value);
+  };
+  const handleVisiblePassWordBtn = () => {
+    setVisiblePassWord((prev) => !prev);
+  };
+  const handleVisiblePassWordCheckBtn = () => {
+    setVisiblePassWordCheck((prev) => !prev);
+  };
+
+  const handleSignUPButton = async (e:FormEvent) => {
+    e.preventDefault();
+    try {
+      const result = await postSignup({
+        email: email,
+        nickName: nickName,
+        password: passWord,
+        passwordConfirmation: passWordCheck,
+      });
+      console.log(result);
+    } catch (error) {
+      if (error instanceof Error) {
+        alert(error.message);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.sign_header}>
+        <div className={styles.logo}>
+          <Link href="/">
+            <Image src={logo} alt="판다마켓 로고" />
+          </Link>
+        </div>
+      </div>
+      <main className={styles.sign_main}>
+        <div className={styles.login_content}>
+          <form className={styles.login_form}>
+            <div className={styles.user_input}>
+              <div className={styles.user_input_section}>
+                <label htmlFor="userEmail">이메일</label>
+                <input
+                  id="userEmail"
+                  type="email"
+                  name="userEmail"
+                  placeholder="이메일을 입력해주세요"
+                  value={email}
+                  onChange={handleEmailInput}
+                />
+              </div>
+              <span className={styles.input_err_message}>
+                {emailErrorMessage}
+              </span>
+            </div>
+            <div className={styles.user_input}>
+              <div className={styles.user_input_section}>
+                <label htmlFor="userNickName">닉네임</label>
+                <input
+                  id="userNickName"
+                  type="text"
+                  name="userNickName"
+                  placeholder="닉네임을 입력해주세요"
+                  value={nickName}
+                  onChange={handleNickNameInput}
+                />
+              </div>
+              <span className={styles.input_err_message}>
+                {nickNameErrorMessage}
+              </span>
+            </div>
+            <div className={styles.user_input}>
+              <div className={styles.user_input_section}>
+                <label htmlFor="userPassword">비밀번호</label>
+                <input
+                  id="userPassword"
+                  type={visiblePassWord ? "text" : "password"}
+                  name="userPassword"
+                  placeholder="비밀번호를 입력해주세요"
+                  value={passWord}
+                  onChange={handlePassWordInput}
+                />
+                <Image
+                  src={eyeIconPassWord}
+                  className={styles.password_visible_btn}
+                  alt="비밀번호 숨기기 버튼"
+                  onClick={handleVisiblePassWordBtn}
+                />
+              </div>
+              <span className={styles.input_err_message}>
+                {passWordErrorMessage}
+              </span>
+            </div>
+            <div className={styles.user_input}>
+              <div className={styles.user_input_section}>
+                <label htmlFor="userPasswordCheck">비밀번호 확인</label>
+                <input
+                  id="userPasswordCheck"
+                  type={visiblePassWordCheck ? "text" : "password"}
+                  name="userPasswordCheck"
+                  placeholder="비밀번호를 다시 한 번 입력해주세요"
+                  value={passWordCheck}
+                  onChange={handlePassWordCheckInput}
+                />
+                <Image
+                  src={eyeIconPassWordCheck}
+                  className={styles.password_visible_btn}
+                  alt="비밀번호 숨기기 버튼"
+                  onClick={handleVisiblePassWordCheckBtn}
+                />
+              </div>
+              <span className={styles.input_err_message}>
+                {passWordCheckErrorMessage}
+              </span>
+            </div>
+            <button disabled={!buttonActivate} onClick={handleSignUPButton}>
+              회원가입
+            </button>
+          </form>
+          <div className={styles.login_easy}>
+            <span>간편 로그인하기</span>
+            <div className={styles.sns_icon}>
+              <Link href="https://www.google.com/">
+                <Image src={ic_google} alt="구글 아이콘" />
+              </Link>
+              <Link href="https://www.kakaocorp.com/page/">
+                <Image src={ic_kakao} alt="카카오 아이콘" />
+              </Link>
+            </div>
+          </div>
+          <div className={styles.login_first}>
+            <span>이미 회원이신가요?</span>
+            <Link href="/signin">로그인</Link>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default Signup;
diff --git a/utils/validateLogin.ts b/utils/validateLogin.ts
new file mode 100644
index 000000000..d6efef7c0
--- /dev/null
+++ b/utils/validateLogin.ts
@@ -0,0 +1,41 @@
+const validateEmailAddress = (email: string) => {
+    const emailRegex = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
+    if (!emailRegex.test(email) || email === "") {
+      return false;
+    } else {
+      return true;
+    }
+  };
+  
+  const validatePassword = (password: string) => {
+    if (password === "") {
+      return false;
+    } else if (password.length < 8) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+  
+  const validateNickName = (nickName: string) => {
+    if (nickName === "") {
+      return false;
+    } else {
+      return true;
+    }
+  };
+  
+  const validatePasswordTwice = (password: string, passwordCheck: string) => {
+    if (password !== passwordCheck) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+  
+  export {
+    validateEmailAddress,
+    validatePassword,
+    validatePasswordTwice,
+    validateNickName,
+  };
\ No newline at end of file

From dc3a206b36ba3a126c99f9ab9b6fb2fdd9b76acd Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Fri, 7 Jun 2024 16:33:28 +0900
Subject: [PATCH 10/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20input=20tag=20search?=
 =?UTF-8?q?=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pageComponents/boards/SearchPost/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pageComponents/boards/SearchPost/index.tsx b/pageComponents/boards/SearchPost/index.tsx
index 2750740c7..0355f642b 100644
--- a/pageComponents/boards/SearchPost/index.tsx
+++ b/pageComponents/boards/SearchPost/index.tsx
@@ -107,7 +107,7 @@ const SearchPost = () => {
             width={24}
             height={24}
           />
-          <input name="search" placeholder="검색할 상품을 입력해주세요" />
+          <input name="search" placeholder="검색할 상품을 입력해주세요" type="search"/>
         </form>
 
         <div className={styles.selectOrderBtn}>

From 463bcd2cf94bea840116730445967925b830562b Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Fri, 7 Jun 2024 16:49:34 +0900
Subject: [PATCH 11/13] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=A2=8B=EC=95=84?=
 =?UTF-8?q?=EC=9A=94=20=EB=B2=84=ED=8A=BC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/postArticleLike.ts                             | 1 +
 pageComponents/boards/[Id]/ArticleContent/index.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/apis/postArticleLike.ts b/apis/postArticleLike.ts
index 8fb89c015..0d11c081b 100644
--- a/apis/postArticleLike.ts
+++ b/apis/postArticleLike.ts
@@ -28,6 +28,7 @@ const postArticleLike: PostArticleLike = async ({ articleId }) => {
     const accessToken = localStorage.getItem("accessToken");
     const { data } = await axiosInstance.post<Response>(
       `articles/${articleId}/like`,
+      {},
       {
         headers: {
           Authorization: `Bearer ${accessToken}`,
diff --git a/pageComponents/boards/[Id]/ArticleContent/index.tsx b/pageComponents/boards/[Id]/ArticleContent/index.tsx
index 8ff368d18..b5d93e4cf 100644
--- a/pageComponents/boards/[Id]/ArticleContent/index.tsx
+++ b/pageComponents/boards/[Id]/ArticleContent/index.tsx
@@ -29,6 +29,8 @@ const ArticleContent = ({
   const handleHeartButton = async () => {
     try {
       await postArticleLike({ articleId: id });
+      window.alert("좋아요 성공");
+      window.location.reload();
     } catch (error) {
       if (error instanceof Error) {
         window.alert(error.message);

From 37c148f8f3a4d724ba60c1e2a612929c5b55635e Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Fri, 7 Jun 2024 17:00:32 +0900
Subject: [PATCH 12/13] =?UTF-8?q?=F0=9F=92=9A=20=EB=B0=B0=ED=8F=AC=20?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=ED=84=B0=EC=97=90=EA=B7=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 42ce5c3d1..e6becd356 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,9 @@
+import { useEffect } from "react";
+
 export default function Home() {
-  return (
-    <div>
-      홈페이지
-    </div>
-  );
+  useEffect(() => {
+    console.log("sprint10");
+  }, []);
+
+  return <div>홈페이지</div>;
 }

From 4d324e60dbec156c0fe2e5ecc3f5fb460947b4a1 Mon Sep 17 00:00:00 2001
From: CHAE <cowhdals1111@gmail.com>
Date: Fri, 7 Jun 2024 17:16:27 +0900
Subject: [PATCH 13/13] =?UTF-8?q?=F0=9F=92=9A=20=EB=B0=B0=ED=8F=AC=20?=
 =?UTF-8?q?=EB=B8=8C=EB=9E=9C=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index e6becd356..ebb4c1150 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,9 +1,7 @@
-import { useEffect } from "react";
+
 
 export default function Home() {
-  useEffect(() => {
-    console.log("sprint10");
-  }, []);
 
-  return <div>홈페이지</div>;
+
+  return <div>홈페이지 sprint10</div>;
 }