next-vote-21th

서론

안녕하세요! 프론트엔드 운영진 송유선입니다. 🍀
벌써 마지막 과제에 도달했네요. 이번 스터디는 특별히 백엔드 팀원들과 함께하는 협업 과제로 준비했습니다.

현대 웹 개발에서는 REST API가 데이터 통신의 핵심으로 자리 잡으면서, 프론트엔드와 백엔드 간의 협업이 더욱 중요해졌습니다. 백엔드는 API를 통해 데이터를 제공하고, 프론트엔드는 이를 기반으로 사용자 경험을 책임집니다. 따라서 API를 잘 활용하고 백엔드 개발자와 원활히 소통하는 능력은 필수적인 스킬입니다.

이번 과제는 앞으로 팀 프로젝트에서 실제로 백엔드와 협업하기 전 연습을 해보는 기회입니다. Next.js를 활용해 투표 기능을 가진 애플리케이션을 제작하면서 백엔드와의 소통, 역할 분담, 데이터 흐름을 다루는 경험을 쌓아 보세요. 이 경험은 추후 팀 프로젝트에서 더욱 원활한 협력을 가능하게 할 것입니다.

여러분의 멋진 결과물을 기대하며 마지막 과제를 응원합니다. 화이팅! 🔥

---

미션

목표

• REST API를 활용하여 서버와의 통신 방식을 이해합니다.
• JavaScript의 비동기 처리 방식(async/await, Promise)을 익힙니다.
• API 문서를 바탕으로 백엔드와 소통하는 방법을 학습합니다.
• 팀 내 협업을 통해 효율적인 역할 분담을 고민하고 적용합니다.

---

기한

• 2025년 6월 28일 토요일까지 2차 필수 구현 사항까지 전부 적용된 최종 결과물을 제출해주세요.

---

1차 필수 구현 사항

1. 프로젝트 세팅

   • Next.js의 특성을 고려하여 효과적인 폴더 구조를 고민해 봅니다.
   • API 통신, 스타일링, 전역 상태 관리 및 기타 라이브러리 등을 팀원과 상의하여 세팅합니다.

2. 퍼블리싱

   • 프로젝트에 필요한 모든 화면을 퍼블리싱합니다.
   • 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형 디자인을 적용합니다.

3. 로그인 기능

   • 사용자는 아이디와 비밀번호를 입력하여 로그인할 수 있습니다.
   • 로그인 시 JWT를 통해 인증을 처리합니다.
   • 아이디 또는 비밀번호가 틀렸을 경우, 에러 메시지를 표시합니다.
   • 로그아웃 기능을 구현합니다.
   • 백에서 서버 배포가 안 되었을 경우에는 다음 주로 넘겨도 괜찮습니다.

2차 필수 구현 사항

1. 투표 기능

   • 로그인한 사용자는 투표에 참여할 수 있습니다.
   • 각 후보에 대한 투표 수를 실시간으로 확인할 수 있습니다.
   • 사용자는 한 번만 투표할 수 있으며, 중복 투표를 방지합니다.

2. 후보 목록 조회

   • 모든 사용자는 후보자의 목록과 상세 정보를 확인할 수 있습니다.
   • 후보자의 이름, 사진, 소개 등을 표시합니다.

3. 투표 결과 조회

   • 투표 종료 후, 모든 사용자는 최종 투표 결과를 확인할 수 있습니다.
   • 각 후보자의 득표 수와 득표율을 시각적으로 표현합니다.

4. 에러 처리

   • 서버 오류, 네트워크 문제 등 다양한 에러 상황에 대한 처리를 구현합니다.
   • 사용자에게 이해하기 쉬운 에러 메시지를 제공합니다.

---

디자인 참고

다음의 리소스를 참고해 UI/UX를 개선해보세요:

• 디자인 레퍼런스1
• 디자인 레퍼런스2
• 디자인 레퍼런스3
• 디자인 레퍼런스4

20기 과제

• CupfeeDeal
• 페달지니
• 케이크WAY

선택 사항

• API 요청 방식은 자유롭게 선택 가능 (예: Fetch API, axios 등).
• 최신 자바스크립트 스타일에 익숙해지기 위해 Promise.then() 대신 async/await를 사용해 보세요.

Key Question

• Zod 스키마가 무엇인지, 어떻게 활용할 수 있는지 알아봅시다.
• 이번 프로젝트에서 토큰 관리를 어떻게 할 예정인지, 그리고 왜 그런 방법을 선택했는지에 대해 설명해 주세요.