[FEATURE] E4-S4 회원가입 빈값 체크, 이메일 및 비밀번호 유효성 검증 #130

INFP-Study · Dec 1, 2021 · afa29cb · afa29cb
1 parent 33a6041
commit afa29cb
Show file tree

Hide file tree

Showing 14 changed files with 315 additions and 268 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,7 +18,7 @@
     "axios": "^0.22.0",
     "babel-eslint": "^10.1.0",
     "craco-less": "^1.20.0",
-    "history": "4.10.1",
+    "history": "^5.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",

diff --git a/frontend/src/components/auth/sign-in.js b/frontend/src/components/auth/sign-in.js
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Input, Button, Space } from 'antd';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import SiteLayout from '../common/layout';
+import {
+  EMAIL,
+  PASSWORD,
+  SEARCH_ID,
+  SEARCH_PASSWORD,
+  SIGN_IN,
+  SIGN_UP,
+} from '../../constants';
+import { SIGN_UP_URL } from '../../constants/urls';
+import {
+  AppleOutlined,
+  FacebookOutlined,
+  GithubOutlined,
+  InstagramOutlined,
+} from '@ant-design/icons';
+import { theme } from '../../style/theme';
+
+const Title = styled.p`
+  font-family: ${theme.fontNotoSans};
+  font-size: ${theme.fontSizeTitle02};
+  font-weight: ${theme.weightBold};
+  text-align: center;
+`;
+
+const Div = styled.div`
+  padding: 12.5px;
+  width: 500px;
+`;
+
+const ButtonAntd = styled(Button)`
+  color: white;
+  width: 480px;
+  height: 50px;
+  font-size: ${theme.fontSizeTitle02};
+  border-radius: 6px;
+  margin-top: 10px;
+  &:hover,
+  &:focus {
+    background-color: ${theme.colorPrimary};
+  }
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 700px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const InnerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 700px;
+  height: 400px;
+`;
+
+const SNSLogin = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  border-top: 1px solid ${theme.colorLine};
+  padding: 30px;
+`;
+
+function SignIn() {
+  return (
+    <Wrapper>
+      <InnerWrapper>
+        <Title>{SIGN_IN}</Title>
+        <Div>
+          {EMAIL}
+          <Input
+            placeholder="이메일 주소를 입력해주세요."
+            style={{ marginTop: '10px' }}
+          />
+        </Div>
+        <Div>
+          {PASSWORD}
+          <Input.Password
+            placeholder="비밀번호를 입력해주세요."
+            style={{ marginTop: '10px' }}
+          />
+        </Div>
+        <Div>
+          <ButtonAntd type="primary" style={{ height: '44px' }}>
+            {SIGN_IN}
+          </ButtonAntd>
+        </Div>
+        <Div
+          style={{
+            textAlign: 'center',
+            marginTop: '10px',
+            marginBottom: '30px',
+          }}
+        >
+          <Link to={SIGN_UP_URL}> {SIGN_UP} </Link> /
+          <Link to={SIGN_UP_URL}> {SEARCH_ID} </Link> /
+          <Link to={SIGN_UP_URL}> {SEARCH_PASSWORD}</Link>
+        </Div>
+        <SNSLogin>
+          <Space>
+            <AppleOutlined style={{ fontSize: '30px' }} />
+            Apple 로그인
+            <FacebookOutlined style={{ fontSize: '30px' }} />
+            Facebook 로그인
+            <GithubOutlined style={{ fontSize: '30px' }} />
+            Github 로그인
+            <InstagramOutlined style={{ fontSize: '30px' }} />
+            Instagram 로그인
+          </Space>
+        </SNSLogin>
+      </InnerWrapper>
+    </Wrapper>
+  );
+}
+
+export default SignIn;
diff --git a/frontend/src/components/auth/sign-up.js b/frontend/src/components/auth/sign-up.js
@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
-import { Input, Checkbox, Button, Alert, message } from 'antd';
+import { Input, Checkbox, Button, Alert, message, Form } from 'antd';
 import styled from 'styled-components';
 import {
   EMAIL,
   ESSENTIAL,
-  ESSENTIAL_TEXT,
   NICK_NAME,
   PASSWORD,
   PASSWORD_CONFIRM,
   SIGN_UP,
   TERMS_OF_USE,
   USER_INFO,
   FULL_CONSENT,
-  REQUIRED_CHECK,
 } from '../../constants';
 import { theme } from '../../style/theme';
 
@@ -35,8 +33,6 @@ const InnerWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  width: 700px;
 `;
 
 const Title = styled.p`
@@ -59,24 +55,23 @@ const EssentialText = styled.span`
 `;
 
 const Div = styled.div`
-  padding: 12.5px;
   padding-top: 21px;
-  width: 550px;
+  width: 100%;
 `;
 
 const TopLine = styled.div`
   border-top: 1px solid ${theme.colorLine};
 `;
 
 const ButtonAntd = styled(Button)`
-  width: 500px;
+  width: 100%;
   height: 50px;
   font-size: ${theme.fontSizeTitle02};
   border-radius: 6px;
-  margin-top: 10px;
+  margin-top: 20px;
 `;
 
-function SignUp({ handleChange, handleSignUp, emptyValueCheck }) {
+function SignUp({ handleChange, handleSignUp }) {
   const [checkedList, setCheckedList] = useState('');
   const [checkAll, setCheckAll] = useState(false);
 
@@ -93,80 +88,79 @@ function SignUp({ handleChange, handleSignUp, emptyValueCheck }) {
   return (
     <Wrapper>
       <InnerWrapper>
-        <Title>{SIGN_UP}</Title>
+        <Div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Title>{SIGN_UP}</Title>
+        </Div>
         <Div>
           {USER_INFO}
           <TopLine style={{ marginTop: '10px' }} />
           <Essential style={{ fontSize: '12px', paddingTop: '4px' }}>
             *{ESSENTIAL}
           </Essential>
         </Div>
-        <Div>
-          <EssentialText>*</EssentialText>
-          {EMAIL}
-          <Input
-            style={{ marginTop: '9px' }}
+        <Form
+          style={{ marginTop: '10px' }}
+          layout="vertical"
+          onFinish={handleSignUp}
+        >
+          <Form.Item
+            label="이메일"
             name="email"
-            className="input-area"
-            onChange={handleChange}
-            onBlur={emptyValueCheck}
-            placeholder="이메일 주소를 입력해주세요."
-          />
-        </Div>
-        <Div>
-          <EssentialText>*</EssentialText>
-          {NICK_NAME}
-          <Input
-            style={{ marginTop: '9px' }}
+            rules={[{ required: true, message: '이메일을 입력해주세요.' }]}
+          >
+            <Input onChange={handleChange} />
+          </Form.Item>
+          <Form.Item
+            label="닉네임"
             name="nickname"
-            onChange={handleChange}
-            onBlur={emptyValueCheck}
-            placeholder="닉네임을 입력해주세요."
-          />
-        </Div>
-        <Div>
-          <EssentialText>*</EssentialText>
-          {PASSWORD}
-          <Input.Password
-            style={{ marginTop: '9px' }}
+            rules={[{ required: true, message: '닉네임을 입력해주세요.' }]}
+          >
+            <Input onChange={handleChange} />
+          </Form.Item>
+          <Form.Item
+            label="비밀번호"
             name="password"
-            onChange={handleChange}
-            onBlur={emptyValueCheck}
-            placeholder="비밀번호를 입력해주세요."
-          />
-        </Div>
-        <Div>
-          <EssentialText>*</EssentialText>
-          {PASSWORD_CONFIRM}
-          <Input.Password
-            style={{ marginTop: '9px' }}
+            rules={[{ required: true, message: '비밀번호를 입력해주세요.' }]}
+          >
+            <Input.Password onChange={handleChange} />
+          </Form.Item>
+          <Form.Item
+            label="비밀번호 확인"
             name="passwordConfirm"
-            onChange={handleChange}
-            onBlur={emptyValueCheck}
-            placeholder="비밀번호 확인을 입력해주세요."
-          />
-        </Div>
-        <Div style={{ marginTop: '65px' }}>
-          {TERMS_OF_USE}
-          <TopLine style={{ marginTop: '10px' }} />
-        </Div>
-        <Div>
-          <Checkbox onChange={onCheckAllChange} checked={checkAll}>
-            {FULL_CONSENT}
-          </Checkbox>
-        </Div>
-        <Div>
-          <CheckboxGroup
-            options={plainOptions}
-            value={checkedList}
-            onChange={onChange}
-          />
-        </Div>
-        <Div>
-          <ButtonAntd type="primary" onClick={handleSignUp}>
-            {SIGN_UP}
-          </ButtonAntd>
-        </Div>
+            rules={[
+              { required: true, message: '비밀번호 확인을 입력해주세요.' },
+            ]}
+          >
+            <Input.Password onChange={handleChange} />
+          </Form.Item>
+          <Div>
+            <Checkbox onChange={onCheckAllChange} checked={checkAll}>
+              {FULL_CONSENT}
+            </Checkbox>
+          </Div>
+          <Div>
+            <CheckboxGroup
+              options={plainOptions}
+              value={checkedList}
+              onChange={onChange}
+            />
+          </Div>
+          <Form.Item>
+            <ButtonAntd
+              type="primary"
+              htmlType="submit"
+              onKeyPress={handleSignUp}
+            >
+              {SIGN_UP}
+            </ButtonAntd>
+          </Form.Item>
+        </Form>
       </InnerWrapper>
     </Wrapper>
   );

diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.js
@@ -25,6 +25,8 @@ export const EMPTY_PASSWORD = '비밀번호를 입력해주세요.';
 export const EMPTY_PASSWORD_CONFIRM = '비밀번호 확인을 입력해주세요.';
 export const SIGN_UP_SUCCESS = '회원가입이 완료되었습니다.';
 export const REQUIRED_CHECK = '필수항목을 입력해주세요.';
+export const EMAIL_CHECK = '이메일 형식이 올바르지 않습니다.';
+export const PASSWORD_CHECK = '입력한 비밀번호가 다릅니다.';
 
 export const HOME = '홈으로';
 export const ERROR_CONTENT_F = '찾을수 없는 페이지 입니다.';

diff --git a/frontend/src/containers/auth/sign-in-container.js b/frontend/src/containers/auth/sign-in-container.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import SignIn from '../../components/auth/sign-in';
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+function SignInContainer() {
+  return (
+    <Wrapper>
+      <SignIn />
+    </Wrapper>
+  );
+}
+
+export default SignInContainer;