From 884cc212c54e9ee52950a77494231c46e14f2d60 Mon Sep 17 00:00:00 2001 From: catensia Date: Sat, 19 Nov 2022 14:25:03 +0900 Subject: [PATCH 1/2] feat/loginpage : publish loginpage and refactor css --- client/src/App.tsx | 11 +++++- client/src/pages/Login.styles.ts | 15 +++++++ client/src/pages/Login.tsx | 61 +++++++++++++++++++++++++++++ client/src/pages/MainPage.tsx | 24 ++++++++++++ client/src/pages/SignUp.styles.ts | 6 ++- client/src/pages/SignUp.tsx | 12 ++++-- client/src/utils/valitationUtils.ts | 6 +-- 7 files changed, 125 insertions(+), 10 deletions(-) create mode 100644 client/src/pages/Login.styles.ts create mode 100644 client/src/pages/Login.tsx create mode 100644 client/src/pages/MainPage.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 64d9e49..b3e8857 100644 --- a/client/src/App.tsx +++ b/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 ; + return ( + + } /> + } /> + } /> + + ); } export default App; diff --git a/client/src/pages/Login.styles.ts b/client/src/pages/Login.styles.ts new file mode 100644 index 0000000..b6767af --- /dev/null +++ b/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; +`; diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx new file mode 100644 index 0000000..36f09df --- /dev/null +++ b/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: userId, + password: password, + }) + .then((res) => res.status === 201 && navigate("/", { replace: true })) + .catch(console.log); + }; + + return ( + <> +
+ RunWithMe + + + {userIdError} + + {passwordError} + + + +
+ navigate("/pwInquiry")}>비밀번호 찾기 +
+
+ navigate("/signup")}>회원가입 +
+ + + ); +}; + +export default Login; diff --git a/client/src/pages/MainPage.tsx b/client/src/pages/MainPage.tsx new file mode 100644 index 0000000..48f18cb --- /dev/null +++ b/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 ( + <> + + + + ); +}; + +export default MainPage; diff --git a/client/src/pages/SignUp.styles.ts b/client/src/pages/SignUp.styles.ts index 3b95059..afd1340 100644 --- a/client/src/pages/SignUp.styles.ts +++ b/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; } `; diff --git a/client/src/pages/SignUp.tsx b/client/src/pages/SignUp.tsx index 3764465..124c2e5 100644 --- a/client/src/pages/SignUp.tsx +++ b/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 = () => { {zipCodeError} - -
navigate("/pwInquiry")}>비밀번호 찾기
-
navigate("/login")}>로그인 하기
+
+ navigate("/pwInquiry")}>비밀번호 찾기 +
+
+ navigate("/login")}>로그인 하기 +
); diff --git a/client/src/utils/valitationUtils.ts b/client/src/utils/valitationUtils.ts index 93ddff0..e2c823c 100644 --- a/client/src/utils/valitationUtils.ts +++ b/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) => { From 31c1af31666df2431c2043615961946589462915 Mon Sep 17 00:00:00 2001 From: catensia Date: Sat, 19 Nov 2022 14:53:56 +0900 Subject: [PATCH 2/2] feat/loginpage : apply shorthand syntax --- client/src/pages/Login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx index 36f09df..951b6da 100644 --- a/client/src/pages/Login.tsx +++ b/client/src/pages/Login.tsx @@ -26,8 +26,8 @@ const Login = () => { if (checkFormValidation()) return; axios .post("http://localhost:4000/auth/login", { - userId: userId, - password: password, + userId, + password, }) .then((res) => res.status === 201 && navigate("/", { replace: true })) .catch(console.log);