artjoy›문서›인계 — 아트조이 상세페이지 생성기 «카드 1 배경 분리 · 하이라이트 · 끌어 옮기기 · 오른쪽 옵션 탭 재편» · 코디 직접(ssh)
6.2 KB · 수정 2026-09-24 23:56
목차

인계 — 아트조이 상세페이지 생성기 «카드 1 배경 분리 · 하이라이트 · 끌어 옮기기 · 오른쪽 옵션 탭 재편» · 코디 직접(ssh)

26.9.24(목) 23:55 KST · [코디] 세션 릴레이(컨텍스트 85%) · 이 문서 하나로 시작한다. 절차 · 규약은 C:\dev\seedchain\projects\artjoy\relay-2026-09-24-asset-concepts.md 「확정 규약」 · 「마무리」 그대로(작업 사본 C:\dev\_work\artjoy-block-editor\work\ · 올리기 bash C:/dev/_work/artjoy-block-editor/job/upload.sh <태그> <상대경로…> · 편집 전 cmp.sh · 이름 지정 add · push 금지 · 저쪽 이력 [클로드] · 금지어 grep). 🔴새 기본규칙([페페] 26.9.24) = 검사는 실제 사용 주소로 — 본문 C:\dev\seedchain\rules\tooling.md 맨 위 · 본보기 C:\dev\haedali-detail-generator\block-editor\tools\check-origin.js(저쪽). 보고 검증 줄에 검사 주소를 적는다.

[페페] 지시 원문(26.9.24 23:48 · qahelper 보고 2건 + 채팅)

  1. (카드 영역 div#preview > section.dc-card:nth-of-type(2) > div.dc-section.layout-hero > div.dc-section-inner) 「첫번째 카드 배경이 원래 한개 이미지로 있었는데 이번 작업과 관련해서 2개로 나눠진거 같다. 배경과 앞쪽 텍스트는 한 카드안 별개파트로 보고 경계선 나누기로 별개로 봐야 한다. 배경을 2개로 일부러 넣지 않는한. 이 상세페이지에서 지금 이부분 수정해줘」
  2. (section.dc-card.sel > div.dc-section.layout-hero > img.pl-u.pl-img = 카드 안 배치로 올린 사용자 이미지) 「카드 선택, 옵션 선택 모두 하이라이트로 서로 위치 표시 되게. 레이어 올린 항목을 옵션에서 위치 조정 말고도 커서로 잡고 임의이동하게 하고 그 수치가 옵션에 반영되게. 이동 버튼을 만들고 자동으로 커서가 해당 대상을 포커스 고정한다. 내가 위치를 잡고 클릭하면 위치 확정.」
  3. (채팅) 「앞으로 화면 수정 · 기능추가가 많은데 오른쪽 옵션 종류가 너무 다양하고 배치도 균일하지 않아 보기 어렵다. 우측 메뉴를 컨트롤 분야별 탭으로 나누고, 탭 안에서도 기능별 구분선, 구분선마다 그룹 제목. 블록 넣기 · 프레임 넣기 등 이름 없이 아이콘만 있어 뭔지 모르는 것 → 관련 항목을 그룹으로 묶고 분리해서 같은 형태 이름 + 아이콘으로 사용자가 구분 인식 가능하게.」

▶ 첫 일감 (순서대로)

  1. ① 먼저 = 카드 1 배경 분리 버그(작업본 1건 수정 · 작은 일) — 어느 작업본인지 페페 보고에 없음 → 저쪽 운영 DB 에서 최근 저장된 작업본 중 첫 카드가 layout-hero 이고 place 꼬리표(P2 카드 안 배치)가 있는 것을 찾는다(tools\server\detail-page-store.js · DB haedali-artjoy.sqlite3 · 읽기만으로 먼저 특정). 원인 가설 = P2 place.js 가 배경(bg 요소 · .dc-section-bg 또는 section backgroundImage)을 flow 요소로 취급해 dc-section-inner 가 두 덩어리로 갈려 배경이 둘로 보임. 원칙([페페]) = 배경은 카드 전체 한 장 · 앞쪽 글자 · 사진과는 별개 층(겹침 기준 = 카드 경계) · 일부러 두 장 넣은 경우만 예외. 코드 원인 고침(재발 방지) + 그 작업본은 새 판 저장으로 고침(옛 판 유지 · 운영 DB 쓰기 = 작업본 저장 API 경유만). 검증 = 실사용 주소에서 그 작업본 열어 배경 한 장 확인(캡처는 우리 쪽에 남기지 않는다).
  2. ② ③ = 설계 결정이 걸린 화면 개편 → 착수 전 그릴링(한 번에 한 질문 · 추천안) + web-designer 상담 필수. 순서 제안: ③ 오른쪽 옵션 탭 재편(틀) → ② 하이라이트 쌍방 · 끌어 옮기기(그 틀 안에 넣는다). - 그릴링 후보 질문(한 개씩): Q1 탭 분류(예 = 내용 · 사진 · 배치 · 꾸미기 · 블록/에셋 · 고급 — 실제 현재 옵션 목록을 먼저 뽑아 분류안 제시) · Q2 탭 위치(오른쪽 패널 맨 위 가로 탭 vs 세로 아이콘 탭) · Q3 아이콘만 버튼 → 「아이콘 + 짧은 이름」 통일 규칙 · Q4 ② 이동 모드 동작(「이동」 버튼 → 대상 커서 고정 · 클릭 확정 · Esc 취소 · 키보드 화살표 1px/Shift 10px 여부) · Q5 하이라이트 방식(카드 선택 ↔ 옵션 항목 서로 테두리 색 · 스크롤 따라가기). - 대상 파일(저쪽) = 생성기 C:\dev\haedali-detail-generator\index.html(오른쪽 #inspector) · block-editor\layout\place.js · place.css(카드 안 배치 패널 .pl-panel · 손잡이) · block-editor\bridge.js. - 사전 조사는 서브에이전트(Explore)로 — 오른쪽 패널의 현재 섹션 · 버튼 · 아이콘만 버튼 목록을 뽑아 오게 한다(큰 파일 직접 통독 금지 · 컨텍스트 절약).
  3. 남은 일(앞 세션) = 생성기 쪽 detail:check · generator:check(tools\server\)도 실사용 주소 기준으로(check-origin.js 방식).
  4. 마무리 = 늘 하던 절차(검사 전부 실사용 주소 · 8820 재시작 · 커밋 · 저쪽 devplan C:\dev\devplan\block-editor.html + index.html 12번 카드 · 우리 C:\dev\devplan\artjoy-photo-editor.html · python C:/dev/devplan/build_hub.py · 텔레그램).

이 세션에서 끝난 것(26.9.24)

보고 마커