[Add] 회원가입 구현, propTypes 설정

front/package.json

@@ -15,6 +15,7 @@
     "react-dom": "^16.10.2",
     "react-icons": "^3.7.0",
     "react-input-range": "^1.3.0",
+    "react-loader-spinner": "^3.1.4",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "react-toastify": "^5.4.0",

front/src/components/Button.js

@@ -65,6 +65,8 @@ Button.defaultProps = {
 
 Button.propTypes = {
   text: PropTypes.string.isRequired,
-  full: PropTypes.bool
+  full: PropTypes.bool,
+  size: PropTypes.string,
+  color: PropTypes.string
 };
 export default Button;

front/src/components/Calendar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import koKR from 'rc-calendar/lib/locale/ko_KR';
@@ -53,4 +54,13 @@ const Calendar = ({ close, date, setDate }) => {
   );
 };
 
+Calendar.propTypes = {
+  close: PropTypes.func,
+  date: PropTypes.shape({
+    startDate: PropTypes.instanceOf(Date),
+    endDate: PropTypes.instanceOf(Date)
+  }),
+  setDate: PropTypes.func
+};
+
 export default Calendar;

front/src/components/Header.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { gql } from 'apollo-boost';
 import { FaAirbnb } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import { useMutation, useQuery } from 'react-apollo';
+import { useMutation, useQuery } from '@apollo/react-hooks';
 import { Link } from 'react-router-dom';
 import Loader from './Loader';
 
@@ -28,6 +28,12 @@ const Container = styled.div`
   padding: 0.3rem 0rem;
 `;
 
+const LoadContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const Column = styled.div`
   display: flex;
   justify-content: center;
@@ -79,9 +85,9 @@ const Header = ({ isLoggedIn }) => {
   if (loading)
     return (
       <Wrapper>
-        <Container>
+        <LoadContainer>
           <Loader />
-        </Container>
+        </LoadContainer>
       </Wrapper>
     );
   if (data)
@@ -94,12 +100,8 @@ const Header = ({ isLoggedIn }) => {
           <Column>
             {isLoggedIn ? (
               <>
-                <LoggedText>
-                  <span role="img" aria-label="smile">
-                    {data.me.name} 😆
-                  </span>
-                </LoggedText>
-                <LoggedText onClick={logout}> 로그아웃</LoggedText>
+                <LoggedText>{data.me.name} </LoggedText>
+                <LoggedText onClick={logout}>로그아웃</LoggedText>
               </>
             ) : (
               <Link to={'/'}>

front/src/components/Input.js

@@ -27,19 +27,29 @@ const InputS = styled.input`
   }
 `;
 
-const Input = ({ placeholder, size, type, ...rest }) => {
-  return <InputS placeholder={placeholder} size={size} type={type} {...rest} />;
+const Input = ({ placeholder, size, type, required, ...rest }) => {
+  return (
+    <InputS
+      placeholder={placeholder}
+      size={size}
+      type={type}
+      {...rest}
+      required={required}
+    />
+  );
 };
 
 Input.defaultProps = {
   size: 'medium',
-  type: 'text'
+  type: 'text',
+  required: false
 };
 
 Input.propTypes = {
   placeholder: PropTypes.string,
   size: PropTypes.string,
-  type: PropTypes.string
+  type: PropTypes.string,
+  required: PropTypes.bool
 };
 
 export default Input;

front/src/components/Personnel.js

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import PersonnelRow from './PersonnelRow';
 import {
@@ -100,4 +101,8 @@ const Personnel = ({ close }) => {
   );
 };
 
+Personnel.propTypes = {
+  close: PropTypes.func.isRequired
+}
+
 export default React.memo(Personnel);

front/src/components/PersonnelRow.js

@@ -76,7 +76,11 @@ const PersonnelRow = ({ text, age, value, increase, decrease }) => {
 };
 
 PersonnelRow.propTypes = {
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
+  age: PropTypes.string,
+  value: PropTypes.number.isRequired,
+  increase: PropTypes.func.isRequired,
+  decrease: PropTypes.func.isRequired
 };
 
 export default React.memo(PersonnelRow);

front/src/components/PriceBar.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import propTypes from 'prop-types';
 import styled from 'styled-components';
 import InputRange from 'react-input-range';
 import 'react-input-range/lib/css/index.css';
@@ -110,4 +111,9 @@ const PriceBar = ({ openDate, close }) => {
   );
 };
 
+PriceBar.propTypes = {
+  openDate: propTypes.func.isRequired,
+  close: propTypes.func.isRequired
+};
+
 export default PriceBar;

front/src/components/Room/RoomContainer.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import { gql } from 'apollo-boost';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/react-hooks';
 import { useRoomState, useRoomDispatch } from '../../contexts/RoomsContext';
 import {
   usePersonnelState,
@@ -90,4 +91,15 @@ const RoomContainer = ({
   );
 };
 
+RoomContainer.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  rating: PropTypes.number,
+  imgPath: PropTypes.string.isRequired,
+  bed: PropTypes.number,
+  bathroom: PropTypes.number,
+  bedroom: PropTypes.number
+};
+
 export default RoomContainer;