Kaddie Web

각 분 슬롯이 4중 조건을 모두 통과해야만 활성화. 분 단위 6개(00·10·20·30·40·50)가 모두 차단되면 시간 버튼까지 자동 비활성화.

결제 직후 서버 응답이 곧바로 따라오지 못하는 구간을 1초 간격 폴링으로 메우고, 주문 생성·폴링 두 단계 동안 결제 버튼을 잠가 중복 청구를 차단한다.

📌 react-query 기반 — 상태·폴링·가드를 선언적으로 한 책임에 응집
const POLL_INTERVAL_MS = 1000;
const MAX_ATTEMPTS = 5;
type OrderStatus = "PENDING" | "COMPLETE" | "FAILED";

const submitOrder = useMutation({ mutationFn: postOrder });

📌 orderId 생기면 자동 폴링 시작. 종결 상태 또는 5회 도달 시 refetchInterval이 false 반환 → 자동 정지.
const orderStatus = useQuery<{ status: OrderStatus }>({
  queryKey: ["orderStatus", submitOrder.data?.orderId],
  queryFn: () => checkOrder(submitOrder.data!.orderId),
  enabled: !!submitOrder.data?.orderId,
  refetchInterval: (q) => {
    const status = q.state.data?.status;
    if (status === "COMPLETE" || status === "FAILED") return false;
    if (q.state.dataUpdateCount >= MAX_ATTEMPTS) return false;
    return POLL_INTERVAL_MS;
  },
  retry: false,
});

📌 종결 또는 타임아웃 → navigate (단일 effect로 라우팅 책임 응집)
useEffect(() => {
  const status = orderStatus.data?.status;
  if (status === "COMPLETE") return navigate("/success");
  if (status === "FAILED") return navigate("/failed");
  if (orderStatus.dataUpdateCount >= MAX_ATTEMPTS && status === "PENDING") navigate("/failed");
}, [orderStatus.data, orderStatus.dataUpdateCount]);

📌 약관 동의는 react-hook-form + Zod resolver로 폼 단계에서 검증 (생략)
const handleConfirmPayment = () => submitOrder.mutate(payload);

📌 isPending(주문 생성) || isFetching(폴링) — 단일 disabled 신호. 수동 이중 상태 제거.
<button onClick={handleConfirmPayment} disabled={submitOrder.isPending || orderStatus.isFetching}>
  {submitOrder.isPending || orderStatus.isFetching ? "Processing…" : "Confirm Payment"}
</button>

useMutation이 주문 생성과 isPending 신호를, useQuery가 1초 간격 폴링과 정지 조건을 각각 한 책임으로 들고 간다. refetchInterval은 응답 status가 COMPLETE/FAILED거나 dataUpdateCount가 5에 도달하면 false를 반환해 자동으로 멈춤 — setTimeout 재귀·수동 카운터·요청/확인 두 단계 플래그를 직접 짤 필요가 없다.

Sheets에서 번역이 추가·수정되면 다음 빌드 시 변경된 부분만 6개 언어 파일에 자동 반영. Google Sheets 인증 키는 빌드할 때만 가져와 쓰고 끝나면 즉시 폐기.

📌 1) MD5 해시 캐시 — 변경된 키만 갱신
function getHash(value: string): string {
  return crypto.createHash("md5").update(value).digest("hex");
}
function loadCache(): CacheData | null {
  if (fs.existsSync(CACHE_PATH)) return JSON.parse(fs.readFileSync(CACHE_PATH, "utf-8"));
  return null;
}
function saveCache(hashes: Record<string, string>): void {
  fs.writeFileSync(CACHE_PATH, JSON.stringify({ lastFetched: new Date().toISOString(), hashes }, null, 2));
}

📌 2) Google Sheets API — 비개발자(기획/CS)가 시트에서 번역 관리
const auth = new google.auth.GoogleAuth({
  keyFile: CREDENTIALS_PATH, // ← Jenkins 단계에서 AWS Secrets Manager로부터 주입
  scopes: ["https://www.googleapis.com/auth/spreadsheets.readonly"],
});
const sheets = google.sheets({ version: "v4", auth });
const response = await sheets.spreadsheets.values.get({ spreadsheetId: SPREADSHEET_ID, range: "A:J" });

📌 3) row → hash 비교, 변경된 키만 changedKeys로 모음
const cache = loadCache();
const newHashes: Record<string, string> = {};
const changedKeys: string[] = [];
for (let i = 1; i < rows.length; i++) {
  const key = rows[i][keyIndex]?.trim()?.replace(/\//g, ".") || "";
  let rowString = key;
  for (const lang of LANGUAGES) rowString += `|${rows[i][langIndices[lang]]?.trim() || ""}`;
  const rowHash = getHash(rowString);
  newHashes[key] = rowHash;
  if (!cache?.hashes[key] || cache.hashes[key] !== rowHash) changedKeys.push(key);
}
if (changedKeys.length === 0 && cache) return; // 변경 없으면 스킵 → 빌드 시간 절약

캐싱 키는 row 단위(key + 모든 언어 값 join) MD5 — 한 셀만 바뀌어도 해당 row만 갱신, 나머지 row는 기존 번역 보존. changedKeys가 비어 있으면 빌드 스킵 → 빌드 시간 절약.

📌 package.json — prebuild 훅 (빌드 직전 자동 실행)
"i18n": "ts-node --project scripts/tsconfig.json scripts/fetch-translations.ts",
"prebuild": "npm run i18n"

📌 Jenkinsfile-us — AWS Secrets Manager 주입 (빌드 타임 한정)
environment {
  AWS_SECRETS_REGION = "<REGION>"
  GOOGLE_SHEETS_SECRET_NAME = "<SECRET_PATH>/google-sheets-credentials"
}

stage("Build Docker Image") {
  steps {
    script {
      📌 AWS Secrets Manager에서 Google Sheets 서비스 계정 키를 빌드 타임에만 주입
      sh '''
        aws secretsmanager get-secret-value \
          --region ${AWS_SECRETS_REGION} \
          --secret-id ${GOOGLE_SHEETS_SECRET_NAME} \
          --query SecretString --output text > credentials.json
      '''
      sh "docker build -t <ECR_URI>/<REPO>:${GIT_COMMIT_HASH} ."
      sh "rm -f credentials.json" // 이미지 푸시 후 즉시 폐기
    }
  }
}

빌드 파이프라인 연결점: npm run build → prebuild → npm run i18n → fetch-translations.ts. 시크릿 관리 진화 — 과거 credentials.json 레포 커밋에서 현재 AWS Secrets Manager 빌드 타임 주입 + 즉시 폐기로 전환.