From 3162ce465bc1a0a2a1e9f9fbf884f976a955a9a6 Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Tue, 12 Mar 2024 14:21:25 +0900
Subject: [PATCH] =?UTF-8?q?feat:=202d,=203d=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SlideComponents/atom/AddSlide.js          | 42 ++++++++++++++++---
 src/pages/ProjectPage.jsx                     |  5 ++-
 src/store/recoil.jsx                          |  2 +-
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/ProjectPage/SlideComponents/atom/AddSlide.js b/src/components/ProjectPage/SlideComponents/atom/AddSlide.js
index 80563aa..9884627 100644
--- 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
index 5cf6448..08ec365 100644
--- 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
index edbb53a..d2cdd68 100644
--- 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' },
   ],
 });