[8주차] Team Ditda 과제 제출합니다.

[waldls]

작업 관련 링크

• 🔗 배포 링크
• 🎨 Figma 링크
• 🚨 API 명세서
• 🌐 Swagger UI
• 🤝 발표 자료

---

최종 구현 사항

🔐 인증

회원가입

• React Hook Form + Zod 스키마로 폼 유효성 검사 선언적 처리
• 파트(FE/BE) 탭 선택 → 팀명 드롭다운 → 이름 드롭다운 순서의 단계별 플로우 구현
• 팀 선택 시 해당 팀의 팀원 목록 API를 연동해 이름 옵션 동적 로드
• 아이디·이메일 실시간 중복 확인 버튼 및 상태 관리
• 모든 조건(팀·이름 선택, 중복 확인 통과, 폼 유효) 충족 시에만 제출 버튼 활성화
• 회원가입 완료 후 모달로 안내 → 로그인 페이지 이동

로그인

• React Hook Form + Zod 스키마로 아이디·비밀번호 검증
• 로그인 성공 시 AccessToken을 인메모리에 저장, RefreshToken은 HttpOnly 쿠키로 관리

로그아웃

• 로그아웃 확인 모달로 실수 방지
• 로그아웃 시 Server Action으로 쿠키 삭제 + 인메모리 토큰 초기화 후 리다이렉트

인증 흐름

• ky HTTP 클라이언트의 beforeRequest 훅에서 인메모리 AccessToken → 쿠키 AccessToken 순 폴백으로 Authorization 헤더 자동 주입
• afterResponse 훅에서 401 응답 시 에러 코드 분기:
  • AUTH_401_04 (만료): RefreshToken으로 재발급 후 원래 요청 자동 재시도
  • 그 외 401 또는 재발급 실패: 쿠키 삭제 후 로그인 페이지 리다이렉트

라우트 가드

• Next.js Middleware에서 쿠키 기반으로 /vote/**, /members/** 접근을 서버 사이드에서 일괄 차단
• 미인증 상태 접근 시 홈으로 리다이렉트

🗳 투표

투표 홈

• 파트장 투표(FE·BE)와 데모데이 투표 분야 안내 및 각 투표 페이지로 이동 버튼 제공
• 홈 화면에서 실시간 총 투표 수 집계 API 연동 표시

파트장 투표

• Dynamic Route로 FE·BE 투표 페이지 통합 처리, 유효하지 않은 part 값은 notFound() 처리
• 후보자 목록 API 조회 후 가나다순 정렬 적용
• 이미 투표한 경우 선택 상태 표시 및 추가 선택·제출 버튼 비활성화
• 제출 확인 모달 → 투표 API 호출 → 성공 시 낙관적 UI 업데이트로 투표 상태 즉시 반영
• 투표 완료 후 "현재 투표 순위 보러 가기" 링크 제공

파트장 투표 결과

• 후보자별 득표수 조회 API 연동
• 득표수 내림차순 정렬 후 순위 번호 계산 및 Chip 컴포넌트로 표시
• 내 투표 항목은 선택 스타일로 하이라이트

데모데이 투표

• 팀 목록 조회 API 연동 및 투표 기능 구현

데모데이 투표 결과

• 팀별 득표수 조회 API 연동 및 1열 정렬 결과 표시

👥 멤버

• FE / BE 탭 전환으로 CEOS 23기 멤버 목록 조회
• 팀 및 팀원 조회 API 연동, 가나다순 정렬
• 이름·소속 대학교를 ProfileCard 컴포넌트로 표시

🙌 기여자

• Ditda 팀원 정보를 상수로 관리
• GitHub 프로필 이미지·이름·역할 표시, 카드 클릭 시 GitHub 프로필로 이동

---

느낀 점 및 배운 점

오진

• 7주차 과제를 준비하면서 맡은 페이지의 UI을 모두 마무리 하였기에 남은 부분이 API 연동만 진행하면 되었기에 8주차 과제는 수월하게 진행할 수 있었습니다.
• API 연동 이후 저의 로컬에서는 문제가 없었으나 유민님의 로컬에서 에러가 발생하여 해당 부분을 처리하는데 어려움을 겪었습니다. 유민님과 상의를 했을 때 에러가 발생될 만한 지점을 찾기 어려워 원인 분석 과정이 쉽지 않았습니다.
• 에러에서 URL은 정상적으로 연결이 되는 것을 확인했으나 404 에러가 발생하는 것으로 보아 서버가 라우트를 제대로 인식하지 못하거나 잘못된 part 값이 그대로 코드에 들어갈 수 있다고 판단하였습니다. 따라서 part 값을 검증하는 로직을 추가하고 순위이동 URL을 문자열 조합이 아닌 상수로 고정하여 오류가 발생할 수 있는 부분을 최대한 막아보고자 하였습니다. 결과적으로 기존 발생하던 에러는 수정이 되었습니다.
• 프백 협동 과제를 진행하면서 처음 스웨거를 활용하여 API 문서 확인하고 사용하는 방법을 경험할 수 있어 좋았습니다. 특히 이후 팀 프로젝트 진행할 때 필수적으로 활용될 것이기 때문에 미리 경험하여 프로젝트 진행 과정에서 도움을 받았으며 코드를 작성할 때 API 연동도 고려하여 코드를 생각하게 되었습니다. 이번 협동과제를 마지막으로 프론트엔드 정기 세션이 마무리 되었는데 매주 많은 경험과 지식을 얻을 수 있는 세션을 준비해준 운영진분들과 언제나 열정적으로 지식을 나눌 수 있었던 프론트엔드 모든 분들과 함께할 수 있어 한 학기동안 감사했습니다!!

유민

• 7주차에 UI 전체 구현과 AUTH 연동 전체를 마쳤기 때문에 남은 시간에 버그 수정 및 ditda에 적용해보면 좋을 사항들을 고민하는데 집중할 수 있었던 것 같습니다. 덕분에 처음 설계에서 놓쳤던 부분들을 되돌아볼 수 있었는데, 협업 과정에서 엣지 케이스를 조금 더 빨리 짚어냈더라면 백엔드팀과 불필요한 API 재협의 없이 진행할 수 있었을 것 같아 아쉬움이 남습니다. ditda 개발 시에는 설계 단계부터 인증 여부, 접근 가능한 사용자 범위 같은 부분을 백엔드 팀과 더 면밀히 보고 더블체크 해야겠다고 생각했습니다.
• 제가 이번 과제에서 가장 신경 쓴 부분은 인증 흐름이었습니다. AccessToken 인메모리 관리, RefreshToken 자동 갱신, 401 응답 분기 처리까지 ky 인터셉터 한 곳에 모아두는 구조를 직접 설계해보면서 각 API 호출 코드를 깔끔하게 유지할 수 있었습니다. fetch 기반이라 번들 오버헤드도 적고 beforeRequest·afterResponse 훅이 직관적이어서 ky를 선택하길 잘했다는 생각이 들었습니다.
  또한 document.cookie 직접 대입을 Server Action으로 교체하는 과정에서 Next.js App Router의 서버/클라이언트 경계를 다시 한번 명확히 이해할 수 있었습니다.
• Vote 개발하면서 폴더 구조에 대해 꾸준히 고민하게 되었습니다. Vote 정도의 규모라면 전통적인 폴더 구조로도 충분하다고 판단해 다른 구조로 개편하지 않았지만, 더 일반적인 프로젝트를 고려했을 때 컴포넌트나 특정 도메인의 섹션을 계속 공용 컴포넌트나 레이아웃 폴더에만 보관하는 것은 비효율적이라는 생각이 들었습니다. 오진오빠랑 여러 차례 논의도 하고 구글링도 해보면서 기존 방식보다 개편 시의 이점이 더 많다고 판단해 ditda 프로젝트를 전통적인 구조에서 FSD 방식으로 개편했습니다.
  새로운 라이브러리와 아키텍처를 선택하면서 프로젝트에 가장 적합한 방향을 찾아갈 수 있다는 점이 주차별 과제의 큰 장점인 것 같습니다. 그동안 했던 과제들 중에 Vote 과제에서의 고민들이 ditda 개발에 가장 큰 도움이 됐던 것 같습니다!
• PR Template대로만 적어서 제출할까 싶었는데 마지막이라 꼭 마무리 멘트를 추가하고 싶어서 평소대로 과제 제출했습니다 ㅎ.ㅎ 우선 늘 고생하는 ditda 개발팀 이번 프백협업 과제도 다들 너무 잘 그리고 부지런히 개발해줘서 고맙다는 말 전하고 싶고 다같이 조금만 더 힘내서 ditda 개발도 잘 마무리 했으면 좋겠어요🎶
  마지막 프론트 과제와 프론트 세션이라니 조금 아쉽기도 하고,,그러네요 프론트 운영진분들이 세션 늘 꽉꽉 담아서 준비해주시고 항상 저희 세심하게 신경 써주시고 편의 많이 봐주셔서 진심으로 감사했습니다 🥹🤍 덕분에 하드스킬적으로 많이 배우고 멘토링 진행하면서 프로젝트 방향도 흔들림 없이 잘 잡을 수 있었던 것 같아요.
  마지막으로 그동안 저 좋게 봐주시고 따뜻한 말씀 많이 해주셔서 감사했습니다. 정말 수고 많으셨어요 ~~~🫂😻