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.tslib/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까지 붙일지는 이어서 정하면 됩니다.