로그인 & 비밀번호 찾기 기능 구현

1-team-front/src/App.jsx

@@ -1,9 +1,34 @@
-import { useState } from 'react'
+/* eslint-disable */
 
-import './App.css'
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  RouterProvider,
+} from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import Auth from './pages/Auth';
+import LogIn from './components/Auth/LogIn/LogIn';
+import FindPassword from './components/Auth/FindPassword/FindPassword';
+
+const queryClient = new QueryClient();
+
+const routesDifinition = createRoutesFromElements(
+  <Route path="/auth" element={<Auth></Auth>}>
+    <Route path="login" element={<LogIn></LogIn>}></Route>
+    <Route path="find-password" element={<FindPassword></FindPassword>}></Route>
+  </Route>,
+);
+
+const router = createBrowserRouter(routesDifinition);
 
 function App() {
-  return <h1>hello</h1>
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  );
 }
 
-export default App
+export default App;

1-team-front/src/components/Auth/AuthStyles.jsx

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components';
+
+const buttonType = {
+  cancel: css`
+    background-color: #2f3136;
+    &:hover {
+      background-color: #40444b;
+    }
+  `,
+  confirm: css`
+    background-color: #5865f2;
+    &:hover {
+      background-color: #4752c4;
+    }
+  `,
+};
+
+const CardContainer = styled.div`
+  padding: 40px 30px;
+  background-color: #36393f;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  & h2 {
+    color: #fff;
+  }
+  & p {
+    font-size: 0.9rem;
+  }
+`;
+
+const FormWrapper = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 13px;
+`;
+
+const InputBox = styled.div`
+  width: 360px;
+  & label {
+    font-size: 0.8rem;
+    font-weight: 800;
+    & span {
+      color: #ed4245;
+    }
+  }
+  & input {
+    width: 95%;
+    height: 30px;
+    background-color: #18191c;
+    border-radius: 2px;
+    margin: 5px 0;
+    color: #fff;
+    padding: 5px 10px;
+    font-size: 0.9rem;
+  }
+  & p {
+    font-size: 0.8rem;
+    color: ${(props) => (props.isBlue ? '#00aff4' : '#ed4245')};
+  }
+`;
+
+const Button = styled.button`
+  width: 100%;
+  height: 40px;
+  border-radius: 2px;
+  color: #fff;
+  font-weight: 800;
+  transition: all 0.3s linear;
+  border: 0;
+  ${(props) => buttonType[props.buttonType]}
+`;
+
+const SpanButton = styled.span`
+  font-size: 0.8rem;
+  color: #00aff4;
+  cursor: pointer;
+  &:hover {
+    text-decoration-line: underline;
+  }
+`;
+
+export { CardContainer, FormWrapper, InputBox, Button, SpanButton };

1-team-front/src/components/Auth/FindPassword/FindPassword.jsx

@@ -0,0 +1,52 @@
+/*eslint-disable*/
+import { useState } from 'react';
+
+import { CardContainer, FormWrapper, InputBox, Button } from '../AuthStyles';
+import useAuthMutation from '../../../hooks/Auth/useAuthMutation';
+import useBlurHandler from '../../../hooks/Auth/useBlurHandler';
+
+const FindPassword = () => {
+  const [email, setEmail] = useBlurHandler('');
+  const [isError, setIsError] = useState(false);
+  const [isSubmit, setIsSubmit] = useState(false);
+
+  const fetchFindPassword = useAuthMutation(
+    'http://localhost:8080/member/password-reissue',
+  );
+
+  const findPasswordSubmitHandler = (event) => {
+    event.preventDefault();
+    fetchFindPassword.mutate(
+      { email: email },
+      {
+        onSuccess: () => {
+          setIsError(false);
+          setIsSubmit(true);
+        },
+        onError: () => {
+          setIsSubmit(false);
+          setIsError(true);
+        },
+      },
+    );
+  };
+  return (
+    <CardContainer onSubmit={findPasswordSubmitHandler}>
+      <h2>비밀번호를 잊으셨나요 ?</h2>
+      <p>입력하신 이메일로 비밀번호 재설정 링크를 보내드립니다.</p>
+      <FormWrapper>
+        <InputBox isBlue={isSubmit}>
+          <label>이메일</label>
+          <input type="text" onChange={(event) => setEmail(event)}></input>
+          {isError && <p>이메일이 유효하지 않습니다.</p>}
+          {isSubmit && (
+            <p>입력하신 이메일로 비밀번호 재설정 링크를 보냈습니다.</p>
+          )}
+        </InputBox>
+        <Button buttonType="confirm">확인</Button>
+      </FormWrapper>
+    </CardContainer>
+  );
+};
+
+export default FindPassword;

1-team-front/src/components/Auth/LogIn/LogIn.jsx

@@ -0,0 +1,92 @@
+/* eslint-disable */
+import { useState } from 'react';
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  CardContainer,
+  FormWrapper,
+  InputBox,
+  Button,
+  SpanButton,
+} from '../AuthStyles';
+import useAuthMutation from '../../../hooks/Auth/useAuthMutation';
+import useBlurHandler from '../../../hooks/Auth/useBlurHandler';
+
+const FooterBox = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const LogIn = () => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useBlurHandler('');
+  const [password, setPassword] = useBlurHandler('');
+  const [isError, setIsError] = useState(false);
+
+  const fetchLogin = useAuthMutation('http://localhost:8080/login');
+
+  const loginSubmitHander = (event) => {
+    event.preventDefault();
+    fetchLogin.mutate(
+      { email: email, password: password },
+      {
+        onSuccess: (res) => {
+          setIsError(false);
+          localStorage.clear();
+          localStorage.setItem('email', res.data.email);
+          localStorage.setItem('token', res.data.token);
+          navigate('/');
+        },
+        onError: () => {
+          setIsError(true);
+        },
+      },
+    );
+  };
+
+  const findPasswordClickHandler = () => {
+    navigate('/auth/find-password');
+  };
+
+  return (
+    <CardContainer onSubmit={loginSubmitHander}>
+      <h2>환영합니다 !</h2>
+      <FormWrapper>
+        <InputBox>
+          <label htmlFor="email">
+            이메일
+            <span> *</span>
+          </label>
+          <input
+            id="email"
+            type="text"
+            onBlur={(event) => setEmail(event)}
+          ></input>
+        </InputBox>
+        <InputBox>
+          <label htmlFor="password">
+            비밀번호
+            <span> *</span>
+          </label>
+          <input
+            id="password"
+            type="password"
+            onBlur={(event) => setPassword(event)}
+          ></input>
+          {isError && <p>이메일 또는 비밀번호가 일치하지 않습니다.</p>}
+          <SpanButton onClick={findPasswordClickHandler}>
+            비밀번호를 잊으셨나요 ?
+          </SpanButton>
+        </InputBox>
+        <Button buttonType="confirm">로그인</Button>
+      </FormWrapper>
+      <FooterBox>
+        <p>계정이 필요한가요 ?</p>
+        <SpanButton>가입하기</SpanButton>
+      </FooterBox>
+    </CardContainer>
+  );
+};
+
+export default LogIn;