sweetalert2 호출 19 곳 통합 + 환경변수 단일화 + 코스 저장 가드 버그 수정 — POP-SPOT v2.6 프론트 결합도 정리

// v2.6 — src/lib/notify.ts. 공용 알림 래퍼
import Swal from 'sweetalert2';
// 위: sweetalert2 는 이 파일 하나에서만 import. 19곳에서 이제 직접 import 안 함

const base = Swal.mixin({
  // 위: mixin 은 공통 옵션 설정. 호출마다 동일 옵션을 반복 적용하고 싶을 때 쓰는 sweetalert 패턴
  buttonsStyling: false,
  // 위: sweetalert 의 기본 버튼 스타일 비활성화.
  //      false 로 안 두면 sweetalert 자체 파란/빨간 버튼이 떠서 POP-SPOT 톤과 충돌
  customClass: {
    confirmButton: 'bg-zinc-900 text-white rounded-lg px-4 py-2',
    // 위: 확인 버튼 Tailwind 클래스 — 진한 회색 배경 + 흰 글자 (Primary 느낌)
    cancelButton:  'bg-zinc-200 rounded-lg px-4 py-2 mx-2',
    // 위: 취소 버튼 — 연한 회색 배경 (Secondary). 좌우 mx-2 로 확인 버튼과 간격
  },
});

export const notify = {
  // 위: 19곳에서 동일한 단순 인터페이스로 호출할 수 있도록 객체로 묶음
  success: (msg: string) => base.fire({ icon: 'success', text: msg }),
  // 위: 성공 토스트. 초록 체크 아이콘 + msg 메시지
  error:   (msg: string) => base.fire({ icon: 'error',   text: msg }),
  // 위: 에러 토스트. 빨간 X 아이콘 + msg 메시지
  confirm: (msg: string) =>
    base.fire({ icon: 'question', text: msg,
                showCancelButton: true }).then(r => r.isConfirmed),
  // 위: 예/아니오 물음. Promise 끝에 .then(r => r.isConfirmed) 를 붙여
  //      "확인이 눌렸는지" 의 boolean 만 반환 — 호출 쪽에서 쓰기 쉽도록
};

// v2.5 까지 — confirm 답변을 기다리지 않고 바로 저장
Swal.fire({ text: '저장할까요?' });
// 위: Swal.fire 는 Promise 를 리턴 — await 없이 그냥 쓰면
//      다음 줄의 save() 호출이 바로 일어남 (팝업이 떠 있으는데도)
//      비동기 흐름을 구분 안 하면 이런 버그 자주 생김
save();
// 위: 팝업이 아직 떠있는데도 저장 실행. 취소 눌러도 동일하게 저장됨 (가드 의미 없음)

// v2.6 — await 로 사용자 선택 기다리고 확인 양자일 때만 저장
if (await notify.confirm('저장할까요?')) {
  // 위: notify.confirm 은 위에서 만든 래퍼. Promise<boolean> 리턴
  //      await 로 우아하게 해결 → true 면 if 내부 실행 계속
  //      하위 원항도 async 함수여야 await 키워드 사용 가능
  save();
  // 위: 이제는 동의했을 때만 호출됨 — 장·별 일·견으는 안·전 조건·부 주 단·단 클 괔 을 명·명·되 며 하 는 숈 은 ·· ·· · · · ··· ·· ··· ·· ·· ··
}

// v2.5 까지 — KEY 가 undefined 여도 그대로 URL 제조
<Script src={`//dapi.kakao.com/.../sdk.js?appkey=${KEY}&autoload=false`} />
// 위: 템플릿 리터럴 안 ${KEY} 가 undefined 이면
//      문자열로 "undefined" 로 변환되어 ?appkey=undefined 가 완성됨
//      Kakao SDK 가 401/403 으로 실패 + 콘솔에 대량의 에러
//      개발 중에는 환경변수가 빠진 상황이 자주 생김·클라이언트에 에러 노출 안 되도록 차단

// v2.6 — KEY 가 있을 때만 <Script> 자체를 렌더링
{KEY && (
  // 위: 논리·AND 명제 — KEY 가 truthy 일 때만 아래 JSX 소환
  //      KEY=undefined / KEY='' 경우 false 는 React 가 아무 것도 렌더링 안 함
  <Script src={`//dapi.kakao.com/.../sdk.js?appkey=${KEY}&autoload=false`} />
  // 위: KEY 가 있을 때만 도달하므로 appkey 는 항상 유효한 값
)}