Files
HeuJung 3945b6f1b3 feat(core,extensions): 구동 에셋 자체 제공 · 자산 실패 폴백 · 운영자 추가 에셋(custom/)
공개 저장소 이슈 gnuboard/g7 (@bigmsg) 제보에서 출발한 작업이다.

브라우저가 화면을 그리려고 제3자 CDN 에 도달해야 하면, 그 도달 실패는 예외도 로그도
남기지 않고 화면 기능만 조용히 사라진다. 폐쇄망·방화벽·광고차단기에서 재현되는데
자체 서버 로그에는 흔적이 없어 운영자가 원인을 특정할 수 없다. 제보된 것은 편집기
하나였지만 같은 구조가 아이콘·글꼴·코드편집기·압축 라이브러리·설치 마법사·개발
대시보드에 똑같이 있었으므로, 번들 확장과 템플릿 전체를 자체 제공으로 옮겼다.
런타임에 외부로 나가는 것은 주소 검색 서비스 하나만 남았다.

자체 제공만으로는 부족하다 — 자기 서버에서 받는 파일도 실패할 수 있고, 종전에는 그
실패가 무음이었다. CSS 경로에 재시도 계층을 세우고(스크립트 경로와 동형), 서버가 HTML
에 직접 심는 externals 까지 실패를 붙잡아 안내 배너와 [다시 시도]로 표면화했다.
편집기·코드편집기는 확보 실패 시 평문 입력으로 내려앉되 저장 계약을 유지한다.

두 번째 축은 운영자가 CSS 를 덧붙일 자리가 없던 문제다(sir.kr 문의). 확장 디렉토리의
custom/ 을 운영자 소유로 정해, 확장 교체가 그 디렉토리만은 보존하게 했다. 출처에
의존하지 않는 서술자로 해석하므로 나중에 다른 출처가 붙어도 소비자는 바뀌지 않는다.
확장 자산과 같은 메커니즘으로 정적 게시되어 CSS 내부 상대 url 도 해석되고, 파일을
고치면 그 변경을 감지해 재게시까지 예약된다.

FTP 접근이 없는 운영자에게는 그 자리도 없는 것과 같으므로 레이아웃 편집기에서 직접
넣고 고칠 수 있게 했다. 모듈·플러그인·템플릿이 한 엔드포인트를 공유한다 — 타입별로
나누면 같은 검증이 세 벌로 갈리고 그중 약한 하나가 우회로가 된다. 여기서 올린
스크립트는 그 레이아웃 한 장이 아니라 사이트 전 화면에서 실행되므로 레이아웃 편집과
분리된 전용 권한으로 연다. 운영자 CSS 가 화면을 조작 불능으로 만들면 그것을 고칠
화면에도 같은 CSS 가 실려 스스로 갇히므로, 서버가 목록을 비우는 탈출구(?custom=off)를
함께 뒀다.

동봉 자산은 재생성 경로에 버전 대조 가드를 붙였다. 선언과 다른 버전을 버전 디렉토리에
써 넣는 조용한 거짓말은 배포된 뒤에는 드러나지 않는다.
2026-08-27 16:47:14 +09:00

181 lines
5.6 KiB
TypeScript

/**
* 다음 우편번호 SDK 확보 상태 판정
*
* 이 SDK 는 라이브러리가 아니라 Daum 이 운영하는 **서비스 SDK** 라 동봉할 수 없다.
* 스크립트가 Daum 서버와 통신하므로 자체 호스팅해도 오프라인에서 동작하지 않는다.
* 그래서 이 플러그인만은 외부 호스트 의존이 남으며, 대신 **못 불러왔을 때 주소를
* 직접 입력할 수 있어야** 한다.
*
* 종전에는 그 반대였다: `setFieldReadOnly` 가 SDK 확보 여부와 무관하게 마운트 시점에
* 우편번호·주소 필드를 읽기 전용으로 고정했고, 검색 버튼은 SDK 가 없으면 아무 반응이
* 없었다. 둘이 겹쳐 **주소를 검색할 수도, 직접 입력할 수도 없는** 상태가 됐다 —
* 주문을 끝낼 방법이 사라진다.
*
* @module postcodeSdk
*/
/** SDK 스크립트 URL (manifest `trusted_script_hosts` 로 선언한 호스트) */
export const DAUM_POSTCODE_SDK_URL = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
/** 레이아웃 확장이 삽입하는 스크립트 element id */
export const DAUM_POSTCODE_SCRIPT_ID = 'daum_postcode_script';
/** 자산 실패 안내의 식별자 */
const FAILURE_ID = 'daum-postcode-sdk';
/** SDK 확보를 기다리는 최대 시간(ms) — 코어 스크립트 로더의 재시도 예산과 맞춘다 */
const DEFAULT_WAIT_MS = 12000;
/** 폴링 간격(ms) */
const POLL_INTERVAL_MS = 100;
/**
* 번역 문자열을 얻습니다.
*
* @param key 번역 키 (플러그인 네임스페이스 이하)
* @param fallback 번역 엔진 부재 시 사용할 문구
* @return string 번역된 문자열
*/
function t(key: string, fallback: string): string {
const translate = (window as any)?.G7Core?.t;
if (typeof translate !== 'function') {
return fallback;
}
const full = `sirsoft-daum_postcode.${key}`;
const result = translate(full);
return typeof result === 'string' && result !== full ? result : fallback;
}
/**
* SDK 가 지금 사용 가능한지 판정합니다.
*
* @return bool 사용 가능하면 true
*/
export function isPostcodeSdkReady(): boolean {
return Boolean((window as any).daum?.Postcode);
}
/**
* SDK 확보를 기다립니다.
*
* 레이아웃 `scripts[]` 로더가 비동기로 스크립트를 넣고 재시도까지 하므로, 마운트
* 시점에 아직 없는 것은 정상이다. "지금 없다" 와 "끝내 못 왔다" 를 구분해야
* 읽기 전용을 걸지 말지 판단할 수 있다.
*
* @param timeoutMs 최대 대기 시간(ms)
* @return Promise<bool> 확보되면 true, 시간 안에 못 오면 false
*/
export function waitForPostcodeSdk(timeoutMs: number = DEFAULT_WAIT_MS): Promise<boolean> {
if (isPostcodeSdkReady()) {
return Promise.resolve(true);
}
return new Promise<boolean>((resolve) => {
const startedAt = Date.now();
const tick = () => {
if (isPostcodeSdkReady()) {
resolve(true);
return;
}
if (Date.now() - startedAt >= timeoutMs) {
resolve(false);
return;
}
setTimeout(tick, POLL_INTERVAL_MS);
};
setTimeout(tick, POLL_INTERVAL_MS);
});
}
/**
* SDK 스크립트를 다시 로드합니다.
*
* 코어 로더가 최종 실패하면 스크립트 element 를 제거하므로, 재시도는 새로 넣어야 한다.
*
* @return Promise<bool> 로드 후 SDK 가 확보되면 true
*/
export async function reloadPostcodeSdk(): Promise<boolean> {
if (isPostcodeSdkReady()) {
return true;
}
document.getElementById(DAUM_POSTCODE_SCRIPT_ID)?.remove();
const loadScript = (window as any)?.G7Core?.asset?.loadScript;
try {
if (typeof loadScript === 'function') {
await loadScript(
DAUM_POSTCODE_SDK_URL,
{ id: DAUM_POSTCODE_SCRIPT_ID },
{ label: 'daum postcode SDK' }
);
} else {
await new Promise<void>((resolve, reject) => {
const script = document.createElement('script');
script.id = DAUM_POSTCODE_SCRIPT_ID;
script.src = DAUM_POSTCODE_SDK_URL;
script.onload = () => resolve();
script.onerror = () => reject(new Error('daum postcode SDK load failed'));
document.head.appendChild(script);
});
}
} catch {
return false;
}
return isPostcodeSdkReady();
}
/**
* SDK 미확보를 사용자에게 알립니다.
*
* @param onRetry 재시도 성공 시 수행할 후속 동작
* @return void
*/
export function notifyPostcodeSdkFailure(onRetry: () => void | Promise<void>): void {
const notify = (window as any)?.G7Core?.assets?.notifyFailure;
const message = t(
'postcode.error.sdk_unavailable',
'주소 검색을 불러오지 못했습니다. 주소를 직접 입력해 주세요.'
);
if (typeof notify !== 'function') {
console.warn(`[sirsoft-daum_postcode] ${message}`);
return;
}
notify({
id: FAILURE_ID,
label: t('postcode.search', '주소 검색'),
message,
retry: async () => {
if (!(await reloadPostcodeSdk())) {
throw new Error('[sirsoft-daum_postcode] 주소 검색을 여전히 불러올 수 없습니다.');
}
await onRetry();
},
});
}
/**
* SDK 미확보 안내를 해제합니다.
*
* @return void
*/
export function clearPostcodeSdkFailure(): void {
(window as any)?.G7Core?.assets?.clearFailure?.(FAILURE_ID);
}