refactor(settings): 설정 패널 React/TSX 마이그레이션 + 타입 강화#72
Open
sumi-0011 wants to merge 5 commits into
Open
Conversation
- renderer.js 1352줄 / settings.html 471줄 → ui-src/ TSX 트리로 이전 · renderer.js는 React 부트스트랩 어댑터(18줄)만 남음 · settings.html은 root + script 태그로 단순화 - 빌드 체인: tsconfig.settings-ui.json + transpile:settings-ui / typecheck:settings-ui 스크립트, ui-dist/ 산출물 - tabs/ 디렉터리: General · Agents · Theme · About · Placeholder 5개 탭을 JSX 컴포넌트 파일로 분리 · 공유 ToggleRow + barrel index · LanguageRow는 GeneralTab, AgentBadges는 AgentsTab에 코로케이트 - components.tsx: Sidebar / Section / SettingRow / SwitchControl / UserCard / UpdateSection 공유 프리미티브 - App.tsx: 스냅샷·토스트·pending 상태 + 탭 라우팅 컨테이너
7개 공유 프리미티브 (ToastStack / Sidebar / Section / SwitchControl / SettingRow / UserCard / UpdateSection) 일괄 변환. UpdateSection의 actionButtons 배열 imperative push 패턴은 인라인 조건부 렌더링으로 정리. 출력 h() 호출 구조는 동등.
tabs/ToggleRow.tsx 제거 — ToggleRow는 SettingRow + SwitchControl을 합친 공유 프리미티브라 components.tsx 안에 두는 게 자연스러움. tabs.tsx 분할 패스에서 components.tsx가 아직 h() 스타일이어서 일시적으로 tabs/에 뒀던 파일을 정리.
- types.ts: src/types/ 의 SettingsSnapshot/SettingsPanelAgentEntry/ SettingsPanelThemeEntry/SettingsPanelUser/SettingsUpdateState/SettingsAPI 를 ui-src 친화 별칭으로 re-export + 로컬 타입(Translator/PendingMap/ Toast/RunUpdate/RunCommand/Snapshot) 정의 - react.ts: useState/useRef/useEffect/useMemo 훅 시그니처 부여 — 이전엔 window.React가 any로 추론되어 generic 사용 불가했던 문제 해결 - jsx.d.ts: window.settingsAPI를 SettingsAPI로 타이핑 - App.tsx: 모든 useState/useRef 호출에 명시적 타입 - 5개 탭(General/Agents/Theme/About/Placeholder) + 보조 컴포넌트 (LanguageRow/AgentBadges)에 Props 인터페이스 정의 - components.tsx: ToastStack/Sidebar/UserCard/UpdateSection Props 타입화 (Section/SwitchControl/SettingRow/ToggleRow는 범용 프리미티브 성격이라 : any 유지)
… 부산물 제거
증상:
npm run transpile:all 실행 시 src/settings/prefs.js가 매번 CommonJS →
ESM 형식으로 덮어써져 git working tree가 더러워짐.
원인:
src/types/settings.d.ts의 CreateSettingsControllerOptions가
`prefs?: typeof import("../settings/prefs")` 형식으로 prefs.ts를
type-level dynamic import. tsconfig.settings-ui.json이 ui-src에서
settings-ui.d.ts → settings.d.ts 체인을 따라가다 prefs.ts를 program에
포함시키고, settings-ui의 module: ES2022 설정으로 ESM 출력을 emit해서
src/settings/prefs.js를 덮어씀.
해결:
prefs?: typeof import("../settings/prefs")
→ prefs?: SettingsPrefsModule (load/save 메서드만 노출)
controller.ts에서 사용하는 prefs.load / prefs.save에 충분한 인터페이스.
체인이 끊겨 settings-ui 트랜스파일이 prefs.ts를 더이상 pull하지 않음.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
renderer.js1352줄 /settings.html471줄 →src/settings/ui-src/TSX 트리로 이전 (renderer.js는 18줄 React 부트스트랩만 남음)tabs/디렉터리에 5개 탭(General/Agents/Theme/About/Placeholder) JSX 컴포넌트 분할 + 공유ToggleRow+ barrelindex.tsApp.tsx컨테이너 +components.tsx공유 프리미티브(Sidebar/Section/SettingRow/SwitchControl/UserCard/UpdateSection/ToastStack)types.ts:src/types/의SettingsSnapshot/SettingsAPI/SettingsPanelAgentEntry/SettingsPanelThemeEntry/SettingsUpdateState등을 ui-src 친화 별칭으로 re-export + 로컬 타입(Translator/PendingMap/Toast/Snapshot 등) 정의: any→ 명시적 Props 인터페이스,react.ts의 hooks도 타이핑settings.d.ts정리:typeof import("../settings/prefs")→SettingsPrefsModule인터페이스로 분리해 settings-ui 트랜스파일이 매번prefs.js를 ESM으로 덮어쓰던 부산물 제거Commits
2167cc4설정 패널을 React/TSX 트리로 마이그레이션 + tabs 5개 JSX 분할d95bf52components.tsx를 h() → JSX 문법으로 변환93e6080ToggleRow를 components.tsx로 흡수0ffdf80UI props/state 타입 강화 — ui-src/types.ts 도입9f90597settings.d.ts의 prefs typeof import 분리 — 트랜스파일 부산물 제거Test plan
npm run typecheck통과 (sources + settings-ui 양쪽)npm run transpile:all후git status깨끗 (prefs.js 부산물 없음)npm start→ 우클릭 Settings 진입🤖 Generated with Claude Code