Merge pull request #35 from boostcampwm-2022/feat/loginpage

feat/loginpage : 로그인페이지 퍼블리싱 및 버그픽스

client/src/App.tsx

@@ -1,8 +1,17 @@
 import React from "react";
 import SignUp from "#pages/SignUp";
+import Login from "#pages/Login";
+import MainPage from "#pages/MainPage";
+import { Route, Routes } from "react-router-dom";
 
 function App() {
-    return <SignUp />;
+    return (
+        <Routes>
+            <Route path="/" element={<MainPage />} />
+            <Route path="signup" element={<SignUp />} />
+            <Route path="login" element={<Login />} />
+        </Routes>
+    );
 }
 
 export default App;

client/src/pages/Login.styles.ts

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { COLOR } from "styles/color";
+
+export const LogoWrapper = styled.div`
+    color: ${COLOR.BLACK};
+    width: 90%;
+    height: 29px;
+    font-size: 2.4rem;
+    font-weight: bold;
+    font-family: "Noto Sans KR";
+    margin: auto;
+    margin-top: 10rem;
+    padding: 5rem;
+    text-align: center;
+`;

client/src/pages/Login.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import Header from "#components/Header/Header";
+import Input from "#components/Input/Input";
+import Button from "#components/Button/Button";
+import useInput from "#hooks/useInput";
+import axios from "axios";
+import { PLACEHOLDER } from "#constants/constants";
+import { idValidator, passwordValidator } from "#utils/valitationUtils";
+
+import { InputWrapper, OptionsWrapper } from "./SignUp.styles";
+
+import { LogoWrapper } from "./Login.styles";
+
+const Login = () => {
+    const [userId, onChangeUserId, userIdError] = useInput(idValidator);
+    const [password, onChangePassword, passwordError] = useInput(passwordValidator);
+
+    const navigate = useNavigate();
+
+    const checkFormValidation = useCallback(() => {
+        return userIdError || passwordError;
+    }, [userIdError, passwordError]);
+
+    const onSubmitLogin = () => {
+        if (checkFormValidation()) return;
+        axios
+            .post("http://localhost:4000/auth/login", {
+                userId,
+                password,
+            })
+            .then((res) => res.status === 201 && navigate("/", { replace: true }))
+            .catch(console.log);
+    };
+
+    return (
+        <>
+            <Header text="로그인" />
+            <LogoWrapper>RunWithMe</LogoWrapper>
+            <InputWrapper>
+                <Input placeholder={PLACEHOLDER.ID} type="text" onChange={onChangeUserId}></Input>
+                <span>{userIdError}</span>
+                <Input placeholder={PLACEHOLDER.PASSWORD} type="password" onChange={onChangePassword}></Input>
+                <span>{passwordError}</span>
+                <Button width="fill" onClick={onSubmitLogin}>
+                    로그인
+                </Button>
+            </InputWrapper>
+            <OptionsWrapper>
+                <div>
+                    <span onClick={() => navigate("/pwInquiry")}>비밀번호 찾기</span>
+                </div>
+                <div>
+                    <span onClick={() => navigate("/signup")}>회원가입</span>
+                </div>
+            </OptionsWrapper>
+        </>
+    );
+};
+
+export default Login;

client/src/pages/MainPage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+/*
+ 임시 메인페이지입니다 (라우팅 / 내비게이션 테스팅용)
+ */
+const MainPage = () => {
+    const navigate = useNavigate();
+    const handleLoginClick = () => {
+        navigate("/login");
+    };
+    const handleSignUpClick = () => {
+        navigate("/signup");
+    };
+
+    return (
+        <>
+            <button onClick={handleLoginClick}>로그인</button>
+            <button onClick={handleSignUpClick}>회원가입 </button>
+        </>
+    );
+};
+
+export default MainPage;

client/src/pages/SignUp.styles.ts

@@ -41,16 +41,18 @@ export const OptionsWrapper = styled.div`
     color: grey;
     display: flex;
     margin: auto;
-    width: 60%;
+    width: 90%;
+    padding: 0 10rem;
 
     div {
+        display: flex;
         justify-content: center;
         flex-grow: 1;
         padding: 0.1rem 0.9rem;
         cursor: pointer;
     }
 
-    div:first-child {
+    div:not(:last-child) {
         border-right: 0.1rem solid grey;
     }
 `;

client/src/pages/SignUp.tsx

@@ -24,7 +24,7 @@ const SignUp = () => {
         return userIdError || passwordError || confirmPasswordError || !confirmPassword;
     }, [userIdError, passwordError, confirmPasswordError]);
 
-    const onSubmit = () => {
+    const onSubmitSignUp = () => {
         if (checkFormValidation()) return;
         axios
             .post("http://localhost:4000/user", {
@@ -55,13 +55,17 @@ const SignUp = () => {
                 <Input placeholder={PLACEHOLDER.PACE} type="number" onChange={onChangePace}></Input>
                 <Input placeholder={PLACEHOLDER.ZIP_CODE} type="number" onChange={onChangeZipCode}></Input>
                 <span>{zipCodeError}</span>
-                <Button width="fill" onClick={onSubmit}>
+                <Button width="fill" onClick={onSubmitSignUp}>
                     회원가입
                 </Button>
             </InputWrapper>
             <OptionsWrapper>
-                <div onClick={() => navigate("/pwInquiry")}>비밀번호 찾기</div>
-                <div onClick={() => navigate("/login")}>로그인 하기</div>
+                <div>
+                    <span onClick={() => navigate("/pwInquiry")}>비밀번호 찾기</span>
+                </div>
+                <div>
+                    <span onClick={() => navigate("/login")}>로그인 하기</span>
+                </div>
             </OptionsWrapper>
         </>
     );

client/src/utils/valitationUtils.ts

@@ -1,15 +1,15 @@
 export const idValidator = (id: string) => {
-    if (id.length >= 6 && id.length <= 20) return "";
     if (!id.length) return "ID를 입력해 주세요";
+    if (!(id.length >= 6 && id.length <= 20)) return "ID는 6자 이상 20자 이하여야 합니다";
     if (!/^[a-zA-Z0-9]*$/g.test(id)) return "영문 대소문자, 숫자만 입력이 가능합니다";
-    return "ID는 6자 이상 20자 이하여야 합니다";
+    return "";
 };
 
 export const passwordValidator = (password: string) => {
     return password.length < 10 || password.length > 100 ? "비밀번호는 10자 이상 100자 이하여야 합니다" : "";
 };
 export const confirmPasswordValidator = (password: string) => (confirmPassword: string) => {
-    return password !== confirmPassword || !confirmPassword ? "비밀번호를 한번 더 입력하세요" : "";
+    return password !== confirmPassword || !confirmPassword ? "비밀번호가 일치하지 않습니다" : "";
 };
 
 export const zipCodeValidator = (zipCode: string) => {