From dd17a552230d2818cea06a4ebd0defe9c1bcf4c7 Mon Sep 17 00:00:00 2001
From: dladncks1217 <dlaxodud1217@gmail.com>
Date: Tue, 8 Aug 2023 13:38:14 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20trips=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=97=86=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=99=98=EA=B2=BD=20=EB=8C=80?=
 =?UTF-8?q?=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../trips/TripsItemList/TripsItemList.style.ts | 18 ++++++++++++++++++
 .../trips/TripsItemList/TripsItemList.tsx      |  3 ++-
 .../trips/TutorialModal/TutorialModal.style.ts |  8 +++++++-
 .../trips/TutorialModal/TutorialModal.tsx      | 15 +++++++++++----
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/trips/TripsItemList/TripsItemList.style.ts b/frontend/src/components/trips/TripsItemList/TripsItemList.style.ts
index 899f1b464..5fdee102d 100644
--- a/frontend/src/components/trips/TripsItemList/TripsItemList.style.ts
+++ b/frontend/src/components/trips/TripsItemList/TripsItemList.style.ts
@@ -32,6 +32,24 @@ export const toggleGroupStyling = css({
   },
 });
 
+export const headingStyling = css({
+  fontSize: Theme.heading.small.fontSize,
+  '@media screen and (max-width: 600px)': {
+    fontSize: Theme.heading.xSmall.fontSize,
+  },
+});
+
+export const textStyling = css({
+  padding: '8px 0 16px',
+  fontSize: Theme.text.large.fontSize,
+  '@media screen and (max-width: 600px)': {
+    fontSize: Theme.text.medium.fontSize,
+  },
+});
+
 export const emptyBoxStyling = css({
   marginLeft: '50px',
+  '@media screen and (max-width: 600px)': {
+    marginLeft: '24px',
+  },
 });
diff --git a/frontend/src/components/trips/TripsItemList/TripsItemList.tsx b/frontend/src/components/trips/TripsItemList/TripsItemList.tsx
index 23b9924b1..31309ab7a 100644
--- a/frontend/src/components/trips/TripsItemList/TripsItemList.tsx
+++ b/frontend/src/components/trips/TripsItemList/TripsItemList.tsx
@@ -11,6 +11,7 @@ import {
   containerStyling,
   emptyBoxStyling,
   gridBoxStyling,
+  textStyling,
   toggleGroupStyling,
 } from '@components/trips/TripsItemList/TripsItemList.style';
 import TutorialModal from '@components/trips/TutorialModal/TutorialModal';
@@ -73,7 +74,7 @@ TripsItemList.Empty = () => {
   return (
     <Box tag="section" css={[emptyBoxStyling, containerStyling]}>
       <Heading size="small">아직 기록된 여행이 없습니다!</Heading>
-      <Text css={{ padding: '8px 0 16px' }} size="large">
+      <Text size="large" css={textStyling}>
         여행 가방에 쌓인 먼지를 털어내고 여행을 기록해 보세요.
       </Text>
       <Button variant="primary" onClick={() => navigate(PATH.CREATE_TRIP)}>
diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
index 7cd790d60..8727657a7 100644
--- a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
+++ b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
@@ -9,11 +9,17 @@ export const boxStyling = css({
   height: '581px',
   marginTop: '30px',
   '@media screen and (max-width: 600px)': {
-    width: '382px',
+    width: '346px',
     height: '493px',
   },
 });
 
+export const modalStyling = css({
+  '@media screen and (max-width: 600px)': {
+    padding: '18px',
+  },
+});
+
 export const carouselStyling = css({
   width: '385px',
   height: '412px',
diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
index a95c1bfbb..29053a72f 100644
--- a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
+++ b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
@@ -2,24 +2,31 @@ import Tutorial1SVG from '@assets/svg/tutorial1.svg';
 import Tutorial2SVG from '@assets/svg/tutorial2.svg';
 import Tutorial3SVG from '@assets/svg/tutorial3.svg';
 import Tutorial4SVG from '@assets/svg/tutorial4.svg';
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import { Button, Flex, Modal, SVGCarousel, useOverlay } from 'hang-log-design-system';
 import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
 
-import { boxStyling, buttonStyling } from '@components/trips/TutorialModal/TutorialModal.style';
+import {
+  boxStyling,
+  buttonStyling,
+  modalStyling,
+} from '@components/trips/TutorialModal/TutorialModal.style';
 
 const TutorialModal = () => {
   const { isOpen: isTutorialOpen, open: openTutorial, close: closeTutorial } = useOverlay();
+  const isMobile = useRecoilValue(mediaQueryMobileState);
 
   useEffect(() => {
     openTutorial();
   }, [openTutorial]);
 
   return (
-    <Modal isOpen={isTutorialOpen} closeModal={closeTutorial} hasCloseButton>
+    <Modal isOpen={isTutorialOpen} closeModal={closeTutorial} hasCloseButton css={modalStyling}>
       <Flex css={boxStyling}>
         <SVGCarousel
-          width={385}
-          height={412}
+          width={isMobile ? 340 : 385}
+          height={isMobile ? 353 : 412}
           images={[Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG]}
         />
         <Button variant="primary" css={buttonStyling} onClick={closeTutorial}>