[FEATURE] E4-S4 회원가입 API 연동 #130

frontend/package.json

@@ -16,7 +16,9 @@
     "@reduxjs/toolkit": "^1.6.1",
     "antd": "^4.16.13",
     "axios": "^0.22.0",
+    "babel-eslint": "^10.1.0",
     "craco-less": "^1.20.0",
+    "history": "4.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
@@ -40,6 +42,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^2.2.2",

frontend/src/components/auth/sign-up.js

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { Input, Checkbox, Button, Alert, message } 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';
+
+const CheckboxGroup = Checkbox.Group;
+const plainOptions = [
+  '이용약관동의',
+  '개인정보처리방침 동의',
+  '개인정보 수집 및 이용 동의',
+];
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const InnerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 700px;
+`;
+
+const Title = styled.p`
+  font-family: ${theme.fontNotoSans};
+  font-size: ${theme.fontSizeTitle02};
+  font-weight: ${theme.weightBold};
+`;
+
+const Essential = styled.span`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+`;
+
+const EssentialText = styled.span`
+  margin-left: 7px;
+  font-size: ${theme.fontSizeBody03};
+  color: #ff0000;
+`;
+
+const Div = styled.div`
+  padding: 12.5px;
+  padding-top: 21px;
+  width: 550px;
+`;
+
+const TopLine = styled.div`
+  border-top: 1px solid ${theme.colorLine};
+`;
+
+const ButtonAntd = styled(Button)`
+  width: 500px;
+  height: 50px;
+  font-size: ${theme.fontSizeTitle02};
+  border-radius: 6px;
+  margin-top: 10px;
+`;
+
+function SignUp({ handleChange, handleSignUp, emptyValueCheck }) {
+  const [checkedList, setCheckedList] = useState('');
+  const [checkAll, setCheckAll] = useState(false);
+
+  const onChange = (list) => {
+    setCheckedList(list);
+    setCheckAll(list.length === plainOptions.length);
+  };
+
+  const onCheckAllChange = (e) => {
+    setCheckedList(e.target.checked ? plainOptions : []);
+    setCheckAll(e.target.checked);
+  };
+
+  return (
+    <Wrapper>
+      <InnerWrapper>
+        <Title>{SIGN_UP}</Title>
+        <Div>
+          {USER_INFO}
+          <TopLine style={{ marginTop: '10px' }} />
+          <Essential style={{ fontSize: '12px', paddingTop: '4px' }}>
+            *{ESSENTIAL}
+          </Essential>
+        </Div>
+        <Div>
+          <EssentialText>*</EssentialText>
+          {EMAIL}
+          <Input
+            style={{ marginTop: '9px' }}
+            name="email"
+            className="input-area"
+            onChange={handleChange}
+            onBlur={emptyValueCheck}
+            placeholder="이메일 주소를 입력해주세요."
+          />
+        </Div>
+        <Div>
+          <EssentialText>*</EssentialText>
+          {NICK_NAME}
+          <Input
+            style={{ marginTop: '9px' }}
+            name="nickname"
+            onChange={handleChange}
+            onBlur={emptyValueCheck}
+            placeholder="닉네임을 입력해주세요."
+          />
+        </Div>
+        <Div>
+          <EssentialText>*</EssentialText>
+          {PASSWORD}
+          <Input.Password
+            style={{ marginTop: '9px' }}
+            name="password"
+            onChange={handleChange}
+            onBlur={emptyValueCheck}
+            placeholder="비밀번호를 입력해주세요."
+          />
+        </Div>
+        <Div>
+          <EssentialText>*</EssentialText>
+          {PASSWORD_CONFIRM}
+          <Input.Password
+            style={{ marginTop: '9px' }}
+            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>
+      </InnerWrapper>
+    </Wrapper>
+  );
+}
+
+export default SignUp;

frontend/src/constants/index.js

@@ -19,10 +19,17 @@ export const ESSENTIAL = '필수입력항목';
 export const TERMS_OF_USE = '이용약관';
 export const FULL_CONSENT = '전체동의';
 export const ESSENTIAL_TEXT = '*위 항목은 필수항목입니다.';
+export const EMPTY_EMAIL = '이메일 주소를 입력해주세요.';
+export const EMPTY_NICKNAME = '닉네임을 입력해주세요.';
+export const EMPTY_PASSWORD = '비밀번호를 입력해주세요.';
+export const EMPTY_PASSWORD_CONFIRM = '비밀번호 확인을 입력해주세요.';
+export const SIGN_UP_SUCCESS = '회원가입이 완료되었습니다.';
+export const REQUIRED_CHECK = '필수항목을 입력해주세요.';
 
 export const HOME = '홈으로';
 export const ERROR_CONTENT_F = '찾을수 없는 페이지 입니다.';
-export const ERROR_CONTENT_S = '요청하신 페이지가 사라졌거나 잘못된 경로입니다.';
+export const ERROR_CONTENT_S =
+  '요청하신 페이지가 사라졌거나 잘못된 경로입니다.';
 export const ERROR_CODE = '404';
 
 export const POST_SUBMIT = '게시하기';

frontend/src/containers/auth/sign-up-container.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { signUp } from '../../store/auth';
+import SignUp from '../../components/auth/sign-up';
+import { message, notification } from 'antd';
+import { REQUIRED_CHECK, SIGN_UP_SUCCESS } from '../../constants';
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+function SignUpContainer() {
+  const selector = useSelector((state) => state.auth);
+  const dispatch = useDispatch();
+
+  const [info, setInfo] = useState({
+    email: '',
+    nickname: '',
+    password: '',
+    passwordConfirm: '',
+  });
+  const [isEmpty, setIsEmpty] = useState(false);
+
+  const onChangeHandler = (e) => {
+    setInfo({
+      ...info,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const onSignUpHandler = (e) => {
+    const res = dispatch({ type: signUp.type, data: info });
+    res !== undefined ? openNotification() : '';
+  };
+
+  const openNotification = () => {
+    notification.success({
+      message: 'CIAT',
+      description: SIGN_UP_SUCCESS,
+    });
+  };
+
+  const emptyError = (e) => {
+    setIsEmpty(true);
+    message.error(REQUIRED_CHECK);
+  };
+
+  const notEmptyError = (e) => {
+    setIsEmpty(false);
+  };
+
+  const emptyValueCheck = (e) => {
+    e.target.name === e.currentTarget.name && e.target.value === ''
+      ? emptyError(e)
+      : notEmptyError(e);
+  };
+
+  return (
+    <Wrapper>
+      <SignUp
+        handleChange={onChangeHandler}
+        handleSignUp={onSignUpHandler}
+        emptyValueCheck={emptyValueCheck}
+      />
+    </Wrapper>
+  );
+}
+
+export default SignUpContainer;

frontend/src/index.js

@@ -7,6 +7,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
 import rootReducer, { rootSaga } from './store';
 import './style/theme.less';
+import history from './lib/router/history';
 
 const sagaMiddleware = createSagaMiddleware();
 
@@ -24,7 +25,7 @@ sagaMiddleware.run(rootSaga);
 
 ReactDom.render(
   <Provider store={store}>
-    <Router />
+    <Router history={history} />
   </Provider>,
   document.getElementById('root')
 );

frontend/src/lib/router/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory();

frontend/src/lib/router/index.js

@@ -19,10 +19,11 @@ import Setting from '../../pages/setting';
 import SignUp from '../../pages/auth/sign-up';
 import FeedDetail from '../../pages/feed-detail';
 import NotFound from '../../pages/error';
+import history from './history';
 
 function index() {
   return (
-    <BrowserRouter>
+    <BrowserRouter history={history}>
       <Switch>
         <Route exact path={SIGN_IN_URL} component={SignIn} />
         <Route exact path={SIGN_UP_URL} component={SignUp} />