edit mode 2

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(),..

Edit Mode 구현 (1) - 모드 변경 GUI, 상태 관리 시스템 구축

Edit Mode (편집 모드) 구현 1. GUI 추가 : 사용자가 모드를 변경할 수 있도록 Canvas 위에 버튼 추가2. 상태 관리 :  EditMode를 관리하는 상태 관리 시스템 구축 (React Context API 활용)  상태 관리 (EditContext) 설정 context 폴더를 만들고 EditContext.jsx 파일 추가 EditContext.jsximport { createContext, useState } from "react";export const EditContext = createContext(); // createContext 함수를 사용, EditContext 생성export const EditProvider = ({ children }) => { const [isEd..

728x90