[7주차] Finble 미션 제출합니다.

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,47 +1,38 @@
-# **마지막 미션: React-Vote! 🗳**
-
-## **서론**
-
-안녕하세요! 프론트 파트장 주효정입니다🙌 어느덧 마지막 스터디네요. 그동안 과제하시면서 힘들고 어려우셨겠지만, 성장했다는 보람이 더 컸으면하는 바람입니다.
-
-이번 스터디는 각 팀의 백엔드와 함께 진행하는 **합동 과제**입니다. 모던 웹에서 REST API가 주류로 떠오름에 따라 프론트엔드와 백엔드의 구분이 이전보다 명확해졌습니다. 주로 백엔드는 API 서버의 역할을, 프론트엔드는 이를 이용해 사용자에게 UI를 제공하는 역할로 웹이 분화되었습니다. 그 말은 곧, API 없이는 사용자에게 의미있는 서비스를 제공하기 힘들어진다는 것이겠죠. 여러분께서도 차후 팀 프로젝트를 진행하시면서 백엔드 개발자들과 API에 대해 소통할 일이 많아질 것입니다.
-
-따라서 이번 과제는 백엔드 개발자들이 전달해준 `API`를 사용해서 구현해보는 미션입니다. 투표 서비스를 개발해 보는 것인데요. 백엔드 개발자와 함께 클라이언트 사이드에서 API를 조금 더 효율적으로 사용할 수 있는 방법에 대해 고민해 보고, 논의해 보는 시간을 가져 보시기 바랍니다.
-
-이번 미션도 화이팅입니다🔥
-
-## **미션**
-
-### **미션 목표**
-
-- REST API를 통한 서버와의 통신 방법을 이해합니다.
-- async/await, Promise등 JavaScript의 비동기 처리를 이해합니다.
-- API document를 통해 백엔드 개발자와 소통하는 방법을 익힙니다.
-- 팀 내의 프론트엔드 개발자와 적절한 역할 분담을 통해 개발 효율을 높이는 방법에 대해 고민합니다.
-
-### **배포 링크**
-[배포 링크](https://react-vote-15th-pokedon.vercel.app/)
-
-### **기한**
-
-2022년 12월 21일 (기한 엄수)
-
-### **필수 요건**
-
-- UI/UX에 대한 감각을 최대한 발휘해 디자인을 적용해 봅니다.
-- `HTTPS`를 통해 서버와 통신합니다.
-- 외의 사항은 [가이드 문서](https://www.notion.so/CEOS-16-932263db36344e33a3e6cf2c4bbb4576)를 참고하세요.
-
-### **선택 사항**
-
-- API Fetch는 어떤 방식을 사용하든 무방합니다 (axios, Fetch API)
-- `Promise.then()` 보단 `async/await`를 사용해 보세요. 더 최신 스펙이랍니다.
-
-## **링크 및 참고자료**
-
-- [리액트 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)
-- [Postman, 어렵지 않게 사용하기](https://gngsn.tistory.com/26)
+# pr 내용
+
+안녕하세요 finble 프론트 오지은, 안채연입니다:) <br/>
+장장 한달동안 개발을 진행한 프로젝트지만... 정작 최근 3일동안 개고생한 기억이...있네요:) <br/>
+처음으로 finble 백엔드 메이트들이랑 개발을 진행할 수 있어서 재밌기도 했습니다:) <br/>
+finble✨ 체고!! <br/>
+
+## 스토리라인 소개
+### 1. 메인에서 회원가입을 진행합니다.
+  *다음의 경우에는 경우에 따른 alert가 뜹니다*
+  1. 존재하는 아이디 || 이메일을 입력했을 때
+  2. {비밀번호 필드} !== {비밀번호 확인 필드} 일 떄
+  3. 유효하지 않은 이메일 주소를 입력했을 때
+  4. 대소문자, 숫자, 기호를 하나라도 포함하지 않은 비밀번호를 입력했을 때
+
+### 2. 메인에서 로그인을 진행합니다.
+- 회원 정보가 없다면 alert가 뜹니다.
+- 회원 정보가 있다면 alert 후 자동으로 메인 화면으로 돌아갑니다.
+
+### 3. 파트장 투표를 진행합니다.
+- 프론트는 프론트 파트장 투표만, 백엔드는 백엔드 파트장 투표만 진행할 수 있습니다.
+- 한번 투표를 한 유저는, 재투표가 불가능합니다.
+- 로그인을 하지 않았거나, 기획/디자인 같은 경우에는 파트장 투표를 진행할 수 없습니다.
+- 로그인을 한 유저만 각 파트장 결과를 확인할 수 있습니다.
+  - 이 때, 프론트/백 같은 경우에는 투표를 진행한 후에만 자신의 파트장 투표 결과를 확인할 수 있습니다. <br/>
+    다른 파트장 투표 결과는 확인할 수 있습니다.
+
+### 4. 데모 투표를 진행합니다.
+- 자신의 팀에 투표를 할 수 없습니다.
+- 한번 투표를 한 유저는, 재투표가 불가능합니다.
+- 투표하기 버튼을 누르면 투표 반영 후 결과 페이지로 이동됩니다.
+
+## 아쉬운 점
+현재 access Token을 로컬스토리지에 저장하고 있는데요..ㅎ <br/>
+이렇게 되면 보안이 ㅎㅎ... <br/>
+추후 개선해보려고 합니다. <br/>
+
+## 배포 링크