Merge pull request #37 from prgrms-web-devcourse-final-project/featur…

…e/loginApi Feat: 로그인,회원가입,비밀번호찾기,리셋,현재비밀번호 확인, 동네변경 api 로직 추가
prgrms-web-devcourse-final-project · Dec 4, 2024 · 54f363e · 54f363e
2 parents 4e56784 + 0f176e7
commit 54f363e
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 55 deletions.
diff --git a/src/api/loginApi.ts b/src/api/loginApi.ts
@@ -0,0 +1,37 @@
+import axiosInstance from './axiosInstance';
+
+export const postSignUp = async (body: {
+  email: string;
+  password: string;
+  password_confirm: string;
+  name: string;
+  phone: string;
+}) => {
+  const response = await axiosInstance.post(`/users/checkemail`, body);
+
+  return response.data;
+};
+
+export const postSignIn = async (body: { email: string; password: string }) => {
+  const response = await axiosInstance.post(`/users/login`, body);
+
+  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/api/mypageApi.ts b/src/api/mypageApi.ts
@@ -0,0 +1,19 @@
+import axiosInstance from './axiosInstance';
+
+export const postPasswordVerify = async (body: { currentPassword: string }) => {
+  const response = await axiosInstance.post(`/mypage/verfiy`, body);
+
+  return response.data;
+};
+
+export const postPasswordChange = async (body: { newPassword: string }) => {
+  const response = await axiosInstance.post(`/mypage/change`, body);
+
+  return response.data;
+};
+
+export const postLocationChange = async (body: { newAddress: string }) => {
+  const response = await axiosInstance.post(`/mypage/changeneighbor`, body);
+
+  return response.data;
+};
diff --git a/src/components/pages/login/FindPasswordPage.tsx b/src/components/pages/login/FindPasswordPage.tsx
@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { postFindPassword } from '../../../api/loginApi';
 
 const FindPasswordPage = () => {
   const navigate = useNavigate();
   const [showModal, setShowModal] = useState(false);
+  const [email, setEmail] = useState<string>('');
+
   return (
     <>
       <Wrapper>
@@ -37,9 +40,21 @@ const FindPasswordPage = () => {
             등록된 이메일 주소를 입력하고 확인 버튼을 클릭해주세요
           </Description>
           <Subtitle>email address</Subtitle>
-          <StyledInput placeholder="이메일 입력" />
-
-          <LoginButton onClick={() => setShowModal(true)}>확인</LoginButton>
+          <StyledInput
+            placeholder="이메일 입력"
+            value={email}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setEmail(e.target.value);
+            }}
+          />
+          <LoginButton
+            onClick={async () => {
+              setShowModal(true);
+              await postFindPassword({ email: email });
+            }}
+          >
+            확인
+          </LoginButton>
         </RightContent>
       </Wrapper>
       {showModal && (

diff --git a/src/components/pages/login/ResetPasswordPage.tsx b/src/components/pages/login/ResetPasswordPage.tsx
@@ -1,59 +1,58 @@
 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();
   const [password, setPassword] = useState('');
   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('비밀번호가 일치하지 않거나 유효하지 않습니다.');
     }
   };
 
   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>
   );
 };
 

diff --git a/src/components/pages/login/SignInPage.tsx b/src/components/pages/login/SignInPage.tsx
@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { postSignIn } from '../../../api/loginApi';
 
 const SignInPage = () => {
   const navigate = useNavigate();
+  const [email, setEmail] = useState<string>('');
+  const [pw, setPw] = useState<string>('');
+
   return (
     <Wrapper>
       <LeftContent>
@@ -20,10 +24,32 @@ const SignInPage = () => {
       <RightContent>
         <Title>Welcome 👋🏼</Title>
         <Subtitle>email address</Subtitle>
-        <StyledInput placeholder="이메일 입력" />
+        <StyledInput
+          placeholder="이메일 입력"
+          value={email}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setEmail(e.target.value);
+          }}
+        />
         <Subtitle>password</Subtitle>
-        <StyledInput placeholder="비밀번호 입력 (8 ~ 16자리)" />
-        <LoginButton>Login</LoginButton>
+        <StyledInput
+          placeholder="비밀번호 입력 (8 ~ 16자리)"
+          value={pw}
+          type={'password'}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setPw(e.target.value);
+          }}
+        />
+        <LoginButton
+          onClick={async () => {
+            await postSignIn({
+              email: email,
+              password: pw,
+            });
+          }}
+        >
+          Login
+        </LoginButton>
         <SNSButton>
           <img
             src="/images/googlelogo.png"

diff --git a/src/components/pages/login/SignUpPage.tsx b/src/components/pages/login/SignUpPage.tsx
@@ -1,9 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { postSignUp } from '../../../api/loginApi';
 
 function SignUpPage() {
   const navigate = useNavigate();
+  const [name, setName] = useState<string>('');
+  const [phone, setPhone] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+  const [pw, setPw] = useState<string>('');
+  const [cpw, setCpw] = useState<string>('');
+
   return (
     <Wrapper>
       <LeftContent>
@@ -20,17 +27,54 @@ function SignUpPage() {
       <RightContent>
         <Title>회원가입</Title>
         <Subtitle>Name</Subtitle>
-        <StyledInput placeholder="이름 입력" />
+        <StyledInput
+          placeholder="이름 입력"
+          value={name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setName(e.target.value);
+          }}
+        />
         <Subtitle>Phone Number</Subtitle>
-        <StyledInput placeholder="휴대폰 번호 입력" />
+        <StyledInput
+          placeholder="휴대폰 번호 입력"
+          value={phone}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setPhone(e.target.value);
+          }}
+        />
         <Subtitle>Email Address</Subtitle>
-        <StyledInput placeholder="이메일 입력" />
+        <StyledInput
+          placeholder="이메일 입력"
+          value={email}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setEmail(e.target.value);
+          }}
+        />
         <Subtitle>Password</Subtitle>
-        <StyledInput placeholder="비밀번호 입력 (8 ~ 16자리)" />
+        <StyledInput
+          placeholder="비밀번호 입력 (8 ~ 16자리)"
+          value={pw}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setPw(e.target.value);
+          }}
+        />
         <Subtitle>Confirm Password</Subtitle>
-        <StyledInput placeholder="비밀번호 확인" />
+        <StyledInput
+          placeholder="비밀번호 확인"
+          value={cpw}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setCpw(e.target.value);
+          }}
+        />
         <LoginButton
-          onClick={() => {
+          onClick={async () => {
+            await postSignUp({
+              email: email,
+              password: pw,
+              password_confirm: cpw,
+              name: name,
+              phone: phone,
+            });
             navigate('/termsandservice');
           }}
         >

diff --git a/src/components/pages/myPage/LocationPage.tsx b/src/components/pages/myPage/LocationPage.tsx
@@ -3,6 +3,7 @@ import Sidemenu from './SideMenu';
 import GS from './GS';
 import KakaoMap from '../../common/KakaoMap';
 import styled from 'styled-components';
+import { postLocationChange } from '../../../api/mypageApi';
 
 function LocationPage() {
   const [location, setLocation] = useState<{
@@ -64,7 +65,15 @@ function LocationPage() {
           <AddressDesc>
             현재 위치가 내 동네로 설정한 {region || '00동'}에 있습니다.
           </AddressDesc>
-          <VerfiyButton>동네인증 완료하기</VerfiyButton>
+          <VerfiyButton
+            onClick={async () => {
+              if (region) {
+                await postLocationChange({ newAddress: region });
+              }
+            }}
+          >
+            동네인증 완료하기
+          </VerfiyButton>
         </KakaoMapWrapper>
       </GS.Content>
     </GS.Wrapper>

diff --git a/src/components/pages/myPage/Modal/PasswordModal.tsx b/src/components/pages/myPage/Modal/PasswordModal.tsx
@@ -1,17 +1,23 @@
 import React, { useState } from 'react';
 import { styled } from 'styled-components';
+import {
+  postPasswordChange,
+  postPasswordVerify,
+} from '../../../../api/mypageApi';
 
 const PasswordModal = ({ onClose }: { onClose: () => void }) => {
   const [step, setStep] = useState(1);
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
 
-  const handleNextStep = () => {
+  const handleNextStep = async () => {
     if (step === 1) {
+      await postPasswordVerify({ currentPassword: currentPassword });
       setStep(2);
     } else if (step === 2) {
       if (newPassword === confirmPassword) {
+        await postPasswordChange({ newPassword: newPassword });
         onClose();
       } else {
         alert('비밀번호가 일치하지 않습니다.');