1. 개요

이번 프로젝트에서 구현한 리뷰 시스템은 사용자가 서비스 경험을 평가하고, 해당 평가가 기사님 또는 서비스 제공자의 평점에 반영되도록 하는 기능입니다. 프론트엔드와 백엔드 모두 다국어 지원, 실시간 반영, 최적화된 데이터 처리 등을 고려하여 설계되었습니다.

2. 프론트엔드(FE) 기술적 성과

2.1 주요 기능

• 리뷰 작성, 수정, 삭제
• 리뷰 리스트 조회 및 페이징
• 다국어 지원 (DeepL API 기반 번역)
• 실시간 평점 반영 및 업데이트
• 접근성(Accessibility) 개선: screen reader 지원, 키보드 내비게이션 최적화
• 모바일 반응형 레이아웃 최적화

2.2 구현 상세

1. 리뷰 데이터 fetching
   • React Query (useQuery, useInfiniteQuery)를 사용하여 리뷰 데이터를 서버로부터 효율적으로 가져옴
   • 무한 스크롤 구현으로 초기 렌더링 부담 최소화
   • 리뷰 데이터 캐싱 및 자동 갱신(invalidateQueries) 적용
2. 리뷰 작성/편집/삭제 모달
   • ModalProvider와 useModal 커스텀 훅으로 모달 상태 관리
   • 작성 시 입력값 검증, 전송 후 자동 갱신
   • 삭제 시 삭제 확인 모달 제공
   • UI/UX: StarIcon 컴포넌트와 ChipRectangle 사용으로 시각적 평점 및 태그 표시
3. 다국어 번역
   • DeepL API를 활용하여 작성된 리뷰를 자동 번역
   • 프론트엔드에서 batchTranslate를 사용해 번역 요청을 병합 처리
   • useEffect와 locale 체크로 불필요한 API 호출 최소화
4. 평점 실시간 반영
   • 리뷰 작성 후 React Query invalidateQueries로 평균 평점 자동 갱신
   • 화면에 즉시 반영, 사용자 경험 개선
5. 반응형/접근성
   • CSS 모듈 + clsx 활용하여 모바일/데스크탑 모두 대응
   • ARIA 속성 적용 및 화면 읽기 지원
   • 리뷰 카드와 평점 UI 컴포넌트 재사용성 확보

3. 백엔드(BE) 기술적 성과

3.1 주요 기능