[멋쟁이사자처럼]프론트엔드 40일차 정리

루틴 완료 시스템 구현

사용자가 가치를 느끼게 될 '루틴 완료' 기능 구현에 집중했습니다. 사용자의 클릭이 데이터베이스에 전달되어 그 결과가 실시간으로 화면에 반영되는 것을 구축하는 것이 목표였습니다.

• 구현된 사용자 경험(UX) 흐름
  1. 사용자가 루틴 옆 체크박스를 클릭합니다.
  2. 소감 작성을 위한 모달 창이 오픈됩니다.
  3. '제출' 버튼 클릭 시, 백엔드 API가 호출됩니다.
  4. 성공 시, UI가 실시간으로 업데이트 됩니다.

TanStack Query 커스텀 훅 시스템 구축

이전 팀원의 구축을 따라서 API 통신과 관련된 복잡한 로직을 모두 커스텀 훅으로 분리하여 컴포넌트의 책임을 줄였습니다.

• API 클라이언트 분리 (/libs/api) : 실제 axios 호출 로직을 별도 파일로 분리했습니다.
• 커스텀 훅 구현 (/libs/hooks) :useGetRoutineCompletionsByChallenge: useQuery를 기반으로, 특정 챌린지의 모든 완료 기록을 가져오는 훅을 구현했습니다.
  useCreateRoutineCompletion : useMutation을 기반으로 새로운 완료 기록을 생성하는 훅을 구현했습니다.
  useDeleteRoutineCompletion : useMutation을 기반으로 완료 기록을 삭제하는 훅을 구현했습니다.
• 실시간 동기화 구현 : useMutation의 onSuccess 콜백에서 queryClient.invalidateQueries를 호출하여, 데이터 변경이 성공하면 관련 useQuery가 자동으로 데이터를 다시 불러오도록 설정했습니다. 이로써 수동으로 상태를 관리하거나 데이터를 새로고침할 필요가 없는 완벽한 실시간 동기화를 구현할 수 있었습니다.

디버깅 : DTO 필드명 불일치 문제 해결

실제 API를 연동하는 과정에서 UI가 예상대로 동작하지 않는 문제를 마주했습니다.

• 문제점 : 컴포넌트에서는 인증샷 URL을 photoUrl로 사용하고 있었지만, 백엔드 DTO와 DB 스키마에서는 proofImgUrl로 정의되어 있었습니다. 이 차이로 인해 인증 완료 상태가 UI에 반영되지 않았습니다.
• 해결 과정 : 프론트엔드 컴포넌트의 코드(completion?.proofImgUrl)를 백엔드 DTO 명세에 맞춰 수정함으로써 문제를 해결했습니다. API 명세서를 꼼꼼히 확인해야 한다는는 디테일의 중요성을 깨닫는 계기가 되었습니다.

최종 결과 및 검증

실제 API 연동을 완료한 후, 테스트 데이터를 기반으로 모든 기능이 의도대로 동작함을 검증했습니다.

• 테스트 데이터 : '김강현 챌린지'에 3개의 테스트 루틴을 추가하여 진행했습니다.
• 검증 완료
  체크박스 클릭 및 해제 시 DB 데이터 생성/삭제를 확인했습니다.
  UI 실시간 업데이트 및 캐시 무효화가 정상 동작함을 확인했습니다.
  소감 작성 모달 및 인증샷 업로드 버튼 표시 로직이 정상 동작함을 확인했습니다.

---

정리

프론트엔드와 백엔드를 잇는 부분을 작업했습니다. TanStack Query를 통해 복잡한 서버 상태를 관리하는 법을 배웠고, API 명세의 사소한 불일치가 에러를 만드는 것을 경험하며 디테일의 중요성을 깨달았습니다.

현재는 소감과 인증샷이 UI상으로만 존재합니다. 다음 단계는 오늘 구축한 시스템을 확장하여 실제 소감 내용을 Review 테이블에 저장하고, 이미지 파일을 서버에 업로드하여 실제 proofImgUrl을 저장하는 기능을 완성하는 것입니다. 또한, 하드코딩된 userId를 실제 로그인 정보와 연동하여 사용자별 권한 관리 기능을 구현해야 합니다.