스타일 아키텍처 리팩토링 및 레이아웃 노드(Stack, Group) 구현

[y-minion]

📝 개요 (Summary)

이 PR은 프로젝트의 확장성과 유지보수성을 높이기 위해 스타일 데이터 구조를 전면 리팩토링하고, 이를 기반으로 Stack 및 Group 노드 시스템을 구현한 내용을 담고 있습니다. 기존의 중첩된 스타일 구조를 평탄화(Flatten)하여 코드 복잡도를 줄였으며, Framer/Figma와 유사한 레이아웃 동작을 지원하기 위한 기반을 마련했습니다.

🛠 주요 변경 사항 (Changes)

1. 스타일 아키텍처 단순화

• 스타일 구조 평탄화: 기존의 root, layout, text 등으로 중첩되어 있던 스타일 객체를 표준 CSS 속성 구조로 통합했습니다.
• 불필요한 추상화 제거: 복잡도를 높이던 applyStyles.ts 및 레거시 스타일 처리 로직을 제거하고, processNodeStyles 유틸리티를 간소화했습니다.
• DB 스키마 마이그레이션: db.json의 모든 노드 데이터를 새로운 평탄화된 스타일 구조에 맞게 마이그레이션 했습니다.

2. 노드 시스템 개선 및 신규 노드 추가

• Stack 노드 구현 : Flex/Grid 레이아웃을 지원하는 Stack 노드를 추가했습니다.
• 외부 노드를 드래그하여 Stack 내부에 추가하는 액션을 구현하여 직관적인 레이아웃 구성이 가능하도록 구현 완료할 예정입니다.
• Group 노드 추가 : 여러 노드를 논리적으로 묶어 관리할 수 있는 Group 노드를 구현했습니다.
• 레거시 제거: 복잡하고 유연하지 못했던 Hero 컴포넌트 및 타입을 제거하고, Atomic한 노드 조합으로 대체하도록 변경했습니다.

3. 컴포넌트 및 인터랙션 최적화

• Props 단순화: 모든 노드 컴포넌트가 개별적인 props 대신 통합된 Node 객체 하나만 받도록 인터페이스를 통일하여 데이터 흐름을 명확하게 했습니다 (NodeComponentProps).
• 계층적 선택 및 버그 수정: 캔버스 내 노드 선택 로직을 개선하고, 중첩된 노드 선택 시의 UX를 개선했습니다.

🤔 변경 이유 (Why)

• Figma/Framer 스타일의 UX 지원: 기존의 제한적인 컴포넌트 방식(Hero 등)으로는 자유도 높은 웹 빌더를 구현하기 어려워, Stack(Flex/Grid) 기반의 유연한 레이아웃 시스템으로 전환이 필요했습니다.
• 개발 생산성 향상: 스타일 데이터 구조가 복잡하여 기능 추가 시마다 발생하던 오버헤드를 줄이기 위해 데이터 구조를 직관적으로 변경했습니다.