Merge pull request #56 from themoment-team/feature/UpdateCSS

Update CSS

src/components/Slide/PC/style.ts

@@ -19,15 +19,13 @@ export const VectorWrapper = styled.div<{ isRight?: boolean }>`
 export const Cards = styled.div`
   width: 71rem;
   height: 21.5625rem;
-  position: relative;
   overflow: hidden;
 `;
 
 export const MoveContainer = styled.div<{ slideIndex: number }>`
   display: flex;
   gap: 1.75rem;
-  position: absolute;
-  left: -${({ slideIndex }) => slideIndex * 72.75}rem;
+  transform: translateX(-${({ slideIndex }) => slideIndex * 72.75}rem);
   transition: ease-in-out 0.3s;
 `;
 

src/components/Slide/Tablet/style.ts

@@ -26,16 +26,15 @@ export const Cards = styled.div`
     76vw + 1.75rem
   ); // 한페이지의 카드 width * 카드 개수 + 카드 사이 gap
   height: calc(76vw + 1.75rem);
-  position: relative;
   overflow: hidden;
 `;
 
 export const Slider = styled.div<{ slideIndex: number }>`
-  position: absolute;
-  left: ${({ slideIndex }) =>
-    `calc(${slideIndex * -76}vw + ${
-      slideIndex * -3.5
-    }rem)`}; // 한페이지의 카드 width * 카드 개수 + 카드 사이 gap * 2
+  transform: translateX(
+    ${({ slideIndex }) =>
+      `calc(${slideIndex * -76}vw + ${slideIndex * -3.5}rem)`}
+  );
+  // 한페이지의 카드 width * 카드 개수 + 카드 사이 gap * 2
   transition: ease-in-out 0.3s;
 `;
 

src/styles/GlobalStyle.tsx

@@ -42,6 +42,7 @@ export function GlobalStyle() {
           max-width: 100vw;
           overflow-x: hidden;
           background-color: ${theme.gray[0]};
+          transition: background-color 0.3s ease-in-out;
         }
 
         @media all and (min-width: 1150px) and (min-height: 1000px) {