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

[chaaerim]

안녕하세요! Momu입니다.
벌써 마지막 프론트 과제 제출이네요. 😢
백과 함께 협업하면서 본 프로젝트에서 집중해서 해결해야 하는 문제에 대해 고민해볼 수 있었던 것 같습니다.
(https 연결 문제 해결 중이어서 아직 로그인, 회원가입이 불가합니다. )

---

✔️ 배포링크

Momu vote
+새로고침을 하면 로그인이 풀리니 새로고침을 주의하세요^^...................

💻 역할 분담

시원	채림
상태관리 세팅 로그인 회원가입 투표기능 구현	결과 페이지 구현 디자인

🪄 디자인

• 피그마에 레퍼런스 공유하여 디자인 작업 진행

📥 투표 과제

• Policy
  • 로그인하지 않으면 접근 불가
  • 로그인하고 나면 투표 창에 접근 가능
  • 한번 투표하고 나면 재투표 불가
  • 동점자 발생 시 내용 안내
• Client
  • Authentication
    • SignUp
    • LogIn
  • Implementation
    • Add to Candidate
    • Vote To Candidate
    • Get Current Vote Status
  • Stack
    • next.ts
    • redux
    • axios
    • styled-components
• Server
  • https 연결 문제로 시도 중

📄 페이지 구성

SignUp

• 아이디, 이메일, 비밀번호 입력
• 프론트 단에서 비밀번호 확인만 체크 해주고 백엔드로 보냄
• 데이터는 redux 이용해서 처리
• 응답으로 jwt 토큰 받고 그 값을 axios 디폴트 설정으로 사용
• 회원가입 오류가 발생하면 프론트 단에 보여줌

LogIn

• 아이디, 비밀번호로 로그인
• API 요청 실패 시 원인 프론트 단에 렌더링
• 성공하면 응답으로 jwt 토큰을 받고 axios 디폴트 헤더에 저장
• 바로 메인페이지로 push

Vote

Add to Candidate

• 페이지로 들어가게 되면 현재 후보자 목록 렌더링
• 후보자 추가를 누르면 모달 팝업
• 모달에서 후보자 이름 입력 후 추가하기 버튼 클릭하면 후보자 추가 가능

Vote To Candidate

• 투표하기 누르면 투표 됨
• 투표 수는 렌더링 되지 않지만 득표 수에 따라 내림차순으로 조정

Candidate List

• Boring Avatars 라이브러리를 이용하여 후보자 이름에 따라 랜덤 프로필 이미지 생성

Result

• 최다 득표자가 동점일 경우 처리
• 최다 득표자가 한 명일 때 프론트장 결과 확인 가능
• Lottie와 Framer Motion 라이브러리를 사용하여 결과화면에 애니메이션 추가
• 득표 수와 Rank에 따라 내림차순으로 후보자 목록 렌더링

🔧 개선해야할 점

• auth 오류 발생 메세지
• 로그인, 회원가입 페이지에서 input 분리하여 불필요한 렌더링 방지하기
• alert 창 스타일링

[corinthionia]

회원가입이 불가능해 다른 페이지를 볼 수 없는 점이 아쉽네요 ㅠㅠ 이따 발표 때 시연 기대하겠습니다! 전체적인 코드는 보지 못했지만 한 가지 말씀드리자면 api의 base url은 환경변수로 저장하여 사용하는 게 더 좋을 것 같습니다.

과제하시느라 고생 많으셨습니다 😀