feat: UI 개편 및 편집 안정화 변경 통합 - #109
Merged
Merged
Conversation
- tokens.css 신설: 배경/텍스트/액센트/시맨틱 색, 모션, 그림자 토큰 정의 - global.css를 3윈도우 공유 스타일로 축소, 메인 전용 스타일은 main.css로 분리 - Pretendard Variable 셀프호스팅으로 기본 서체 교체 (CDN 단일 웨이트 제거) - 기존 SUIT 선택 프리셋 호환을 위해 내장 폰트에 cssContent 부여 - 오버레이 폰트 폴백 체인과 폰트 피커 기본 판정을 새 기본 서체로 갱신 - tailwind 테마를 토큰 기반 시맨틱 팔레트로 재작성, 타이포 스케일 5단 정의 - 구 colors.ts/typography.ts 제거
- Checkbox를 액센트 토글 스위치로 재구축 (로컬 상태 미러 제거) - TabSwitch를 인셋 트랙 세그먼트 컨트롤로 재구축 - Radio/Dropdown을 토큰 기반으로 재구축 (기존 props API 유지) - Button/IconButton/Input 프리미티브 신규 추가
- SVG 아이콘 27종 currentColor 전환으로 상태별 색 제어 가능하게 변경 - 타이틀바/툴바를 토큰 기반 아일랜드 스타일로 재구성 - 툴 버튼 선택/호버 상태를 저알파 화이트 레이어로 통일 - 앱 루트와 콘텐츠 배경을 app/panel 토큰으로 교체
- 섹션 카드를 저알파 화이트 + 헤어라인 보더 카드로 재구성 - 행 라벨/보조 텍스트를 새 타이포 스케일과 텍스트 위계 토큰으로 교체 - 액션 버튼을 공통 스타일로 통일, 리셋 아이콘 버튼 currentColor 적용 - 버전 박스와 프리뷰 패널을 inset/카드 토큰으로 재구성 - 간격을 4px 그리드(12px 기준)로 정규화
- 모달 백드롭을 inset 기반 + 블러로 교체 (창 크기 매직넘버 제거)
- 모달 카드를 elevated 표면 + 헤어라인 보더 + 레이어드 그림자로 통일
- Alert 버튼 체계 정리 및 동적 클래스 조합(w-${}) 안티패턴 수정
- 툴팁/컨텍스트 메뉴를 elevated 메뉴 스타일로 재구성
- 다이얼로그·에디터·매니저·피커·설정 모달 23개 파일의 하드코딩 색을 토큰으로 전환 - 버튼/인풋/구분선/헤더바를 역할 기반 표면 체계로 재분류 - 업데이트 CTA를 그린에서 액센트 프라이머리로 교체, 상태 표시는 success/warning 토큰 - 파괴적 확인 버튼은 솔리드 danger로 정리 - 임의 텍스트 크기를 타이포 스케일(caption/body/label)로 정규화 - 라운드/duration 토큰 통일
- 액센트 토큰을 브랜드 퍼플(#8B5CF6)로 교체 — 버튼/포커스/토글/선택 상태 일괄 반영 - 속성 패널(단일/배치/레이어/플러그인) 하드코딩 색을 토큰으로 전환 - 인풋 웰은 inset, 세그먼트는 인셋 트랙 + elevated 활성 세그먼트로 재분류 - 캔버스 투명 폴백 배경을 panel 톤으로 어둡게 전환, 그리드 라인은 저알파 화이트 - 미니맵 뷰포트 표시를 브랜드 퍼플로 정렬
- TabSwitch에 transform 기반 슬라이딩 인디케이터 도입 - 캔버스/설정 화면 전환 등장 모션 추가 (viewEnter/viewFade) - prefers-reduced-motion 대응 - TabList/Palette 팝업을 elevated 메뉴 스타일로 정리, 스와치 호버 스케일 - 레거시 테마 별칭(primary, button.*) 사용처 정리 후 config에서 제거
- text-style-4 웨이트를 500으로 되돌려 과도한 볼드 완화 - 속성 패널 라벨을 muted 13px로, 값은 body+tabular-nums로 위계 분리 - 패널/레이어 세그먼트에 슬라이딩 인디케이터 적용 - 폰트 스타일 토글·미니맵 뷰포트를 뉴트럴로 되돌림 (액센트 남용 방지) - 모달 버튼 역할 재정립: 확인/저장은 액센트 프라이머리, 취소는 뉴트럴 고스트 - 사운드 트림 파형을 브랜드 틴트로, 배지/시간 표시는 뉴트럴로 정리 - 피커 팝업 그림자·서치 인풋·추가 버튼 다듬기, 타이틀바 로고-텍스트 정렬 통일 - muted 텍스트 토큰 한 단계 밝게 조정
- 속성 패널을 반투명 글래스(블러+헤어라인+좌측 그림자) 표면으로 전환 - 타이틀바에 하단 헤어라인 추가 (툴바와 대칭) - 컬러피커 팝업에 elevation 그림자 부여 - glass 토큰 신설
- 체크 컬럼을 체크 항목이 있는 목록에서만 렌더 (빈 예약 컬럼 제거) - 행 높이 26px, 좌우 패딩/서브메뉴 화살표 정돈 - 높이 추정 산식 동기화
- 모달/팝오버/메뉴를 반투명 글래스(블러+깊은 그림자)로 전환, 보더 전면 제거 - 인풋 포커스를 보더 대신 그림자 링으로 교체 (focus-ring 토큰) - 헤더/푸터 바를 저알파 레이어로, 사이드패널 그림자 토큰화 - 타이틀바/툴바 헤어라인 제거 — 명도 대비로 구획 - 미니맵/줌 인디케이터를 글래스 크롬으로 재작업 - 탭 목록 팝업 구조 재설계: 라벨형 액션 행(탭 생성/삭제), 좌정렬 행 - 인라인 svg 아이콘 currentColor 전환, caret 액센트화 - 그림자 토큰 강화 및 glass/glass-heavy 토큰 도입
- 색 클래스 없이 남은 border-[1px]가 프리플라이트 기본색으로 노출되는 지점 제거 - 설정하기류 버튼을 화이트알파 버튼으로 통일 (호버/트랜지션 포함) - 색 스와치는 저알파 아웃라인으로 경계 유지 - TabCss 제거 버튼 보더 제거
- 액션 행 위에 풀블리드 저알파 디바이더 추가 - 빈 상태 텍스트를 caption 크기로 완화
- 스윕 정규식 경계 버그로 융합된 '-strong' 클래스 3건 복구 (앱 루트 라운드 코너, 팔레트 스와치 높이, 업데이트 모달 체크박스) - 단축키 캡처 리스닝 표시를 포커스 링으로 복원 (죽은 border-accent 대체) - 검색/이름/hex 입력의 포커스 링 누락 복원 - 사운드 파일선택 버튼 hover 무효 수정, 죽은 focus 잔재 정리 - 글래스 모달의 스크롤 페이드 마스크를 글래스 톤으로 일치
- 패널 구분선을 회색 띠에서 저알파 헤어라인으로 교체 - 색 스와치의 중복 보더 잔재 제거, 열림 상태는 포커스 링으로 - 행 라벨(text-white text-style-2)을 muted 라벨 위계로 통일 - 키 매핑 캡처를 인터랙티브 버튼 스타일로 전환 - Grid 내 소형 컨트롤 타이포를 body로 정규화, 이미지 피커 상태 탭 정돈
- 보더 원칙 수정: 장식 금지, 구획(상단/하단 바·플로팅 크롬)에는 유지 - 타이틀바/툴바 헤어라인 복원, line 토큰 가시 수준으로 상향 - 미니맵·줌 컨트롤에 경계선 추가 - 피커 팝업(이미지/컬러/리스트)이 측정 프레임에 잘못된 위치로 노출되던 플리커를 위치 확정 전 hidden 처리로 제거 - 탭 목록을 섹션 헤더 + 리스트 + 풀폭 생성 CTA 구조로 재설계, 선택 행 호버 휴지통으로 삭제 통합 (5개 로케일 tabs.title 추가)
- 코너 고정 크롬에서 그림자 제거 - 뷰포트 표시와 키 블록 명도 완화, 줌바와 간격 확대
- 미니맵/줌 컨트롤을 글래스에서 불투명 inset 표면으로 복원 (글래스는 팝업/모달 전용) - 탭 목록 빈 상태에서 겹말 텍스트 제거 — 생성 CTA만 표시, 헤더/리스트는 탭 존재 시에만
- 줌 컨트롤과 미니맵을 하나의 불투명 카드로 합침 - 뷰포트 표시를 테두리 박스 대신 은은한 밝은 면으로 단순화
- 크롬 필 상태 래더(--ui-fill/-hover/-active), 사이드 패널 글래스(--ui-glass-panel), 상주 크롬 스모크(--ui-glass-dim), 인셋 링+상단 하이라이트 섀도(--ui-shadow-chrome) 토큰 추가 - 미매핑으로 no-op이던 shadow-elevation-panel을 좌측 헤어라인+방향성 드롭으로 활성화 - 미니맵: 콘텐츠 모노크롬 2단계, 뷰포트만 브랜드 액센트, 테일윈드 팔레트 색 제거 - 속성 패널·탭 팝업의 raw 화이트 알파를 토큰으로 치환, 아이콘 currentColor 전환 - 패널 루트 10곳을 PANEL_ROOT_CLASS 상수로 통합, 세그먼트 썸을 필+크롬 섀도로 전환 - 입력 웰(--ui-bg-inset)을 반투명 블랙으로 바꿔 글래스 위에서 재질 통과 - Tailwind content 글롭에 ts 추가 (클래스 상수 퍼지 방지)
- 팝업·드롭다운·모달을 사이드 패널과 동일한 스모크 재질(rgba 14,14,17 @0.78)로 통일 - shadow-elevation-2/3에 인셋 링+상단 하이라이트를 넣어 모든 플로팅 표면에 재질 립 적용 - 메인 윈도우 25개 파일의 raw 화이트 알파 ~93건을 fill/line 토큰으로 치환 (필 트리플릿, 정적 컨테이너 fill-faint 신설, 고스트 버튼은 한 단계 낮은 래더) - ColorPicker 스와치 inert 베이스 보더 정리, 세그먼트 호버를 고스트 관례(6%)로 통일 - 잔여 raw는 Checkbox hover 18% 1건 (대응 토큰 없음, 의도적 보류)
웰 토큰 반투명화 이후 CodeMirror 배경이 뒤 콘텐츠에 영향받던 것을 전용 불투명 토큰(--ui-bg-inset-solid)으로 분리해 가독성 보장
우측 속성 패널과 툴바 팝업이 같은 z-30에 있어 패널이 히트테스트를 가로채고, 외부클릭 핸들러가 이를 바깥 클릭으로 오판해 팝업이 즉시 닫히던 문제. 일시적 팝업(z-40) > 상주 크롬(z-30) 위계로 분리
resetAll이 keyStore만 갱신하고 선택 상태를 남겨, 속성 패널이 초기화 이전 요소를 가리키며 업데이트가 무효 대상에 떨어지던 문제
ResetAllResponse에 serde camelCase 변환이 없어 custom_tabs/selected_key_type이 프론트 계약(customTabs/selectedKeyType)과 어긋나 undefined로 스토어에 유입. 이후 모든 상호작용에서 히스토리 스토어의 JSON.parse(JSON.stringify(undefined))가 SyntaxError를 던져 이벤트 핸들러 체인이 중단되던 근본 원인 수정
글래스 전환에서 팝업 루트에 backdrop-blur가 붙으며 fixed 서브메뉴의 기준이 뷰포트에서 팝업 박스로 바뀌어 뷰포트 좌표가 어긋나던 회귀. 서브메뉴를 body 포털로 전환하고, 포털로 끊기는 호버 유지와 외부클릭 닫힘 판정을 콜백·data 속성으로 재배선
- 서브메뉴 셰브런을 보조 글리프 크기(3x7)로 줄이고 크롬 아이콘 톤(white/45)으로 통일, 래퍼 유령 여백 제거로 좌우 인셋 대칭 - 행 최소 폭 132→96px: 밀도 높은 한글 라벨이 바닥에 걸려 우측 여백이 뜨던 것을 콘텐츠 기반 폭으로 전환
- SectionDivider 헤어라인 대신 PropertySection 카드(fill-faint 라운드 면)로 섹션을 묶는 macOS 설정/토스 문법 채택 — 전 탭·배치·그리드·플러그인 패널 적용 - 행 높이 23→32px, 패널 가장자리·블록 간격 12px 단일값, 패널 폭 220→240px - Lenis를 duration+easeOutExpo에서 lerp 방식으로 전환 — 스크롤 종료 구간의 서브픽셀 계단(드르륵) 제거
# Conflicts: # docs/content/en/api-reference/_meta.js # docs/content/en/api-reference/index/page.mdx # docs/content/ko/api-reference/_meta.js # docs/content/ko/api-reference/index/page.mdx # src-tauri/gen/schemas/acl-manifests.json # src-tauri/permissions/dmnote-allow-all.json # src-tauri/src/commands/keys/sound.rs # src-tauri/src/main.rs # src-tauri/src/models/mod.rs # src/types/plugin/api.ts
# Conflicts: # docs/content/en/api-reference/index/page.mdx # docs/content/ko/api-reference/index/page.mdx
# Conflicts: # src/renderer/components/main/Modal/FloatingPopup.tsx
# Conflicts: # src-tauri/src/commands/preset/load.rs # src-tauri/src/state/migration.rs
# Conflicts: # src/renderer/api/modules/editorAdapters.test.ts # src/renderer/api/modules/keysApi.ts # src/renderer/utils/plugin/panelModelSync.ts
# Conflicts: # src/renderer/components/main/Modal/FloatingPopup.tsx
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
2 participants
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.
개요
순차 검토와 수정이 완료된 PR #92–#106 스택을 master에 통합합니다.
주요 변경
검토 원칙
통합 무결성
검증
병합 방식
스택의 commit graph를 유지하기 위해 merge commit으로 병합합니다.