diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0a72520
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true
+}
diff --git a/README.md b/README.md
index 80f7c7c..a7ea4f0 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,89 @@
-# 마지막 미션 : React vote!
+## 배포 링크
+[MailedIt Vote!](https://mailedit-vote.vercel.app)
+(현재 투표 기능은 이용 불가합니다!)
-# 서론
+## 시연 화면
+
-안녕하세요 프론트엔드 14기 여러분! 파트장입니다.
+
-어느덧 약 두달간의 프론트엔드 스터디의 마지막까지 달려오게 되었습니다.
-그동안 여러분들에게 개인적인 성장이 있었길 바라는 마음입니다. 이번 스터디는 백엔드와 함께 진행하게 됩니다. 모던 웹에서, REST API가 주류로 떠오름에 따라, 프론트엔드와 백엔드의 구분이 이전보다 매우 명확해졌습니다.
-주로 백엔드는 API 서버의 역할을, 프론트엔드는 이를 이용해 사용자에게 UI를 제공하는 역할로 웹이 분화되었습니다. 그 말은 곧, API 없이는 사용자에게 의미있는 서비스를 제공하기 힘들어 지겠죠. 여러분께서도 차후 팀에서 프로젝트를 진행하시게 되면서 팀 내의 백엔드 개발자들과 API에 대해 소통하시게 될 일이 많아질 것입니다.
-
-이번 과제는 백엔드 개발자들이 전달해준 API를 사용해 보는것 입니다!
-일종의 투표 서비스를 개발해 보는 것인데요, 이 투표 결과가 실제 파트장 투표로 이어질수도... 아닐수도,...
-백엔드 개발자와 함께, 기획 의도에 따라 클라이언트 사이드에서 API를 조금 더 효율적으로 사용할 수 있는 방법에 대해 고민해보고, 논의해보는 시간을 가져보시기 바랍니다.
-
-또한 이번 과제는 팀 단위로 진행하게 되는데요, 팀 내의 백엔드 개발자는 물론이고, 같은 팀 내의 프론트와도 협업하게 되는 이번 과제에서, 어떻게 하면 실제 프로덕트 개발시에 역할 분담을 효율적으로 할 수 있을지에 대해서 기반을 다질 수 있는 계기가 되길 바랍니다!
-
-# 미션
-
## 미션 목표
+
- REST API, AJAX등을 통한 서버와의 통신 방법을 이해합니다
- async/await, Promise등 JavaScript 내애서의 비동기 처리를 이해합니다
- API document를 통해 백엔드 개발자와 소통하는 방법을 익힙니다
-- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다
+- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다
+
+
+## 역할 분담
+
+### 현재
+
+- [x] 로그인
+- [x] 회원가입
+
+### 주현
+
+- [x] 투표 페이지
+- [x] 결과 페이지
+
+
+## 구현에 신경 쓴 부분
+
+### 현재
+
+- [x] useContext로 전역 상태 관리
+
+ > 로그인 form, 회원가입 form에서 로직이 비슷하기 때문에 `useContext`를 이용하여 반복되는 로직을 분리하였습니다.
+ > api 호출 시 지연 시간동안 spinner를 띄우기 위해 페이지 어느 곳이든 필요한 곳에서 가져다 쓸 수 있도록 `useContext`로 분리하였습니다.
+
+- [x] custom Hook을 통한 반복되는 로직 처리
+
+ > 회원가입, 로그인 form에서 form의 내용이 다 채워져 있을 경우에 button을 활성화하기 위해 form을 체크하는 로직을 분리하여 custom hook으로 구현하였습니다.
+ > 역시 `text input`을 두 페이지 모두 구현하려면 로직이 겹치기 때문에 따로 custom hook을 만들어 구현하였고, `useReducer`를 추가로 사용해 보았습니다.
+
+### 주현
+
+- [x] API 호출 시 반복되는 `base url`을 따로 분리하였습니다.
+
+ > `axios.create` 를 사용하여 baseURL, header를 공통적으로 적용하였고, 로그인 시 사용자에게 부여되는 `token`을 가져오는 로직 또한 공통적으로 호출하였습니다.
+
+- [x] 투표 종료 시 `animation` 구현
+
+ > 특수효과, 화면 전환에 필요한 애니매이션을 `useCallBack`과 라이브러리들을 사용하여 `UX`를 향상하였습니다.
+
+- [x] 반복적으로 사용되는 `component` 분리
+ > 투표 화면, 결과 화면에서 반복적으로 나타나는 컴포넌트들을 분리하여 재사용성을 높였습니다.
+
+
+## API Fetch에 사용한 방식
+
+`axios`를 사용하였고, `promise`, `then` 방식과 `async/await` 방식 둘 다 사용하였습니다.
+
+백엔드에서의 `api` 호출의 `response`에 대한 방식 또한 두 가지 방법에 맞춰 각기 다른 방식으로 구현해 보았습니다.
+
+추가로 `postman`을 사용하여 먼저 `API` 테스트를 진행하고, 그 후 실제 코드에서 사용하는 방식으로 협업의 효율을 높였습니다.
+
+
+## 팀원과의 협업과 백엔드와의 협업
+
+### 프론트엔드끼리의 협업 방식
+
+- 먼저 각자 개발할 파트를 분리하였고, `directory` 구조 작성을 끝낸 뒤에 각자 구현해야 하는 페이지 개발에 들어갔습니다.
+
+- 추가로 공통적으로 쓰이는 `COLOR`나 함수들은 `util`에 모아, 함께 사용하여 효율을 높였습니다.
+
+- 커밋 방식 또한 `gitmoji`를 사용함과 동시에 `commit message` 방식도 통일하여 쉽게 피드백이 가능하도록 하였습니다.
-## 미션 기한
-이번 미션 제출은 과제 공개 후 2주 후 입니다 (2021년 12월 3일) 다만 시험기간을 고려하여 스터디는 시험기간이 끝난 이후로 예정되어있습니다.
-따라서 과제 제출 기간 이후로 자유롭게 수정이 가능합니다.
+- `pull request` 방식으로 코드를 `push`한 후, 코드 리뷰를 통해 상대방의 코드를 쉽게 이해할 수 있었습니다.
-## 필수요건
-- 사이트를 여러분만의 감각으로 꾸며보세요. (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`들에 대한 테스트를 진행할 수 있었습니다.
diff --git a/README.old.md b/README.old.md
deleted file mode 100644
index af7cc58..0000000
--- a/README.old.md
+++ /dev/null
@@ -1 +0,0 @@
-# react-vote-14th
\ No newline at end of file
diff --git a/package.json b/package.json
index cdf297d..bedce83 100644
--- a/package.json
+++ b/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"
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..f2c0810 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/img/search.png b/public/img/search.png
new file mode 100644
index 0000000..afe3019
Binary files /dev/null and b/public/img/search.png differ
diff --git a/public/index.html b/public/index.html
index 63b11ca..ea1af48 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,23 @@
+