feat: 삭제 기능 추가

play3step · Mar 14, 2024 · 22348f1 · 22348f1
1 parent 172546c
commit 22348f1
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/src/components/ProjectPage/PageData/Project2d.jsx b/src/components/ProjectPage/PageData/Project2d.jsx
@@ -21,8 +21,8 @@ function Prjoect2d({
   handleImgDragEnd,
 }) {
   const [dimensions, setDimensions] = useState({
-    width: window.innerWidth * 0.833, // 예를 들어 뷰포트 너비의 75%
-    height: window.innerHeight * 0.833, // 뷰포트 높이의 75%
+    width: window.innerWidth * 0.833,
+    height: window.innerHeight * 0.833,
   });
 
   useEffect(() => {

diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
@@ -28,10 +28,6 @@ function MyPage() {
           <SortList />
           <ProjectGrid>
             <ProjectBox />
-            <ProjectBox />
-            <ProjectBox />
-            <ProjectBox />
-            <ProjectBox />
           </ProjectGrid>
         </ProjectContainer>
       </div>

diff --git a/src/pages/ProjectPage.jsx b/src/pages/ProjectPage.jsx
@@ -135,6 +135,57 @@ function ProjectPage() {
   useEffect(() => {
     handleClose(0);
   }, [pageRendering]);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (
+        !isEditing &&
+        (e.key === 'Backspace' || e.key === 'Delete') &&
+        selectedId
+      ) {
+        e.preventDefault();
+
+        const deleteObject = (prev, id) => {
+          const currentPageObjects = prev[pageRendering] || [];
+          const filteredObjects = currentPageObjects.filter(
+            (object) => object.id !== id,
+          );
+          return { ...prev, [pageRendering]: filteredObjects };
+        };
+
+        if (
+          shapeValue[pageRendering]?.some((object) => object.id === selectedId)
+        ) {
+          setShapeValue((prev) => deleteObject(prev, selectedId));
+        } else if (
+          textValue[pageRendering]?.some((object) => object.id === selectedId)
+        ) {
+          setTextValue((prev) => deleteObject(prev, selectedId));
+        } else if (
+          imgValue[pageRendering]?.some((object) => object.id === selectedId)
+        ) {
+          setImgValue((prev) => deleteObject(prev, selectedId));
+        }
+
+        selectShape(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    isEditing,
+    selectedId,
+    shapeValue,
+    textValue,
+    imgValue,
+    pageRendering,
+    setShapeValue,
+    setTextValue,
+    setImgValue,
+    selectShape,
+  ]);
+
   return (
     <ProjectContainer>
       <ProjectHeaer fullScreen={toggleFullScreen} />