Merge pull request CEOS-Developers#6 from Team-MailedIt/nowkim

페이지별로 필수 로직은 구현해 놨어요

Author: itsnowkim

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -11,6 +12,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/styled-components": "^5.1.15",
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",

src/App.tsx

@@ -1,13 +1,18 @@
 import { Route, Routes } from 'react-router';
+// import { useLoadingContext } from './contexts/LoadingContext';
 
 import SignIn from '../src/pages/SignIn';
 import SignUp from '../src/pages/SignUp';
 import Vote from '../src/pages/Vote';
 import Result from '../src/pages/Result';
 
+// import { Spinner } from './components/Spinner';
+
 function App() {
+  // const { loading, setLoading }: any = useLoadingContext();
   return (
     <Routes>
+      {/* {loading ? <Spinner /> : null} */}
       <Route path="/" element={<SignIn />} />
       <Route path="/signup" element={<SignUp />} />
       <Route path="/vote/:part" element={<Vote />} />

src/components/Spinner.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+export const Spinner = styled(CircularProgress)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 1000;
+  & svg {
+    color: #7945e2;
+  }
+`;

src/components/forms/LoginFormContainer.tsx

@@ -0,0 +1,65 @@
+import useInputs from '../../hooks/useInput';
+import { FormContainer, InputContainer } from './LoginFormPresenter';
+// import { useLoadingContext } from '../../contexts/LoadingContext';
+import { Spinner } from '../Spinner';
+import axios from 'axios';
+
+// 수정 중
+// pw 안보이게 수정필요
+const LoginFormContainer = () => {
+  const [userId, setuserId] = useInputs('');
+  const [userPw, setuserPw] = useInputs('');
+
+  const onsubmit = (e: any) => {
+    e.preventDefault();
+    // setLoading(true);
+    const form = new FormData();
+    form.append('username', userId);
+    form.append('password', userPw);
+
+    if (userId && userPw) {
+      console.log(userId, userPw);
+      axios
+        .post('https://vote-mailedit.kro.kr/api/signup', form)
+        .then((res) => {
+          // setloading 풀어줘
+          switch (res.status) {
+            case 200:
+              console.log(res.data);
+              console.log('login success');
+              break;
+            case 401:
+              console.log('일치하는 회원 없음');
+              break;
+          }
+        })
+        .catch((err) => {
+          //setLoading(false);
+          console.log(err);
+        });
+    }
+  };
+
+  return (
+    <FormContainer onSubmit={onsubmit}>
+      <Spinner />
+      <InputContainer
+        type="text"
+        className="IdForm"
+        placeholder="ID"
+        value={userId}
+        onChange={setuserId}
+      />
+      <InputContainer
+        type="text"
+        className="PwForm"
+        placeholder="PASSWORD"
+        value={userPw}
+        onChange={setuserPw}
+      />
+      <button>Let's start!</button>
+    </FormContainer>
+  );
+};
+
+export default LoginFormContainer;

src/components/forms/LoginFormPresenter.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import COLORS from '../../constants/colors';
+
+export const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const InputContainer = styled.input`
+  flex: 1;
+  padding: 0.2rem;
+  text-align: left;
+  border: 1px solid ${COLORS.lightGray};
+  border-radius: 22px;
+`;

src/contexts/LoadingContext.tsx

@@ -1 +1,22 @@
-export {};
+import { createContext, useState, useContext } from 'react';
+
+const LoadingContext = createContext({});
+
+const LoadingProvider = ({ children }: any) => {
+  const [loading, setLoading] = useState('');
+
+  const loadingContextValue = {
+    loading,
+    setLoading,
+  };
+
+  return (
+    <LoadingContext.Provider value={loadingContextValue}>
+      {children}
+    </LoadingContext.Provider>
+  );
+};
+
+const useLoadingContext = () => useContext(LoadingContext);
+
+export { LoadingProvider, useLoadingContext };

src/hooks/useInput.tsx

@@ -0,0 +1,18 @@
+import { useReducer } from 'react';
+
+function reducer(state: any, action: any) {
+  if (action.type === 'change') {
+    //console.log(action);
+    return action.target.value;
+  } else {
+    return '';
+  }
+}
+
+export default function useInputs(initialForm: any) {
+  const [state, dispatch] = useReducer(reducer, initialForm);
+  const onChange = (e: any) => {
+    dispatch(e);
+  };
+  return [state, onChange];
+}

src/pages/SignIn.tsx

@@ -1,5 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import LoginFormContainer from '../components/forms/LoginFormContainer';
+
 const SignIn = () => {
-  return <>Sign In</>;
+  // 페이지 진입 시 id 입력 form에 focus.
+  // 전체 form도 묶어서 컴포넌트로 만들기
+  // 각 input form 컴포넌트화하기
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      <h1>Log in</h1>
+      <p>15기 프론트/파트장 투표</p>
+      <LoginFormContainer />
+      <div>
+        <p>Don't have an account?</p>
+        <Link to={'/signup'}>
+          <p>Sign Up</p>
+        </Link>
+      </div>
+    </div>
+  );
 };
 
 export default SignIn;

src/pages/SignUp.tsx

@@ -1,5 +1,65 @@
+import { useState } from 'react';
+import {
+  FormContainer,
+  InputContainer,
+} from '../components/forms/LoginFormPresenter';
+import useInputs from '../hooks/useInput';
+
 const SignUp = () => {
-  return <>Sign Up</>;
+  const [userId, setuserId] = useInputs('');
+  const [userPw, setuserPw] = useInputs('');
+  const [field, setField] = useState('FE');
+
+  const handleRadio = (e: any) => {
+    setField(e.target.value);
+  };
+
+  const onsubmit = (e: any) => {
+    e.preventDefault();
+    // body에 담아서 보낼 거 세팅 후 axios
+    console.log('hi');
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      <FormContainer onSubmit={onsubmit}>
+        <h2>이름</h2>
+        <InputContainer
+          type="text"
+          className="IdForm"
+          placeholder="ID"
+          value={userId}
+          onChange={setuserId}
+        />
+        <h2>비밀번호</h2>
+        <InputContainer
+          type="text"
+          className="PwForm"
+          placeholder="PASSWORD"
+          value={userPw}
+          onChange={setuserPw}
+        />
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <input type="radio" name="field" value="FE" onClick={handleRadio} />{' '}
+          프론트
+          <input
+            type="radio"
+            name="field"
+            value="BE"
+            onClick={handleRadio}
+          />{' '}
+          백엔드
+        </div>
+        <button>회원가입하기</button>
+      </FormContainer>
+    </div>
+  );
 };
 
 export default SignUp;