Merge pull request #18 from themoment-team/feature/Card

Update Card Props
themoment-team · May 18, 2023 · 49dd991 · 49dd991
2 parents ad4a087 + 801bb28
commit 49dd991
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/src/components/MainContainer/index.tsx b/src/components/MainContainer/index.tsx
@@ -88,19 +88,7 @@ const MainContainer = ({ isDark }: { isDark: boolean }) => {
             onClick={handlePrevSlide}
           />
           <S.Cards>
-            <S.SlideBox
-              style={{
-                display: 'flex',
-                position: 'absolute',
-                // left: `${-(slideIndex * 100)}%`, // 슬라이드 이동에 따라 left 값을 변경
-                // left: `${
-                //   width > 1150 ? -(slideIndex * 100) : -(slideIndex * 104)
-                // }% `,
-                left: `${-(slideIndex * 100)}%`,
-                top: '0',
-                transition: 'left 0.3s ease-in-out',
-              }}
-            >
+            <S.SlideBox slideIndex={slideIndex}>
               {width > 1150 ? (
                 project.map((data, slideIndex) => (
                   <div key={slideIndex}>

diff --git a/src/components/MainContainer/style.ts b/src/components/MainContainer/style.ts
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+
 export const MainBox = styled.div`
   width: 100vw;
   height: calc(100vh - 7.25rem);
@@ -19,6 +20,7 @@ export const MainBox = styled.div`
   transition: ease-in-out 0.3s;
   background-color: ${({ theme: { gray } }) => gray[0]};
 `;
+
 export const CardContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -31,12 +33,14 @@ export const CardContainer = styled.div`
   }
   background-color: ${({ theme: { gray } }) => gray[0]};
 `;
+
 export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 79.0625rem;
 `;
+
 export const Cards = styled.div`
   width: 71.25rem;
   height: 21.5625rem;
@@ -50,4 +54,11 @@ export const Cards = styled.div`
     height: 81vw;
   }
 `;
-export const SlideBox = styled.div``;
+
+export const SlideBox = styled.div`
+  display: flex;
+  position: absolute;
+  left: ${({ slideIndex }: { slideIndex: number }) => -(slideIndex * 100)}%;
+  top: 0;
+  transition: left 0.3s ease-in-out;
+`;