TIL - 20250818

juni·2025년 8월 18일

목록 보기

98/317

0818 여행 상세 조회 및 해시태그 시스템 완성

API 엔드포인트: GET /api/trips/{tripId} 경로로 특정 여행 정보를 조회하는 API를 구현했습니다.
TripService (getTrip 메서드): 요청된 tripId에 해당하는 여행 정보를 조회하고, 없을 경우 예외를 발생시키는 서비스 로직을 추가했습니다.
TripDetailDto: 여행의 기본 정보뿐만 아니라, 해당 여행에 속한 여행일지 목록까지 포함하여 클라이언트에 한 번에 전달할 수 있는 맞춤형 DTO를 설계했습니다.

UI 구현 (trip-detail.html): 여행 정보, 여행일지 목록, 로딩/에러 상태, 삭제 확인 모달 등 상세 페이지에 필요한 모든 UI 요소를 구현했습니다.
데이터 연동 (trip-detail.js):
- 페이지 진입 시, URL에서 tripId를 추출하여 백엔드 API를 호출합니다.
- 서버로부터 받은 TripDetailDto 데이터를 화면에 동적으로 렌더링합니다.
- 수정, 삭제, 새 일지 추가 등 후속 작업을 위한 이벤트 핸들러와 상태 관리 로직을 구현했습니다.
라우팅: PageController와 routes-config.js에 /trips/detail 경로를 추가하여 페이지가 정상적으로 렌더링되도록 설정했습니다.

API & Service: POST /api/tags 엔드포인트와 TagService.createTag 메서드를 구현했습니다.
중복 검증: TagRepository.existsByName을 활용하여, 동일한 이름의 태그가 중복으로 생성되지 않도록 서버 단에서 검증하는 로직을 추가했습니다.
ID 반환 로직: 태그 생성 성공 시, 생성된 태그의 정보(특히 ID)를 TagResponseDto에 담아 클라이언트에 반환하도록 API 응답 구조를 개선했습니다.
프론트엔드 연동 (travel-log-form.js):
- 사용자가 입력한 태그 중 DB에 존재하지 않는 새로운 태그를 식별합니다.
- POST /api/tags API를 호출하여 새로운 태그들을 서버에 먼저 등록합니다.
- 서버로부터 반환받은 새로운 태그 ID를 사용하여, 여행일지 저장 시 올바른 태그 관계를 맺을 수 있도록 처리합니다.

카테고리별 조회: GET /api/tags?category={category} 엔드포인트를 추가하여, 특정 카테고리에 속한 태그 목록을 조회하는 기능을 구현했습니다.
키워드 검색: GET /api/tags/search?keyword={tagName} 엔드포인트를 추가하여, 사용자가 입력한 검색어가 이름에 포함된 태그를 찾아주는 검색 기능을 구현했습니다.
프론트엔드 연동: 여행일지 작성 페이지에서 사용자가 태그를 입력할 때, 위 검색 API를 호출하여 관련 태그를 추천해주는 UI를 구현했습니다.

생성된 태그를 실제 여행일지와 연결하고, 시스템의 데이터 정확성을 높이는 작업을 진행했습니다.
해시태그 저장 로직: TravelLogService에서 여행일지를 생성할 때, 요청에 포함된 태그 ID 목록을 기반으로 TravelLogTag 중간 테이블에 관계를 설정하는 로직을 최종적으로 구현했습니다.
타임스탬프 정확성 향상: Tag와 TravelLogTag 엔터티에서 JPA의 @CreatedDate 어노테이션을 Hibernate의 @CreationTimestamp로 변경했습니다. 이를 통해 DB에 저장되는 시점의 타임스탬프가 자동으로, 그리고 더 정확하게 기록되도록 개선했습니다.
디버깅: tripId 확인, 해시태그 선택 및 생성 과정에 상세한 디버깅 로그를 추가하여 개발 중 문제 추적을 용이하게 했습니다.

특정 여행의 상세 정보와 관련 여행일지를 모두 보여주는 여행 상세보기 페이지를 백엔드 API와 프론트엔드 UI를 포함하여 완성했습니다.
해시태그 시스템의 전체 라이프사이클(생성, 중복 검증, 카테고리별 조회, 키워드 검색)을 구현했으며, 특히 생성 후 ID를 반환하여 프론트엔드와의 데이터 정합성을 맞추는 로직을 적용했습니다.
최종적으로 사용자가 선택한 해시태그를 여행일지와 연동하여 저장하는 로직을 구현하고, @CreationTimestamp를 통해 데이터 생성 시간 기록의 정확성을 개선했습니다.