티옴타 브랜드 스튜디오 — 프론트엔드 픽셀포팅
개요
tiomta.com 티옴타톡 구축 ③단계(스튜디오·신탁 계약)의 프론트엔드. 핸드오프 프로토타입
TiomtaModuleStudio.dc.html(x-dc/support.js 컴포넌트 시스템)을 순수 HTML/CSS/JS 단일
파일로 픽셀 재현. 자매 파일
앱/발견.html의 디자인 토큰·fetch 관례·"서버 연결 대기" 패턴을
그대로 재사용.
무엇을 했는지
/Users/ef/crowny-tiomta/tok/앱/스튜디오.html (1207줄) — 브랜드 스튜디오 데스크톱 화면
(폰 프레임 아님, 상단 브라운 셸 46px + 좌측 네비 232px + 콘텐츠 + 하단 상태바 28px).
5섹션: 회차 관리 / 스토리 에디터 / 리뷰·정산 / 0.9% 모듈 모니터링 / 마케팅 0.9% 시뮬레이터.
API 7종 전부 배선: GET /api/studio/rounds · GET /api/studio/round/<ID>(5s 폴링,
원본의 3.5초 난수 setInterval 카운터는 금지 규칙에 따라 제거) ·
POST /api/studio/module ·
GET /api/studio/settle/<ID> ·
GET /api/studio/trust/<ID> ·
POST /api/studio/trust/exec ·
GET /api/studio/sim?cap=&mode=.
서버(스튜디오.한선 엔진)가 아직 미착수라 전 API가 현재 "서버 연결 대기"로 정상 폴백.
데이터 없는 항목(스토리 블록·검수로그·리뷰스트림·모듈 모니터링 지표·ERP 세부·회차이력·
AI브리핑)은 가짜 데이터 대신 "③/④단계 범위 밖 — 서버 스키마 대기" / "집계 대기"로 명시.
⌘K 팔레트·? 키가이드(4레벨: 초4/빠른/일반/전문가)·FAB은 정적 텍스트맵으로 하드코딩(지시 허용 범위).
브랜드 계정(X-Crowny-Owner) 입력 UI를 상단 셸에 추가 — POST 액션(모듈 토글·신탁 집행) 인증용.
/Users/ef/crowny-tiomta/tok/앱/스튜디오.한선 (207줄) — UI 계산 로직 동반(요율 표시 산식·
게이지 눈금 위치·신탁 바 비율·모듈 카운트·성장트랙단계).
TIOMTA_STUDIOUI_LIB 게이트.
컴파일 0경고, 자체시험 28/28 PASS(2회째 호출 검증 포함).
발견한 VM 함정 (신규 — 기존 가드레일에 추가 권장)
"통과 = 통과 + 함수호출(...)" 인라인 누적 패턴이 스칼라 누적값을 조용히 무너뜨림.
통과 = 통과 + _검증(...) 형태로 함수 호출 결과를 산술식에 바로 인라인하면, 개별
_검증()
호출은 매번 정상적으로 PASS를 출력하는데도 최종
통과 합계가 엉뚱하게 낮게(1) 나옴.
변수 검사N = _검증(...) 로 먼저 이름 있는 지역변수에 담은 뒤
통과 = 통과 + 검사N으로
더하면 정상(28/28). 기존 함정(
함수 재호출 배열 지역변수 스토리지 재사용)과 같은 계열로
보이나, 이번엔
배열이 아니라 스칼라 누적 변수 + 반복 함수호출 인라인에서 발생 —
회차예약.한선이 이미 이 패턴(먼저 변수에 담기)을 쓰고 있었던 이유였음을 재확인.
→
crownycode-learn.sh add 또는 함정목록 문서에 반영 권장.
검증
- 골격:
<!DOCTYPE html> + charset="utf-8" + viewport 확인.
- 태그 균형: 파이썬 스택 검사 오류 0.
- JS 문법:
node -e "new Function(...)" 파싱 OK.
- 괄호/중괄호/대괄호 카운트 balanced (( )820/820 · {} 247/247 · [] 95/95).
- fetch↔스펙 라우트 대조 7/7 완전 일치(§③ 서버 확장 라우트).
- 디자인대조.sh(CrownyBrowser 크롬 UI 규격, 무관 페이지) 오탐 방지용
<!-- 대조스펙: .없음 -->
마커 추가 → PASS 0/FAIL 0로 정상화(스크립트가 문서화한 "페이지류 파일" 예외 경로 사용).
관련 파일
/Users/ef/crowny-tiomta/tok/앱/스튜디오.html/Users/ef/crowny-tiomta/tok/앱/스튜디오.한선/Users/ef/crowny-tiomta/tok/스펙.md (§③ 계약, SSOT)- 원본 핸드오프:
/Users/ef/Downloads/design_handoff_tiomta/src/TiomtaModuleStudio.dc.html
- 자매 파일(패턴 재사용 원본):
/Users/ef/crowny-tiomta/tok/앱/발견.html, 발견.한선
잔여 이슈
- 서버 엔진
스튜디오.한선(tok/ 루트, §③ 엔진 본체)과 티옴타톡서버.한선의 /api/studio/*
라우트 7종이 아직 미착수 — 이 UI는 전부 "서버 연결 대기"로 정상 폴백 중이며 실제 배선 후
라이브 재검증 필요(발견.html이 겪은 것과 동일한 다음 단계).
- 신탁 GET 응답의
execStatus/집행상태CSV 정확한 포맷이 스펙에 문자열 수준으로만 정의돼
있어, 클라이언트는 "완료 단계명 CSV" 가정으로 관대하게 파싱(문자열/배열 모두 허용) —
실제 서버 구현 시 포맷 확정되면
normalize 함수 재검증 필요.
GET /api/studio/sim 응답 rows가 객체 배열/파이프문자열 배열 둘 다 허용하도록 관대 파싱
(§③ 엔진 함수가 "행별 PSV 문자열"을 반환한다고 명시돼 있어 실제 컬럼 순서 확정 후 재검증 권장).
- 회차 이력·AI 수요 브리핑·ERP 세부 수치·모듈 모니터링 지표 3종은 스펙에 API가 없어
전부 "대기" 표기로 남김 — 후속 스키마 확장 시 이 UI만 갱신하면 됨(구조는 이미 준비됨).