[8주차] Team DiggIndie 백승선 & 조성아 과제 제출합니다. #10
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Updated project description and team members in README.
Added a section for design mockups with a link.
Feat/login [랜딩페이지, 로그인페이지, 회원가입 페이지, 로그인 완료 페이지 구현]
…next-vote-22nd into feat/partDemoVote e enter a commit message to explain why this merge is necessary,
Feat/part demo vote
Dev to Main
Feat/logout [로그인, 회원가입 유효서 검사 기능, 로그인, 회원가입, 로그아웃 API 연동]
feat: 결과 화면 API 연동 완료
refactor: 로그인/투표 api 오류 해결
fix: 로그아웃 API 연동 오류 수정
Updated dependencies to fix Next.js and React CVE vulnerabilities. The fix-react2shell-next tool automatically updated the following packages to their secure versions: - next - react-server-dom-webpack - react-server-dom-parcel - react-server-dom-turbopack All package.json files have been scanned and vulnerable versions have been patched to the correct fixed versions based on the official React advisory. Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
…s-cve-vu-wkmjt9 Fix React Server Components CVE vulnerabilities
Author
refactor: 데모데이 득표수
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
구현 기능
API를 연동하여서 기능을 구현했습니다.
역할 분담
조성아: 회원가입, 로그인, 로그아웃, 토큰 재발급 API 연동
백승선: 투표 후보자 조회, 투표하기, 투표 결과 조회 API 연동
구현 방법 설명
인증 관련 기능
회원가입과 로그인 페이지에서 axios를 사용해 서버 API를 호출했습니다.
로그인 성공 시 Access Token은 응답 바디에, Refresh Token은 쿠키에 설정됩니다. 만료되면 자동으로 재발급 API를 호출하도록 구현했습니다.
로그아웃 시 Refresh Token 쿠키가 제거됩니다.
라우팅 및 접근 제어
next.js use router로 로그인 여부에 따라 접근 가능한 페이지를 제한했습니다. 로그인이 필요한 투표 페이지에 직접 접근할 경우, 초기화면으로 리다리엑트 처리했습니다.
유효성 검사
회원가입과 로그인 폼에서 입력 값에 대한 최소/최대 길이, 필수 입력 체크, 비밀번호 확인 일치 여부 등을 검증했습니다.
잘못된 입력이 있는 경우 사용자에게 적절한 에러 메시지를 표시했습니다.
로그인은
id,pw 각각 1자리 이상
회원가입
id는 4자리 이상 12자리 이하
pw는 6자리 이상 20자리 이하
영어,숫자,특수문자 중 2가지 이상 조합
이메일은 @포함
팀과 파트는 필수로 선택
4.로그인 상태 관리
zustand를 활용하여 전역상태관리를 하고 있습니다.
유저가 프론트/백/데모데이 투표를 누르면 저장된 후보들의 정보가 GET /candidates?part=’파트이름’ 혹은 데모데이의 경우 GET /teams로 호출됩니다.
불러온 후보들을 후보자 카드 (candidateCard)로 분리 후 정리하여 렌더합니다.
유저는 후보 카드를 클릭하여 원하는 후보에게 투표할 수 있으며, 한 유저당 파트장 투표 1회, 데모데이 투표 1회가 가능합니다.
애니메이션 페이지의 결과보기 버튼을 클릭하면 파트에 따라서 백/프론트, 데모데이 투표를 했다면 데모데이 결과를 볼 수 있습니다.
결과 페이지에선 GET /votes/leaders/results와 GET /votes/teams/results로 각 후보의 득표수를 불러오고, 이를 기준으로 후보 목록 페이지에서 사용되었던 candidateCard를 내림차순 정렬합니다.
투표 결과 페이지에서 돌아가기 버튼을 누르면 파트장/데모데이 투표를 고르는 화면으로 돌아갈 수 있습니다.
느낀 점:
승선:
백엔드와 소통하며 API연동하는 것은 처음이었는데 생각보다 순조롭게 진행되었습니다. 다만 API명세서를 보기 전에 정의해둔 type들과 더미데이터를 수정/정리하는 데에 시간을 많이 할애했습니다. 로그인 관련 모든 기능을 성아 누나가, 투표 관련 모든 기능을 제가 맡아 진행하여서 각자의 역할 분담이 확실하다는 장점이 있었지만, 두 명이 각각 API용 함수를 만들어서 충돌이 생겼고 해결 과정이 복잡했습니다.
성아:
공통이 client.ts파일을 만들면 조금 더 수월했을 거 같습니다. 소셜로그인만 구현해보았는데 로그인 API를 연동해보며 로그인, 회원가입, 로그아웃 로직에 대해서 배우는 의미있는 시간이었습니다.