From f5d91fafc3b3e8e6dcd35a54988b1a48df168f0c Mon Sep 17 00:00:00 2001
From: chaerlo127 <monynony0203@gmail.com>
Date: Mon, 27 Nov 2023 18:12:55 +0900
Subject: [PATCH] =?UTF-8?q?[PDW-98]=20feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=9E=AC=EC=84=A4=EC=A0=95=20-=20=EC=9D=B8?=
 =?UTF-8?q?=EC=A6=9D=EC=BD=94=EB=93=9C=20=EC=A0=84=EC=86=A1=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                            |   2 +
 src/pages/basic/user/Login.js         |   2 +-
 src/pages/basic/user/ResetPassword.js | 139 ++++++++++++++++++++++++++
 3 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/basic/user/ResetPassword.js

diff --git a/src/App.js b/src/App.js
index b308221..d6ac37e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import 'App.css';
 import {Outlet, Route, Routes} from 'react-router-dom';
 import Sidebar from 'components/sidebar/Sidebar';
 import Login from 'pages/basic/user/Login';
+import ResetPassword from 'pages/basic/user/ResetPassword';
 import SelectOffice from 'pages/basic/booking/office/SelectOffice';
 import BookedList from 'pages/basic/myBookings/BookedList';
 import OfficeBooking from 'pages/basic/booking/office/OfficeBooking';
@@ -38,6 +39,7 @@ function App() {
         <div className="App">
             <Routes>
                 <Route path="/" element={<Login />} />
+                <Route path="/resetPassword" element={<ResetPassword />} />
                 <Route element={<SidebarLayout />}>
                     <Route path="/officeBooking" element={<SelectOffice/>} />
                     <Route path="/officeBooking/:officeId" element={<OfficeBooking />} />
diff --git a/src/pages/basic/user/Login.js b/src/pages/basic/user/Login.js
index dcf7be1..5c6e5b9 100644
--- a/src/pages/basic/user/Login.js
+++ b/src/pages/basic/user/Login.js
@@ -111,7 +111,7 @@ function Login() {
                 <LoginInput type={"password"} id="inputPw" placeholder={"비밀번호"} name="password" />
                 <LoginBtn className="submitBtn" id="submitBtn" type="submit" value="로그인" />
             </LoginForm>
-            <PWReset to={"/officeBooking"}>비밀번호 재설정</PWReset>
+            <PWReset to={"/resetPassword"}>비밀번호 재설정</PWReset>
         </Container>
     )
 }
diff --git a/src/pages/basic/user/ResetPassword.js b/src/pages/basic/user/ResetPassword.js
new file mode 100644
index 0000000..6e3def3
--- /dev/null
+++ b/src/pages/basic/user/ResetPassword.js
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import styled from "styled-components"
+import {Link} from 'react-router-dom';
+import LogoImg from "assets/images/imgNameLogo.svg"
+import {UsersAxios} from 'api/AxiosApi';
+import {basicError, notLogInError} from 'utils/ErrorHandlerUtil';
+
+const Container = styled.div`
+  height: fit-content;
+  width: fit-content;
+  margin: auto;
+`
+
+const TitleBox = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const Logo = styled.img.attrs({src: `${LogoImg}`})`
+  height: 60px;
+  margin-right: 20px;
+`
+
+const NameBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`
+
+const TitleName = styled.h3`
+  font-size: 40px;
+  margin-top: 40px;
+  color: #000000;
+`
+
+const ResetPWForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  margin-top: 50px;
+  width: 400px;
+  align-items: flex-end;
+`
+
+const ResetPWInput = styled.input`
+  height: 50px;
+  width: inherit;
+  border: 1px solid #E1E0E2;
+  padding: 0 20px;
+  margin-bottom: 16px;
+  background-color: #F7F8F9;
+  border-radius: 20px;
+  box-sizing: border-box;
+  font-family: NanumSquare_ac;
+  font-size: 15px;
+`
+const ResetPWEmailInput = styled.div`
+  width: inherit;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  
+`
+const SendEmailButton = styled.button`
+  height: 40px;
+  width: 150px;
+  font-size: 20px;
+  cursor: pointer;
+  color: white;
+  background-color: #640FAF;
+  box-shadow: 0px 4px 4px 0px #00000040;
+  border: none;
+  border-radius: 20px;
+  margin-left: 10px;
+`
+
+const ResetPWBtn = styled(ResetPWInput)`
+  height: 40px;
+  width: 150px;
+  font-size: 20px;
+  cursor: pointer;
+  color: white;
+  background-color: #640FAF;
+  border: none;
+  box-shadow: 0px 4px 4px 0px #00000040;
+  margin-right: 0;
+`
+
+function ResetPassword() {
+    const [email, setEmail] = useState("");
+    const [click, isClick] = useState(true);
+    const onSubmitHandler = (e) => {
+        if (!click) return
+        const inputEmail = e.target.email.value
+        const inputCode = e.target.code.value
+        e.preventDefault()
+        UsersAxios.post("/email-code", {
+            email: inputEmail,
+            code: inputCode
+        }).then((res) => {
+            window.location.replace('/')
+        }).catch((error) => {
+            notLogInError(error)
+        })
+    }
+
+    const onSendEmailHandler = (e) => {
+        e.preventDefault();
+        UsersAxios.post("/email", {
+            email: email
+        }).then((res) => {
+            alert("인증번호를 전송하였습니다.")
+            isClick(true)
+        }).catch((error) => {
+            notLogInError(error)
+        })
+    }
+
+    return (
+        <Container>
+            <TitleBox>
+                <Logo/>
+                <NameBox>
+                    <TitleName>비밀번호 재설정</TitleName>
+                </NameBox>
+            </TitleBox>
+
+            <ResetPWForm method="post" id="resetPassword-form" onSubmit={onSubmitHandler}>
+                <ResetPWEmailInput>
+                    <ResetPWInput type="email" placeholder={"이메일"} name="email" onChange={(e) => { setEmail(e.target.value); }}/>
+                    <SendEmailButton onClick={onSendEmailHandler}>인증</SendEmailButton>
+                </ResetPWEmailInput>
+                <ResetPWInput type="text" id="inputCode" placeholder={"인증번호"} name="code"/>
+                <ResetPWBtn className="submitBtn" id="submitBtn" type="submit" value="다음으로"/>
+            </ResetPWForm>
+        </Container>
+    )
+}
+
+export default ResetPassword;
\ No newline at end of file