From f0cdecc3f379c069f1a2a70cb2a42c6828c5020f Mon Sep 17 00:00:00 2001
From: jiyoung <jyhan0309@gmail.com>
Date: Mon, 2 Dec 2024 22:59:55 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EB=A6=AC=EC=85=8B=20api=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/loginApi.ts                           | 18 +++++
 .../pages/login/ResetPasswordPage.tsx         | 77 +++++++++----------
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/src/api/loginApi.ts b/src/api/loginApi.ts
index 9fc1e12..0da9b9f 100644
--- a/src/api/loginApi.ts
+++ b/src/api/loginApi.ts
@@ -17,3 +17,21 @@ export const postSignIn = async (body: { email: string; password: string }) => {
 
   return response.data;
 };
+
+export const postFindPassword = async (body: { email: string }) => {
+  const response = await axiosInstance.post(`/users/find`, body);
+
+  return response.data;
+};
+
+export const postResetPassword = async (
+  body: { newPassword: string },
+  token: string
+) => {
+  const response = await axiosInstance.post(
+    `/users/reset?token=${token}`,
+    body
+  );
+
+  return response.data;
+};
diff --git a/src/components/pages/login/ResetPasswordPage.tsx b/src/components/pages/login/ResetPasswordPage.tsx
index 00f5648..bb256ea 100644
--- a/src/components/pages/login/ResetPasswordPage.tsx
+++ b/src/components/pages/login/ResetPasswordPage.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { postResetPassword } from '../../../api/loginApi';
 
 const ResetPasswordPage = () => {
   const navigate = useNavigate();
@@ -8,8 +9,9 @@ const ResetPasswordPage = () => {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [showModal, setShowModal] = useState(false);
 
-  const handleConfirm = () => {
+  const handleConfirm = async () => {
     if (password === confirmPassword && password.length >= 8) {
+      await postResetPassword({ newPassword: password }, '1');
       setShowModal(true);
     } else {
       alert('비밀번호가 일치하지 않거나 유효하지 않습니다.');
@@ -17,43 +19,40 @@ const ResetPasswordPage = () => {
   };
 
   return (
-    <>
-      <Wrapper>
-        <LeftContent>
-          <img
-            src="/images/login6.jpg"
-            alt="Login background"
-            style={{
-              width: '100%',
-              height: '100%',
-              objectFit: 'contain',
-            }}
-          />
-        </LeftContent>
-        <RightContent>
-          <Title>비밀번호 재설정</Title>
-          <Subtitle>password</Subtitle>
-          <StyledInput
-            type="password"
-            placeholder="비밀번호 입력 (8 ~ 16자리)"
-            value={password}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setPassword(e.target.value)
-            }
-          />
-          <Subtitle>confirm password</Subtitle>
-          <StyledInput
-            type="password"
-            placeholder="비밀번호 확인"
-            value={confirmPassword}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setConfirmPassword(e.target.value)
-            }
-          />
-          <LoginButton onClick={handleConfirm}>Confirm</LoginButton>
-        </RightContent>
-      </Wrapper>
-
+    <Wrapper>
+      <LeftContent>
+        <img
+          src="/images/login6.jpg"
+          alt="Login background"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </LeftContent>
+      <RightContent>
+        <Title>비밀번호 재설정</Title>
+        <Subtitle>password</Subtitle>
+        <StyledInput
+          type="password"
+          placeholder="비밀번호 입력 (8 ~ 16자리)"
+          value={password}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setPassword(e.target.value)
+          }
+        />
+        <Subtitle>confirm password</Subtitle>
+        <StyledInput
+          type="password"
+          placeholder="비밀번호 확인"
+          value={confirmPassword}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setConfirmPassword(e.target.value)
+          }
+        />
+        <LoginButton onClick={handleConfirm}>Confirm</LoginButton>
+      </RightContent>
       {showModal && (
         <ModalOverlay>
           <ModalContent>
@@ -68,7 +67,7 @@ const ResetPasswordPage = () => {
           </ModalContent>
         </ModalOverlay>
       )}
-    </>
+    </Wrapper>
   );
 };