[DB] 여행 정보 검색 API 및 프론트엔드 UI 구현

[usn757]

📜 PR 내용 요약

• 반려동물 동반 여행 정보를 지역(시/도, 시/군/구) 또는 사용자 현재 위치 기반(좌표+반경) 으로 검색하고, 상세 정보를 조회할 수 있는 백엔드 API와 프론트엔드 UI를 구현했습니다.
• 사용자가 다양한 조건으로 여행 장소를 편리하게 탐색할 수 있는 기반을 마련했습니다.
  
  
  

⚒️ 작업 및 변경 내용 (상세하게)

1. Backend API 개발 (/api/v1/contents)

• TourController:
  • 지역/시군구 코드 목록 조회 API (GET /codes) 구현.
  • 콘텐츠 상세 정보 조회 API (GET /{contentId}) 구현.
  • 지역 기반 콘텐츠 검색 API (GET /search/area) 구현 (페이징 지원).
  • 위치 기반 주변 콘텐츠 검색 API (GET /search/location) 구현 (페이징 지원).
• TourService / TourServiceImpl:
  • Repository 계층을 호출하고 DTO로 변환하는 비즈니스 로직 구현.
  • @Transactional을 이용한 트랜잭션 관리 적용.
• Repositories (AreaRepository, SigunguRepository, ContentRepository):
  • Spring Data JPA 기반 Repository 인터페이스 정의.
  • ContentRepository:
    • 지역 기반 검색을 위한 JPQL 쿼리 작성 (findByAreaCriteria).
    • 위치 기반 공간 검색을 위한 Native Query (findByLocationNative) 및 ST_Distance_Sphere 함수 활용 (거리순 정렬).
    • Native Query 결과 매핑을 위한 TourSummaryProjection 인터페이스 정의.
• Entities (Content, Area, Sigungu, SigunguId 등):
  • Content 엔티티에 공간 데이터 저장을 위한 org.locationtech.jts.geom.Point 타입의 location 필드 추가 (SRID 4326).
  • 관련 엔티티(PetTourInfo, ContentImage 등) 연관 관계 매핑.
• DTOs (CodeNameDto, DetailCommonDto, TourSummaryDto 등):
  • API 요청/응답 및 서비스 계층 간 데이터 전송을 위한 DTO 클래스 정의.
• Mapper (ContentMapper):
  • MapStruct 라이브러리를 활용하여 Entity ↔ DTO 간 객체 매핑 자동화 및 구현.
  • @Named를 활용한 커스텀 매핑 로직 추가 (e.g., BigDecimal to String, Boolean to Y/N).
• Exception (ResourceNotFoundException):
  • 콘텐츠 조회 실패 등 리소스를 찾을 수 없을 때 사용할 사용자 정의 예외 클래스 추가.
• Logging:
  • @Slf4j 어노테이션을 사용하여 Controller, Service 주요 로직에 로그 추가.

2. Frontend UI 개발

• HTML (search.html):
  • 지역별 검색 / 내 위치 주변 검색 탭 구조 UI 구현.
  • 지역/시군구 선택, 좌표/반경 입력 등 검색 조건 입력 폼 구현.
  • 검색 결과 및 상세 정보 표시 영역 구현.
• CSS (styles.css):
  • 검색 페이지 기본 스타일링 적용.
• JavaScript (search.js):
  • Fetch API를 사용한 백엔드 API 비동기 호출 로직 구현.
  • 지역 선택 시 시군구 목록 동적 로딩 기능 구현 (loadSigunguCodes).
  • 검색 결과 동적 렌더링 및 '더 보기' 버튼을 통한 페이지네이션 처리 (displayResults, loadMore).
  • '상세 정보 보기/닫기' 토글 기능 구현 (showDetail, renderDetail).
  • 브라우저 Geolocation API를 이용한 '현재 위치 사용' 기능 구현 (getCurrentLocation).
  • 로딩 상태 표시 및 오류 메시지 처리 로직 구현.

3. 빌드 및 설정

• build.gradle:
  • MapStruct 및 Lombok 의존성 추가, Lombok-MapStruct 연동 (lombok-mapstruct-binding) 설정.
  • 공간 데이터 처리를 위한 JTS (jts-core) 및 Hibernate Spatial (hibernate-spatial) 의존성 추가.
• PettyApplication.java:
  • @EnableSpringDataWebSupport(pageSerializationMode = EnableSpringDataWebSupport.PageSerializationMode.VIA_DTO) 어노테이션 추가하여 Spring Data Page 객체의 DTO 기반 직렬화 활성화.

📚 기타 참고 사항 및 리뷰 포인트

• 리뷰 포인트:
  • API 엔드포인트 경로 및 요청/응답 데이터 구조의 적절성 검토.
  • ContentRepository의 Native Spatial Query (위치 기반 검색) 성능 및 정확성 확인 (DB 환경 고려).
  • MapStruct 매핑 로직 (특히 커스텀 매핑) 정확성 확인.
  • 프론트엔드 (search.js)의 API 연동 로직, UI/UX (검색, 상세 보기, 페이지네이션, 현재 위치 사용) 플로우 검토.
  • Exception 처리 및 로깅 적절성 검토.
• 참고 사항:
  • DB 환경: 위치 기반 검색 기능은 사용하는 데이터베이스(예: PostgreSQL+PostGIS, MySQL 8+, MariaDB 10+)가 공간 데이터 타입 및 함수를 지원해야 합니다. 최적의 성능을 위해 content 테이블의 location 컬럼에 공간 인덱스(Spatial Index) 생성을 권장합니다.
  • MapStruct: MapStruct 사용을 위해 빌드 도구(Gradle)에 Annotation Processor 설정이 필요하며, 본 PR의 build.gradle 변경 사항에 포함되어 있습니다. IDE에서도 Annotation Processing 활성화가 필요할 수 있습니다.

🔧 추후 확장 예정 (선택 사항)

• 검색 결과 UI에 썸네일 이미지 외 추가 정보 표시 또는 디자인 개선.
• 검색 결과 클릭 시 별도의 상세 정보 페이지로 이동 기능 구현.
• 콘텐츠 타입 (contentTypeId) 등 추가 검색 필터 UI 및 로직 구현.

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.