Merge pull request 'fix(map): S57 ENC �������� Ÿ��/sprite/glyphs URL�� �������η� ��ȯ' (#153) from fix/s57-api-url into develop

This commit is contained in:
jhkang 2026-04-01 09:18:33 +09:00
커밋 c77ac4e7a8
4개의 변경된 파일11개의 추가작업 그리고 31개의 파일을 삭제

파일 보기

@ -5,29 +5,7 @@
}, },
"permissions": { "permissions": {
"allow": [ "allow": [
"Bash(npm run *)", "Bash(*)"
"Bash(npm install *)",
"Bash(npm test *)",
"Bash(npx *)",
"Bash(node *)",
"Bash(git status)",
"Bash(git diff *)",
"Bash(git log *)",
"Bash(git branch *)",
"Bash(git checkout *)",
"Bash(git add *)",
"Bash(git commit *)",
"Bash(git pull *)",
"Bash(git fetch *)",
"Bash(git merge *)",
"Bash(git stash *)",
"Bash(git remote *)",
"Bash(git config *)",
"Bash(git rev-parse *)",
"Bash(git show *)",
"Bash(git tag *)",
"Bash(curl -s *)",
"Bash(fnm *)"
], ],
"deny": [ "deny": [
"Bash(git push --force*)", "Bash(git push --force*)",

파일 보기

@ -9,6 +9,7 @@
### 수정 ### 수정
- 지도: S57EncOverlay API URL을 공유 API_BASE_URL로 통합 - 지도: S57EncOverlay API URL을 공유 API_BASE_URL로 통합
- 지도: S57 ENC sprite URL에 상대경로일 때 origin 프리픽스 추가 - 지도: S57 ENC sprite URL에 상대경로일 때 origin 프리픽스 추가
- 지도: S57 ENC 오버레이 타일/sprite/glyphs URL을 절대경로로 변환 (운영환경 상대경로 대응)
## [2026-03-31] ## [2026-03-31]

파일 보기

@ -3,6 +3,10 @@ import { useMap } from '@vis.gl/react-maplibre';
import { API_BASE_URL } from '../../services/api'; import { API_BASE_URL } from '../../services/api';
const PROXY_PREFIX = `${API_BASE_URL}/tiles/enc`; const PROXY_PREFIX = `${API_BASE_URL}/tiles/enc`;
// MapLibre 내부 요청(sprite, tiles, glyphs)은 절대 URL이 필요
const ABSOLUTE_PREFIX = API_BASE_URL.startsWith('http')
? `${API_BASE_URL}/tiles/enc`
: `${window.location.origin}${API_BASE_URL}/tiles/enc`;
const ENC_SPRITE_ID = 'enc-s57'; const ENC_SPRITE_ID = 'enc-s57';
const ENC_SOURCE_ID = 'enc-s57'; const ENC_SOURCE_ID = 'enc-s57';
@ -154,14 +158,11 @@ export function S57EncOverlay({ visible }: S57EncOverlayProps) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const styleObj = map.style as any; const styleObj = map.style as any;
originalGlyphsRef.current = styleObj.glyphs; originalGlyphsRef.current = styleObj.glyphs;
styleObj.glyphs = `${PROXY_PREFIX}/font/{fontstack}/{range}`; styleObj.glyphs = `${ABSOLUTE_PREFIX}/font/{fontstack}/{range}`;
// sprite 등록 (중복 방지) // sprite 등록 (중복 방지)
if (!hasSprite(map, ENC_SPRITE_ID)) { if (!hasSprite(map, ENC_SPRITE_ID)) {
const spriteUrl = PROXY_PREFIX.startsWith('http') map.addSprite(ENC_SPRITE_ID, `${ABSOLUTE_PREFIX}/sprite/sprite`);
? `${PROXY_PREFIX}/sprite/sprite`
: `${window.location.origin}${PROXY_PREFIX}/sprite/sprite`;
map.addSprite(ENC_SPRITE_ID, spriteUrl);
} }
// sources 등록 (타일 URL을 프록시로 치환) // sources 등록 (타일 URL을 프록시로 치환)
@ -169,7 +170,7 @@ export function S57EncOverlay({ visible }: S57EncOverlayProps) {
const globeSrc = style.sources['globe']; const globeSrc = style.sources['globe'];
map.addSource(GLOBE_SOURCE_ID, { map.addSource(GLOBE_SOURCE_ID, {
type: 'vector', type: 'vector',
tiles: [`${PROXY_PREFIX}/globe/{z}/{x}/{y}`], tiles: [`${ABSOLUTE_PREFIX}/globe/{z}/{x}/{y}`],
minzoom: globeSrc?.minzoom ?? 0, minzoom: globeSrc?.minzoom ?? 0,
maxzoom: globeSrc?.maxzoom ?? 4, maxzoom: globeSrc?.maxzoom ?? 4,
}); });
@ -179,7 +180,7 @@ export function S57EncOverlay({ visible }: S57EncOverlayProps) {
const encSrc = style.sources['enc']; const encSrc = style.sources['enc'];
map.addSource(ENC_SOURCE_ID, { map.addSource(ENC_SOURCE_ID, {
type: 'vector', type: 'vector',
tiles: [`${PROXY_PREFIX}/{z}/{x}/{y}`], tiles: [`${ABSOLUTE_PREFIX}/{z}/{x}/{y}`],
minzoom: encSrc?.minzoom ?? 4, minzoom: encSrc?.minzoom ?? 4,
maxzoom: encSrc?.maxzoom ?? 17, maxzoom: encSrc?.maxzoom ?? 17,
}); });

파일 보기

@ -46,7 +46,7 @@ const MapSlot = ({ label, step, mapData, captured, onCapture, onReset }: MapSlot
</div> </div>
{/* 지도 + 캡처 오버레이 */} {/* 지도 + 캡처 오버레이 */}
<div className="relative rounded-lg border border-stroke overflow-hidden" style={{ height: '300px' }}> <div className="relative rounded-lg border border-stroke overflow-hidden" style={{ aspectRatio: '16/9' }}>
<MapView <MapView
center={mapData.center} center={mapData.center}
zoom={mapData.zoom} zoom={mapData.zoom}