Files
Gnuboard7/docs/frontend/actions-handlers.md
T
HeuJung 1e89335258 fix(core,extensions): 동적 스크립트 주입 경로 전부에 출처 게이트 적용
레이아웃 scripts[] 에만 있던 원격 스크립트 차단 게이트가 다른 주입 경로에는
없어, 저장측(SafeLayoutExpressions·NoExternalUrls)이 외부 URL 저장을 422 로
막아도 런타임 디스패치 한 번으로 임의 원격 코드가 로드됐다. 저장 검증이
통째로 무의미해지는 상태였고 오류도 경고도 남지 않았다.

판정식을 support/scriptSrcPolicy.ts 로 분리해 런타임 SSoT 를 하나로 두고,
loadScript 액션 · 확장 핸들러 재로드 · 편집기 프리뷰 · 편집기 자산 매니페스트 ·
G7Core.asset.loadScript · PG 플러그인 SDK 주입이 모두 그것을 경유하게 했다.
사본을 두지 않은 이유는 차집합이 그대로 우회로가 되기 때문이다.

- 게이트는 캐시 검사보다 앞에 둔다 (뒤에 두면 이미 로드된 미신뢰 스크립트가
 캐시 히트로 통과한다)
- NoExternalUrls 순회를 9키로 확대 — 번들 레이아웃 601개 사전 스캔으로
 정당한 외부 URL 0건을 확인한 뒤 넓혔다 (저장 회귀 없음)
- callExternal 은 생성자를 참조 동일성으로 거부하고(별칭 전역 포함),
 프로토타입 경로 세그먼트를 읽기·매핑 키 양쪽에서 차단한다
- PG SDK 는 서비스 SDK 라 자체 호스팅이 불가능하므로 manifest 선언 +
 주입 직전 호스트 확인이 게이트다. tosspayments SDK URL 은 확장자가 없어
 정적 검사에 걸리지 않아 그 런타임 확인이 유일한 게이트다
- 함께 드러난 결함: 동시 loadScript 가 로드 전에 완료 처리되던 문제,
 확장 재로드에서 script 기존재가 CSS 까지 건너뛰던 문제, loadCSS 의
 in-flight 미공유
2026-09-02 21:43:13 +09:00

10 KiB

액션 핸들러 - 핸들러별 상세 사용법

메인 문서: actions.md 관련 문서: actions-g7core-api.md | layout-json.md | state-management.md


TL;DR (5초 요약)

1. navigate: 페이지 이동 (path, query, mergeQuery 옵션)
2. apiCall: API 호출 (method, endpoint, body, onSuccess/onError)
3. setState: 상태 변경 (_global/_local/_isolated 경로, target 옵션)
4. openModal/closeModal: 모달 열기/닫기
5. sequence/parallel: 여러 액션 순차/병렬 실행

하위 문서 안내

이 문서는 규모가 커서 카테고리별로 분할되었습니다. 아래 링크를 통해 각 핸들러에 대한 상세 내용을 확인하세요.

하위 문서 주요 핸들러 설명
actions-handlers-navigation.md navigate, navigateBack, openWindow, replaceUrl, reloadExtensions, reloadRoutes, refresh 페이지 이동 및 라우트 관리
actions-handlers-state.md apiCall, setState, setError, refetchDataSource, remount API 호출 및 상태 관리
actions-handlers-ui.md login/logout, openModal/closeModal, toast, switch, sequence/parallel, loadScript, callExternal UI 인터랙션 및 외부 스크립트

목차

네비게이션 핸들러 → 상세 문서

  1. navigate - 페이지 이동
  2. navigateBack - 뒤로 가기
  3. openWindow - 새 창/탭에서 열기
  4. replaceUrl - URL만 변경 (refetch 없음)
  5. reloadExtensions ⭐ NEW (engine-v1.38.0+) - 확장 상태 원자 재동기화
  6. reloadRoutes (deprecated) - 라우트 재로드
  7. refresh - 페이지 새로고침

상태 관리 핸들러 → 상세 문서

  1. apiCall - API 호출
  2. setState - 상태 변경
  3. setError - 에러 상태 설정
  4. refetchDataSource - 데이터 소스 재조회
  5. appendDataSource - 데이터 소스 병합 (무한스크롤)
  6. remount - 컴포넌트 리마운트
  7. onSuccess/onError 후속 액션
  8. API 데이터 바인딩 규칙
  9. 에러 핸들링 시스템

UI 인터랙션 핸들러 → 상세 문서

  1. login / logout - 인증
  2. openModal / closeModal - 모달
  3. showAlert / toast - 알림
  4. confirm (액션 속성) - 실행 전 확인 대화상자
  5. switch - 조건부 액션
  6. sequence / parallel - 액션 조합
  7. reloadTranslations (deprecated) - 다국어 재로드 (extension 라이프사이클은 reloadExtensions 사용)
  8. showErrorPage - 에러 페이지
  9. loadScript ⭐ NEW - 외부 스크립트 로드 (same-origin 경로 또는 선언된 신뢰 호스트만)
  10. callExternal ⭐ NEW - 외부 라이브러리 호출
  11. 실전 예시

핸들러 빠른 참조

자주 사용하는 핸들러

핸들러 용도 상세 문서
navigate 페이지 이동 navigation
openWindow 새 창/탭에서 열기 navigation
replaceUrl URL만 변경 (refetch 없음) navigation
apiCall API 호출 state
setState 상태 변경 state
openModal 모달 열기 ui
closeModal 모달 닫기 ui
toast 토스트 알림 ui
sequence 순차 실행 ui
suppress 에러 전파 방지 (no-op) error

핸들러별 필수 속성

핸들러 필수 속성 선택 속성
navigate params.path params.query, params.mergeQuery, params.replace, params.fallback (engine-v1.40.0+, 미등록 경로 fallback, 기본 openWindow)
openWindow params.path -
replaceUrl - params.path, params.query, params.mergeQuery
apiCall target params.method, params.body, params.contentType, auth_required, onSuccess, onError
setState params.* params.target (global/local/isolated)
openModal target (모달 ID) -
toast params.message params.type, params.duration
switch cases params.value
sequence actions -
parallel actions -
suppress - -

모듈 커스텀 핸들러 다국어 처리

모듈에서 커스텀 핸들러를 개발할 때, 사용자에게 표시되는 모든 문자열은 반드시 다국어 처리해야 합니다.

핵심 원칙

필수: 모든 사용자 표시 문자열은 G7Core.t() 사용
필수: 다국어 키는 moduleIdentifier로 시작
✅ 필수: 영어 폴백 메시지 제공
✅ 필수: 파라미터는 {param} 형식 사용
❌ 금지: 한글 문자열 하드코딩 (toast, 알림 메시지 등)
예외: 로케일별 콘텐츠 생성용 상수맵은 허용 (예: DETAIL_REF_TRANSLATIONS)

다국어 키 네이밍 규칙

[moduleId].admin.[section].handler.[message_key]

예시:

  • sirsoft-ecommerce.admin.product.handler.category_max_5
  • sirsoft-ecommerce.admin.product.handler.options_generated

키 접미사 규칙:

접미사 용도 예시
_success 성공 메시지 copy_success
_error, _failed 오류 메시지 copy_error, upload_failed
_required 필수 입력 안내 name_required
_max_N 최대 개수 제한 category_max_5

구현 패턴

기본 패턴:

// ❌ DON'T: 하드코딩
G7Core.toast?.warning?.('최대 5개까지 선택 가능합니다.');

// ✅ DO: G7Core.t() + 영어 폴백
G7Core.toast?.warning?.(
    G7Core.t?.('sirsoft-ecommerce.admin.product.handler.category_max_5')
    ?? 'You can select up to 5 categories.'
);

파라미터 패턴:

// ❌ DON'T: 템플릿 리터럴만 사용
G7Core.toast?.success?.(`${count}개의 옵션이 생성되었습니다.`);

// ✅ DO: 파라미터 전달 + 폴백
G7Core.toast?.success?.(
    G7Core.t?.('sirsoft-ecommerce.admin.product.handler.options_generated', { count })
    ?? `${count} options have been generated.`
);

다국어 파일 등록 (resources/lang/ko.json, en.json):

// ko.json
{
  "admin": {
    "product": {
      "handler": {
        "category_max_5": "최대 5개까지 선택 가능합니다.",
        "options_generated": "{count}개의 옵션이 생성되었습니다."
      }
    }
  }
}

// en.json
{
  "admin": {
    "product": {
      "handler": {
        "category_max_5": "You can select up to 5 categories.",
        "options_generated": "{count} options have been generated."
      }
    }
  }
}

예외: 로케일별 콘텐츠 생성용 상수맵

로케일별로 다른 콘텐츠를 생성해야 하는 경우, 상수맵은 허용됩니다:

// ✅ 허용: 로케일별 콘텐츠 생성용 상수맵
const DETAIL_REF_TRANSLATIONS: Record<string, Record<string, string>> = {
    ko: { goods_name: '상품명', model_name: '모델명' },
    en: { goods_name: 'Product Name', model_name: 'Model Name' },
};

// 사용: 특정 로케일의 콘텐츠 생성
const text = DETAIL_REF_TRANSLATIONS[locale]?.[key] ?? key;

핸들러 개발 체크리스트

□ 모든 toast 메시지에 G7Core.t() 적용
□ 모든 확인/알림 모달 텍스트에 G7Core.t() 적용
□ 영어 폴백 메시지 제공 (G7Core.t?.() ?? 'fallback')
□ 다국어 파일(ko.json, en.json)에 키 추가
□ 파라미터는 {param} 형식으로 정의
□ 로그 메시지는 다국어 처리 불필요 (logger.log, logger.warn 등)

증상별 문서 찾기

증상 관련 문서 핵심 키워드
페이지 이동 안 됨 navigation navigate, path, replace
API 호출 실패 state apiCall, auth_required, onError
상태 변경 안 됨 state setState, target: global/local/isolated
모달 안 열림/안 닫힘 ui openModal, closeModal, modalStack
토스트 안 나옴 ui toast, params.type
외부 스크립트 로드 ui loadScript, onLoad, src 출처 게이트
조건부 액션 분기 ui switch, cases, default

관련 문서