우측 사이드바 구현

[Nago730]

🚀 [PR] 우측 사이드바(Right Sidebar) 기능 분석 및 속성 제어 로직 최적화

📝 개요

에디터의 핵심 UI인 우측 사이드바의 전체 구조를 분석하고, 각 노드의 스타일 및 레이아웃을 정교하게 제어할 수 있도록 속성 편집 시스템을 고도화했습니다.

🔍 주요 분석 및 개선 사항

1. 지능형 동적 섹션 시스템

• 타입별 맞춤형 UI: 선택된 노드의 성격(텍스트, 버튼, 이미지, 컨테이너 등)을 자동으로 감지하여 필요한 편집 섹션만 선별적으로 노출합니다.
• 컴포넌트 합성: 속성 그룹별로 섹션을 모듈화하여 일관된 레이아웃 내에서 유연한 확장이 가능하도록 설계되었습니다.

2. 위치 및 좌표 동기화 엔진

• 실시간 좌표 연동: Absolute, Fixed 등 위치 타입 변경 시, 캔버스의 물리적 좌표와 스타일 속성을 실시간으로 일치시켜 데이터 정합성을 확보했습니다.
• 레이아웃 안정화: 위치 모드 전환 시 불필요한 위치 값을 초기화하여 예기치 않은 레이아웃 깨짐 현상을 방지합니다.

3. 하이브리드 사이즈 관리 및 단위 변환

• 멀티 사이징 모드: 고정(px), 상대(%), 채우기(fr), 자동(fit) 등 4가지 사이즈 모드를 완벽히 지원합니다.
• 스마트 컨버터: 단위 변경 시 부모 노드와의 상대적 크기를 계산하여, 시각적인 크기는 유지하면서 단위만 유연하게 변환하는 로직을 적용했습니다.

4. 시각적 레이아웃 및 정렬 도구

• Flexbox 컨트롤러: 방향, 정렬, 간격, 래핑 등 복잡한 Flexbox 속성을 직관적인 아이콘과 토글 버튼으로 제어할 수 있습니다.
• 다차원 간격 제어: 상/하/좌/우 개별 패딩 및 통합 간격을 시각적으로 관리하여 정밀한 디자인 수정을 지원합니다.

5. 콘텐츠 특화 속성 편집

• 타이포그래피 최적화: 폰트 패밀리, 굵기, 색상, 행간, 자간 등 텍스트 노드에 특화된 상세 속성을 한곳에서 편집할 수 있습니다.
• 토글형 스타일 제어: 볼드, 이탤릭, 밑줄 등 자주 쓰이는 스타일을 컴팩트한 버튼 그룹으로 배치하여 편집 효율을 높였습니다.

🛠 기술적 강점

• 아토믹 UI 시스템: 14종의 공통 입력 컴포넌트를 표준화하여 사이드바 전체의 디자인 일관성을 유지하고 코드 중복을 최소화했습니다.
• 반응형 상태 업데이트: 중앙 집중식 상태 관리 스토어를 통해 수치 입력과 동시에 캔버스에 실시간으로 반영되는 고성능 편집 환경을 구축했습니다.