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

 

Edit Mode (편집 모드) 구현

 

1. Obejct 회전 기능
2. localStorage 저장 기능

 

 

회전 기능 추가

• Overlay.jsx : 회전 아이콘 추가, Edit Mode일 때 동물을 회전할 수 있도록 함
• EditContext.jsx : rotate 함수를 만들어 선택딘 동물의 방향을 변경할 수 있도록 구현

 

Overlay.jsx

export const Overlay = () => {
  const { isEditMode, setEditMode, selectedId, setSelectedId, rotate } =
    useContext(EditContext);

  return (
    <div className="overlay">
      {isEditMode && selectedId ? (
        <>
          <RotateLeft onClick={() => rotate("left")} />
          <RotateRight onClick={() => rotate("right")} />
        </>
      ) : null}
      {selectedId ? <CloseIcon onClick={() => setSelectedId(null)} /> : null}
      <EditIcon
        onClick={() => {
          setEditMode((prev) => !prev);
        }}
      />
    </div>
  );
};

• isEditMode && selectedId일 때 회전 버튼 (RotateLeft, RotateRight) 표시
• 사용자가 버튼을 클릭하면 rotate("left") 또는 rotate("right")를 호출하여 회전

 

EditContext.jsx에서 rotate 함수 추가

const rotate = (type) => {
  setObj(
    objects.map((obj) =>
      obj.id === selectedId
        ? {
            ...obj,
            rotation: [
              obj.rotation[0],
              obj.rotation[1] + (type === "right" ? Math.PI / 12 : -Math.PI / 12),
              obj.rotation[2],
            ],
          }
        : obj
    )
  );
};

• rotate("left") → Y축 회전값을 -Math.PI /12만큼 감소
• rotate("rithgt") → X축 회전값을 +Math.PI/12만큼 증가
• setObj()를 통해 회전 변경을 적용 및 저장

 

 

localStorage를 통한 데이터 저장

• 변경된 동물들의 위치 및 방향이 자동으로 localStorage에 저장되도록 구현
• 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 기존 배치가 유지되도록 설정

 

EditContext.jsx에서 localStorage 저장 기능 추가

const initialData = localStorage.getItem("objects");

const [objects, setObject] = useState(
  initialData ? JSON.parse(initialData) : data
);

const setObj = (updatedObjects) => {
  setObject(updatedObjects);
  localStorage.setItem("objects", JSON.stringify(updatedObjects));
};

• localStorage.getItem("objects")를 이용, 기존 데이터 불러오기
• setObj()에서 상태 업데이트 + localStorage에 저장

 

Object이동 + localStorage에 저장