← 글 목록

notes

「지역 명소」와 TourAPI — 구분 메모

지역 명소(CMS) ≠ TourAPI. 날씨·관광지 Route/훅(공휴일 패턴). nearby lat/lng·mapX/mapY 참고.

「지역 명소」는 방금 붙인 TourAPI와 별개입니다. 헷갈리지 않게 정리합니다.

1. 앱에 이미 있는 「지역 명소」= ThankQ CMS

홈 「어디로 갈지 고민될 때」 섹션이 이겁니다.

운영이 등록한 추천 지역 카드입니다. 누르면 해당 시·군·구로 캠핑장 검색으로 갑니다.

한국관광공사 TourAPI와는 연결되어 있지 않습니다.

2. 이번에 붙인 TourAPI = 「주변 관광 POI」

캠핑장 좌표 기준 반경 검색용입니다.

useTourismNearbyQuery({
  mapX: 경도,
  mapY: 위도,
  radius: 5000,
  contentTypeId: "12", // 관광지만
});

TourAPI contentTypeId 참고:

명소(관광지)만 보려면 contentTypeId: "12"를 넘기면 됩니다. nearby API·훅에서 이미 지원합니다.

3. 아직 없는 것 — 지역(시·도) 단위 명소 목록

홈 「지역 명소」처럼 권역·시군구 코드로 관광지 목록을 쓰려면 TourAPI areaBasedList2 가 필요합니다.

지금은 locationBasedList2(좌표+반경) 와 detailCommon2(상세) 만 있습니다.

어디에 쓸지

캠핑장 상세·지도에 붙일 거면 useTourismNearbyQuery면 됩니다.

홈 「지역 명소」를 TourAPI로 바꾸거나 보강하려면 areaBasedList2 Route를 추가해야 합니다.

4. 보강 — lat / lng (날씨와 동일)

날씨 API와 같은 lat / lng 형식으로 맞춰 두었습니다.

테스트 URL (서울시청 기준)

주변 관광지 전체

http://localhost:3000/api/tourism/nearby?lat=37.5665&lng=126.9780

관광지만 (contentTypeId=12)

http://localhost:3000/api/tourism/nearby?lat=37.5665&lng=126.9780&contentTypeId=12

반경 3km, 10건

http://localhost:3000/api/tourism/nearby?lat=37.5665&lng=126.9780&radius=3000&numOfRows=10

관광지 상세 (목록 응답의 contentId로 조회)

http://localhost:3000/api/tourism/detail?contentId=126508

날씨와 나란히

TOURISM_API_KEY가 .env에 있어야 합니다.

5. 구현 요약 — 날씨·관광지 API (공휴일과 같은 패턴)

공휴일 API와 같은 패턴으로 날씨·관광지 API 연동을 구현해 두었습니다.

env (서버 전용, .env.local 등에 추가)

WEATHER_API_KEY=   # 기상청 단기예보 2.0 (공공데이터포털)
TOURISM_API_KEY=   # 한국관광공사 KorService2 (공공데이터포털)

HOLIDAY_API_KEY와 동일하게 일반 인증키 그대로 넣으면 됩니다. (이미 URL 인코딩된 키도 지원)

Route Handler (키 프록시)

  • 날씨: 초단기실황 + 단기예보를 한 번에 조회, 위경도 → 기상청 격자(nx,ny) 자동 변환
  • 관광지: mapX=경도, mapY=위도 (TourAPI 규격). HTTP 쿼리는 날씨와 맞춰 lat/lng도 받을 수 있게 보강한 경우 §4 참고.

client-api

함수 (lib/client-api/endpoint/util/util.api.ts)

getWeather({ lat, lng })
getTourismNearby({ mapX, mapY, radius?, contentTypeId?, ... })
getTourismDetail(contentId)

React Query 훅 (util.query.ts)

useWeatherQuery(lat, lng)
useTourismNearbyQuery({ mapX, mapY, radius: 5000 })
useTourismDetailQuery(contentId)

타입

  • lib/types/response/weather.ts
  • lib/types/response/tourism.ts

사용 예 (캠핑장 상세)

const { data: weather } = useWeatherQuery(campLat, campLng);
const { data: nearby } = useTourismNearbyQuery(
  campLng && campLat
    ? { mapX: campLng, mapY: campLat, radius: 5000 }
    : null,
);

키 넣은 뒤 로컬에서 http://localhost:3000/api/weather?lat=37.5665&lng=126.9780 로 한 번 호출해 보면 됩니다.

특정 화면(상세·지도·홈)에 UI까지 붙일지는 이어서 정하면 됩니다.