refactor: trips페이지 아이템 없을 때 모바일 환경 대응

woowacourse-teams · Aug 8, 2023 · dd17a55 · dd17a55
1 parent bba41f5
commit dd17a55
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}>