TIL - 20250819

juni·2025년 8월 19일

목록 보기

99/317

0819 여행일지 목록 및 상세 조회 기능 완성

API 엔드포인트: GET /api/travel-logs (파라미터로 tripId, location, logDate 등 전달)
서비스 로직 (getTravelLogsByTrip):
- 특정 여행(tripId)에 속한 여행일지 목록을 조회합니다.
- 추가적인 검색 조건(장소, 날짜)이 있을 경우, 이를 반영하여 동적으로 필터링합니다.
응답 DTO (TravelLogResponseDto):
- 클라이언트에 전달할 여행일지 목록의 데이터 구조를 정의합니다.
- 특히, 각 여행일지에 첨부된 사진 중 첫 번째 사진을 대표 이미지(Cover Image)로 설정하는 로직을 포함하여, 프론트엔드에서 목록을 더 매력적으로 표시할 수 있도록 지원합니다.

UI 구현 (travel-log-list.html): 필터링 및 검색을 위한 입력 필드, 페이지네이션 컨트롤, 그리고 여행일지 목록이 표시될 영역을 구현했습니다. 로딩, 빈 상태, 에러 상태에 대한 UI도 함께 처리했습니다.
데이터 연동 (travel-log-list.js):
- 페이지 진입 시 또는 필터 조건 변경 시, 백엔드 API를 호출하여 여행일지 목록을 비동기적으로 불러옵니다.
- 서버로부터 받은 데이터를 기반으로 UI를 동적으로 렌더링하고, 페이지네이션 상태를 관리합니다.

개별 여행일지의 모든 내용을 상세하게 볼 수 있는 여행일지 상세보기 페이지를 구현했습니다. 이 페이지는 여러 개의 분리된 API를 조합하여 완성됩니다.

상세 페이지의 각 컴포넌트에 필요한 데이터를 효율적으로 제공하기 위해, 역할을 분리한 여러 개의 API 엔드포인트를 구현했습니다. (API Composition 패턴)

여행일지 본문 조회: GET /api/travel-logs/{travelLogId}
- TravelLogService.getTravelLogDetail: 여행일지의 기본 정보(제목, 내용, 별점 등)를 조회합니다.
해시태그 목록 조회: GET /api/travel-logs/{travelLogId}/tags
- TravelLogService.getTagsByTravelLog: 해당 여행일지에 연결된 모든 해시태그 목록을 조회합니다. 이를 위해 TravelLogTagRepositoryCustom을 구현하여 복잡한 조회 로직을 처리했습니다.
사진 목록 조회: GET /api/photos/{travelLogId}
- TravelLogService.getPhotos: 해당 여행일지에 첨부된 모든 사진 목록을 사용자가 지정한 순서대로 정렬하여 조회합니다. (findByTravelLogOrderByDisplayOrderAsc)

UI 구현 (travel-log-detail.html): 사진을 넘겨볼 수 있는 캐러셀, 해시태그 목록, 본문 영역 등 상세 페이지 UI를 구성했습니다.
데이터 연동 (travel-log-detail.js):
- 페이지 진입 시, 위에 정의된 3개의 API를 모두 비동기적으로 호출합니다.
- 각 API로부터 응답이 오는 대로, 해당 데이터를 페이지의 올바른 위치(사진 캐러셀, 태그 목록 등)에 렌더링하여 전체 상세 페이지를 완성합니다.

기능 구현과 함께, 데이터 계층의 역할을 명확히 하고 효율성을 높이기 위해 Repository와 DTO 설계를 고도화했습니다.
커스텀 Repository: TravelLogTagRepositoryCustom과 같이, 단순 CRUD를 넘어선 복잡한 조회(e.g., 특정 여행일지의 태그 조회)는 별도의 커스텀 Repository로 분리하여 구현했습니다. 이는 기본 Repository의 역할을 명확하게 유지하고 코드의 유지보수성을 높입니다.
View 맞춤형 DTO: TravelLogResponseDto, TravelPhotoResponseDto 등 각 API의 응답 목적에 맞는 전용 DTO를 설계했습니다. 이를 통해 엔티티를 외부에 직접 노출하지 않으면서, 클라이언트가 필요로 하는 데이터만 가공하여 전달하는 효율적인 구조를 만들었습니다.

사용자가 여행일지를 모아보고 필터링할 수 있는 여행일지 목록 페이지와 관련 백엔드 API를 구현했습니다.
여행일지 상세 페이지는 API Composition 패턴을 적용하여, 본문/태그/사진을 각각 독립된 API로 조회하고 프론트엔드에서 조합하는 유연하고 효율적인 구조로 완성했습니다.
커스텀 Repository와 View 맞춤형 DTO 설계를 통해 데이터 계층의 역할을 명확히 분리하고, 코드의 유지보수성과 확장성을 향상시켰습니다.