2025/03/15 2

Edit Mode 구현 (3) - Object 회전 및 localStorage 저장 기능 추가

Edit Mode (편집 모드) 구현 Obejct 회전 기능localStorage 저장 기능  회전 기능 추가Overlay.jsx : 회전 아이콘 추가, Edit Mode일 때 동물을 회전할 수 있도록 함EditContext.jsx : rotate 함수를 만들어 선택딘 동물의 방향을 변경할 수 있도록 구현 Overlay.jsxexport const Overlay = () => { const { isEditMode, setEditMode, selectedId, setSelectedId, rotate } = useContext(EditContext); return ( {isEditMode && selectedId ? ( rotate("left")} /..

Edit Mode 구현 (2) - 상태 관리 내 데이터 추가, 컴포넌트 물리엔진 적용, Edit Mode에서의 Object 이동, UI 크기 조정과 시각화 개선

Edit Mode (편집 모드) 구현 객체 추가 및 이동 기능 구현 (객체 리스트 동적 관리/ 동물 및 공룡을 사용자가 마우스로 선택, 원하는 위치에 배치할 수 있는 기능 구현)오브젝트 컴포넌트에 물리엔진 적용gridHelper 추가하여 편집 모드 시각화 개선UI 크기 조정 상태관리에 데이터 추가Environment 컴포넌트에서 기존에 하드코딩된 동물 제거EditContext.jsx 파일에 데이터를 관리할 objects state생성 후 데이터를 objects state의 초기값으로 넣어줌데이터 구성crypto 객체를 통해 생성된 고유한 uuid동물인지 공룡인지 나타내는 typepositionrotation data 코드조각const data = [ { id: crypto.randomUUID(),..

728x90