Signup (#11)

* #10 <feat> : 회원가입 페이지 추가 * #8 <feat> : 로고부분 클릭시 메인페이지로 이동 추가와 input 수정 * #10 <feat> : id, email, phoneNumber 체크 기능 추가 * #10 <feat> : 회원가입 페이지 1차 완성 * #10 <feat> : 로그인, 회원가입 로직 완성
WeImproveOurSkill · Aug 11, 2023 · aa41ad3 · aa41ad3
1 parent 6bc7e61
commit aa41ad3
Show file tree

Hide file tree

Showing 5 changed files with 357 additions and 19 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,9 @@
 import { Routes, Route, useNavigate } from 'react-router-dom';
-import Home from './pages/Home/Home.jsx';
-import Login from './pages/Login/Login.jsx';
 import { useEffect, createContext, useMemo } from 'react';
 import useLocalStorage from './util/useLocalStorage.js';
+import Home from './pages/Home/Home.jsx';
+import Login from './pages/Login/Login.jsx';
+import SignUp from 'pages/SignUp/SignUp.jsx';
 
 export const userContext = createContext({
   setIsLoggedIn: () => {},
@@ -44,6 +45,7 @@ function App() {
       <Routes>
         <Route path='/' element={<Home />} />
         <Route path='/login' element={<Login />} />
+        <Route path='/join' element={<SignUp />} />
       </Routes>
     </userContext.Provider>
   );

diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
@@ -1,17 +1,17 @@
 import { styled } from 'styled-components';
-// import { useState } from 'react';
-import useLoginLogic from '../../util/useLoginLogic';
 import { faGoogle } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import useLoginLogic from '../../util/useLoginLogic';
 import MainImg from 'asset/logo192.png';
+import { Link } from 'react-router-dom';
 
 function Login() {
   const initialInputs = {
     userIdentifier: '',
     password: ''
   };
   const LOGIN_POST_URL = `${process.env.REACT_APP_URL}/login`;
-  const msg = 'User name and password cannot be empty.';
+  const msg = '아이디와 비밀번호를 채워주세요';
 
   const [inputs, onChange, onClick] = useLoginLogic(
     initialInputs,
@@ -27,11 +27,20 @@ function Login() {
     <Wrapper>
       <Container>
         <Wrapper>
-          <Logo src={MainImg} alt='MainImg' />
+          <LogoBox to='/'>
+            <Logo src={MainImg} alt='MainImg' />
+          </LogoBox>
         </Wrapper>
         <Wrapper>
-          <Input type='text' placeholder='아이디 입력' value={userIdentifier} onChange={onChange} />
           <Input
+            name='userIdentifier'
+            type='text'
+            placeholder='아이디 입력'
+            value={userIdentifier}
+            onChange={onChange}
+          />
+          <Input
+            name='password'
             type='password'
             placeholder='비밀번호 8자~20자'
             value={password}
@@ -72,6 +81,12 @@ const Container = styled.div`
   border-radius: 10px;
 `;
 
+const LogoBox = styled(Link)`
+  height: 100px;
+  width: 100px;
+  margin-bottom: -30px;
+`;
+
 const Logo = styled.img`
   height: 100px;
   width: 100px;
@@ -93,7 +108,7 @@ const LoginButton = styled.button`
   background-color: yellow;
   border-radius: 4px;
   font-size: 18px;
-  margin-top: 14px;
+  margin-top: 50px;
 `;
 
 const Google = styled(FontAwesomeIcon)`

diff --git a/src/pages/SignUp/SignUp.jsx b/src/pages/SignUp/SignUp.jsx
@@ -0,0 +1,211 @@
+import { styled } from 'styled-components';
+import { Link } from 'react-router-dom';
+import useLoginLogic from '../../util/useLoginLogic';
+import MainImg from 'asset/logo192.png';
+
+function SignUp() {
+  const initialInputs = {
+    userName: '',
+    userIdentifier: '',
+    password: '',
+    passwordCheck: '',
+    email: '',
+    phoneNumber: '',
+    phoneNumberCheck: ''
+  };
+  const SIGNUP_POST_URL = `${process.env.REACT_APP_URL}/join`;
+  const msg = '모든 칸이 채워져야 합니다.';
+
+  const [inputs, onChange, onSubmit, clickCheckId, clickPhoneNumber, clickAuthPhoneNumber] =
+    useLoginLogic(
+      initialInputs,
+      SIGNUP_POST_URL,
+      msg,
+      'userName',
+      'userIdentifier',
+      'password',
+      'passwordCheck',
+      'email',
+      'phoneNumber',
+      'phoneNumberCheck'
+    );
+
+  const {
+    userIdentifier,
+    password,
+    userName,
+    email,
+    phoneNumber,
+    passwordCheck,
+    phoneNumberCheck
+  } = inputs;
+
+  return (
+    <Wrapper>
+      <LogoBox to='/'>
+        <Logo src={MainImg} alt='MainImg' />
+      </LogoBox>
+      <Container>
+        <InputBoxTop>
+          <Input
+            name='userName'
+            type='text'
+            placeholder='이름'
+            defaultValue={userName}
+            onChange={onChange}
+          />
+        </InputBoxTop>
+        <InputBox>
+          <Input
+            name='userIdentifier'
+            type='text'
+            placeholder='아이디'
+            defaultValue={userIdentifier}
+            onChange={onChange}
+          />
+          <AuthButton onClick={clickCheckId}>중복체크</AuthButton>
+        </InputBox>
+        <InputBox>
+          <Input
+            name='password'
+            type='password'
+            placeholder='비밀번호'
+            defaultValue={password}
+            onChange={onChange}
+          />
+        </InputBox>
+        <InputBoxDown>
+          <Input
+            name='passwordCheck'
+            type='password'
+            placeholder='비밀번호 확인'
+            defaultValue={passwordCheck}
+            onChange={onChange}
+          />
+        </InputBoxDown>
+        <InputBoxTop>
+          <Input
+            name='email'
+            type='text'
+            placeholder='이메일'
+            defaultValue={email}
+            onChange={onChange}
+          />
+        </InputBoxTop>
+        <InputBox>
+          <Input
+            name='phoneNumber'
+            type='text'
+            placeholder='휴대전화번호'
+            defaultValue={phoneNumber}
+            onChange={onChange}
+          />
+          <AuthButton onClick={clickPhoneNumber}>인증번호 발송</AuthButton>
+        </InputBox>
+        <InputBoxDown>
+          <Input
+            name='phoneNumberCheck'
+            type='text'
+            placeholder='인증번호'
+            defaultValue={phoneNumberCheck}
+            onChange={onChange}
+          />
+          <AuthButton onClick={clickAuthPhoneNumber}>확인</AuthButton>
+        </InputBoxDown>
+      </Container>
+      <LoginButton type='submit' onSubmit={onSubmit}>
+        회원가입
+      </LoginButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height: 100vh;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 460px;
+  height: 50vh;
+`;
+
+const LogoBox = styled(Link)`
+  height: 100px;
+  width: 100px;
+  margin-bottom: -8vh;
+`;
+
+const Logo = styled.img`
+  height: 100px;
+  width: 100px;
+`;
+
+const InputBoxTop = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  height: 60px;
+  width: 405px;
+  padding: 0px 10px 0px 45px;
+  margin-top: 30px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border: 1px solid lightgray;
+`;
+
+const InputBox = styled.div`
+  display: flex;
+  align-items: center;
+  height: 60px;
+  width: 405px;
+  padding: 0px 10px 0px 45px;
+  border: 1px solid lightgray;
+  border-width: 0px 1px 1px 1px;
+  border: 1px solid lightgray;
+`;
+
+const Input = styled.input`
+  height: 50px;
+  width: 280px;
+  font-size: 18px;
+  margin-right: 10px;
+  border: none;
+`;
+
+const InputBoxDown = styled.div`
+  display: flex;
+  align-items: center;
+  height: 60px;
+  width: 405px;
+  padding: 0px 10px 0px 45px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border: 1px solid lightgray;
+  border-width: 0px 1px 1px 1px;
+`;
+
+const AuthButton = styled.button`
+  width: 100px;
+  height: 40px;
+  font-size: 15px;
+  margin-right: -30px;
+`;
+
+const LoginButton = styled.button`
+  height: 60px;
+  width: 460px;
+  background-color: yellow;
+  color: #565656;
+  border-radius: 4px;
+  border: 1px solid yellow;
+  font-size: 18px;
+`;
+
+export default SignUp;
diff --git a/src/util/checkPassword.js b/src/util/checkPassword.js
@@ -1,11 +1,41 @@
+export const checkId = (str) => {
+  const regexp = /^[a-z]+[a-z0-9]{5,19}$/g;
+  const result = regexp.test(str);
+
+  if (!result) {
+    alert('아이디를 영문자 또는 숫자 6~20자로 입력해주세요');
+  }
+  return result;
+};
+
 export const checkPassword = (str) => {
   const regexp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z0-9^\W_]{8,20}$/;
   const result = regexp.test(str);
 
   if (!result) {
-    alert(
-      'Passwords must contain at least eight characters, including at least 1 letter and 1 number.'
-    );
+    alert('비밀번호를 영문자 또는 숫자 8~20자로 입력해주세요.');
+  }
+  return result;
+};
+
+export const checkEmail = (str) => {
+  const regexp =
+    // eslint-disable-next-line
+    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
+  const result = regexp.test(str);
+
+  if (!result) {
+    alert('이메일 형식을 올바르게 입력해주세요.');
+  }
+  return result;
+};
+
+export const checkPhoneNumber = (str) => {
+  const regexp = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/;
+  const result = regexp.test(str);
+
+  if (!result) {
+    alert('휴대폰 번호는 숫자만 입력해주세요.');
   }
   return result;
 };