Mina Choi
079c93a62a
작업트리에 커밋되지 않은 채 쌓여 있던 것과, 오늘 찾은 문제 셋을 함께 담는다. ## 1. 콘텐츠 생성 진행 상태 (작업트리에 있던 것) COPY 잡의 실제 단계를 DB에 기록하고 응답으로 내보낸다. 폴링 횟수로 진행률을 흉내 내던 것을 걷어냈다. 새로고침·재접속해도 jobId 로 이어서 본다. - services/copy_steps.py · services/job_progress.py · common/job_errors.py (신규) - postgres-init/migrations/0013_job_progress.sql + init.sql - 프론트: useGenerationJob · generationLabels (신규), Step5Generating·pollJob 배선, orval 모델 갱신(jobProgress · jobStep · jobStepStatus · jobStepReason) - docs/GENERATION_FLOW.md (신규) ## 2. 발행된 사이트만 색인한다 실측(2026-09-15): 디스크의 발행본 33곳 중 **15곳이 draft 인데 `index, follow`** 였고 사이트맵에도 올라가 있었다. 사장님이 발행 버튼을 누른 적 없는 사이트가 짓다 만 상태로 구글에 실려 있었다는 뜻이다. head.ts 가 robots 를 하드코딩하고 payload 의 `site.status` 를 보지 않았다. "색인을 막을 이유가 없다"는 주석은 굽는 것이 곧 발행이던 시절의 말인데, 지금은 빌더 미리보기만 눌러도 draft 로 구워진다. - seo/head.ts: PUBLISHED 일 때만 index, 아니면 `noindex, follow` - 사이트맵·`/s` 목록·llms.txt 에서도 함께 빠진다 — 그쪽은 구운 HTML 의 robots 를 읽어 거른다(seo/directory.ts readBakedNoindex). 규칙을 두 자리에 두지 않으려고 한 곳에 뒀다 ## 3. [새로 크롤링하고 사이트 생성하기] 를 뒤집지 않는다ba90a19의 중복 합치기가 **일부러 다시 만들려는 경우까지** 기존 사업장으로 끌고 갔다 — 새로 만들기를 눌렀는데 기존 에디터가 열린다(사장님 보고 2026-09-15). - Req_VerifyPlaceByUrl.reuse_existing (기본 True — 다른 호출자의 동작은 그대로) - place_service.verify_place_by_url: 끄면 이어붙이지 않는다. 다만 **비어 있는 중복 행은 계속 치운다** — 원래 막으려던 누적이 그것이고 빈 행은 잃을 것이 없다 - ensureServerPlace: 위저드는 새로 만들기 경로에서만 오므로 False 로 보낸다 ## 4. 발행본 파비콘 발행본에 파비콘 링크가 아예 없어 브라우저 탭에 기본 아이콘이 떴다. 파일은 오리진 루트의 공용 자산이라 사이트마다 복사하지 않고 루트 절대경로로 가리킨다. 검증: site vitest 84건 통과 · tsc(site·frontend) · eslint 통과. 백엔드 pytest 는 로컬 DB 비밀번호가 맞지 않아 돌리지 못했다(a5b8701과 같은 자리). 발행본 반영에는 전체 재굽기가 필요하다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
125 lines
5.1 KiB
TypeScript
125 lines
5.1 KiB
TypeScript
import {StrictMode, useEffect} from 'react';
|
|
import {createRoot, hydrateRoot} from 'react-dom/client';
|
|
import type {SitePayload} from '@o2o/shared';
|
|
import {App} from './App';
|
|
import {fontHref, themeVars} from '@site/seo/head';
|
|
import './index.css';
|
|
|
|
declare global {
|
|
interface Window {
|
|
/** 프리렌더가 HTML 안에 심어 둔 payload. 이게 있으면 하이드레이션, 없으면 개발 모드. */
|
|
__SITE_PAYLOAD__?: SitePayload;
|
|
}
|
|
}
|
|
|
|
const container = document.getElementById('root')!;
|
|
const injected = window.__SITE_PAYLOAD__;
|
|
|
|
/**
|
|
* 미리보기를 띄운 빌더에게 "이제 그림이 나왔다" 고 알린다.
|
|
*
|
|
* ★ 빌더는 iframe 의 `load` 만으로는 이 시점을 알 수 없다. `load` 는 **셸이 뜬** 순간이고,
|
|
* 그 뒤에 payload fetch + 웹폰트 대기(최대 2.5s) + `document.fonts.ready` 가 남아 있다.
|
|
* 그 사이 iframe 은 흰 화면인데, load 를 완료로 읽으면 로딩 표시가 바로 사라져
|
|
* 사장님은 "다 됐다는데 아무것도 없는" 화면을 본다.
|
|
* ★ 두 번의 rAF 를 기다린다 — 첫 프레임은 React 가 DOM 을 붙인 직후라 아직 그려지기 전이다.
|
|
* ★ 실패해도 보낸다(ok=false). 안 보내면 빌더의 로딩 표시가 영영 안 걷힌다.
|
|
*/
|
|
function signalPreviewPainted(ok: boolean) {
|
|
if (window.parent === window) return;
|
|
const post = () => window.parent.postMessage({type: 'o2o:preview-painted', ok}, window.location.origin);
|
|
requestAnimationFrame(() => requestAnimationFrame(post));
|
|
}
|
|
|
|
/**
|
|
* 빌더 미리보기(iframe)가 여는 셸에서만 쓰는 경로 — `/preview?placeId=…`.
|
|
*
|
|
* ★ 왜 여기서 payload 를 가져오나
|
|
* 미리보기는 **발행 전 최신 값**을 봐야 한다. 굽는 시점에는 어느 사업장을 미리 볼지
|
|
* 모르므로 셸에 payload 를 심을 수 없다(prerender `writePreviewShell`).
|
|
* ★ 토큰은 부모(빌더)와 **같은 오리진의 localStorage** 에서 읽는다. 미리보기는 자기 서버가
|
|
* 아니라 빌더가 쓰는 것과 같은 API 를 부르므로, 키도 그쪽과 같아야 한다
|
|
* (`frontend/src/api/mutator/custom-fetch.ts`).
|
|
* ★ 색·서체 토큰과 **웹폰트 링크**를 발행본이 `<head>` 에 굽는 것과 같은 함수로 만든다
|
|
* (themeVars · fontHref). 셸은 어느 템플릿인지 모른 채 구워지므로 둘 다 여기서 얹는다.
|
|
* ★ 폰트를 빠뜨리면 조용히 틀린다 — 레이아웃·색은 그대로인데 글자만 기본 산세리프로
|
|
* 떨어진다. 실측(2026-09-09): 간판체(Gugi)가 안 실려 픽셀 차이가 92% 였는데
|
|
* 지오메트리(header·hero·h1 위치)는 발행본과 완전히 같았다.
|
|
*/
|
|
function PreviewReady() {
|
|
useEffect(() => signalPreviewPainted(true), []);
|
|
return null;
|
|
}
|
|
|
|
async function renderPreview(placeId: string) {
|
|
const token = (() => {
|
|
try {
|
|
return localStorage.getItem('o2o-web4ai.accessToken');
|
|
} catch {
|
|
return null;
|
|
}
|
|
})();
|
|
|
|
const res = await fetch(`/v1/place/${placeId}/site/preview`, {
|
|
headers: token ? {Authorization: `Bearer ${token}`} : {},
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const payload = (await res.json()) as SitePayload;
|
|
|
|
for (const [name, value] of Object.entries(themeVars(payload))) {
|
|
document.documentElement.style.setProperty(name, value);
|
|
}
|
|
|
|
const font = document.createElement('link');
|
|
font.rel = 'stylesheet';
|
|
font.href = fontHref(payload);
|
|
document.head.appendChild(font);
|
|
// 글자가 기본 서체로 한 번 그려졌다 바뀌는 것을 줄인다. 못 받아도 렌더는 계속한다.
|
|
await new Promise<void>((resolve) => {
|
|
font.addEventListener('load', () => resolve(), {once: true});
|
|
font.addEventListener('error', () => resolve(), {once: true});
|
|
setTimeout(resolve, 2500);
|
|
});
|
|
try {
|
|
await document.fonts.ready;
|
|
} catch {
|
|
/* 폰트 API 가 없거나 실패해도 그린다 */
|
|
}
|
|
|
|
createRoot(container).render(
|
|
<StrictMode>
|
|
<App payload={payload} />
|
|
<PreviewReady />
|
|
</StrictMode>,
|
|
);
|
|
signalPreviewPainted(true);
|
|
}
|
|
|
|
const previewPlaceId = new URLSearchParams(window.location.search).get('placeId');
|
|
|
|
if (injected) {
|
|
// 정적 HTML 위에 하이드레이션. 서버가 그린 마크업과 1:1 이어야 하므로
|
|
// 여기서 payload 를 바꾸거나 fetch 를 걸지 않는다.
|
|
hydrateRoot(
|
|
container,
|
|
<StrictMode>
|
|
<App payload={injected} />
|
|
</StrictMode>,
|
|
);
|
|
} else if (previewPlaceId) {
|
|
void renderPreview(previewPlaceId).catch((ex: unknown) => {
|
|
// 미리보기가 못 떠도 편집은 계속돼야 한다. 부모 창이 읽을 수 있게 이유를 남긴다.
|
|
container.textContent = `미리보기를 불러오지 못했습니다 — ${ex instanceof Error ? ex.message : String(ex)}`;
|
|
signalPreviewPainted(false);
|
|
});
|
|
} else {
|
|
// 개발 서버(vite dev) — 데모 payload 로 CSR 렌더. 프로덕션 경로가 아니다.
|
|
void import('./fixtures/moonlight-stay').then(({MOONLIGHT_STAY_PAYLOAD}) => {
|
|
createRoot(container).render(
|
|
<StrictMode>
|
|
<App payload={MOONLIGHT_STAY_PAYLOAD} />
|
|
</StrictMode>,
|
|
);
|
|
});
|
|
}
|