[6주차] MailedIt 미션 제출합니다

.prettierrc

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

README.md

@@ -1,46 +1,89 @@
-# 마지막 미션 : React vote!
+## 배포 링크
+[MailedIt Vote!](https://mailedit-vote.vercel.app)
+(현재 투표 기능은 이용 불가합니다!)
 
-# 서론
+## 시연 화면
+<img width="1624" alt="스크린샷 2021-12-26 오후 5 44 30" src="https://user-images.githubusercontent.com/79887293/147411902-b2ba0c7c-3504-4686-a1bb-e4063c5e33f9.png">
 
-안녕하세요 프론트엔드 14기 여러분! 파트장입니다.
+![Dec-26-2021 18-30-37](https://user-images.githubusercontent.com/79887293/147411876-30de1759-0f6f-465d-9702-b353fbd10f1f.gif)<br/>
 
 
-어느덧 약 두달간의 프론트엔드 스터디의 마지막까지 달려오게 되었습니다.
-그동안 여러분들에게 개인적인 성장이 있었길 바라는 마음입니다. 이번 스터디는 백엔드와 함께 진행하게 됩니다. 모던 웹에서, REST API가 주류로 떠오름에 따라, 프론트엔드와 백엔드의 구분이 이전보다 매우 명확해졌습니다.
-주로 백엔드는 API 서버의 역할을, 프론트엔드는 이를 이용해 사용자에게 UI를 제공하는 역할로 웹이 분화되었습니다. 그 말은 곧, API 없이는 사용자에게 의미있는 서비스를 제공하기 힘들어 지겠죠. 여러분께서도 차후 팀에서 프로젝트를 진행하시게 되면서 팀 내의 백엔드 개발자들과 API에 대해 소통하시게 될 일이 많아질 것입니다.
-
-이번 과제는 백엔드 개발자들이 전달해준 API를 사용해 보는것 입니다!
-일종의 투표 서비스를 개발해 보는 것인데요, 이 투표 결과가 실제 파트장 투표로 이어질수도... 아닐수도,...
-백엔드 개발자와 함께, 기획 의도에 따라 클라이언트 사이드에서 API를 조금 더 효율적으로 사용할 수 있는 방법에 대해 고민해보고, 논의해보는 시간을 가져보시기 바랍니다.
-
-또한 이번 과제는 팀 단위로 진행하게 되는데요, 팀 내의 백엔드 개발자는 물론이고, 같은 팀 내의 프론트와도 협업하게 되는 이번 과제에서, 어떻게 하면 실제 프로덕트 개발시에 역할 분담을 효율적으로 할 수 있을지에 대해서 기반을 다질 수 있는 계기가 되길 바랍니다!
-
-# 미션
-
 ## 미션 목표
+
 - REST API, AJAX등을 통한 서버와의 통신 방법을 이해합니다
 - async/await, Promise등 JavaScript 내애서의 비동기 처리를 이해합니다
 - API document를 통해 백엔드 개발자와 소통하는 방법을 익힙니다
-- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다
+- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다<br/><br/>
+
+
+## 역할 분담
+
+### 현재
+
+- [x] 로그인
+- [x] 회원가입<br/>
+
+### 주현
+
+- [x] 투표 페이지
+- [x] 결과 페이지<br/><br/>
+
+
+## 구현에 신경 쓴 부분
+
+### 현재
+
+- [x] useContext로 전역 상태 관리
+
+  > 로그인 form, 회원가입 form에서 로직이 비슷하기 때문에 `useContext`를 이용하여 반복되는 로직을 분리하였습니다.<br/>
+  > api 호출 시 지연 시간동안 spinner를 띄우기 위해 페이지 어느 곳이든 필요한 곳에서 가져다 쓸 수 있도록 `useContext`로 분리하였습니다.
+
+- [x] custom Hook을 통한 반복되는 로직 처리
+
+  > 회원가입, 로그인 form에서 form의 내용이 다 채워져 있을 경우에 button을 활성화하기 위해 form을 체크하는 로직을 분리하여 custom hook으로 구현하였습니다.<br/>
+  > 역시 `text input`을 두 페이지 모두 구현하려면 로직이 겹치기 때문에 따로 custom hook을 만들어 구현하였고, `useReducer`를 추가로 사용해 보았습니다.<br/>
+
+### 주현
+
+- [x] API 호출 시 반복되는 `base url`을 따로 분리하였습니다.
+
+  > `axios.create` 를 사용하여 baseURL, header를 공통적으로 적용하였고, 로그인 시 사용자에게 부여되는 `token`을 가져오는 로직 또한 공통적으로 호출하였습니다.
+
+- [x] 투표 종료 시 `animation` 구현
+
+  > 특수효과, 화면 전환에 필요한 애니매이션을 `useCallBack`과 라이브러리들을 사용하여 `UX`를 향상하였습니다.
+
+- [x] 반복적으로 사용되는 `component` 분리
+  > 투표 화면, 결과 화면에서 반복적으로 나타나는 컴포넌트들을 분리하여 재사용성을 높였습니다.<br/><br/>
+
+
+## API Fetch에 사용한 방식
+
+`axios`를 사용하였고, `promise`, `then` 방식과 `async/await` 방식 둘 다 사용하였습니다.
+
+백엔드에서의 `api` 호출의 `response`에 대한 방식 또한 두 가지 방법에 맞춰 각기 다른 방식으로 구현해 보았습니다.
+
+추가로 `postman`을 사용하여 먼저 `API` 테스트를 진행하고, 그 후 실제 코드에서 사용하는 방식으로 협업의 효율을 높였습니다.<br/><br/>
+
+
+## 팀원과의 협업과 백엔드와의 협업
+
+### 프론트엔드끼리의 협업 방식
+
+- 먼저 각자 개발할 파트를 분리하였고, `directory` 구조 작성을 끝낸 뒤에 각자 구현해야 하는 페이지 개발에 들어갔습니다.
+
+- 추가로 공통적으로 쓰이는 `COLOR`나 함수들은 `util`에 모아, 함께 사용하여 효율을 높였습니다.
+
+- 커밋 방식 또한 `gitmoji`를 사용함과 동시에 `commit message` 방식도 통일하여 쉽게 피드백이 가능하도록 하였습니다.
 
-## 미션 기한
-이번 미션 제출은 과제 공개 후 2주 후 입니다 (2021년 12월 3일) 다만 시험기간을 고려하여 스터디는 시험기간이 끝난 이후로 예정되어있습니다.
-따라서 과제 제출 기간 이후로 자유롭게 수정이 가능합니다.
+- `pull request` 방식으로 코드를 `push`한 후, 코드 리뷰를 통해 상대방의 코드를 쉽게 이해할 수 있었습니다.<br/>
 
-## 필수요건
-- 사이트를 여러분만의 감각으로 꾸며보세요. (UI/UX에 대한 여러분의 감각을 최대한 발휘해주시기 바랍니다)
-- HTTPS를 통해 서버와 통신하세요
-- 외의 사항은 기획 문서를 참고하세요
+### 백엔드와의 협업 방식
 
-## 선택요건
-- API Fetch는 어떤 방식을 사용하던 무방합니다 (axios, Fetch API, $.ajax)
-- `Promise.then()` 보단 `async/await`를 사용해 보세요. 더 최신 스펙이랍니다.
+- 구현에 필요한 기능들에 대한 협의를 먼저 진행한 후, `response`에 대한 논의를 진행했습니다.
 
-## 링크 및 참고자료
+- Slack 채널을 만들어 `ERD`와 `API` 공유를 하였습니다.
 
-- [리액트 API 연동의 기본](https://react.vlpt.us/integrate-api/01-basic.html)
-- [자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?](https://ljtaek2.tistory.com/142)
-- [async와 await, 비동기를 동기코드 처럼](https://kamang-it.tistory.com/entry/JavaScript11async%EC%99%80-await-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A5%BC-%EB%8F%99%EA%B8%B0%EC%BD%94%EB%93%9C-%EC%B2%98%EB%9F%BC)
-- [REST API 제대로 알고 사용하기](https://meetup.toast.com/posts/92)
-- [axios란? (feat. Fetch API)](https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API)
+- Slack 에 `github action`을 연동하여 `commit`, `push`, `deploy`에 대한 push 알람을 설정하였습니다.
 
+- `Django` admin 페이지를 사용하여 쉽게 여러 `API`들에 대한 테스트를 진행할 수 있었습니다.

package.json

@@ -1,43 +1,58 @@
-{
-  "name": "react-vote-14th",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "react-vote-14th",
+  "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",
+    "@types/canvas-confetti": "^1.4.2",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-transition-group": "^4.4.4",
+    "@types/styled-components": "^5.1.15",
+    "axios": "^0.24.0",
+    "react": "^17.0.2",
+    "react-canvas-confetti": "^1.2.1",
+    "react-confetti": "^6.0.1",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.2",
+    "react-scripts": "4.0.3",
+    "react-scroll-motion": "^0.2.1",
+    "react-transition-group": "^4.4.2",
+    "styled-components": "^5.3.3",
+    "styled-normalize": "^8.0.7",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1",
+    "yarn": "^1.22.17"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.3.2"
+  }
+}

public/index.html

@@ -1,43 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-  <title>15기 파트장 투표~!</title>
-</head>
+    <title>MailedIt Vote</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/App.tsx

@@ -1,11 +1,67 @@
-import React from 'react';
-
-function App() {
-  return (
-    <div className="App">
-
-    </div>
-  );
-}
-
-export default App;
+import { Route, Routes } from 'react-router';
+// import { useLoadingContext } from './contexts/LoadingContext';
+import { useAuthContext } from './contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+import SignIn from './pages/SignIn';
+import SignUp from './pages/SignUp';
+import Vote from './pages/Vote';
+import Result from './pages/Result';
+import NotFound from './pages/NotFound';
+
+// import { Spinner } from './components/Spinner';
+import { useEffect } from 'react';
+
+interface UserData {
+  username: string;
+  password: string;
+  part: string;
+}
+
+function App() {
+  // const { loading }: any = useLoadingContext();
+  const { setIsAuth, setUserData }: any = useAuthContext();
+
+  // redirect
+  const navigate = useNavigate();
+
+  // initialize fucntion
+  const initializeUserInfo = () => {
+    const ud: UserData = JSON.parse(localStorage.getItem('userData') || '{}');
+    const token = JSON.stringify(localStorage.getItem('token'));
+    if (!ud) return;
+    setUserData(ud);
+    setIsAuth(true);
+    axios.defaults.headers.common['Authorization'] = token;
+
+    // console.log(ud);
+
+    if (ud.part === 'BE') {
+      navigate(`/vote/backend`);
+    } else if (ud.part === 'FE') {
+      navigate(`/vote/frontend`);
+    }
+  };
+
+  //initialize when first mount
+  useEffect(() => {
+    initializeUserInfo();
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <>
+      {/* {loading && <Spinner />} */}
+      <Routes>
+        <Route path="/" element={<SignIn />} />
+        <Route path="/signup" element={<SignUp />} />
+        <Route path="/vote/:part" element={<Vote />} />
+        <Route path="/result" element={<Result />} />
+        <Route path="/*" element={<NotFound />} />
+      </Routes>
+    </>
+  );
+}
+
+export default App;

src/assets/styles/font-styles.tsx

@@ -0,0 +1,20 @@
+import { createGlobalStyle } from 'styled-components';
+
+const FontStyle = createGlobalStyle`
+
+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+* {
+    font-family: 'Pretendard-Regular';
+  }
+
+
+
+`;
+
+export default FontStyle;