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

[yiyoonseo]

🔗 배포링크

세오스 투표

노션 링크

노션

🗂️ 발표 자료

프론트 발표 자료

---

느낀 점

민교

처음에는 피그마로 화면 흐름과 UI를 먼저 설계하고, 그 디자인을 바탕으로 투표 화면을 구현한 뒤 API를 연결하는 순서로 작업했습니다. 백엔드와 협업하며 API를 연결해보는 경험이 처음이었고, API 연동 경험도 많지 않아서 요청 값과 응답 값을 이해하는 데 집중하였던 것 같습니다.

가장 어려웠던 부분은 투표 기능 API를 연결하는 과정이었습니다. 처음에는 프론트에서 보이는 후보자 데이터를 기준으로 바로 투표하면 된다고 생각했는데, 실제 백엔드 구조는 관리자가 후보자를 먼저 등록하면 백엔드에서 후보자 ID를 부여하고, 프론트는 그 후보자 목록을 불러온 뒤 해당 후보자 ID로 투표를 요청하는 방식이었습니다. 이 구조를 제대로 이해하기 전까지 후보자 이름이나 화면에 있는 데이터와 실제 API에 보내야 하는 값이 달라서 많이 헤맸습니다..

이후 Swagger 문서를 보면서 파트별 후보자 조회 API로 후보자를 먼저 불러오고, 사용자가 선택한 후보자의 candidateId를 투표 API에 전달하는 방식으로 흐름을 정리했습니다. 이 과정을 통해 프론트에서 보이는 UI 데이터와 백엔드에서 관리하는 실제 데이터 구조가 다를 수 있다는 점을 알게 되었고, API 연결 전에는 백엔드의 데이터 흐름을 먼저 정확히 이해하는 것이 중요하다는 것을 느꼈습니다.

윤서

1. 핵심 구현 내용

• 인증 체계 구축: localStorage와 JWT를 활용해 인증 흐름을 표준화했습니다. login 시 사용자 정보와 관리자 권한 여부를 로컬에 저장해 세션 유지와 권한 관리가 가능하도록 했습니다.
• 권한 제어(Auth Guard): AdminPage 진입 시 getAuthUser로 ADMIN 권한을 즉시 검증하고, 비인가 접근 시 모달을 띄워 사용자 흐름을 제어했습니다.
• 데이터 관리 및 최적화: useSWR로 서버 데이터를 효율적으로 관리했으며, 삭제 로직에는 낙관적 업데이트(Optimistic Update)를 적용해 즉각적인 반응성을 구현했습니다.

2. 트러블슈팅:

개발 중 가장 고민했던 점은 ‘권한 확인 전 페이지가 깜빡이는 현상’이었습니다.

• 문제: 마운트 직후 권한을 확인하는 동안 컴포넌트가 먼저 렌더링되어 레이아웃이 어색하게 흔들리는 문제가 있었습니다.
• 해결: isCheckLoading 로딩 상태를 추가해 권한 검증이 완료되기 전까지는 로딩 인디케이터만 표시하도록 로직을 수정했습니다. 또한 권한이 없는 경우 useSWR의 키 값을 null로 설정해 불필요한 API 요청을 차단했습니다.

3. UX를 고려한 회원가입 폼 설계

회원가입은 입력해야 할 정보가 많아 사용자가 이탈하기 쉬운 구간입니다. 이를 줄이기 위해 다단계(Multi-step) UI를 도입했습니다.

• 이메일 → 이름/팀 → 비밀번호 순으로 단계를 나눠 인지적 부담을 줄였고, 에러 발생 시 특정 스텝으로 유연하게 복구할 수 있도록 상태 관리 로직을 구성했습니다.

4. 느낀 점

이번 작업을 통해 ‘사용자 중심의 보안’이 무엇인지 배웠습니다. 클라이언트 단 권한 제어는 필수이며, 네트워크 요청을 최소화하면서도 매끄러운 사용자 경험을 제공하는 것이 프론트엔드 개발자의 핵심 역량임을 체감했습니다. 특히 컴포넌트 재사용성을 고려해 InputField와 Button을 공통화하며, 코드 구조를 깔끔하게 유지하는 연습을 충분히 할 수 있었습니다.