From 7d24bc3463716c81002deaf21dbcaef093922c7b Mon Sep 17 00:00:00 2001
From: dladncks1217 <dlaxodud1217@gmail.com>
Date: Thu, 11 Jan 2024 14:36:29 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B0=9C=EC=84=A0=EC=97=90=20=EC=9D=98=ED=95=9C=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TutorialModal/TutorialModal.style.ts      | 38 +++++++---------
 .../trips/TutorialModal/TutorialModal.tsx     | 45 +++++++++++++------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
index 53a414d9d..cb5995c5b 100644
--- a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
+++ b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
@@ -2,33 +2,25 @@ import { css } from '@emotion/react';
 
 import { Theme } from 'hang-log-design-system';
 
-export const boxStyling = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-
-  width: '450px',
-  height: '500px',
-  marginTop: '30px',
-
-  '@media screen and (max-width: 600px)': {
-    width: '346px',
-    marginBottom: Theme.spacer.spacing6,
-  },
-});
-
 export const modalStyling = css({
+  paddingTop: Theme.spacer.spacing5,
+
   '@media screen and (max-width: 600px)': {
     width: `calc(100vw - ${Theme.spacer.spacing5})`,
-    height: `calc(100vh - ${Theme.spacer.spacing9})`,
   },
 });
 
-export const carouselStyling = css({
-  width: '385px',
-  height: '412px',
-});
+export const buttonStyling = (isMobile: boolean) =>
+  css({
+    width: '100%',
 
-export const buttonStyling = css({
-  width: '100%',
-});
+    marginTop: isMobile ? 0 : 48,
+  });
+
+export const ItemStyling = (width: number, height: number) =>
+  css({
+    '& > svg': {
+      width,
+      height,
+    },
+  });
diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
index 2b73c5dde..3a791e5b7 100644
--- a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
+++ b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
@@ -2,7 +2,13 @@ import { useEffect } from 'react';
 
 import { useRecoilValue } from 'recoil';
 
-import { SVGCarouselModal, useOverlay } from 'hang-log-design-system';
+import { Button, GeneralCarousel, Modal, useOverlay } from 'hang-log-design-system';
+
+import {
+  ItemStyling,
+  buttonStyling,
+  modalStyling,
+} from '@components/trips/TutorialModal/TutorialModal.style';
 
 import { mediaQueryMobileState } from '@store/mediaQuery';
 
@@ -14,24 +20,37 @@ import Tutorial4SVG from '@assets/svg/tutorial4.svg';
 const TutorialModal = () => {
   const { isOpen: isTutorialOpen, open: openTutorial, close: closeTutorial } = useOverlay();
   const isMobile = useRecoilValue(mediaQueryMobileState);
+  const carouselImages = [Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG];
 
   useEffect(() => {
     openTutorial();
   }, [openTutorial]);
 
   return (
-    <SVGCarouselModal
-      modalWidth={isMobile ? window.innerWidth - 32 - 48 : 385}
-      modalHeight={isMobile ? window.innerWidth : 412}
-      isOpen={isTutorialOpen}
-      closeModal={closeTutorial}
-      carouselWidth={isMobile ? window.innerWidth - 32 - 48 : 385}
-      carouselHeight={isMobile ? window.innerWidth : 412}
-      carouselImages={[Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG]}
-      showArrows
-      showDots
-      buttonGap={isMobile ? 0 : 48}
-    />
+    <Modal css={modalStyling} isOpen={isTutorialOpen} closeModal={closeTutorial}>
+      <GeneralCarousel
+        showNavigationOnHover={false}
+        width={isMobile ? window.innerWidth - 32 - 48 : 385}
+        height={isMobile ? window.innerWidth : 412}
+        length={4}
+      >
+        {carouselImages.map((Svg, index) => (
+          <GeneralCarousel.Item index={index} key={crypto.randomUUID()}>
+            <div
+              css={ItemStyling(
+                isMobile ? window.innerWidth - 32 - 48 : 385,
+                isMobile ? window.innerWidth : 412
+              )}
+            >
+              <Svg />
+            </div>
+          </GeneralCarousel.Item>
+        ))}
+      </GeneralCarousel>
+      <Button type="button" variant="primary" css={buttonStyling(isMobile)} onClick={closeTutorial}>
+        닫기
+      </Button>
+    </Modal>
   );
 };