style: 도형 svg 크기 조절

play3step · Mar 7, 2024 · 1a73fa4 · 1a73fa4
1 parent 40fc4ff
commit 1a73fa4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/ProjectPage/ItemComponents/ElementItem.jsx b/src/components/ProjectPage/ItemComponents/ElementItem.jsx
@@ -7,8 +7,10 @@ function ElementItem({ onAddShape }) {
     <ElementItemBox>
       <Itemposition>
         <ItemTitle title="도형" />
-        <ShapeBox onClick={() => onAddShape('Rectangle')} shape="Rectangle" />
-        <ShapeBox onClick={() => onAddShape('Circle')} shape="Circle" />
+        <ShapeBackground>
+          <ShapeBox onClick={() => onAddShape('Rectangle')} shape="Rectangle" />
+          <ShapeBox onClick={() => onAddShape('Circle')} shape="Circle" />
+        </ShapeBackground>
       </Itemposition>
     </ElementItemBox>
   );
@@ -23,3 +25,13 @@ const ElementItemBox = styled.div`
 const Itemposition = styled.div`
   margin-top: 1.878vh;
 `;
+
+const ShapeBackground = styled.div`
+  margin-top: 0.6vw;
+  height: 8.88888888888889vh;
+  background-color: #e9e9e9;
+  border-radius: 15px;
+  display: flex;
+  padding: 1vw;
+  gap: 0.5vw;
+`;
diff --git a/src/components/ProjectPage/ItemComponents/atom/ShapeBox.jsx b/src/components/ProjectPage/ItemComponents/atom/ShapeBox.jsx
@@ -5,8 +5,16 @@ import { ReactComponent as Circle } from '../../../../assets/shapes/circle.svg';
 function ShapeBox({ onClick, shape }) {
   return (
     <ShapeButton onClick={onClick}>
-      {shape === 'Rectangle' && <Rectangle alt="Rectangle" />}
-      {shape === 'Circle' && <Circle alt="Circle" />}
+      {shape === 'Rectangle' && (
+        <Rectangle
+          alt="Rectangle"
+          width="3.125vw"
+          height="5.555555555555555vh"
+        />
+      )}
+      {shape === 'Circle' && (
+        <Circle alt="Circle" width="3.125vw" height="5.555555555555555vh" />
+      )}
     </ShapeButton>
   );
 }