Skip to content

πŸ“ PR Title: λ…Έλ“œ λ Œλ”λ§ μ‹œμŠ€ν…œ μ•„ν‚€ν…μ²˜ 개편 및 에디터 래퍼 고도화#13

Merged
y-minion merged 6 commits intodevelopfrom
feature/node-component
Jan 8, 2026
Merged

πŸ“ PR Title: λ…Έλ“œ λ Œλ”λ§ μ‹œμŠ€ν…œ μ•„ν‚€ν…μ²˜ 개편 및 에디터 래퍼 고도화#13
y-minion merged 6 commits intodevelopfrom
feature/node-component

Conversation

@y-minion
Copy link
Copy Markdown
Contributor

@y-minion y-minion commented Jan 8, 2026

πŸ” Summary

이번 변경사항은 에디터와 라이브 λͺ¨λ“œ κ°„μ˜ λ…Έλ“œ λ Œλ”λ§ μ±…μž„μ„ λͺ…ν™•νžˆ λΆ„λ¦¬ν•˜κ³ , λ“œλž˜κ·Έ μ•€ λ“œλ‘­(reat-Rnd) 지원을 μœ„ν•œ 기반 μ•„ν‚€ν…μ²˜λ₯Ό κ΅¬μΆ•ν•˜λŠ” 데 쀑점을 λ‘μ—ˆμŠ΅λ‹ˆλ‹€.
특히 Wrapper Pattern을 λ„μž…ν•˜μ—¬ 순수 λ Œλ”λŸ¬μ™€ νŽΈμ§‘μš© 래퍼λ₯Ό λΆ„λ¦¬ν•¨μœΌλ‘œμ¨ μœ μ§€λ³΄μˆ˜μ„±κ³Ό ν™•μž₯성을 ν™•λ³΄ν–ˆμŠ΅λ‹ˆλ‹€.

✨ Key Changes

1. λ ˆμ΄μ•„μ›ƒ & μŠ€νƒ€μΌ 뢄리 (Layout Separation)

  • ♻️ CSS 속성 필터링: applyStyles μœ ν‹Έλ¦¬ν‹°μ—μ„œ width, height, position λ“± λ ˆμ΄μ•„μ›ƒ κ΄€λ ¨ 속성을 ν•„ν„°λ§ν•˜λ„λ‘ μˆ˜μ •ν•˜μ—¬, Wrapper와 Renderer κ°„μ˜ μŠ€νƒ€μΌ μΆ©λŒμ„ μ›μ²œ μ°¨λ‹¨ν–ˆμŠ΅λ‹ˆλ‹€.
  • 🎨 Wrapper μ—­ν•  κ°•ν™”: λ ˆμ΄μ•„μ›ƒ μ œμ–΄λŠ” 였직 Wrapperκ°€ λ‹΄λ‹Ήν•˜κ³ , Node RendererλŠ” λΆ€λͺ¨ 크기에 100% μˆœμ‘ν•˜λ„λ‘ ꡬ쑰λ₯Ό λ³€κ²½ν–ˆμŠ΅λ‹ˆλ‹€.

2. 래퍼 μ»΄ν¬λ„ŒνŠΈ 이원화 (Wrappers Architecture)

  • πŸ› οΈ EditorNodeWrapper: react-rndλ₯Ό λ„μž…ν•˜μ—¬ λ“œλž˜κ·Έ/리사이징 κΈ°λŠ₯을 νƒ‘μž¬ν•˜κ³ , 에디터 μŠ€ν† μ–΄μ™€ μ—°λ™λ˜λ„λ‘ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.
  • πŸ–ΌοΈ LiveNodeWrapper (BaseLayoutWrapper): 라이브 ν™˜κ²½μ—μ„œλŠ” λΆˆν•„μš”ν•œ 이벀트 λ¦¬μŠ€λ„ˆ 없이 μˆœμˆ˜ν•˜κ²Œ μœ„μΉ˜/크기만 μž‘μ•„μ£Όλ„λ‘ κ²½λŸ‰ν™”ν–ˆμŠ΅λ‹ˆλ‹€.

3. 데이터 ꡬ쑰 κ°œμ„ 

  • πŸ—„οΈ Mock Data (db.json) μ—…λ°μ΄νŠΈ: λͺ¨λ“  λ…Έλ“œ 데이터에 ν•„μˆ˜ layout: { x, y, width, height, zIndex } ν•„λ“œλ₯Ό μΆ”κ°€ν•˜μ—¬ TypeScript μΈν„°νŽ˜μ΄μŠ€μ™€ 정합성을 λ§žμ·„μŠ΅λ‹ˆλ‹€.

4. 개발 ν™˜κ²½ 및 μ„±λŠ₯

  • ⬆️ λ³΄μ•ˆ 패치: React/Next.js κ΄€λ ¨ λ³΄μ•ˆ 취약점 이슈 λŒ€μ‘μ„ μœ„ν•΄ 버전 μ—…κ·Έλ ˆμ΄λ“œ 및 νŒ¨ν‚€μ§€ μ˜μ‘΄μ„± 동기화.
  • ✨ Editor Store: μ„ νƒλœ λ…Έλ“œλ₯Ό κ΄€λ¦¬ν•˜λŠ” Zustand μŠ€ν† μ–΄ κ΅¬ν˜„.

@y-minion
♻️ λ…Έλ“œμ˜ λ ˆμ΄μ•„μ›ƒ 속성은 λ…Έλ“œ λ Œλ”λŸ¬μ— λ“€μ–΄ 가지 μ•Šλ„λ‘ 필터링 둜직 μΆ”κ°€
7ce50c3 
λ…Έλ“œ λ Œλ”λŸ¬λŠ” μ–Έμ œλ‚˜ 래퍼 μ»΄ν¬λ„ŒνŠΈλ₯Ό 100%μ±„μš°λ„λ‘ λ Œλ”λ§ λ˜μ•Ό ν•˜λŠ”λ°, λ ˆμ΄μ•„μ›ƒ κ΄€λ ¨ CSS속성이 λ“€μ–΄κ°€λ©΄ μŠ€νƒ€μΌ 쀑첩 λ°œμƒμœΌλ‘œ μ˜λ„μΉ˜ μ•Šκ²Œ λ Œλ”λ§ 될 수 있음. 이λ₯Ό 방지 ν•˜κΈ° μœ„ν•΄ λ ˆμ΄μ•„μ›ƒ κ΄€λ ¨ 속성은 λ…Έλ“œ λ Œλ”λŸ¬μ— λ°˜μ˜λ˜μ§€ μ•Šλ„λ‘ 필터링 적용
@y-minion
@repo/ui 의 ν•˜μœ„ 디렉토리 export μˆ˜μ •
ab9a749 
λͺ¨λ“  ν•˜μœ„ 디렉토리듀이 λ‹€λ₯Έ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ 참쑰될 수 μžˆλ„λ‘ μˆ˜μ • μ™„λ£Œ
@y-minion
개발 ν™˜κ²½ μ„€μ •
f4a8943 
ν…ŒμΌμœˆλ“œ μ‚¬μš©μ‹œ λͺ¨λ…Έλ ˆν¬ κ΅¬μ‘°μ—μ„œ ν”„λ‘œμ νŠΈ μœ„μΉ˜ 찾을 수 μžˆλ„λ‘ μ„€μ •νŒŒμΌ 생성,
immer 라이브러리 μ„€μΉ˜.
@y-minion
♻️ λͺ©λ°μ΄ν„° μˆ˜μ •
dc6099a 
Rndκ³ λ €ν•΄ λ…Έλ“œμ˜ layout킀에 λ…Έλ“œμ˜ μ’Œν‘œκ°’μ΄ 좔가됨에 따라 데이터 μˆ˜μ •.
@y-minion
♻️ 에디터 λͺ¨λ“œ μ „μš© λ…Έλ“œ λ Œλ”λŸ¬ 래퍼 μ»΄ν¬λ„ŒνŠΈ μˆ˜μ •
480f570 
λͺ¨λ“  λ…Έλ“œλ₯Ό Dnd, 리사이징 ν•˜κΈ° μœ„ν•΄ Rnd라이브러리 채택.
Rnd라이브러리λ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄ 기쑴의 래퍼 μ»΄ν¬λ„ŒνŠΈλ₯Ό Rndμ»΄ν¬λ„ŒνŠΈλ‘œ κ°μ‹Έμ„œ λ…Έλ“œ λ Œλ”λŸ¬λ“€μ΄ 이동, 리사이징 κ°€λŠ₯ν•˜λ„λ‘ μˆ˜μ • μ™„λ£Œ
@y-minion
♻️ 라이브 λͺ¨λ“œ λ…Έλ“œ λ Œλ”λŸ¬ 래퍼 μ»΄ν¬λ„ŒνŠΈ μˆ˜μ • μ™„λ£Œ
72ac1a7 
κΈ°μ‘΄μ—λŠ” ν•˜λ‚˜μ˜ 래퍼 μ»΄ν¬λ„ŒνŠΈ μ•ˆμ—μ„œ 라이브, 에디터 λͺ¨λ“œλ₯Ό λΆ„κΈ° 처리 ν•˜λ„λ‘ ν–ˆμ§€λ§Œ, μ΄λ ‡κ²Œ 되면 라이브 λͺ¨λ“œμ—μ„œ μ‚¬μš©ν•˜μ§€μ•ŠλŠ” 에디터 λͺ¨λ“œμ™€ κ΄€λ ¨λœ 무거운 λ‘œμ§λ“€μ„ κ°–κ³  μžˆκ²Œλœλ‹€. κ·Έλž˜μ„œ 각 상황에 따라 λ‹€λ₯Έ 래퍼 μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•˜λ„λ‘ ν•˜κΈ° μœ„ν•΄ 뢄리 ν–ˆμŒ.
@y-minion y-minion merged commit 3f8ef9f into develop Jan 8, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@y-minion