sns-auto-builder 1.0.6 → 1.0.8

package/CLAUDE.md

@@ -48,6 +48,11 @@ Phase 3c (ChatGPT 웹 — 배경만 뽑고 한글은 HTML 로 얹기):
   # 그다음 3a 의 HTML 단계를 이어서 수행
 ```
 
+**크롬이 떴는데 프롬프트를 입력하지 않으면** 레퍼런스 첨부에서 막힌 것이다. ChatGPT 가
+DOM 을 바꾸면 생긴다. `logs/app.log` 의 `첨부 실패` 줄에 그때 화면의 file input 목록이
+남으니 그걸 보고 `SELECTORS` 를 고쳐라. **임의로 레퍼런스를 빼고 다시 돌리지 마라** —
+레퍼런스 없이 만들면 디자인이 달라진다.
+
 `chatgpt-image-gen.js` 는 로그인된 Chrome 프로필(`.chrome-profile`)로 chatgpt.com 을 몰아
 프롬프트를 한 장씩 넣고 이미지를 받아 1080×1350 의 2배로 크롭해 저장한다.
 참고 이미지가 있으면 `--ref <경로>` 로 첫 장에 첨부해 그 디자인을 따라가게 한다.

package/README.md

@@ -173,6 +173,30 @@ Chrome 은 인스턴스를 하나만 허용하므로 빌더가 영영 포트를
 로그는 **버튼과 무관하게 항상 자동으로 쌓입니다** — 버튼은 내려받는 손잡이일 뿐입니다.
 버전 · OS · 실행 기록 · 오류와 발생 위치가 담기고, **브랜드 값 내용 · 토큰 · 쿠키는 안 담깁니다.**
 
+#### 크롬 자동화가 멈출 때
+
+ChatGPT 는 화면 구조를 예고 없이 바꿉니다. 그러면 **크롬은 뜨는데 프롬프트를 입력하지 않는**
+모습이 됩니다 (첨부 단계에서 썸네일을 2분 기다리다 실패). 이때 로그에 이런 줄이 남습니다:
+
+```
+[…] 첨부 실패 1/2 {"used":"input[type=\"file\"][accept*=\"image\"]","formImgs":0,"forms":1,
+  "composer":true,"fileInputs":[{"testid":null,"accept":null,"inForm":true},
+  {"testid":"upload-photos-input","accept":"image/*","inForm":false}, …]}
+```
+
+`fileInputs` 가 그 순간 화면에 있던 파일 입력의 목록입니다. 어느 것을 썼는지(`used`)와
+대조하면 셀렉터를 어떻게 고쳐야 하는지 바로 나옵니다. 실제로 이 목록이 있었다면
+`accept` 없는 input 을 고르고 있다는 걸 즉시 알 수 있었습니다.
+→ [scripts/chatgpt-image-gen.js](scripts/chatgpt-image-gen.js) 의 `SELECTORS`
+
+#### 크롬 포트
+
+빌더는 CDP 포트 **19222** 를 씁니다 (`SNS_BUILDER_CDP_PORT` 로 변경 가능).
+관례 포트인 9222 를 쓰면 사용자 본인의 크롬이나 chrome-devtools MCP 와 겹치는데,
+**겹쳐도 에러가 안 납니다** — 한쪽이 `::1:9222`, 다른 쪽이 `127.0.0.1:9222` 를 잡고
+둘 다 정상으로 보입니다. 그 상태에서 빌더는 조용히 **남의 브라우저를 조종합니다.**
+`bin/sns-auto-builder.mjs` 와 `scripts/chatgpt-image-gen.js` 의 `CDP_PORT` 는 항상 같아야 합니다.
+
 ---
 
 ## 구조

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sns-auto-builder",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "인스타 카드뉴스 자동 제작 빌더. Claude Code + ChatGPT 웹을 그대로 써서 API 키 없이 돌아갑니다.",
   "type": "module",
   "bin": {

package/scripts/chatgpt-image-gen.js

@@ -26,7 +26,7 @@
  *          떠 있으면(예: chrome-devtools MCP) 프로필이 잠겨 실패한다. 그때는
  *   --browser-url http://127.0.0.1:19222  로 떠 있는 Chrome 에 붙어라.
  */
-import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync } from 'node:fs';
+import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync, appendFileSync } from 'node:fs';
 import { join, resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { cropTo45 } from './openai-image-gen.js';
@@ -154,6 +154,34 @@ async function waitForComposer(page) {
   // 로그인이 풀렸으면 여기서 프롬프트 창이 안 뜬다 — 위 waitForSelector 가 던진다.
 }
 
+// 첨부가 실패했을 때 "그때 화면에 뭐가 있었는지" 를 남긴다.
+//
+// ChatGPT 는 DOM 을 예고 없이 바꾼다. 실제로 업로드 input 이 <form> 밖으로 옮겨진
+// 적이 있고, 그때 증상은 "크롬은 떴는데 프롬프트를 입력하지 않는다" 뿐이라 원인을
+// 찾는 데 오래 걸렸다. 다음에 또 바뀌면 이 스냅샷만 보면 된다.
+async function domSnapshot(page) {
+  return page.evaluate(() => ({
+    formImgs: document.querySelectorAll('form img').length,
+    forms: document.querySelectorAll('form').length,
+    composer: !!document.getElementById('prompt-textarea'),
+    // 값이 아니라 구조만 남긴다 — 로그에 개인 정보가 들어가면 안 된다.
+    fileInputs: [...document.querySelectorAll('input[type="file"]')].map((el) => ({
+      testid: el.dataset.testid || null,
+      accept: el.accept || null,
+      inForm: !!el.closest('form'),
+    })),
+  })).catch((e) => ({ error: e.message }));
+}
+
+// 워크스페이스의 logs/app.log 에 붙인다 — server.mjs 와 같은 파일, 같은 형식이라
+// 빌더 첫 화면의 로그 버튼으로 그대로 받아진다.
+function logDom(msg, data) {
+  try {
+    mkdirSync('logs', { recursive: true });
+    appendFileSync('logs/app.log', `[${new Date().toISOString()}] ${msg} ${JSON.stringify(data)}\n`);
+  } catch { /* 로그 실패가 생성을 막을 이유는 없다 */ }
+}
+
 // 레퍼런스 첨부. **실패하면 던진다.**
 //
 // 예전에는 썸네일 확인이 실패해도 경고만 찍고 그냥 보냈다. 그러면 레퍼런스 없이 만들어진
@@ -161,33 +189,49 @@ async function waitForComposer(page) {
 // 조용히 틀리느니 시끄럽게 멈추는 게 낫다.
 async function attachRef(page, refPaths) {
   const want = refPaths.length;
-  // 파일 입력이 여러 개다. 컴포저(form) 안에 있는 것이 첨부용이다.
+  // 화면에 input[type=file] 이 네 개쯤 있다. **accept 로 고른다.**
+  //
+  // 예전에는 "form 안에 있는 것"을 골랐는데, ChatGPT 가 이미지 업로드 input 을
+  // form 밖으로 옮기면서 form 안에는 accept 없는 다른 input 만 남았다. 거기에
+  // 파일을 넣으면 아무 일도 안 일어나고, 썸네일을 2분 기다리다 실패한다
+  // (증상: "크롬은 떴는데 프롬프트를 입력하지 않는다").
+  const SELECTORS = [
+    'input[type="file"][data-testid="upload-photos-input"]', // 현재 ChatGPT
+    'input[type="file"][accept*="image"]',                   // testid 가 바뀌어도 살아남는 조건
+    'input[type="file"]',
+  ];
   const pickInput = async () => {
-    const handles = await page.$$('input[type="file"]');
-    for (const h of handles) {
-      if (await h.evaluate((el) => !!el.closest('form'))) return h;
+    for (const sel of SELECTORS) {
+      const h = await page.$(sel);
+      if (h) return { sel, handle: h };
     }
-    return handles[0] || null;
+    return null;
   };
 
   for (let attempt = 1; attempt <= 2; attempt++) {
-    const input = await pickInput();
-    if (!input) throw new Error('첨부용 파일 입력을 찾지 못했습니다 (ChatGPT 화면 구조가 바뀌었을 수 있음)');
-    await input.uploadFile(...refPaths);
+    const picked = await pickInput();
+    if (!picked) {
+      logDom('첨부 input 없음', await domSnapshot(page));
+      throw new Error('첨부용 파일 입력을 찾지 못했습니다 (ChatGPT 화면 구조가 바뀌었을 수 있음)');
+    }
+    await picked.handle.uploadFile(...refPaths);
 
     // 한 장만 붙어도 통과시키면 안 된다. **올린 개수만큼** 붙을 때까지 기다린다.
     const ok = await page
       .waitForFunction((n) => document.querySelectorAll('form img').length >= n, { timeout: 60_000 }, want)
       .then(() => true).catch(() => false);
     if (ok) {
-      console.log(`  레퍼런스 ${want}장 첨부 확인`);
+      console.log(`  레퍼런스 ${want}장 첨부 확인 (${picked.sel})`);
       return;
     }
-    const got = await page.evaluate(() => document.querySelectorAll('form img').length);
-    console.warn(`  (재시도 ${attempt}/2) 첨부가 ${got}/${want}장만 확인됨`);
+    const snap = await domSnapshot(page);
+    console.warn(`  (재시도 ${attempt}/2) 첨부가 ${snap.formImgs}/${want}장만 확인됨 — 쓴 input: ${picked.sel}`);
+    logDom(`첨부 실패 ${attempt}/2`, { used: picked.sel, ...snap });
     await new Promise((r) => setTimeout(r, 3000));
   }
-  throw new Error(`레퍼런스 ${want}장을 첨부하지 못했습니다. 레퍼런스 없이 만들면 디자인이 달라지므로 중단합니다.`);
+  throw new Error(`레퍼런스 ${want}장을 첨부하지 못했습니다. 레퍼런스 없이 만들면 디자인이 달라지므로 중단합니다.\n`
+    + `        ChatGPT 화면 구조가 바뀌었을 수 있습니다. logs/app.log 의 "첨부 실패" 줄에\n`
+    + `        그때 화면에 있던 file input 목록이 남습니다 — 빌더 첫 화면의 로그 버튼으로 받으세요.`);
 }
 
 async function sendPrompt(page, text) {