From f9aa466a4a1cc9c8242a60742d4917c6f469bc6e Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 10 Apr 2023 17:08:21 +0900
Subject: [PATCH 01/25] =?UTF-8?q?[#36]=20Feat=20AdminPage=20-=20=EA=B8=B0?=
 =?UTF-8?q?=EC=B4=88=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/admin/index.tsx                  | 7 +++++++
 src/components/adminPage/AdminPage.tsx | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 pages/admin/index.tsx
 create mode 100644 src/components/adminPage/AdminPage.tsx

diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
new file mode 100644
index 0000000..4a6594d
--- /dev/null
+++ b/pages/admin/index.tsx
@@ -0,0 +1,7 @@
+import type { NextPage } from "next";
+
+const Admin: NextPage = () => {
+  return <></>;
+};
+
+export default Admin;
diff --git a/src/components/adminPage/AdminPage.tsx b/src/components/adminPage/AdminPage.tsx
new file mode 100644
index 0000000..4088dd2
--- /dev/null
+++ b/src/components/adminPage/AdminPage.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const AdminPage = () => {
+  return <></>;
+};
+
+const Wrapper = styled.section``;

From 99875102f056a61ac0599edae6ff5f7bc461f003 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 10 Apr 2023 18:00:59 +0900
Subject: [PATCH 02/25] =?UTF-8?q?[#36]=20Feat=20AdminPage=20-=20=EA=B8=B0?=
 =?UTF-8?q?=EC=B4=88=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/admin/index.tsx                  | 3 ++-
 src/components/adminPage/AdminPage.tsx | 2 +-
 src/components/index.tsx               | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
index 4a6594d..f09e7c3 100644
--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -1,7 +1,8 @@
 import type { NextPage } from "next";
+import { AdminPage } from "../../src/components";
 
 const Admin: NextPage = () => {
-  return <></>;
+  return <AdminPage />;
 };
 
 export default Admin;
diff --git a/src/components/adminPage/AdminPage.tsx b/src/components/adminPage/AdminPage.tsx
index 4088dd2..e3d5e12 100644
--- a/src/components/adminPage/AdminPage.tsx
+++ b/src/components/adminPage/AdminPage.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const AdminPage = () => {
-  return <></>;
+  return <Wrapper>123</Wrapper>;
 };
 
 const Wrapper = styled.section``;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 14a142e..aedab80 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -6,3 +6,4 @@ export * from "./loginPage/LoginPage";
 export * from "./signUpPage/SignUpPage";
 export * from "./infoPage/InformationPage";
 export * from "./mainPage/MainPage";
+export * from "./adminPage/AdminPage";

From 6a656ea18f718b8d1aefbf3bcf797c64fe8e118c Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 10 Apr 2023 18:40:38 +0900
Subject: [PATCH 03/25] [#36] Feat AdminPage

---
 pages/_app.tsx                                | 23 +++++++++++--------
 pages/admin/login/index.tsx                   |  8 +++++++
 .../adminLoginPage/AdminLoginPage.tsx         |  7 ++++++
 src/components/index.tsx                      |  1 +
 4 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 pages/admin/login/index.tsx
 create mode 100644 src/components/adminLoginPage/AdminLoginPage.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 052723c..952de44 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import Router from "next/router";
 import { GlobalStyle } from "../styles/global.style";
 import type { AppProps } from "next/app";
 import { Header } from "../src/components/header/Header";
@@ -10,15 +11,19 @@ import { ScrollCSS } from "../src/components/layout/ScrollCSS";
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <Wrapper>
-        <GlobalStyle />
-        <ScrollCSS />
-        <Header />
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-        <Footer />
-      </Wrapper>
+      {Router.asPath.includes("/admin") ? (
+        <Component {...pageProps} />
+      ) : (
+        <Wrapper>
+          <GlobalStyle />
+          <ScrollCSS />
+          <Header />
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+          <Footer />
+        </Wrapper>
+      )}
     </RecoilRoot>
   );
 }
diff --git a/pages/admin/login/index.tsx b/pages/admin/login/index.tsx
new file mode 100644
index 0000000..8417ecc
--- /dev/null
+++ b/pages/admin/login/index.tsx
@@ -0,0 +1,8 @@
+import type { NextPage } from "next";
+import { AdminLoginPage } from "../../../src/components";
+
+const AdminLogin: NextPage = () => {
+  return <AdminLoginPage />;
+};
+
+export default AdminLogin;
diff --git a/src/components/adminLoginPage/AdminLoginPage.tsx b/src/components/adminLoginPage/AdminLoginPage.tsx
new file mode 100644
index 0000000..f517aa0
--- /dev/null
+++ b/src/components/adminLoginPage/AdminLoginPage.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const AdminLoginPage = () => {
+  return <Wrapper>123</Wrapper>;
+};
+
+const Wrapper = styled.section``;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index aedab80..07e0e01 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -7,3 +7,4 @@ export * from "./signUpPage/SignUpPage";
 export * from "./infoPage/InformationPage";
 export * from "./mainPage/MainPage";
 export * from "./adminPage/AdminPage";
+export * from "./adminLoginPage/AdminLoginPage";

From 8a4a4e6233847ed9cdc387e9171c127afb28e220 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 10 Apr 2023 18:59:54 +0900
Subject: [PATCH 04/25] =?UTF-8?q?[#36]=20Feat=20AdminPage=20-=20Admin=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=BC?=
 =?UTF-8?q?=EC=8B=9C,=20Layout=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 87c7a46..b621e92 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,24 +1,39 @@
 import styled from "styled-components";
+import Router from "next/router";
 import { GlobalStyle } from "../../../styles/global.style";
 import { customColor } from "../customColor";
 import { Footer } from "../footer/Footer";
 import { Header } from "../header/Header";
 import { ScrollCSS } from "./ScrollCSS";
+import { useEffect, useState } from "react";
 
 interface Props {
   children: React.ReactNode;
 }
 
 export const Layout = ({ children }: Props) => {
+  const [isAdmin, setIsAdmin] = useState(false);
+  useEffect(() => {
+    setIsAdmin(Router.asPath.includes("/admin"));
+  }, []);
+
   return (
     <Wrapper>
-      <GlobalStyle />
-      <ScrollCSS />
-      <Header />
-      <LayoutWrapper>
-        <LayoutWrapperInner>{children}</LayoutWrapperInner>
-      </LayoutWrapper>
-      <Footer />
+      {isAdmin ? (
+        <>
+          <GlobalStyle />
+          {children}
+        </>
+      ) : (
+        <>
+          <ScrollCSS />
+          <Header />
+          <LayoutWrapper>
+            <LayoutWrapperInner>{children}</LayoutWrapperInner>
+          </LayoutWrapper>
+          <Footer />
+        </>
+      )}
     </Wrapper>
   );
 };

From e36b88fe40aae2876ae9f3dc09ae486408cf6f25 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 10 Apr 2023 20:22:00 +0900
Subject: [PATCH 05/25] =?UTF-8?q?[#36]=20Feat=20AdminLoginPage=20-=20Admin?=
 =?UTF-8?q?LoginPage=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../adminLoginPage/AdminLoginPage.tsx         | 172 +++++++++++++++++-
 1 file changed, 170 insertions(+), 2 deletions(-)

diff --git a/src/components/adminLoginPage/AdminLoginPage.tsx b/src/components/adminLoginPage/AdminLoginPage.tsx
index f517aa0..6c2801b 100644
--- a/src/components/adminLoginPage/AdminLoginPage.tsx
+++ b/src/components/adminLoginPage/AdminLoginPage.tsx
@@ -1,7 +1,175 @@
 import styled from "styled-components";
+import { useRef } from "react";
+import Image from "next/image";
+import { TbWorld } from "react-icons/tb";
+import { IoMdClose } from "react-icons/io";
+import { FieldValues, useForm } from "react-hook-form";
+import axios from "axios";
+import Router from "next/router";
+import { customColor } from "../customColor";
 
 export const AdminLoginPage = () => {
-  return <Wrapper>123</Wrapper>;
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm();
+
+  const submit = (data: FieldValues) => {
+    axios
+      .post("http://localhost:8080/admin/login", {
+        adminId: data["employeeId"],
+        adminPw: data["employeePw"],
+      })
+      .then((data) => {
+        localStorage.setItem("token", data.data["accessToken"]);
+        localStorage.setItem("refreshToken", data.data["refreshToken"]);
+        Router.reload();
+      });
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <WrapperInner onSubmit={handleSubmit(submit)}>
+          <Logo>
+            <WWW />
+            <Font>DOS</Font>
+          </Logo>
+          <Title>직원 로그인</Title>
+          <Login>
+            <LoginBox>
+              <Label>아이디</Label>
+              <Input
+                type="text"
+                placeholder="Enter ID"
+                {...register("employeeId", { required: true })}
+              />
+              {errors["employeeId"] && <Error>아이디를 입력해주세요</Error>}
+            </LoginBox>
+            <LoginBox>
+              <Label>비밀번호</Label>
+              <Input
+                type="password"
+                placeholder="Enter PW"
+                {...register("employeePw", { required: true })}
+              />
+              {errors["employeePw"] && <Error>비밀번호를 입력해주세요</Error>}
+            </LoginBox>
+            <LoginButton type="submit">로그인</LoginButton>
+          </Login>
+        </WrapperInner>
+      </Wrapper>
+    </Container>
+  );
 };
 
-const Wrapper = styled.section``;
+const Container = styled.section`
+  display: flex;
+  background: ${customColor.indigo3};
+  width: 100%;
+  height: 100vh;
+`;
+const Wrapper = styled.div`
+  display: flex;
+  position: fixed;
+  box-shadow: 1px 2px 4px 2px ${customColor.black + "33"};
+  background: ${customColor.white};
+  z-index: 50;
+  width: 400px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const WrapperInner = styled.form`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  align-items: flex-start;
+  gap: 128px;
+  padding: 48px;
+  overflow: hidden;
+`;
+const Logo = styled.div`
+  display: flex;
+  position: relative;
+`;
+const Title = styled.div`
+  display: flex;
+  position: absolute;
+  right: 54px;
+  top: 78px;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: -0.5px;
+`;
+const WWW = styled(TbWorld)`
+  display: flex;
+  position: absolute;
+  font-size: 200px;
+  color: ${customColor.lightGray};
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const Font = styled.p`
+  position: absolute;
+  font-size: 52px;
+  font-weight: bolder;
+  color: ${customColor.darkGray};
+  text-shadow: 1px 1px 0px ${customColor.darkGray},
+    -1px -1px 0px ${customColor.darkGray}, 1px -1px 0px ${customColor.darkGray},
+    -1px 1px 0px ${customColor.darkGray}, 3px 5px 1px ${customColor.blue},
+    5px 3px 1px ${customColor.blue};
+`;
+const Login = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 44px;
+  padding: 0 32px;
+`;
+const LoginBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: 10px;
+  width: 100%;
+`;
+const Label = styled.p`
+  font-size: 16px;
+`;
+const Input = styled.input`
+  width: calc(100% - 12px);
+  border: none;
+  outline: none;
+  border-bottom: 2px solid ${customColor.lightGray};
+  margin-left: 12px;
+  padding: 6px 8px;
+  font-size: 15px;
+  ::placeholder {
+    color: ${customColor.gray};
+  }
+`;
+const LoginButton = styled.button`
+  display: flex;
+  font-size: 16px;
+  color: ${customColor.white};
+  width: 100%;
+  justify-content: center;
+  background: ${customColor.indigo3};
+  padding: 12px;
+  margin: 16px 0;
+`;
+const Error = styled.div`
+  display: flex;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-size: 12px;
+  color: ${customColor.darkGray};
+  transform: translate(0, calc(100% + 2px));
+`;

From 7b449518080e3498cfceec3a74614916979e8563 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sat, 15 Apr 2023 21:44:03 +0900
Subject: [PATCH 06/25] =?UTF-8?q?[#1]=20=ED=99=98=EA=B2=BD=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80=20-=20add=20'react-query'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 181 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 2 files changed, 182 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index c99a0d8..96dbccc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "react-icons": "^4.7.1",
         "react-intersection-observer": "^9.4.3",
         "react-phone-number-input": "^3.2.17",
+        "react-query": "^3.39.3",
         "react-scroll": "^1.8.9",
         "react-scroll-wheel-handler": "^2.2.0",
         "react-transition-group": "^4.4.5",
@@ -1134,6 +1135,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1154,6 +1163,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1367,6 +1391,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2671,6 +2700,11 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2812,6 +2846,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2832,6 +2875,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2883,6 +2931,14 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -3048,6 +3104,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3356,6 +3417,31 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-scroll": {
       "version": "1.8.9",
       "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
@@ -3440,6 +3526,11 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -3947,6 +4038,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -4782,6 +4882,11 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4799,6 +4904,21 @@
         "fill-range": "^7.0.1"
       }
     },
+    "broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -4950,6 +5070,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5884,6 +6009,11 @@
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
       "integrity": "sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ=="
     },
+    "js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5995,6 +6125,15 @@
         "yallist": "^4.0.0"
       }
     },
+    "match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6009,6 +6148,11 @@
         "picomatch": "^2.3.1"
       }
     },
+    "microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -6045,6 +6189,14 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "requires": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -6145,6 +6297,11 @@
         "es-abstract": "^1.20.4"
       }
     },
+    "oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -6345,6 +6502,16 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      }
+    },
     "react-scroll": {
       "version": "1.8.9",
       "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
@@ -6398,6 +6565,11 @@
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
       "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
     },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -6733,6 +6905,15 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index 32539aa..05ebe95 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react-icons": "^4.7.1",
     "react-intersection-observer": "^9.4.3",
     "react-phone-number-input": "^3.2.17",
+    "react-query": "^3.39.3",
     "react-scroll": "^1.8.9",
     "react-scroll-wheel-handler": "^2.2.0",
     "react-transition-group": "^4.4.5",

From d761a5455771a3eb8fb9a17036a1574bf6c51e9b Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sat, 15 Apr 2023 21:47:52 +0900
Subject: [PATCH 07/25] =?UTF-8?q?[#35]=20Feat=20SignUpPage=20API=20-=20use?=
 =?UTF-8?q?Query=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/api.ts                              | 11 +++++------
 src/apis/controller/signUp.api.ts            |  8 ++++++++
 src/hooks/query/signUp/useQueryPostSignUp.ts | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 src/apis/controller/signUp.api.ts
 create mode 100644 src/hooks/query/signUp/useQueryPostSignUp.ts

diff --git a/src/apis/api.ts b/src/apis/api.ts
index 8e1e946..2cd7e15 100644
--- a/src/apis/api.ts
+++ b/src/apis/api.ts
@@ -1,5 +1,5 @@
-import axios from 'axios';
-import applyDefaultParams from './applyDefaultParams';
+import axios from "axios";
+import applyDefaultParams from "./applyDefaultParams";
 
 import normalizeAxiosError, {
   SERVER_ERROR,
@@ -7,8 +7,7 @@ import normalizeAxiosError, {
   NETWORK_ERROR,
   CLIENT_ERROR,
   UNAUTH_ERROR,
-} from './normalizeAxiosError';
-import { settings } from '@street-vendor/core';
+} from "./normalizeAxiosError";
 
 const API_TIMEOUT = 50000; // 50s
 
@@ -19,13 +18,13 @@ const api = axios.create({
 });
 
 function getBaseUrl() {
-  return settings.api.baseUrl;
+  return "http://localhost:8080";
 }
 
 api.interceptors.request.use(applyDefaultParams);
 api.interceptors.response.use(undefined, normalizeAxiosError);
 api.interceptors.response.use(undefined, function (err) {
-  console.log('ERR :: ', err);
+  console.log("ERR :: ", err);
 
   if (err.code === TIMEOUT_ERROR || err.code === NETWORK_ERROR) {
     //
diff --git a/src/apis/controller/signUp.api.ts b/src/apis/controller/signUp.api.ts
new file mode 100644
index 0000000..2ba9fd8
--- /dev/null
+++ b/src/apis/controller/signUp.api.ts
@@ -0,0 +1,8 @@
+import sendApi from "../sendApi";
+
+export const SignUpApi = {
+  registerSignUp: async (data: FormData) => {
+    const response = await sendApi.post(`/orders`, data);
+    return response.data;
+  },
+};
diff --git a/src/hooks/query/signUp/useQueryPostSignUp.ts b/src/hooks/query/signUp/useQueryPostSignUp.ts
new file mode 100644
index 0000000..b29a2ce
--- /dev/null
+++ b/src/hooks/query/signUp/useQueryPostSignUp.ts
@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useMutation } from "react-query";
+import { SignUpApi } from "../../../apis/controller/signUp.api";
+
+export const useQueryPostSignUp = () => {
+  const register = useCallback(async (data: FormData) => {
+    const response = await SignUpApi.registerSignUp(data);
+    return response;
+  }, []);
+
+  return useMutation(register, {
+    onSuccess: (e) => {
+      console.log(e);
+    },
+    onError: (e) => {
+      console.log(e);
+    },
+  });
+};

From d7eaf11703e9140f600176c284be8229aabeb58d Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sat, 15 Apr 2023 22:14:58 +0900
Subject: [PATCH 08/25] =?UTF-8?q?[#1]=20=ED=99=98=EA=B2=BD=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=EB=B3=80=EA=B2=BD=20-=20useQuery=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=93=A4=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/normalizeAxiosError.ts | 26 +++++++++++++-------------
 src/apis/sendApi.ts             | 26 +++++++++++++-------------
 src/libs/sessionService.ts      | 11 -----------
 src/libs/tokenService.ts        | 10 ++++++++++
 4 files changed, 36 insertions(+), 37 deletions(-)
 delete mode 100644 src/libs/sessionService.ts
 create mode 100644 src/libs/tokenService.ts

diff --git a/src/apis/normalizeAxiosError.ts b/src/apis/normalizeAxiosError.ts
index 9584f87..69b1808 100644
--- a/src/apis/normalizeAxiosError.ts
+++ b/src/apis/normalizeAxiosError.ts
@@ -1,17 +1,17 @@
-import { sessionService } from '../libs/sessionService';
-import axios from 'axios';
+import { tokenService } from "../libs/tokenService";
+import axios from "axios";
 
-export const UNAUTH_ERROR = 'UNAUTH_ERROR';
-export const CLIENT_ERROR = 'CLIENT_ERROR';
-export const SERVER_ERROR = 'SERVER_ERROR';
-export const CANCEL_ERROR = 'CANCEL_ERROR';
-export const TIMEOUT_ERROR = 'TIMEOUT_ERROR';
-export const NETWORK_ERROR = 'NETWORK_ERROR';
-export const UNKNOWN_ERROR = 'UNKNOWN_ERROR';
+export const UNAUTH_ERROR = "UNAUTH_ERROR";
+export const CLIENT_ERROR = "CLIENT_ERROR";
+export const SERVER_ERROR = "SERVER_ERROR";
+export const CANCEL_ERROR = "CANCEL_ERROR";
+export const TIMEOUT_ERROR = "TIMEOUT_ERROR";
+export const NETWORK_ERROR = "NETWORK_ERROR";
+export const UNKNOWN_ERROR = "UNKNOWN_ERROR";
 
 function xhrError({ code, status = 0, data = {} }: any) {
   const err: any = new Error();
-  err.name = 'XhrError';
+  err.name = "XhrError";
   err.message = err.code = code;
   err.data = data;
   err.status = status;
@@ -20,7 +20,7 @@ function xhrError({ code, status = 0, data = {} }: any) {
 
 export default function normalizeAxiosError(error: any) {
   // timeout
-  if (error.code === 'ECONNABORTED') {
+  if (error.code === "ECONNABORTED") {
     return xhrError({
       code: TIMEOUT_ERROR,
     });
@@ -37,8 +37,8 @@ export default function normalizeAxiosError(error: any) {
   // service error, 400 401 404 500 502...
   if (error.response) {
     if ([401, 423].includes(error.response.status)) {
-      sessionService.resetIdSession();
-      location.replace('/login?warn');
+      // tokenService.resetToken();
+      location.replace("/login?warn");
 
       return xhrError({
         code: UNAUTH_ERROR,
diff --git a/src/apis/sendApi.ts b/src/apis/sendApi.ts
index 57290a6..692a4bc 100644
--- a/src/apis/sendApi.ts
+++ b/src/apis/sendApi.ts
@@ -1,10 +1,10 @@
-import { sessionService } from "../libs/sessionService";
+import { tokenService } from "../libs/tokenService";
 import api from "./api";
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   get: async (url: string, params?: any) => {
-    const idSession = await sessionService.getIdSession();
+    const token = await tokenService.getToken();
 
     return params !== undefined
       ? api({
@@ -12,19 +12,19 @@ export default {
           method: "get",
           params: params,
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         })
       : api({
           url: url,
           method: "get",
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         });
   },
   post: async (url: string, params: any) => {
-    const idSession = await sessionService.getIdSession();
+    const token = await tokenService.getToken();
 
     return params !== undefined
       ? api({
@@ -32,19 +32,19 @@ export default {
           method: "post",
           data: params,
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         })
       : api({
           url: url,
           method: "post",
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         });
   },
   put: async (url: string, params: any) => {
-    const idSession = await sessionService.getIdSession();
+    const token = await tokenService.getToken();
 
     return params !== undefined
       ? api({
@@ -52,19 +52,19 @@ export default {
           method: "put",
           params: params,
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         })
       : api({
           url: url,
           method: "put",
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         });
   },
   delete: async (url: string, params?: any) => {
-    const idSession = await sessionService.getIdSession();
+    const token = await tokenService.getToken();
 
     return params !== undefined
       ? api({
@@ -72,14 +72,14 @@ export default {
           method: "delete",
           data: params,
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         })
       : api({
           url: url,
           method: "delete",
           headers: {
-            Authorization: `${idSession}`,
+            Authorization: `${token}`,
           },
         });
   },
diff --git a/src/libs/sessionService.ts b/src/libs/sessionService.ts
deleted file mode 100644
index 61bae2e..0000000
--- a/src/libs/sessionService.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-const key = {
-  idSession: 'ID_SESSION',
-};
-
-export const sessionService = {
-  /** ID session */
-  getIdSession: () => localStorage.getItem(key.idSession) ?? '',
-  setIdSession: (session: string) =>
-    localStorage.setItem(key.idSession, `Bearer ${session}`),
-  resetIdSession: () => localStorage.setItem(key.idSession, ''),
-};
diff --git a/src/libs/tokenService.ts b/src/libs/tokenService.ts
new file mode 100644
index 0000000..3efce2e
--- /dev/null
+++ b/src/libs/tokenService.ts
@@ -0,0 +1,10 @@
+const key = {
+  token: "token",
+};
+
+export const tokenService = {
+  /** ID session */
+  getToken: () => localStorage.getItem(key.token) ?? "",
+  setToken: (token: string) => localStorage.setItem(key.token, token),
+  resetToken: () => localStorage.setItem(key.token, ""),
+};

From 0cef861c0fe090142f99d0662bc09b81b405eaf9 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sat, 15 Apr 2023 22:29:48 +0900
Subject: [PATCH 09/25] =?UTF-8?q?[#1]=20=ED=99=98=EA=B2=BD=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=EB=B3=80=EA=B2=BD=20-=20=5Fapp.tsx=20QueryClientProvi?=
 =?UTF-8?q?der=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 65231ad..fc6801f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,18 +1,20 @@
 import styled from "styled-components";
 import { GlobalStyle } from "../styles/global.style";
 import type { AppProps } from "next/app";
-import { Header } from "../src/components/header/Header";
-import { Footer } from "../src/components/footer/Footer";
 import { Layout } from "../src/components/layout/Layout";
 import { RecoilRoot } from "recoil";
-import { ScrollCSS } from "../src/components/layout/ScrollCSS";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const queryClient = new QueryClient();
+
   return (
     <RecoilRoot>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <QueryClientProvider client={queryClient}>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </QueryClientProvider>
     </RecoilRoot>
   );
 }

From 6f23269777a57211c34e050048b3027f39b0ce29 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sat, 15 Apr 2023 22:35:37 +0900
Subject: [PATCH 10/25] =?UTF-8?q?[#35]=20Feat=20SignUpPage=20API=20-=20use?=
 =?UTF-8?q?Query=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/signUpPage/SignUpPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/signUpPage/SignUpPage.tsx b/src/components/signUpPage/SignUpPage.tsx
index a7f936c..9d595f0 100644
--- a/src/components/signUpPage/SignUpPage.tsx
+++ b/src/components/signUpPage/SignUpPage.tsx
@@ -10,6 +10,7 @@ import axios from "axios";
 import { Alert } from "../modal/alert";
 import Router from "next/router";
 import { pathName } from "../../config/pathName";
+import { useQueryPostSignUp } from "../../hooks/query/signUp/useQueryPostSignUp";
 
 export const SignUpPage = () => {
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
@@ -34,6 +35,7 @@ export const SignUpPage = () => {
     Router.push(pathName.LOGIN);
   };
 
+  const { mutate } = useQueryPostSignUp();
   const submit = (data: FieldValues) => {
     if (data.meeting.length < 12) {
       setError("meeting", {});
@@ -62,7 +64,7 @@ export const SignUpPage = () => {
         "orderDto",
         new Blob([JSON.stringify(send)], { type: "application/json" })
       );
-      axios.post("http://localhost:8080/orders", formData);
+      mutate(formData);
     }
   };
   return (

From c407565fd04353b5968efd47019fcde284aa1d3f Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sun, 16 Apr 2023 03:32:40 +0900
Subject: [PATCH 11/25] =?UTF-8?q?[#35]=20Feat=20SignUpPage=20API=20-=20ord?=
 =?UTF-8?q?ers/meetings=EC=9D=98=20=EA=B0=92=20=EA=B0=80=EC=A0=B8=EC=99=80?=
 =?UTF-8?q?=20Calendar=EC=97=90=20=EB=BF=8C=EB=A6=AC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/controller/signUp.api.ts             |  6 +-
 src/components/signUpPage/SignUpAddInfo.tsx   | 12 +++
 .../signUpPage/components/FormCalendar.tsx    | 76 +++++++++----------
 .../signUpPage/components/SelectTime.tsx      | 75 ++++++++----------
 src/hooks/query/signUp/useQueryGetMeetings.ts | 26 +++++++
 styles/global.style.ts                        | 10 +--
 6 files changed, 113 insertions(+), 92 deletions(-)
 create mode 100644 src/hooks/query/signUp/useQueryGetMeetings.ts

diff --git a/src/apis/controller/signUp.api.ts b/src/apis/controller/signUp.api.ts
index 2ba9fd8..d83894b 100644
--- a/src/apis/controller/signUp.api.ts
+++ b/src/apis/controller/signUp.api.ts
@@ -2,7 +2,11 @@ import sendApi from "../sendApi";
 
 export const SignUpApi = {
   registerSignUp: async (data: FormData) => {
-    const response = await sendApi.post(`/orders`, data);
+    const response = await sendApi.post("/orders", data);
+    return response.data;
+  },
+  loadMeetings: async () => {
+    const response = await sendApi.get("/orders/meeting");
     return response.data;
   },
 };
diff --git a/src/components/signUpPage/SignUpAddInfo.tsx b/src/components/signUpPage/SignUpAddInfo.tsx
index 36a40df..05fba2f 100644
--- a/src/components/signUpPage/SignUpAddInfo.tsx
+++ b/src/components/signUpPage/SignUpAddInfo.tsx
@@ -17,6 +17,8 @@ import { InfoLabel } from "./components/InfoLabel";
 import { FormTextarea } from "./components/FormTextarea";
 import { FormFile } from "./components/FormFile";
 import { FormCalendar } from "./components/FormCalendar";
+import { useQueryGetMeetings } from "../../hooks/query/signUp/useQueryGetMeetings";
+import { useEffect, useState } from "react";
 
 interface Props {
   register: UseFormRegister<FieldValues>;
@@ -33,6 +35,14 @@ export const SignUpAddInfo = ({
   watch,
   setValue,
 }: Props) => {
+  const { isLoading, data, error } = useQueryGetMeetings();
+  const [meetings, setMeetings] = useState<{ title: String; date: String }[]>();
+  useEffect(() => {
+    let meetings: { title: String; date: String }[] = [];
+    data?.map((i) => meetings.push({ title: `${i.name[0]}**`, date: i.date }));
+    setMeetings(meetings);
+  }, [isLoading]);
+
   return (
     <Content>
       <Lbel>
@@ -170,6 +180,8 @@ export const SignUpAddInfo = ({
               setValue={setValue}
               register={register}
               value="meeting"
+              isLoading={isLoading}
+              meetingData={meetings}
             />
           </FormItemContent>
           <InfoLabel
diff --git a/src/components/signUpPage/components/FormCalendar.tsx b/src/components/signUpPage/components/FormCalendar.tsx
index 40e27f5..e150b87 100644
--- a/src/components/signUpPage/components/FormCalendar.tsx
+++ b/src/components/signUpPage/components/FormCalendar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useEffect, useRef, useState } from "react";
 import moment from "moment";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -16,9 +17,21 @@ interface Props {
   setValue: UseFormSetValue<FieldValues>;
   register: UseFormRegister<FieldValues>;
   value: string;
+  isLoading: boolean;
+  meetingData: QueryType[] | undefined;
+}
+export interface QueryType {
+  date: String;
+  title: String;
 }
 
-export const FormCalendar = ({ setValue, register, value }: Props) => {
+export const FormCalendar = ({
+  setValue,
+  register,
+  value,
+  isLoading,
+  meetingData,
+}: Props) => {
   const { ref, onChange, ...rest } = register(value);
   const wrapper = useRef<HTMLElement>(null);
   const [modal, setModal] = useState(false);
@@ -87,46 +100,26 @@ export const FormCalendar = ({ setValue, register, value }: Props) => {
         }}
         content={content}
       />
-      <FullCalendar
-        plugins={[dayGridPlugin, interaction]}
-        initialView="dayGridMonth"
-        headerToolbar={{
-          start: "title",
-          center: "",
-          end: "prev,next",
-        }}
-        titleFormat={{ year: "numeric", month: "narrow" }}
-        locale="ko"
-        height={524}
-        eventColor={customColor.blue}
-        eventTextColor={customColor.black}
-        events={[
-          { title: "10:00 조**", date: "2023-02-10" },
-          { title: "10:00 조**", date: "2023-02-10" },
-          { title: "10:00 조**", date: "2023-02-10" },
-          { title: "add", date: "2023-02-17" },
-          { title: "add", date: "2023-02-17" },
-          { title: "add", date: "2023-02-17" },
-          { title: "add", date: "2023-02-03" },
-          { title: "add", date: "2023-02-03" },
-          { title: "add", date: "2023-02-03" },
-          { title: "add", date: "2023-02-24" },
-          { title: "add", date: "2023-02-24" },
-          { title: "add", date: "2023-02-24" },
-          { title: "add", date: "2023-03-03" },
-          { title: "add", date: "2023-03-03" },
-          { title: "add", date: "2023-03-03" },
-          { title: "add", date: "2023-03-10" },
-          { title: "add", date: "2023-03-10" },
-          { title: "add", date: "2023-03-10" },
-          { title: "18:00 김**", date: "2023-02-14" },
-          { title: "18:00 김**", date: "2023-02-14" },
-          { title: "18:00 김**", date: "2023-02-14" },
-        ]}
-        eventContent={renderEvent}
-        dateClick={handleClickDay}
-        eventClick={handleEventClick}
-      />
+      {!isLoading && (
+        <FullCalendar
+          plugins={[dayGridPlugin, interaction]}
+          initialView="dayGridMonth"
+          headerToolbar={{
+            start: "title",
+            center: "",
+            end: "prev,next",
+          }}
+          titleFormat={{ year: "numeric", month: "narrow" }}
+          locale="ko"
+          height={524}
+          eventColor={customColor.blue}
+          eventTextColor={customColor.black}
+          events={meetingData}
+          eventContent={renderEvent}
+          dateClick={handleClickDay}
+          eventClick={handleEventClick}
+        />
+      )}
       <PrevIcon />
       <NextIcon />
       <SelectTime
@@ -157,6 +150,7 @@ const Item = styled.div`
   color: ${customColor.black};
   padding: 0 2px;
   overflow: hidden;
+  pointer-events: none;
 `;
 const PrevIcon = styled(BsFillCaretLeftFill)`
   position: absolute;
diff --git a/src/components/signUpPage/components/SelectTime.tsx b/src/components/signUpPage/components/SelectTime.tsx
index 3555293..9b65cec 100644
--- a/src/components/signUpPage/components/SelectTime.tsx
+++ b/src/components/signUpPage/components/SelectTime.tsx
@@ -1,7 +1,5 @@
-import { RefObject, useRef, useState } from "react";
 import styled from "styled-components";
 import { customColor } from "../../customColor";
-import { CSSTransition } from "react-transition-group";
 
 interface Props {
   isOpen: boolean;
@@ -16,48 +14,39 @@ interface StyleProps {
 }
 
 export const SelectTime = ({ isOpen, xy, time, setTime }: Props) => {
-  const modalRef = useRef(null);
   return (
-    <CSSTransition
-      in={isOpen}
-      timeout={400}
-      nodeRef={modalRef}
-      classNames="time_modal"
-      unmountOnExit
-    >
-      <Modal isOpen={isOpen} xy={xy} ref={modalRef}>
-        <Title>원하는 시간을 선택해주세요</Title>
-        <Buttons>
-          <Button
-            type="button"
-            btnValue={time === "10:00"}
-            onClick={() => {
-              setTime("10:00");
-            }}
-          >
-            10:00
-          </Button>
-          <Button
-            type="button"
-            btnValue={time === "13:00"}
-            onClick={() => {
-              setTime("13:00");
-            }}
-          >
-            13:00
-          </Button>
-          <Button
-            type="button"
-            btnValue={time === "16:00"}
-            onClick={() => {
-              setTime("16:00");
-            }}
-          >
-            16:00
-          </Button>
-        </Buttons>
-      </Modal>
-    </CSSTransition>
+    <Modal isOpen={isOpen} xy={xy}>
+      <Title>원하는 시간을 선택해주세요</Title>
+      <Buttons>
+        <Button
+          type="button"
+          btnValue={time === "10:00"}
+          onClick={() => {
+            setTime("10:00");
+          }}
+        >
+          10:00
+        </Button>
+        <Button
+          type="button"
+          btnValue={time === "13:00"}
+          onClick={() => {
+            setTime("13:00");
+          }}
+        >
+          13:00
+        </Button>
+        <Button
+          type="button"
+          btnValue={time === "16:00"}
+          onClick={() => {
+            setTime("16:00");
+          }}
+        >
+          16:00
+        </Button>
+      </Buttons>
+    </Modal>
   );
 };
 
diff --git a/src/hooks/query/signUp/useQueryGetMeetings.ts b/src/hooks/query/signUp/useQueryGetMeetings.ts
new file mode 100644
index 0000000..1f0a0bf
--- /dev/null
+++ b/src/hooks/query/signUp/useQueryGetMeetings.ts
@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { useQuery } from "react-query";
+import { SignUpApi } from "../../../apis/controller/signUp.api";
+
+export interface ResponseType {
+  date: String;
+  name: String;
+  time: String;
+}
+
+export const useQueryGetMeetings = () => {
+  const load = useCallback(async () => {
+    const response = await SignUpApi.loadMeetings();
+    const meetingsRes: ResponseType[] = [];
+    response.map((i: ResponseType) => {
+      meetingsRes.push({ date: i.date, name: i.name, time: i.time });
+    });
+    return meetingsRes;
+  }, []);
+
+  return useQuery<ResponseType[]>(["getMeetings"], load, {
+    onError: (e) => {
+      console.log(e);
+    },
+  });
+};
diff --git a/styles/global.style.ts b/styles/global.style.ts
index 16d3770..672cc85 100644
--- a/styles/global.style.ts
+++ b/styles/global.style.ts
@@ -95,6 +95,9 @@ height:20px;
   filter: grayscale(0%);
   height:max-content;
 }
+.fc-event-main{
+  pointer-events: none;
+}
 .selected{
   filter:drop-shadow(0px 0px 6px ${customColor.blue});
 }
@@ -116,11 +119,4 @@ height:20px;
   transform: translate(-50%,-50%);
   transition: all 0.3s ease;
 }
-.time_modal-enter {
-  width:1px;
-  }
-  .time_modal-enter-active {
-    width:137px;
-    transition: all 0.4s ease-out;
-  }
 `;

From d72ddfe876e47a9af2cc7a929cea5ce15de0053f Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Sun, 16 Apr 2023 03:54:21 +0900
Subject: [PATCH 12/25] =?UTF-8?q?[#36]=20Feat=20AdminPage=20-=20Layout=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index b621e92..165254a 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -26,6 +26,7 @@ export const Layout = ({ children }: Props) => {
         </>
       ) : (
         <>
+          <GlobalStyle />
           <ScrollCSS />
           <Header />
           <LayoutWrapper>

From c356cbd57858475bf1697848f67234b8e2ed817c Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 16:28:13 +0900
Subject: [PATCH 13/25] =?UTF-8?q?[#35]=20Feat=20SignUpPage=20API=20-=20mee?=
 =?UTF-8?q?tingSchedule=20=EC=B6=9C=EB=A0=A5=20=EA=B0=92=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9=20-=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20Item=20=EC=B6=94=EA=B0=80=20-=20meeting=20?=
 =?UTF-8?q?data=20=EB=AF=B8=20=EC=9E=85=EB=A0=A5=EC=8B=9C=20modal=20?=
 =?UTF-8?q?=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/signUpPage/SignUpAddInfo.tsx   |  4 +-
 src/components/signUpPage/SignUpPage.tsx      | 41 ++++++++++++++-----
 .../signUpPage/components/FormCalendar.tsx    | 26 +++++++++++-
 src/hooks/query/signUp/useQueryPostSignUp.ts  |  6 +--
 4 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/components/signUpPage/SignUpAddInfo.tsx b/src/components/signUpPage/SignUpAddInfo.tsx
index 05fba2f..9052d53 100644
--- a/src/components/signUpPage/SignUpAddInfo.tsx
+++ b/src/components/signUpPage/SignUpAddInfo.tsx
@@ -39,7 +39,9 @@ export const SignUpAddInfo = ({
   const [meetings, setMeetings] = useState<{ title: String; date: String }[]>();
   useEffect(() => {
     let meetings: { title: String; date: String }[] = [];
-    data?.map((i) => meetings.push({ title: `${i.name[0]}**`, date: i.date }));
+    data?.map((i) =>
+      meetings.push({ title: `${i.name[0]}**/${i.time}`, date: i.date })
+    );
     setMeetings(meetings);
   }, [isLoading]);
 
diff --git a/src/components/signUpPage/SignUpPage.tsx b/src/components/signUpPage/SignUpPage.tsx
index 9d595f0..30274f7 100644
--- a/src/components/signUpPage/SignUpPage.tsx
+++ b/src/components/signUpPage/SignUpPage.tsx
@@ -6,14 +6,16 @@ import { AiOutlineForm } from "react-icons/ai";
 import { SignUpUserInfo } from "./SignUpUserInfo";
 import { SignUpSiteInfo } from "./SignUpSiteInfo";
 import { SignUpAddInfo } from "./SignUpAddInfo";
-import axios from "axios";
 import { Alert } from "../modal/alert";
 import Router from "next/router";
 import { pathName } from "../../config/pathName";
 import { useQueryPostSignUp } from "../../hooks/query/signUp/useQueryPostSignUp";
 
 export const SignUpPage = () => {
-  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalContent, setModalContent] = useState("");
+  const [modalFunc, setModalFunc] = useState<() => void>(() => {});
+
   const {
     register,
     unregister,
@@ -23,22 +25,39 @@ export const SignUpPage = () => {
     watch,
     setValue,
     setError,
+    reset,
   } = useForm();
 
   useEffect(() => {
-    localStorage.getItem("token") === null && setIsLoginModalOpen(true);
+    if (localStorage.getItem("token") === null) {
+      setModalContent("로그인 없이 접근할 수 없는 페이지 입니다");
+      setModalFunc(handleGoLogin);
+      setIsModalOpen(true);
+    }
   }, []);
 
   const handleGoLogin = () => {
-    setIsLoginModalOpen(false);
+    setIsModalOpen(false);
     localStorage.setItem("prevPath", Router.asPath);
     Router.push(pathName.LOGIN);
   };
+  const CompleteSubmit = () => {
+    reset();
+    setModalContent("발주신청이 성공적으로 완료되었습니다");
+    setModalFunc(() => Router.reload());
+    setIsModalOpen(true);
+  };
+  const UncheckMeeting = () => {
+    setModalContent("첫 미팅 희망날짜를 선택해 주세요");
+    setModalFunc(() => setIsModalOpen(false));
+    setIsModalOpen(true);
+  };
+
+  const { mutate } = useQueryPostSignUp(CompleteSubmit);
 
-  const { mutate } = useQueryPostSignUp();
   const submit = (data: FieldValues) => {
     if (data.meeting.length < 12) {
-      setError("meeting", {});
+      UncheckMeeting();
     } else {
       let tempColor1 = Object.keys(data)
         .filter((i) => i.includes("mainColor"))
@@ -70,9 +89,9 @@ export const SignUpPage = () => {
   return (
     <Container>
       <Alert
-        isOpen={isLoginModalOpen}
-        content="로그인 없이 접근할 수 없는 페이지 입니다"
-        closeModal={handleGoLogin}
+        isOpen={isModalOpen}
+        content={modalContent}
+        closeModal={modalFunc}
       />
       <Head>
         <Title>
@@ -86,12 +105,12 @@ export const SignUpPage = () => {
       <Body onSubmit={handleSubmit(submit)}>
         <BodyInner>
           <Division />
-          <SignUpUserInfo
+          {/* <SignUpUserInfo
             register={register}
             errors={errors}
             control={control}
           />
-          <SignUpSiteInfo register={register} errors={errors} />
+          <SignUpSiteInfo register={register} errors={errors} /> */}
           <SignUpAddInfo
             register={register}
             errors={errors}
diff --git a/src/components/signUpPage/components/FormCalendar.tsx b/src/components/signUpPage/components/FormCalendar.tsx
index e150b87..69b80d3 100644
--- a/src/components/signUpPage/components/FormCalendar.tsx
+++ b/src/components/signUpPage/components/FormCalendar.tsx
@@ -43,7 +43,12 @@ export const FormCalendar = ({
   const [date, setDate] = useState("");
 
   const renderEvent = (info: EventContentArg) => {
-    return <Item>{info.event.title}</Item>;
+    return (
+      <Item>
+        <Name>{info.event.title.slice(0, 3)}</Name>
+        <Time>{info.event.title.slice(4)}</Time>
+      </Item>
+    );
   };
   const handleClickDay = (info: DateClickArg) => {
     let today = moment().format("YYYY-MM-DD");
@@ -83,6 +88,10 @@ export const FormCalendar = ({
     const dateClickArg: DateClickArg = {
       dateStr: info.event.startStr,
       view: info.view,
+      dayEl: info.el,
+      jsEvent: info.jsEvent,
+      date: info.event.start,
+      allDay: info.event.allDay,
     };
     info.view.calendar.trigger("dateClick", dateClickArg);
   };
@@ -144,6 +153,7 @@ const Wrapper = styled.article`
   padding-left: 0;
 `;
 const Item = styled.div`
+  display: flex;
   height: 14px;
   width: 100%;
   font-size: 12px;
@@ -151,6 +161,20 @@ const Item = styled.div`
   padding: 0 2px;
   overflow: hidden;
   pointer-events: none;
+  justify-content: space-between;
+`;
+const Name = styled.p`
+  color: ${customColor.black};
+  font-size: 12px;
+  pointer-events: none;
+`;
+const Time = styled.p`
+  color: ${customColor.black};
+  font-size: 12px;
+  pointer-events: none;
+  @media (max-width: 767px) {
+    display: none;
+  }
 `;
 const PrevIcon = styled(BsFillCaretLeftFill)`
   position: absolute;
diff --git a/src/hooks/query/signUp/useQueryPostSignUp.ts b/src/hooks/query/signUp/useQueryPostSignUp.ts
index b29a2ce..850141a 100644
--- a/src/hooks/query/signUp/useQueryPostSignUp.ts
+++ b/src/hooks/query/signUp/useQueryPostSignUp.ts
@@ -2,15 +2,15 @@ import { useCallback } from "react";
 import { useMutation } from "react-query";
 import { SignUpApi } from "../../../apis/controller/signUp.api";
 
-export const useQueryPostSignUp = () => {
+export const useQueryPostSignUp = (successFunc: () => void) => {
   const register = useCallback(async (data: FormData) => {
     const response = await SignUpApi.registerSignUp(data);
     return response;
   }, []);
 
   return useMutation(register, {
-    onSuccess: (e) => {
-      console.log(e);
+    onSuccess: () => {
+      successFunc();
     },
     onError: (e) => {
       console.log(e);

From 505853ba4c987c905e435e29323be98a3abcba93 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 16:32:35 +0900
Subject: [PATCH 14/25] =?UTF-8?q?[#1]=20=ED=99=98=EA=B2=BD=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80=20-=20add=20'react-modal'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 66 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 67 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 96dbccc..b36cb0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "react-hook-form": "^7.43.0",
         "react-icons": "^4.7.1",
         "react-intersection-observer": "^9.4.3",
+        "react-modal": "^3.16.1",
         "react-phone-number-input": "^3.2.17",
         "react-query": "^3.39.3",
         "react-scroll": "^1.8.9",
@@ -1968,6 +1969,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3401,6 +3407,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-phone-number-input": {
       "version": "3.2.17",
       "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.2.17.tgz",
@@ -4055,6 +4084,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5506,6 +5543,11 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6490,6 +6532,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-phone-number-input": {
       "version": "3.2.17",
       "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.2.17.tgz",
@@ -6922,6 +6980,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 05ebe95..29d6791 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-hook-form": "^7.43.0",
     "react-icons": "^4.7.1",
     "react-intersection-observer": "^9.4.3",
+    "react-modal": "^3.16.1",
     "react-phone-number-input": "^3.2.17",
     "react-query": "^3.39.3",
     "react-scroll": "^1.8.9",

From 9974a51a7732b8f5b62555f1dcae8a264043f005 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 16:35:34 +0900
Subject: [PATCH 15/25] =?UTF-8?q?[#1]=20=ED=99=98=EA=B2=BD=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80=20-=20add=20'@types/react-modal'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 21 +++++++++++++++++++++
 package.json      |  3 +++
 2 files changed, 24 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b36cb0c..fea7a7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,9 @@
         "styled-components": "^5.3.6",
         "swiper": "^9.0.4",
         "typescript": "4.9.4"
+      },
+      "devDependencies": {
+        "@types/react-modal": "^3.13.1"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -795,6 +798,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-scroll": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.6.tgz",
@@ -4683,6 +4695,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-scroll": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.8.6.tgz",
diff --git a/package.json b/package.json
index 29d6791..1661843 100644
--- a/package.json
+++ b/package.json
@@ -44,5 +44,8 @@
     "styled-components": "^5.3.6",
     "swiper": "^9.0.4",
     "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@types/react-modal": "^3.13.1"
   }
 }

From 0cca1f7aa9ac58c049ff04f81556da089218a98d Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 17:15:13 +0900
Subject: [PATCH 16/25] =?UTF-8?q?[#16]=20Feat=20Modal=20-=20react-modal=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=20-=20layout=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C=20modal=20close=20-=20Props=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/Alert.tsx |  97 +++++++++++++++++++++++++
 src/components/modal/Modal.tsx | 129 +++++++++++++++++++++++++++++++++
 src/components/modal/alert.tsx |  68 -----------------
 src/components/modal/modal.tsx |  96 ------------------------
 styles/global.style.ts         |  12 +--
 5 files changed, 228 insertions(+), 174 deletions(-)
 create mode 100644 src/components/modal/Alert.tsx
 create mode 100644 src/components/modal/Modal.tsx
 delete mode 100644 src/components/modal/alert.tsx
 delete mode 100644 src/components/modal/modal.tsx

diff --git a/src/components/modal/Alert.tsx b/src/components/modal/Alert.tsx
new file mode 100644
index 0000000..9322a9e
--- /dev/null
+++ b/src/components/modal/Alert.tsx
@@ -0,0 +1,97 @@
+import styled from "styled-components";
+import { customColor } from "../customColor";
+import { CSSTransition } from "react-transition-group";
+import { useRef } from "react";
+import ReactModal from "react-modal";
+
+interface Props {
+  content: string;
+  isOpen: boolean;
+  closeModal: () => void;
+  eventFunc?: () => void;
+}
+
+export const Alert = ({ content, isOpen, closeModal, eventFunc }: Props) => {
+  ReactModal.setAppElement("#__next");
+  const alertRef = useRef(null);
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={400}
+      nodeRef={alertRef}
+      classNames="modal"
+    >
+      <ReactModal
+        ariaHideApp={false}
+        shouldCloseOnOverlayClick={true}
+        onRequestClose={closeModal}
+        isOpen={true}
+        style={{
+          overlay: {
+            display: `${isOpen ? "flex" : "none"}`,
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: `${customColor.black + "00"}`,
+            zIndex: 10,
+            height: "100%",
+            width: "100%",
+          },
+          content: {
+            display: "flex",
+            position: "fixed",
+            WebkitOverflowScrolling: "touch",
+            border: "none",
+            padding: "0px",
+            backgroundColor: `${customColor.white + "00"}`,
+            width: "320px",
+            height: "180px",
+            top: "20px",
+            left: "50%",
+            transform: "translate(-50%,0)",
+            overflow: "visible",
+          },
+        }}
+      >
+        <Wrapper ref={alertRef}>
+          <Content>{content}</Content>
+          <Button type="button" onClick={eventFunc || closeModal}>
+            닫기
+          </Button>
+        </Wrapper>
+      </ReactModal>
+    </CSSTransition>
+  );
+};
+
+const Wrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 180px;
+  padding: 40px 60px 20px;
+  align-items: center;
+  justify-content: space-around;
+  background: ${customColor.white};
+  box-shadow: 1px 2px 4px 2px ${customColor.black + "33"};
+`;
+const Content = styled.p`
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  text-align: center;
+  word-break: keep-all;
+`;
+const Button = styled.button`
+  display: flex;
+  width: 100px;
+  height: 32px;
+  background: ${customColor.indigo3};
+  color: ${customColor.white};
+  font-size: 13px;
+  letter-spacing: -0.3px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 0000000..24d051e
--- /dev/null
+++ b/src/components/modal/Modal.tsx
@@ -0,0 +1,129 @@
+import styled from "styled-components";
+import { customColor } from "../customColor";
+import { CSSTransition } from "react-transition-group";
+import { useRef } from "react";
+import ReactModal from "react-modal";
+
+interface Props {
+  content: string;
+  isOpen: boolean;
+  closeModal: () => void;
+  yesEventFunc: () => void;
+  noEventFunc?: () => void;
+  eventBtnType?: "button" | "submit" | "reset";
+}
+
+export const Modal = ({
+  content,
+  isOpen,
+  closeModal,
+  yesEventFunc,
+  noEventFunc,
+  eventBtnType,
+}: Props) => {
+  ReactModal.setAppElement("#__next");
+  const modalRef = useRef(null);
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={400}
+      nodeRef={modalRef}
+      classNames="modal"
+    >
+      <ReactModal
+        ariaHideApp={false}
+        shouldCloseOnOverlayClick={true}
+        onRequestClose={closeModal}
+        isOpen={true}
+        style={{
+          overlay: {
+            display: `${isOpen ? "flex" : "none"}`,
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: `${customColor.black + "00"}`,
+            zIndex: 10,
+            height: "100%",
+            width: "100%",
+          },
+          content: {
+            display: "flex",
+            position: "fixed",
+            WebkitOverflowScrolling: "touch",
+            border: "none",
+            padding: "0px",
+            backgroundColor: `${customColor.white + "00"}`,
+            width: "320px",
+            height: "180px",
+            top: "20px",
+            left: "50%",
+            transform: "translate(-50%,0)",
+            overflow: "visible",
+          },
+        }}
+      >
+        <Wrapper ref={modalRef}>
+          <Content>{content}</Content>
+          <Buttons>
+            <Division />
+            <Button type={eventBtnType || "button"} onClick={yesEventFunc}>
+              네
+            </Button>
+            <Button type="button" onClick={noEventFunc || closeModal}>
+              아니요
+            </Button>
+          </Buttons>
+        </Wrapper>
+      </ReactModal>
+    </CSSTransition>
+  );
+};
+
+const Wrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 180px;
+  padding: 40px 60px 20px;
+  align-items: center;
+  justify-content: space-around;
+  background: ${customColor.white};
+  box-shadow: 1px 2px 4px 2px ${customColor.black + "33"};
+`;
+const Content = styled.p`
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  text-align: center;
+  word-break: keep-all;
+`;
+const Buttons = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 32px;
+  background: ${customColor.indigo3};
+  color: ${customColor.white};
+  font-size: 14px;
+  letter-spacing: -0.3px;
+  align-items: center;
+  justify-content: center;
+`;
+const Division = styled.div`
+  position: absolute;
+  width: 1px;
+  height: calc(100% - 8px);
+  background: ${customColor.white + "66"};
+`;
+const Button = styled.button`
+  display: flex;
+  width: 50%;
+  height: 100%;
+  color: ${customColor.white};
+  font-size: 13px;
+  letter-spacing: -0.3px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
diff --git a/src/components/modal/alert.tsx b/src/components/modal/alert.tsx
deleted file mode 100644
index aabf77c..0000000
--- a/src/components/modal/alert.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import styled from "styled-components";
-import { customColor } from "../customColor";
-import { CSSTransition } from "react-transition-group";
-import { useRef } from "react";
-
-interface Props {
-  content: string;
-  isOpen: boolean;
-  closeModal: () => void;
-}
-interface StyleProps {
-  isOpen: boolean;
-}
-
-export const Alert = ({ content, isOpen, closeModal }: Props) => {
-  const modalRef = useRef(null);
-  return (
-    <CSSTransition
-      in={isOpen}
-      timeout={400}
-      nodeRef={modalRef}
-      classNames="modal"
-    >
-      <Wrapper isOpen={isOpen} ref={modalRef}>
-        <Content>{content}</Content>
-        <Button type="button" onClick={closeModal}>
-          닫기
-        </Button>
-      </Wrapper>
-    </CSSTransition>
-  );
-};
-
-const Wrapper = styled.article<StyleProps>`
-  display: ${(props) => (props.isOpen ? "flex" : "none")};
-  /* display: flex; */
-  flex-direction: column;
-  position: fixed;
-  box-shadow: 1px 2px 4px 2px ${customColor.black + "33"};
-  background: ${customColor.white};
-  width: 320px;
-  height: 180px;
-  padding: 40px 60px 20px;
-  align-items: center;
-  justify-content: space-around;
-  left: 50%;
-  top: 20px;
-  transform: translate(-50%, 0);
-  z-index: 50;
-`;
-const Content = styled.p`
-  font-size: 16px;
-  letter-spacing: -0.5px;
-  text-align: center;
-  word-break: keep-all;
-`;
-const Button = styled.button`
-  display: flex;
-  width: 100px;
-  height: 32px;
-  background: ${customColor.indigo3};
-  color: ${customColor.white};
-  font-size: 13px;
-  letter-spacing: -0.3px;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-`;
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
deleted file mode 100644
index 3b940f9..0000000
--- a/src/components/modal/modal.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import styled from "styled-components";
-import { customColor } from "../customColor";
-import { CSSTransition } from "react-transition-group";
-import { useRef } from "react";
-
-interface Props {
-  content: string;
-  isOpen: boolean;
-  closeModal: () => void;
-  event: () => void;
-  eventBtnType: "button" | "submit" | "reset";
-}
-interface StyleProps {
-  isOpen: boolean;
-}
-
-export const Modal = ({
-  content,
-  isOpen,
-  closeModal,
-  event,
-  eventBtnType,
-}: Props) => {
-  const modalRef = useRef(null);
-  return (
-    <CSSTransition
-      in={isOpen}
-      timeout={400}
-      nodeRef={modalRef}
-      classNames="modal"
-    >
-      <Wrapper isOpen={isOpen} ref={modalRef}>
-        <Content>{content}</Content>
-        <Buttons>
-          <Division />
-          <Button type={eventBtnType} onClick={event}>
-            네
-          </Button>
-          <Button type="button" onClick={closeModal}>
-            아니요
-          </Button>
-        </Buttons>
-      </Wrapper>
-    </CSSTransition>
-  );
-};
-
-const Wrapper = styled.article<StyleProps>`
-  display: ${(props) => (props.isOpen ? "flex" : "none")};
-  flex-direction: column;
-  position: fixed;
-  box-shadow: 1px 2px 4px 2px ${customColor.black + "33"};
-  background: ${customColor.white};
-  width: 320px;
-  height: 180px;
-  padding: 40px 60px 20px;
-  align-items: center;
-  justify-content: space-around;
-  left: 50%;
-  top: 20px;
-  transform: translate(-50%, 0);
-  z-index: 50;
-`;
-const Content = styled.p`
-  font-size: 16px;
-  letter-spacing: -0.5px;
-`;
-const Buttons = styled.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 32px;
-  background: ${customColor.indigo3};
-  color: ${customColor.white};
-  font-size: 14px;
-  letter-spacing: -0.3px;
-  align-items: center;
-  justify-content: center;
-`;
-const Division = styled.div`
-  position: absolute;
-  width: 1px;
-  height: calc(100% - 8px);
-  background: ${customColor.white + "66"};
-`;
-const Button = styled.button`
-  display: flex;
-  width: 50%;
-  height: 100%;
-  color: ${customColor.white};
-  font-size: 13px;
-  letter-spacing: -0.3px;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-`;
diff --git a/styles/global.style.ts b/styles/global.style.ts
index 16d3770..a0f2b77 100644
--- a/styles/global.style.ts
+++ b/styles/global.style.ts
@@ -101,19 +101,11 @@ height:20px;
 /* react-transition-group */
 .modal-enter{
   opacity: 0;
-  transform: translate(-50%,12px);
+  transform: translate(0,12px);
 }
 .modal-enter-active {
   opacity: 1;
-  transform: translate(-50%,0);
-  transition: all 0.3s ease;
-}.loginModal-enter{
-  opacity: 0;
-  transform: translate(-50%,calc(-50% + 16px));
-}
-.loginModal-enter-active {
-  opacity: 1;
-  transform: translate(-50%,-50%);
+  transform: translate(0,0);
   transition: all 0.3s ease;
 }
 .time_modal-enter {

From 1665065007cadf8e670cd11a5e9501c67fb51a1a Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 17:17:45 +0900
Subject: [PATCH 17/25] [#16] Feat Modal

---
 src/components/modal/{Alert.tsx => alert.tsx} | 0
 src/components/modal/{Modal.tsx => modal.tsx} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/modal/{Alert.tsx => alert.tsx} (100%)
 rename src/components/modal/{Modal.tsx => modal.tsx} (100%)

diff --git a/src/components/modal/Alert.tsx b/src/components/modal/alert.tsx
similarity index 100%
rename from src/components/modal/Alert.tsx
rename to src/components/modal/alert.tsx
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/modal.tsx
similarity index 100%
rename from src/components/modal/Modal.tsx
rename to src/components/modal/modal.tsx

From 0204d23c14b23a4467a612aeb1025fb9e3838908 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 18:15:21 +0900
Subject: [PATCH 18/25] [#35] Feat SignUpPage API

---
 src/components/modal/alert.tsx           |  8 +++---
 src/components/signUpPage/SignUpPage.tsx | 33 ++++++++++++++----------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/modal/alert.tsx b/src/components/modal/alert.tsx
index 9322a9e..fe208ab 100644
--- a/src/components/modal/alert.tsx
+++ b/src/components/modal/alert.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { customColor } from "../customColor";
 import { CSSTransition } from "react-transition-group";
 import { useRef } from "react";
-import ReactModal from "react-modal";
+import ReactAlert from "react-modal";
 
 interface Props {
   content: string;
@@ -12,7 +12,7 @@ interface Props {
 }
 
 export const Alert = ({ content, isOpen, closeModal, eventFunc }: Props) => {
-  ReactModal.setAppElement("#__next");
+  ReactAlert.setAppElement("#__next");
   const alertRef = useRef(null);
   return (
     <CSSTransition
@@ -21,7 +21,7 @@ export const Alert = ({ content, isOpen, closeModal, eventFunc }: Props) => {
       nodeRef={alertRef}
       classNames="modal"
     >
-      <ReactModal
+      <ReactAlert
         ariaHideApp={false}
         shouldCloseOnOverlayClick={true}
         onRequestClose={closeModal}
@@ -61,7 +61,7 @@ export const Alert = ({ content, isOpen, closeModal, eventFunc }: Props) => {
             닫기
           </Button>
         </Wrapper>
-      </ReactModal>
+      </ReactAlert>
     </CSSTransition>
   );
 };
diff --git a/src/components/signUpPage/SignUpPage.tsx b/src/components/signUpPage/SignUpPage.tsx
index 30274f7..0d02fde 100644
--- a/src/components/signUpPage/SignUpPage.tsx
+++ b/src/components/signUpPage/SignUpPage.tsx
@@ -10,11 +10,13 @@ import { Alert } from "../modal/alert";
 import Router from "next/router";
 import { pathName } from "../../config/pathName";
 import { useQueryPostSignUp } from "../../hooks/query/signUp/useQueryPostSignUp";
+import { Modal } from "../modal/modal";
 
 export const SignUpPage = () => {
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalContent, setModalContent] = useState("");
-  const [modalFunc, setModalFunc] = useState<() => void>(() => {});
+  const [alertType, setAlertType] = useState("login");
+  const [alertContent, setAlertContent] = useState("");
 
   const {
     register,
@@ -30,27 +32,23 @@ export const SignUpPage = () => {
 
   useEffect(() => {
     if (localStorage.getItem("token") === null) {
-      setModalContent("로그인 없이 접근할 수 없는 페이지 입니다");
-      setModalFunc(handleGoLogin);
-      setIsModalOpen(true);
+      setAlertContent("로그인 없이 접근할 수 없는 페이지 입니다");
+      setIsAlertOpen(true);
     }
   }, []);
 
   const handleGoLogin = () => {
-    setIsModalOpen(false);
+    setIsAlertOpen(false);
     localStorage.setItem("prevPath", Router.asPath);
     Router.push(pathName.LOGIN);
   };
   const CompleteSubmit = () => {
     reset();
-    setModalContent("발주신청이 성공적으로 완료되었습니다");
-    setModalFunc(() => Router.reload());
     setIsModalOpen(true);
   };
   const UncheckMeeting = () => {
-    setModalContent("첫 미팅 희망날짜를 선택해 주세요");
-    setModalFunc(() => setIsModalOpen(false));
-    setIsModalOpen(true);
+    setAlertContent("첫 미팅 희망날짜를 선택해 주세요");
+    setIsAlertOpen(true);
   };
 
   const { mutate } = useQueryPostSignUp(CompleteSubmit);
@@ -88,10 +86,17 @@ export const SignUpPage = () => {
   };
   return (
     <Container>
-      <Alert
+      {/* <Modal
         isOpen={isModalOpen}
-        content={modalContent}
-        closeModal={modalFunc}
+        content="발주신청이 성공적으로 완료되었습니다"
+        closeModal={() => setIsModalOpen(false)}
+        yesEventFunc={() => Router.reload()}
+      /> */}
+      <Alert
+        isOpen={isAlertOpen}
+        content={alertContent}
+        closeModal={() => setIsAlertOpen(false)}
+        eventFunc={handleGoLogin}
       />
       <Head>
         <Title>

From e7e71c08eb3b46e5882736026df01db90cbdd45b Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 18:18:33 +0900
Subject: [PATCH 19/25] =?UTF-8?q?[#16]=20Feat=20Modal=20-=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89?=
 =?UTF-8?q?=ED=8C=85=EC=9D=84=20=EC=9C=84=ED=95=9C=20modal=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/IsLoginModal.tsx | 103 ++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 src/components/modal/IsLoginModal.tsx

diff --git a/src/components/modal/IsLoginModal.tsx b/src/components/modal/IsLoginModal.tsx
new file mode 100644
index 0000000..4802dfb
--- /dev/null
+++ b/src/components/modal/IsLoginModal.tsx
@@ -0,0 +1,103 @@
+import styled from "styled-components";
+import { customColor } from "../customColor";
+import { CSSTransition } from "react-transition-group";
+import { useRef } from "react";
+import ReactModal from "react-modal";
+import Router from "next/router";
+import { pathName } from "../../config/pathName";
+
+interface Props {
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+export const Alert = ({ isOpen, closeModal }: Props) => {
+  ReactModal.setAppElement("#__next");
+  const alertRef = useRef(null);
+
+  const handleGoLogin = () => {
+    localStorage.setItem("prevPath", Router.asPath);
+    Router.push(pathName.LOGIN);
+  };
+
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={400}
+      nodeRef={alertRef}
+      classNames="modal"
+    >
+      <ReactModal
+        ariaHideApp={false}
+        shouldCloseOnOverlayClick={true}
+        onRequestClose={closeModal}
+        isOpen={true}
+        style={{
+          overlay: {
+            display: `${isOpen ? "flex" : "none"}`,
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: `${customColor.black + "00"}`,
+            zIndex: 10,
+            height: "100%",
+            width: "100%",
+          },
+          content: {
+            display: "flex",
+            position: "fixed",
+            WebkitOverflowScrolling: "touch",
+            border: "none",
+            padding: "0px",
+            backgroundColor: `${customColor.white + "00"}`,
+            width: "320px",
+            height: "180px",
+            top: "20px",
+            left: "50%",
+            transform: "translate(-50%,0)",
+            overflow: "visible",
+          },
+        }}
+      >
+        <Wrapper ref={alertRef}>
+          <Content>로그인 없이 접근할 수 없는 페이지 입니다</Content>
+          <Button type="button" onClick={handleGoLogin}>
+            닫기
+          </Button>
+        </Wrapper>
+      </ReactModal>
+    </CSSTransition>
+  );
+};
+
+const Wrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 180px;
+  padding: 40px 60px 20px;
+  align-items: center;
+  justify-content: space-around;
+  background: ${customColor.white};
+  box-shadow: 1px 2px 4px 2px ${customColor.black + "33"};
+`;
+const Content = styled.p`
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  text-align: center;
+  word-break: keep-all;
+`;
+const Button = styled.button`
+  display: flex;
+  width: 100px;
+  height: 32px;
+  background: ${customColor.indigo3};
+  color: ${customColor.white};
+  font-size: 13px;
+  letter-spacing: -0.3px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;

From 920795f4577f326c521f512d401103eb58dab2b4 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 18:21:54 +0900
Subject: [PATCH 20/25] [#16] Feat Modal

---
 src/components/index.tsx              | 1 +
 src/components/modal/IsLoginModal.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/index.tsx b/src/components/index.tsx
index 14a142e..5252f17 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -2,6 +2,7 @@ export * from "./header/Header";
 export * from "./footer/Footer";
 export * from "./modal/alert";
 export * from "./modal/modal";
+export * from "./modal/IsLoginModal";
 export * from "./loginPage/LoginPage";
 export * from "./signUpPage/SignUpPage";
 export * from "./infoPage/InformationPage";
diff --git a/src/components/modal/IsLoginModal.tsx b/src/components/modal/IsLoginModal.tsx
index 4802dfb..7abaf80 100644
--- a/src/components/modal/IsLoginModal.tsx
+++ b/src/components/modal/IsLoginModal.tsx
@@ -11,7 +11,7 @@ interface Props {
   closeModal: () => void;
 }
 
-export const Alert = ({ isOpen, closeModal }: Props) => {
+export const IsLoginModal = ({ isOpen, closeModal }: Props) => {
   ReactModal.setAppElement("#__next");
   const alertRef = useRef(null);
 

From 70e43147b7f567c7a56f6f24fd804b711ce38faa Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 18:25:39 +0900
Subject: [PATCH 21/25] [#16] Feat Modal

---
 src/components/modal/IsLoginModal.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/modal/IsLoginModal.tsx b/src/components/modal/IsLoginModal.tsx
index 7abaf80..5faa197 100644
--- a/src/components/modal/IsLoginModal.tsx
+++ b/src/components/modal/IsLoginModal.tsx
@@ -8,10 +8,9 @@ import { pathName } from "../../config/pathName";
 
 interface Props {
   isOpen: boolean;
-  closeModal: () => void;
 }
 
-export const IsLoginModal = ({ isOpen, closeModal }: Props) => {
+export const IsLoginModal = ({ isOpen }: Props) => {
   ReactModal.setAppElement("#__next");
   const alertRef = useRef(null);
 
@@ -30,7 +29,7 @@ export const IsLoginModal = ({ isOpen, closeModal }: Props) => {
       <ReactModal
         ariaHideApp={false}
         shouldCloseOnOverlayClick={true}
-        onRequestClose={closeModal}
+        onRequestClose={handleGoLogin}
         isOpen={true}
         style={{
           overlay: {

From 91baa1ce6d5092a057699b1f2e201870fbda7446 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 18:56:34 +0900
Subject: [PATCH 22/25] =?UTF-8?q?[#35]=20Feat=20SignUpPage=20API=20-=20Log?=
 =?UTF-8?q?in=EC=97=AC=EB=B6=80=20modal=20=EC=97=B0=EA=B2=B0,=20meeting=20?=
 =?UTF-8?q?data=20=EC=97=AC=EB=B6=80=20modal=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/IsLoginModal.tsx    |  8 ++++----
 src/components/signUpPage/SignUpPage.tsx | 15 +++++++--------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/modal/IsLoginModal.tsx b/src/components/modal/IsLoginModal.tsx
index 5faa197..925f0e1 100644
--- a/src/components/modal/IsLoginModal.tsx
+++ b/src/components/modal/IsLoginModal.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { customColor } from "../customColor";
 import { CSSTransition } from "react-transition-group";
 import { useRef } from "react";
-import ReactModal from "react-modal";
+import ReactLoginModal from "react-modal";
 import Router from "next/router";
 import { pathName } from "../../config/pathName";
 
@@ -11,7 +11,7 @@ interface Props {
 }
 
 export const IsLoginModal = ({ isOpen }: Props) => {
-  ReactModal.setAppElement("#__next");
+  ReactLoginModal.setAppElement("#__next");
   const alertRef = useRef(null);
 
   const handleGoLogin = () => {
@@ -26,7 +26,7 @@ export const IsLoginModal = ({ isOpen }: Props) => {
       nodeRef={alertRef}
       classNames="modal"
     >
-      <ReactModal
+      <ReactLoginModal
         ariaHideApp={false}
         shouldCloseOnOverlayClick={true}
         onRequestClose={handleGoLogin}
@@ -66,7 +66,7 @@ export const IsLoginModal = ({ isOpen }: Props) => {
             닫기
           </Button>
         </Wrapper>
-      </ReactModal>
+      </ReactLoginModal>
     </CSSTransition>
   );
 };
diff --git a/src/components/signUpPage/SignUpPage.tsx b/src/components/signUpPage/SignUpPage.tsx
index 0d02fde..bf15715 100644
--- a/src/components/signUpPage/SignUpPage.tsx
+++ b/src/components/signUpPage/SignUpPage.tsx
@@ -11,12 +11,12 @@ import Router from "next/router";
 import { pathName } from "../../config/pathName";
 import { useQueryPostSignUp } from "../../hooks/query/signUp/useQueryPostSignUp";
 import { Modal } from "../modal/modal";
+import { IsLoginModal } from "../modal/IsLoginModal";
 
 export const SignUpPage = () => {
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [alertType, setAlertType] = useState("login");
-  const [alertContent, setAlertContent] = useState("");
 
   const {
     register,
@@ -32,8 +32,7 @@ export const SignUpPage = () => {
 
   useEffect(() => {
     if (localStorage.getItem("token") === null) {
-      setAlertContent("로그인 없이 접근할 수 없는 페이지 입니다");
-      setIsAlertOpen(true);
+      setIsLoginModalOpen(true);
     }
   }, []);
 
@@ -47,7 +46,6 @@ export const SignUpPage = () => {
     setIsModalOpen(true);
   };
   const UncheckMeeting = () => {
-    setAlertContent("첫 미팅 희망날짜를 선택해 주세요");
     setIsAlertOpen(true);
   };
 
@@ -86,18 +84,19 @@ export const SignUpPage = () => {
   };
   return (
     <Container>
-      {/* <Modal
+      <Modal
         isOpen={isModalOpen}
         content="발주신청이 성공적으로 완료되었습니다"
         closeModal={() => setIsModalOpen(false)}
         yesEventFunc={() => Router.reload()}
-      /> */}
+      />
       <Alert
         isOpen={isAlertOpen}
-        content={alertContent}
+        content="첫 미팅 희망날짜를 선택해 주세요"
         closeModal={() => setIsAlertOpen(false)}
         eventFunc={handleGoLogin}
       />
+      <IsLoginModal isOpen={isLoginModalOpen} />
       <Head>
         <Title>
           <AiOutlineForm size={28} />

From 7a7137babe847b8a6bb6a8d467c022bcbe86da90 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Mon, 17 Apr 2023 22:25:23 +0900
Subject: [PATCH 23/25] =?UTF-8?q?[#35]=20Feat=20SignUpPage=20API=20-=20Cal?=
 =?UTF-8?q?endar=EC=9D=98=20date=20getEvnets=20=EB=B3=80=EA=B2=BD=20-=20Se?=
 =?UTF-8?q?lectTime=EC=97=90=20isExist=20=ED=8A=B9=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/alert.tsx                |  2 +-
 src/components/signUpPage/SignUpPage.tsx      | 43 +++++++++----------
 .../signUpPage/components/FormCalendar.tsx    |  9 ++--
 .../signUpPage/components/SelectTime.tsx      | 19 +++++++-
 src/hooks/query/signUp/useQueryPostSignUp.ts  |  9 ++--
 5 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/components/modal/alert.tsx b/src/components/modal/alert.tsx
index fe208ab..74dcfbc 100644
--- a/src/components/modal/alert.tsx
+++ b/src/components/modal/alert.tsx
@@ -24,7 +24,7 @@ export const Alert = ({ content, isOpen, closeModal, eventFunc }: Props) => {
       <ReactAlert
         ariaHideApp={false}
         shouldCloseOnOverlayClick={true}
-        onRequestClose={closeModal}
+        onRequestClose={eventFunc || closeModal}
         isOpen={true}
         style={{
           overlay: {
diff --git a/src/components/signUpPage/SignUpPage.tsx b/src/components/signUpPage/SignUpPage.tsx
index bf15715..bf90ac0 100644
--- a/src/components/signUpPage/SignUpPage.tsx
+++ b/src/components/signUpPage/SignUpPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { FieldValues, useForm } from "react-hook-form";
 import { customColor } from "../customColor";
@@ -8,7 +8,6 @@ import { SignUpSiteInfo } from "./SignUpSiteInfo";
 import { SignUpAddInfo } from "./SignUpAddInfo";
 import { Alert } from "../modal/alert";
 import Router from "next/router";
-import { pathName } from "../../config/pathName";
 import { useQueryPostSignUp } from "../../hooks/query/signUp/useQueryPostSignUp";
 import { Modal } from "../modal/modal";
 import { IsLoginModal } from "../modal/IsLoginModal";
@@ -17,6 +16,9 @@ export const SignUpPage = () => {
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [alertContent, setAlertContent] =
+    useState("첫 미팅 희망날짜를 선택해 주세요");
+  const [formData, setFormData] = useState<FormData>();
 
   const {
     register,
@@ -26,8 +28,6 @@ export const SignUpPage = () => {
     handleSubmit,
     watch,
     setValue,
-    setError,
-    reset,
   } = useForm();
 
   useEffect(() => {
@@ -36,24 +36,20 @@ export const SignUpPage = () => {
     }
   }, []);
 
-  const handleGoLogin = () => {
-    setIsAlertOpen(false);
-    localStorage.setItem("prevPath", Router.asPath);
-    Router.push(pathName.LOGIN);
+  const completeSubmit = () => {
+    Router.reload();
   };
-  const CompleteSubmit = () => {
-    reset();
-    setIsModalOpen(true);
-  };
-  const UncheckMeeting = () => {
+  const failSubmit = () => {
+    setAlertContent("이미 존재하는 사이트이름 입니다");
     setIsAlertOpen(true);
   };
 
-  const { mutate } = useQueryPostSignUp(CompleteSubmit);
+  const { mutate } = useQueryPostSignUp(completeSubmit, failSubmit);
 
   const submit = (data: FieldValues) => {
     if (data.meeting.length < 12) {
-      UncheckMeeting();
+      setAlertContent("첫 미팅 희망날짜를 선택해 주세요");
+      setIsAlertOpen(true);
     } else {
       let tempColor1 = Object.keys(data)
         .filter((i) => i.includes("mainColor"))
@@ -79,22 +75,25 @@ export const SignUpPage = () => {
         "orderDto",
         new Blob([JSON.stringify(send)], { type: "application/json" })
       );
-      mutate(formData);
+      setFormData(formData);
+      setIsModalOpen(true);
     }
   };
   return (
     <Container>
       <Modal
         isOpen={isModalOpen}
-        content="발주신청이 성공적으로 완료되었습니다"
+        content="발주신청을 진행하시겠습니까?"
         closeModal={() => setIsModalOpen(false)}
-        yesEventFunc={() => Router.reload()}
+        yesEventFunc={() => {
+          formData && mutate(formData);
+          setIsModalOpen(false);
+        }}
       />
       <Alert
         isOpen={isAlertOpen}
-        content="첫 미팅 희망날짜를 선택해 주세요"
+        content={alertContent}
         closeModal={() => setIsAlertOpen(false)}
-        eventFunc={handleGoLogin}
       />
       <IsLoginModal isOpen={isLoginModalOpen} />
       <Head>
@@ -109,12 +108,12 @@ export const SignUpPage = () => {
       <Body onSubmit={handleSubmit(submit)}>
         <BodyInner>
           <Division />
-          {/* <SignUpUserInfo
+          <SignUpUserInfo
             register={register}
             errors={errors}
             control={control}
           />
-          <SignUpSiteInfo register={register} errors={errors} /> */}
+          <SignUpSiteInfo register={register} errors={errors} />
           <SignUpAddInfo
             register={register}
             errors={errors}
diff --git a/src/components/signUpPage/components/FormCalendar.tsx b/src/components/signUpPage/components/FormCalendar.tsx
index 69b80d3..db4f501 100644
--- a/src/components/signUpPage/components/FormCalendar.tsx
+++ b/src/components/signUpPage/components/FormCalendar.tsx
@@ -41,6 +41,7 @@ export const FormCalendar = ({
   const [isOpen, setIsOpen] = useState(false);
   const [time, setTime] = useState("");
   const [date, setDate] = useState("");
+  const [events, setEvents] = useState<QueryType[]>([]);
 
   const renderEvent = (info: EventContentArg) => {
     return (
@@ -53,11 +54,7 @@ export const FormCalendar = ({
   const handleClickDay = (info: DateClickArg) => {
     let today = moment().format("YYYY-MM-DD");
     let date = info.dateStr;
-    let events = info.view.calendar
-      .getEventSources()[0]
-      .internalEventSource.meta.filter(
-        (i: { date: string; title: string }) => i.date === date
-      );
+    let events = meetingData?.filter((i) => i.date === date) ?? [];
     setIsOpen(false);
     remove?.classList.remove("selected");
     if (today >= date || moment(date).day() === 0 || moment(date).day() === 6) {
@@ -72,6 +69,7 @@ export const FormCalendar = ({
         `.fc-day[data-date="${date}"]`
       );
       // SelectTime Modal 설정
+      setEvents(events);
       setTime("");
       setIsOpen(true);
       wrapper.current &&
@@ -132,6 +130,7 @@ export const FormCalendar = ({
       <PrevIcon />
       <NextIcon />
       <SelectTime
+        events={events}
         isOpen={isOpen}
         xy={xy}
         time={time}
diff --git a/src/components/signUpPage/components/SelectTime.tsx b/src/components/signUpPage/components/SelectTime.tsx
index 9b65cec..c766ed7 100644
--- a/src/components/signUpPage/components/SelectTime.tsx
+++ b/src/components/signUpPage/components/SelectTime.tsx
@@ -2,6 +2,10 @@ import styled from "styled-components";
 import { customColor } from "../../customColor";
 
 interface Props {
+  events: {
+    date: String;
+    title: String;
+  }[];
   isOpen: boolean;
   xy: number[];
   time: string;
@@ -11,9 +15,10 @@ interface StyleProps {
   isOpen?: boolean;
   xy?: number[];
   btnValue?: boolean;
+  isExist?: boolean;
 }
 
-export const SelectTime = ({ isOpen, xy, time, setTime }: Props) => {
+export const SelectTime = ({ isOpen, xy, time, setTime, events }: Props) => {
   return (
     <Modal isOpen={isOpen} xy={xy}>
       <Title>원하는 시간을 선택해주세요</Title>
@@ -24,6 +29,7 @@ export const SelectTime = ({ isOpen, xy, time, setTime }: Props) => {
           onClick={() => {
             setTime("10:00");
           }}
+          isExist={events.map((i) => i.title.slice(4)).includes("10:00")}
         >
           10:00
         </Button>
@@ -33,6 +39,7 @@ export const SelectTime = ({ isOpen, xy, time, setTime }: Props) => {
           onClick={() => {
             setTime("13:00");
           }}
+          isExist={events.map((i) => i.title.slice(4)).includes("13:00")}
         >
           13:00
         </Button>
@@ -42,6 +49,7 @@ export const SelectTime = ({ isOpen, xy, time, setTime }: Props) => {
           onClick={() => {
             setTime("16:00");
           }}
+          isExist={events.map((i) => i.title.slice(4)).includes("16:00")}
         >
           16:00
         </Button>
@@ -96,5 +104,12 @@ const Button = styled.button<StyleProps>`
   justify-content: center;
   font-size: 14px;
   letter-spacing: -0.3px;
-  background: ${(props) => (props.btnValue ? `${customColor.blue_}` : "none")};
+  background: ${(props) =>
+    props.btnValue
+      ? `${customColor.blue_}`
+      : props.isExist
+      ? `${customColor.lightGray}`
+      : "none"};
+  color: ${(props) => props.isExist && `${customColor.gray}`};
+  pointer-events: ${(props) => props.isExist && "none"};
 `;
diff --git a/src/hooks/query/signUp/useQueryPostSignUp.ts b/src/hooks/query/signUp/useQueryPostSignUp.ts
index 850141a..a59553a 100644
--- a/src/hooks/query/signUp/useQueryPostSignUp.ts
+++ b/src/hooks/query/signUp/useQueryPostSignUp.ts
@@ -2,7 +2,10 @@ import { useCallback } from "react";
 import { useMutation } from "react-query";
 import { SignUpApi } from "../../../apis/controller/signUp.api";
 
-export const useQueryPostSignUp = (successFunc: () => void) => {
+export const useQueryPostSignUp = (
+  successFunc: () => void,
+  failFunc: () => void
+) => {
   const register = useCallback(async (data: FormData) => {
     const response = await SignUpApi.registerSignUp(data);
     return response;
@@ -12,8 +15,8 @@ export const useQueryPostSignUp = (successFunc: () => void) => {
     onSuccess: () => {
       successFunc();
     },
-    onError: (e) => {
-      console.log(e);
+    onError: () => {
+      failFunc();
     },
   });
 };

From 3a9d24a06c8bfbd0470f6ca92301375882123918 Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Wed, 3 May 2023 06:21:43 +0900
Subject: [PATCH 24/25] =?UTF-8?q?[#36]=20Feat=20AdminPage=20-=20AdminHeade?=
 =?UTF-8?q?r=20=EC=B6=94=EA=B0=80=20-=20Layout=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../adminLoginPage/AdminLoginPage.tsx         |  1 -
 src/components/header/AdminHeader.tsx         | 41 +++++++++++++++++++
 src/components/index.tsx                      |  1 +
 src/components/layout/Layout.tsx              | 13 +++++-
 4 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/components/header/AdminHeader.tsx

diff --git a/src/components/adminLoginPage/AdminLoginPage.tsx b/src/components/adminLoginPage/AdminLoginPage.tsx
index 6c2801b..bee6a80 100644
--- a/src/components/adminLoginPage/AdminLoginPage.tsx
+++ b/src/components/adminLoginPage/AdminLoginPage.tsx
@@ -66,7 +66,6 @@ export const AdminLoginPage = () => {
 
 const Container = styled.section`
   display: flex;
-  background: ${customColor.indigo3};
   width: 100%;
   height: 100vh;
 `;
diff --git a/src/components/header/AdminHeader.tsx b/src/components/header/AdminHeader.tsx
new file mode 100644
index 0000000..feeb58b
--- /dev/null
+++ b/src/components/header/AdminHeader.tsx
@@ -0,0 +1,41 @@
+import styled, { css } from "styled-components";
+import { customColor } from "../customColor";
+
+interface MenuProps {
+  isPath: boolean;
+}
+
+export const AdminHeader = () => {
+  return (
+    <Wrapper>
+      <MenuButton isPath={true}>발주신청확인</MenuButton>
+      <MenuButton isPath={false}>발주상태·내용수정</MenuButton>
+      <MenuButton isPath={false}>직원정보수정</MenuButton>
+      <MenuButton isPath={false}>통계추출</MenuButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px 32px;
+  gap: 40px;
+`;
+const MenuButton = styled.button<MenuProps>`
+  display: flex;
+  font-size: 16px;
+  color: ${customColor.gray};
+  ${(props) =>
+    props.isPath &&
+    css`
+      transform: translate(0, -2px);
+      color: ${customColor.white};
+      font-weight: bold;
+      text-decoration: underline;
+      text-underline-offset: 6px;
+      text-decoration-color: ${customColor.blue};
+      text-decoration-thickness: 2px;
+    `}
+`;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index d2f9a30..403f7d4 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,4 +1,5 @@
 export * from "./header/Header";
+export * from "./header/AdminHeader";
 export * from "./footer/Footer";
 export * from "./modal/alert";
 export * from "./modal/modal";
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 165254a..167561e 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -6,6 +6,7 @@ import { Footer } from "../footer/Footer";
 import { Header } from "../header/Header";
 import { ScrollCSS } from "./ScrollCSS";
 import { useEffect, useState } from "react";
+import { AdminHeader } from "../header/AdminHeader";
 
 interface Props {
   children: React.ReactNode;
@@ -20,10 +21,11 @@ export const Layout = ({ children }: Props) => {
   return (
     <Wrapper>
       {isAdmin ? (
-        <>
+        <AdminWrapper>
+          {Router.pathname !== "/admin/login" && <AdminHeader />}
           <GlobalStyle />
           {children}
-        </>
+        </AdminWrapper>
       ) : (
         <>
           <GlobalStyle />
@@ -45,6 +47,13 @@ const Wrapper = styled.div`
   width: 100vw;
   min-height: 100vh;
 `;
+const AdminWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  background: ${customColor.indigo1};
+`;
 const LayoutWrapper = styled.div`
   display: flex;
   flex: auto;

From 2da116812a6c7f2353e29a8fe3b1800c9e6b44fc Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Wed, 3 May 2023 06:32:06 +0900
Subject: [PATCH 25/25] =?UTF-8?q?[#36]=20Feat=20AdminPage=20-=20adminPathN?=
 =?UTF-8?q?ame=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/adminPathName.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 src/config/adminPathName.ts

diff --git a/src/config/adminPathName.ts b/src/config/adminPathName.ts
new file mode 100644
index 0000000..fb5ab38
--- /dev/null
+++ b/src/config/adminPathName.ts
@@ -0,0 +1,4 @@
+export const pathName = {
+  CHECK_SIGNUP: "/admin",
+  LOGIN: "/admin/login",
+};