feat: 2d, 3d 페이지 생성 추가

play3step · Mar 12, 2024 · 3162ce4 · 3162ce4
1 parent 4784aae
commit 3162ce4
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/src/components/ProjectPage/SlideComponents/atom/AddSlide.js b/src/components/ProjectPage/SlideComponents/atom/AddSlide.js
@@ -5,23 +5,53 @@ import { ReactComponent as Page3d } from '../../../../assets/icon/3d.svg';
 
 function AddSlide({ onClick }) {
   return (
-    <AddSlideBox onClick={onClick}>
-      <Page2d width="3.3333333333333335vw" height="5.9259259259259265vh" />
-      <Page3d width="3.3333333333333335vw" height="5.9259259259259265vh" />
+    <AddSlideBox>
+      <Button onClick={onClick('2d')}>
+        <Page2d width="4.375vw" height="7.777777777777778vh" />
+      </Button>
+      <Button onClick={onClick('3d')}>
+        <Page3d width="4.375vw" height="7.777777777777778vh" />
+      </Button>
     </AddSlideBox>
   );
 }
 
 export default AddSlide;
 
-const AddSlideBox = styled.button`
+const AddSlideBox = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
+  position: relative;
   width: 18.958vw;
   height: 16.11vh;
-  border: 1px dashed;
+  border: 2.5px dashed;
   border-radius: 25px;
   background-color: #d9d9d9;
   flex-shrink: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 16%;
+    bottom: 16%;
+    width: 1.5px;
+    background-color: #000;
+  }
+`;
+
+const Button = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:focus {
+    outline: none;
+  }
 `;
diff --git a/src/pages/ProjectPage.jsx b/src/pages/ProjectPage.jsx
@@ -90,13 +90,14 @@ function ProjectPage() {
       ),
     }));
   };
-  const addSlide = () => {
+  const addSlide = (type) => {
     setPageValue((oldPageData) => {
       const newId = oldPageData.length > 0 ? oldPageData.length : 0;
-      const newPage = { id: newId, type: '2d' };
+      const newPage = { id: newId, type };
       return [...oldPageData, newPage];
     });
   };
+
   const onLineUpdate = (shapeId, newPoints) => {
     const currentPageShapes = Array.isArray(shapeValue[pageRendering])
       ? shapeValue[pageRendering]

diff --git a/src/store/recoil.jsx b/src/store/recoil.jsx
@@ -16,7 +16,7 @@ export const pageData = atom({
     { id: 0, type: '2d' },
     { id: 1, type: '3d' },
     { id: 2, type: '2d' },
-    { id: 3, type: '3d' },
+    { id: 3, type: '2d' },
   ],
 });