Skip to content

feat: 플러그인 설정 섹션 API 도입 - #94

Open
eun-yeon wants to merge 17 commits into
feature/design-system-foundationfrom
feature/panel-picker-interaction
Open

feat: 플러그인 설정 섹션 API 도입#94
eun-yeon wants to merge 17 commits into
feature/design-system-foundationfrom
feature/panel-picker-interaction

Conversation

@eun-yeon

Copy link
Copy Markdown
Member

개요

피커와 모달의 상호작용 결함을 정리하고 플러그인 설정 섹션 API를 새로 도입

변경 내용

  • 패널·모달 상호작용 결함 수정하고 데드 코드 정리
  • 사운드 숨김 복구와 목록 enabled 계약 복구
  • 플러그인 드롭다운 Escape 소유권 정리
  • 패널 헤더 48px 앵커 통일하고 아이콘 전환 모션 도입
  • 라운딩 토큰 4단 확장하고 카드 레시피 공유 모듈 도입
  • 플러그인 설정 섹션 API 도입하고 예제 플러그인 추가
  • 요소 컨텍스트 메뉴 계약 이행 및 오버레이 상태 미러링
  • 문서 코드 블록 구문 검사 도입
  • 설정 페이지 카드·행을 공용 컴포넌트로 통합

스택 3/15 · base feature/design-system-foundation
순서대로 merge commit으로 머지 필요, squash나 rebase로 머지하면 위 PR들이 깨짐

eun-yeon added 17 commits July 15, 2026 00:16
패널·입력 상호작용:
- 패널 본문 종류 전환 시 서브 페이지가 남아 패널이 비는 회귀 수정 (panelScopeKey 리셋)
- Escape 레이어 소유권 확립: 메뉴 → 페이지 → 그리드 선택 해제 순으로
  한 겹씩만 소비 (캡처 단계 + preventDefault, 그리드는 양보)
- 슬라이드 아웃된 패널 페이지에 inert — 키보드 포커스·접근성 트리 제외
- TabList 인터랙티브 중첩 해소, 삭제 버튼 키보드 노출 + aria-label

모달 등장 모션 재구성:
- 배경 블러를 형제 스크림 언더레이로 이동 (조상 backdrop root가 모달
  글래스 블러를 무력화하던 구조 해소, 배경 블러는 유지)
- 래퍼 opacity 애니메이션 제거 — 페이드 중 블러가 죽었다 튀던 원인.
  스크림은 modalScrim(틴트+블러 동시 보간), 콘텐츠는 modalScale이 소유

대청소 (-1157줄):
- 미사용 프리미티브 삭제: Button·IconButton·Input·Radio·SelectInput
- 죽은 스크롤바 체계 일괄 제거: 전역 숨김에 무력화된 ::-webkit 블록,
  show-scrollbar 토글, 패널 thumb 계산 머신, useLenis 스크롤바 실측
- CommonListPickerPopup no-op prop 3종 제거, Dropdown size 변형 통합

토큰 확장: 라운딩 3단(--ui-radius-inner/surface/modal) 신설 및 전면 스윕,
danger muted 인터랙션 래더, GridMinimap 리터럴 토큰화
사운드 숨김:
- SoundLibraryEntry.hidden 신설, 구 enabled 키는 로드 시 raw JSON 단계에서
  hidden으로 역변환 후 재영속 (멱등, 마이그레이션 테스트 4종)
- sound_set_hidden 커맨드 + 구 계약 호환 sound_set_enabled 별칭
- 피커 행 우클릭/⋮ 메뉴에 숨기기·숨김 해제 (내장 사운드 포함),
  필터에 '숨긴 사운드' 추가 — 기본 뷰에서는 숨김 제외
- 재생 경로 미연결: 할당된 키음은 숨겨도 계속 재생
- i18n 5로케일, dmn.sound API 문서 신규 (en/ko)

피커 페이지 전용화:
- CommonListPickerPopup → CommonListPickerPage 개명, 죽은 플로팅 팝업
  분기·위치 계산·no-op prop 제거 (피커 3종, 트리거 8곳)
- ⋮ 버튼 -mr-8 정렬 사각형으로 아이콘 시각 인셋을 텍스트와 8px 대칭,
  카운터 애니메이션 ⋮ 호버를 색상 전환으로 통일

모달 스크롤 그림자 현대화:
- Alert·UnifiedKeySetting·ManagerModalLayout의 JS 그림자 계산을
  dmn-scroll-fade 마스크로 교체, scrollShadow 유틸 삭제
- 높이 애니메이션은 콘텐츠 ResizeObserver만 남기고 보존

레이어·토큰:
- z-계층 규칙 편입: 서브메뉴 10001→60, !z-10000 오버라이드 제거 (본체 40)
- --ui-selection* 토큰 신설, 캔버스 선택 크롬(핸들·마퀴·가이드)의
  블루 리터럴 11곳을 바이올렛으로 교체
- Escape 소유권 완성: 드롭다운·서브메뉴·플로팅 피커가 각자 소비해
  서브메뉴 → 메뉴 → 페이지 → 선택 해제 순으로 한 겹씩 닫힘
- 서브메뉴 위치 추정치(160) 대신 실측 배치, 패널 헤더 aria-label 보강,
  useLenis 미사용 onScroll 제거, clippy 경고 전면 해소
- 플러그인 드롭다운 포털 메뉴가 Escape를 소비해 자신만 닫도록 하고,
  네이티브 드롭다운과 같은 data-dmn-popup-submenu 표식 부여
  (메뉴가 열린 채 Esc가 패널 페이지·그리드 선택 해제로 새는 문제 해소)
- API 레퍼런스 개요의 네임스페이스 표에 dmn.sound 행 추가 (en/ko)
- SoundListItem 응답에 enabled(=!hidden)를 deprecated 필드로 병행 직렬화
  — 1.6.1 플러그인 계약 유지 (Rust 응답·TS 타입·영/한 문서 동기화)
- 카운터 애니메이션 피커 행의 키보드 타겟 가드 누락 수정 — ⋮ 버튼에
  포커스 후 Enter가 메뉴 대신 프리셋 선택을 실행하던 문제.
  키보드 포커스 시 ⋮ 버튼 노출(group-focus-within)도 보강
- store 저장을 원자 교체로 전환 — 임시 파일에 쓰고 fsync 후 rename.
  쓰기 도중 크래시·전원 차단 시 설정 파일 손상 방지
- setLatencyLogging 문서에 dev/debug 빌드 제한 명시 (en/ko)
- 사이드 패널 헤더 9곳을 PANEL_HEADER_CLASS(h-48px)로 통일하고
  버튼 네거티브 마진 핵 제거 — 헤더 버튼 중심이 우상단 (24,24)
  앵커에 고정되어 패널 열림/닫힘 간 토글 아이콘 위치 일치.
  피커 서브 페이지 헤더(CommonListPickerPage)도 같은 높이로 동기
- 패널 열기/닫기 버튼을 PanelToggleButton 단일 지속 노드로 통합 —
  리마운트로 인한 hover 끊김·깜빡임 제거. 글래스 칩은 opacity
  페이드(WAAPI), 아이콘 구분선 슬라이드·디테일 라인 페이드는 CSS.
  블러+opacity 조합은 WKWebView에서 블러 레이어가 점멸해 칩 재질을
  블러 없는 glass-panel로 교체
- 헤더 우측 액션을 PanelHeaderActions로 승격해 루트 페이지 레이어에서
  지속 렌더 — 패널 본문 교체 시에도 모드 전환 버튼 노드 유지,
  전환 대상 모드 아이콘이 크로스페이드로 스왑
- IconSwap 공용 컴포넌트 추가 (겹친 두 SVG 블러+스케일 크로스페이드,
  다이얼은 --ui-icon-swap-* 토큰) — 툴바 설정/뒤로, 레이어 패널
  그룹·개별 눈, 사운드 트림 재생/일시정지에 적용
- EyeToggleIcon 추가 — 오버레이 표시 토글의 사선을 마스크 갭과 함께
  대각선 슬라이드로 드로우/이레이즈 (한 방향 관통 스와이프).
  WAAPI FROM 고정 + onfinish 커밋 패턴으로 타이머 경주 제거
- 미사용 SidebarToggleIcon 및 패널별 토글 핸들러 props 정리
- 두 줄 헤더를 한 줄로 — 타이틀 옆에 연한 색 플러그인 id 인라인
  (배치 패널의 카운트 표기와 동일 관례, 긴 id는 truncate + 툴팁)
- 하단 취소/저장 2버튼을 풀폭 저장 CTA 하나로 교체 — 취소는
  우상단 패널 닫기가 담당 (기존과 동일하게 설정 롤백 후 닫힘).
  구분선 대신 여백으로 분리, 모달 확인 버튼과 같은 액센트 스타일
- 설정 폼을 요소 선택 패널과 동일하게 PropertySection 카드로 래핑
- 미사용이 된 handlePluginSettingsPanelCancel prop 정리
opacity를 애니메이션하는 래퍼가 backdrop root가 되어 페이드 동안
자손 글래스의 backdrop-filter가 배경을 샘플링하지 못하고, 종료
순간 블러가 한 번에 복구되며 반투명 깜빡임으로 보였다. 등장
애니메이션을 래퍼 대신 콘텐츠 루트(> *)로 옮겨 블러를 소유한
엘리먼트 자신이 페이드하도록 변경
- 모달 셸 반경 14 → 22, 팝업 셸 14 신설 — 동심 규칙(바깥 반경 = 안쪽 반경 + 간격) 정착
- 섹션 카드·라벨·폼 행 클래스를 cardRecipes 단일 소스로 추출해 React 패널과
  플러그인 HTML 생성기가 동일한 카드 구조를 공유
- 카드 기준 역산 지오메트리 적용: 모달 셸 p-12 + 반경 22, 피커류는 rounded-popup 유지
- NoteSetting을 카드 구조(PropertySection/PropertyRow)로 개편, 수직 리듬 12로 단일화
- Modal에 스크린리더 라벨(ariaLabel)과 닫힘 시 포커스 복원 추가, 로케일에 다이얼로그 라벨 키 보강
- 컨트롤 높이 23px로 통일(설정 칩·아이콘 버튼, 드롭다운 행·트리거), 라운딩을 rounded-surface/md 토큰으로 정리
- 카운터 애니메이션 에디터 스케일 입력 범위 명시(0-9999)
- 실험실(Laboratory)과 legacy Counter/KeySetting 모달 제거
- 레이어·스타일·배치 패널과 그래프·노브 아이템 스타일을 토큰 기반으로 정리
- 그리드 캔버스 크롬의 잔여 하드코딩 색상 제거
- uiApi의 setTimeout 기반 인라인 리스너를 attachPluginDialogInteractions로 추출,
  Alert 커스텀 콘텐츠 마운트 시점(onContentMount)에 연결하고 클린업 지원
- 체크박스 함수 핸들러를 change 속성 계약으로 이전 — label 클릭 시 target이
  label이라 undefined가 커밋되던 문제 수정 (드롭다운과 동일 컨벤션)
- 플러그인 UI 컴포넌트(버튼·체크박스·인풋·드롭다운·패널)를 앱 토큰과 동기
- divider 타입 제거, section 타입 신설 — 카드 단위 그룹, 조건부 그룹 표시,
  첫 section 앞 항목의 암시적 카드
- 패널과 모달이 동일한 정규화(normalizeSettingsSections)와 카드 구조 공유,
  section 키는 저장값·기본값·조회·변경 콜백에서 제외
- 미지원 타입(기존 divider 포함)은 fail-closed 제외 + 플러그인·키당 1회 진단,
  visibility 예외도 fail-closed로 격리하고 empty-state 단락 경로에서도 기록
- 모달 number/select 커밋 값을 스키마 타입으로 복원(coerceSettingValue) —
  패널의 Number()/optionMap 의미와 일치
- NumberInput min/max 미지정 시 무제한으로 변경 — 설정 스키마의 optional 계약과 일치
- contextMenu.items의 visible/disabled/position을 실제 평가 — top은 기본 항목 위,
  미지정·bottom은 아래 (grid/key 메뉴와 동일 의미), 원본 index 보존
- predicate 예외는 fail-closed(숨김/비활성)로 격리하고 요소·항목당 1회 기록,
  메뉴가 열릴 때만 평가해 렌더 경로 보호
- contextMenuStateKeys 신설: 선언한 오버레이 상태 키만 메인으로 미러링해 메뉴
  predicate의 element.state에 병합 — 동기 shadow diff로 변경분만 송신, 별도
  런타임 맵 저장으로 히스토리·프리셋·프리뷰 불변, OBS 재연결 시 재송신
- 수신은 App 레벨 상시 responder가 담당해 설정 화면(Grid 언마운트) 중에도 유실 없음
- 체크박스 토글에 label 기본 동작 차단 추가 — 단일 정확 커밋 보장
- section-playground 신규: 패널·모달 양 경로의 섹션, 조건부 그룹 표시,
  모든 필드 숨김 시 카드 소멸, visibility 예외 fail-closed 검증 체크리스트
- audio-spectrum: divider를 섹션으로 전환, start/stop 메뉴를
  contextMenuStateKeys 기반 조건부 표시로 복원
- settings-example: 섹션 도입, 존재하지 않는 __messages 재사용 패턴 제거
- 섹션 API와 contextMenuStateKeys 반영 (en/ko)
- en에 ko에만 있던 섹션 번역 추가: declarative-api(앵커 동작·컨텍스트 메뉴·템플릿·
  previewState·onMount·다국어·KPS 예제), settings(그리드 메뉴·동적 반응·비교 표),
  api-reference(PluginDefinition·ElementResizeAnchor·HookContext·예시)
- 잘못된 내용 수정: defineSettings 시그니처(void → PluginSettingsInstance),
  존재하지 않는 dmn.plugin.id/list 섹션 제거, 코드펜스 밖에 떠 있던 advancedOption,
  동적 앵커 예제의 getSettings 구조분해 누락, 객체 멤버 발췌의 구문 오류 12건
- 메뉴 predicate 예제를 실제 평가 컨텍스트에 맞게 교체하고 안내 Callout 추가
- 발췌 코드 블록에 fragment= 펜스 메타 부여 (구문 검사용, 렌더링에는 비노출)
- docs/content 전체 MDX 펜스를 TypeScript/postcss로 구문 검사 (74페이지 472블록)
- 발췌 블록은 fragment= 메타 종류별 결정적 래핑 — 객체 멤버 발췌가 라벨 문장으로
  오인돼 통과하는 미탐 차단, 시그니처 표기는 타입 멤버 변환으로 검사
- npm run test:docs 스크립트 추가
- cardRecipes에 comfortable 밀도 상수 추가 (카드 px-16, 행 min-h-40)
  — 패널·다이얼로그·플러그인 표면의 compact 규격과 분리 유지
- SettingCard/SettingRow 신설: 설정 전용 밀도를 컴포넌트에 고정하고
  높이·패딩 오버라이드 경로를 두지 않아 규격 표류 방지
- Settings.tsx 카드 5개·행 19개를 컴포넌트 소비로 전환, 행 높이는
  고정 h-40에서 min-h-40으로 바꿔 긴 라벨에서 잘림 대신 확장
- 미사용 laboratory 상태 참조와 토글 핸들러 제거
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant