refactor: 피그마 디자인에 따른 리팩토링

woowacourse-teams · Aug 8, 2023 · 6b03f24 · 6b03f24
1 parent 19c4da4
commit 6b03f24
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 20 deletions.
diff --git a/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts b/frontend/src/components/trips/TripsHeader/TripsHeader.style.ts
@@ -18,7 +18,7 @@ export const headingStyling = css({
   marginLeft: '50px',
 
   '@media screen and (max-width: 600px)': {
-    marginLeft: '24px',
+    marginLeft: Theme.spacer.spacing4,
     padding: '36px 0',
     fontSize: Theme.heading.medium.fontSize,
   },

diff --git a/frontend/src/components/trips/TripsItemList/TripsItemList.style.ts b/frontend/src/components/trips/TripsItemList/TripsItemList.style.ts
@@ -5,7 +5,7 @@ export const containerStyling = css({
   minHeight: 'calc(100vh - 331px)',
 
   '@media screen and (max-width: 600px)': {
-    minHeight: 'calc(100vh - 48px)',
+    minHeight: `calc(100vh - ${Theme.spacer.spacing6})`,
   },
 });
 
@@ -25,31 +25,37 @@ export const gridBoxStyling = css({
   },
 });
 
-export const toggleGroupStyling = css({
-  marginTop: Theme.spacer.spacing3,
+export const headingStyling = css({
+  fontSize: Theme.heading.small.fontSize,
+
   '@media screen and (max-width: 600px)': {
-    display: 'none',
+    fontSize: Theme.heading.xSmall.fontSize,
+    lineHeight: Theme.heading.xSmall.lineHeight,
   },
 });
 
-export const headingStyling = css({
-  fontSize: Theme.heading.small.fontSize,
+export const toggleGroupStyling = css({
+  marginTop: Theme.spacer.spacing3,
+
   '@media screen and (max-width: 600px)': {
-    fontSize: Theme.heading.xSmall.fontSize,
+    display: 'none',
   },
 });
 
 export const textStyling = css({
   padding: '8px 0 16px',
   fontSize: Theme.text.large.fontSize,
+
   '@media screen and (max-width: 600px)': {
     fontSize: Theme.text.medium.fontSize,
+    lineHeight: Theme.text.medium.lineHeight,
   },
 });
 
 export const emptyBoxStyling = css({
   marginLeft: '50px',
+
   '@media screen and (max-width: 600px)': {
-    marginLeft: '24px',
+    marginLeft: Theme.spacer.spacing4,
   },
 });
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,
+  headingStyling,
   textStyling,
   toggleGroupStyling,
 } from '@components/trips/TripsItemList/TripsItemList.style';
@@ -73,10 +74,8 @@ TripsItemList.Empty = () => {
 
   return (
     <Box tag="section" css={[emptyBoxStyling, containerStyling]}>
-      <Heading size="small">아직 기록된 여행이 없습니다!</Heading>
-      <Text size="large" css={textStyling}>
-        여행 가방에 쌓인 먼지를 털어내고 여행을 기록해 보세요.
-      </Text>
+      <Heading css={headingStyling}>아직 기록된 여행이 없습니다!</Heading>
+      <Text css={textStyling}>여행 가방에 쌓인 먼지를 털어내고 여행을 기록해 보세요.</Text>
       <Button variant="primary" onClick={() => navigate(PATH.CREATE_TRIP)}>
         여행 기록하기
       </Button>

diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts b/frontend/src/components/trips/TutorialModal/TutorialModal.style.ts
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { Theme } from 'hang-log-design-system';
 
 export const boxStyling = css({
   display: 'flex',
@@ -16,7 +17,7 @@ export const boxStyling = css({
 
 export const modalStyling = css({
   '@media screen and (max-width: 600px)': {
-    padding: '18px',
+    width: `calc(100vw - ${Theme.spacer.spacing5})`,
   },
 });
 
@@ -27,5 +28,4 @@ export const carouselStyling = css({
 
 export const buttonStyling = css({
   width: '100%',
-  marginTop: 'auto',
 });
diff --git a/frontend/src/components/trips/TutorialModal/TutorialModal.tsx b/frontend/src/components/trips/TutorialModal/TutorialModal.tsx
@@ -29,10 +29,10 @@ const TutorialModal = () => {
           height={isMobile ? 353 : 412}
           images={[Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG]}
         />
-        <Button variant="primary" css={buttonStyling} onClick={closeTutorial}>
-          닫기
-        </Button>
       </Flex>
+      <Button variant="primary" css={buttonStyling} onClick={closeTutorial}>
+        닫기
+      </Button>
     </Modal>
   );
 };

diff --git a/frontend/src/pages/TripsPage/TripsPage.style.ts b/frontend/src/pages/TripsPage/TripsPage.style.ts
@@ -1,11 +1,12 @@
 import { css } from '@emotion/react';
+import { Theme } from 'hang-log-design-system';
 
 export const addButtonStyling = css({
   position: 'fixed',
   right: '50px',
   bottom: '50px',
   '@media screen and (max-width: 600px)': {
-    right: '28px',
-    bottom: '28px',
+    right: Theme.spacer.spacing4,
+    bottom: Theme.spacer.spacing4,
   },
 });