Conversation
피그마 기획서에 맞게 스타일 수정. 프로젝트 커스텀 색상 유틸리티 등록 완료
선택된 노드의 id만 추출하는게 아닌 하위의 자식 노드들까지 트리를 타고 내려가서 모든 노드 Id를 추출하는 함수 구현
기존에 set을 이용해 구현했으나, 실제로 상태는 수정하지 않고 삭제할 노드id를 리스트로 반환하는 로직이었음. 실제 상태를 수정하지 않고 set을 쓰고 있으므로 Selector 함수로 수정. 이제 삭제할 노드 Id 리스트를 자유롭게 참조할 수 있도록 수정 완료함.
현재는 목서버인 json-server에서 특정 페이지id에 해당하는 Node를 가져오도록 구현.
서버액션에서 받은 nodes를 props로 받아 Editor스토어의 nodes 상태를 업데이트합니다.
초기에 리렌더링이 될때마다 스토어가 업데이트 되던 현상 수정 완료. 의존성배열의 값이 참조값이라 리렌더링이 될때마다 계속해서 스토어의 상태도 업데이트되던 문제 발생. useRef를 이용해 마운트 초기 1회만 서버액션에서 받아온 데이터로 업데이트 하고, 이후에는 클라이언트 측에서 데이터를 관리할 예정입니다.
입력받은 NodeId를 통해 nodes상태에서 해당하는 노드를 찾아 삭제하는 액션 구현 완료
Node의 모든 속성을 통합 업데이트 하는 액션 추가 완료. 스토어에서 내보내는 모든 커스텀 훅에 대한 주석 추가 완료
개발 환경에서 외부의 모든 파일을 가져 올 수 있도록 와일드 카드 설정 완료. json서버 실행 스크립트 추가. @repo/ui를 editor/apps에서 사용할 수 있도록 tsconfig에 경로 추가
canvas에서 보여줄 격자 가이드 라인 유틸리티 추가
마우스 휠 이벤트에 따라 캔버스를 조작할 수 있는 유틸리티 추가 완료. 조건에 따라 줌, 패닝 모드로 변하도록 구현 완료. 마우스 감도 조정 완료.
각 이벤트에 따라 캔버스 패닝이 가능하도록 구현 완료. useRef와 여러 훅들을 매개변수로 받아 유틸리티 함수에서 사용할 수 있도록 구현 완료.
캔버스를 조작하는 유틸리티들을 캔버스 위젯과 연동 완료. 이때 canvas의 크기가 보장이 안되서 노드들이 보이지 않던 에러가 있었으나, 캔버스 컨테이너의 크기를 보장 함으로써 노드 렌더링 버그를 해결 완료했음.
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.
개요
캔버스 렌더링을 위한 기본 위젯 설정, 패닝/줌 유틸리티 구현, 그리고 에디터 스토어의 핵심 액션(노드 업데이트, 삭제 등)을 구현했습니다.
주요 변경 사항
🎨 캔버스 및 렌더링
Canvas컴포넌트 환경 설정 및 개발📦 에디터 스토어 및 상태 관리 (Zustand + React Query)
updateNode: 노드 속성 업데이트 로직 구현deleteNode: 노드 삭제 및 삭제 대상 ID 탐색 로직(getDescendantIds) 구현EditorStoreInitializer: 스토어 초기화 로직 리팩토링useEditorStore등) 추가 및 JSDoc 문서화🛠 기타 리팩토링