KMA Weather Map

지면(인쇄)용 오늘의 날씨 레이아웃을 브라우저에서 보고, PNG로 저장할 수 있는 단일 페이지 앱입니다. 소스는 frontend/이며 Vite·TypeScript로 빌드합니다.

실행

cd frontend
npm install
npm run dev

배포는 npm run build 후 frontend/dist를 정적 호스팅하면 됩니다.

11시 vs 17시 변경사항 하이라이트 관련

frontend/api/map-baseline.ts, frontend/api/user-key.ts, frontend/api/collect-baseline.ts를 사용하면, 각 사용자가 입력한 키 기준으로 11시 기준값을 서버(KV)에 저장하고 17시에 같은 키 사용자끼리 비교할 수 있습니다.

• Vercel 프로젝트의 Root Directory를 frontend로 지정
• Vercel KV(Upstash) 1개 생성
• 환경변수 설정 (둘 중 한 세트면 됨 — Upstash 대시보드는 보통 아래 이름):
  • KV_REST_API_URL + KV_REST_API_TOKEN, 또는
  • UPSTASH_REDIS_REST_URL + UPSTASH_REDIS_REST_TOKEN
  • CRON_SECRET (Vercel cron 보호용)
• frontend/vercel.json의 cron(0 2 * * *, 20 2 * * *)이 KST 11:00, 11:20에 /api/collect-baseline을 호출하도록 배포
• Cron 요청 헤더에 Authorization: Bearer <CRON_SECRET> 또는 x-cron-secret: <CRON_SECRET> 전달

동작:

• 사용자가 키를 입력/재실행하면 /api/user-key로 키를 서버에 등록
• 11시 발표(baseTime이 11xx) 로드 시 사용자 키 해시 기준으로 /api/map-baseline에 저장
• Vercel cron이 11시 자동 수집으로 사용자 키별 baseline을 갱신
• 17시 발표(baseTime이 17xx) 로드 시 같은 키 해시의 같은 날짜 기준을 조회해 하이라이트 계산
• 저장 데이터 TTL은 48시간이라 날짜가 바뀌면 자연스럽게 새 기준으로 교체됨

API 키

• 공공데이터포털 등에서 받은 서비스 키 하나로 기상(단기예보)·미세먼지·천문(출몰시각) API를 모두 호출합니다. (유저 추가 시 포털에서 활용신청 필요)
• 키와 오늘의 날씨 메모 제목·본문은 이 사이트 주소(출처) 기준으로 브라우저 localStorage에만 저장됩니다. 별도 만료일은 없고, 브라우저에서 사이트 데이터를 지우거나 **「저장된 키 지우기」**를 누르기 전까지 유지됩니다.
• 요청이 실패해도(네트워크 끊김, 서버 오류, 인증 거부 등) 저장된 키를 자동으로 삭제하지 않습니다. 원인은 빨간색 오류 영역에 표시되며, 같은 키로 다시 시도하거나 키를 바꿔 입력하면 됩니다.
• 첫 방문 시 키 입력 화면이 뜨고, 이후에는 상단 설정에서 언제든지 키를 바꿀 수 있습니다. 입력란 옆 키 표시로 마스킹을 해제해 확인할 수 있습니다.

화면 요약

• 설정: API 키 다이얼로그
• 로드중 / 로드완료 / 로드 실패: 가운데 큰 글씨로 데이터 요청 상태(키가 있을 때만 자동으로 한 번 불러옴)
• 데이터 새로고침: 최신 데이터로 다시 요청
• PNG로 저장: A4 시트 영역을 이미지로 저장(html2canvas)
• 시트 가로는 210mm 고정이라 인쇄·PNG 비율이 뷰포트 너비에 끌려가지 않도록, 창이 좁으면 가로 스크롤로 전체를 봅니다.

에셋

지도 배경 이미지는 frontend/public/map-bg.png에 두면 됩니다(없으면 지도 영역만 비어 보일 수 있음).