feat: getMediaQuery 유틸 함수 생성 및 적용

depromeet · Sep 11, 2024 · 8ec47c4 · 8ec47c4
1 parent e00536f
commit 8ec47c4
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/packages/core/css-utils/src/getMediaQuery.ts b/packages/core/css-utils/src/getMediaQuery.ts
@@ -0,0 +1,11 @@
+import { CSSObject } from '@emotion/react';
+
+export const getMediaQuery = (mediaQuery: string, cssObject: CSSObject) => {
+  return {
+    [`@media (${mediaQuery})`]: cssObject,
+  };
+};
+
+export const mobileMediaQuery = (cssObject: CSSObject) => {
+  return getMediaQuery('max-width : 320px', cssObject);
+};
diff --git a/packages/core/css-utils/src/index.ts b/packages/core/css-utils/src/index.ts
@@ -1,3 +1,4 @@
 export { getBorder } from './getBorder';
 export { getCssVar } from './getCssVar';
 export { getPadding } from './getPadding';
+export * from './getMediaQuery';
diff --git a/...ns/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx b/...ns/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { colors } from '@sambad/sds/theme';
 import Image from 'next/image';
 
@@ -49,9 +50,7 @@ const NewMeetingClosingContainer = (props: NewMeetingClosingContainerProps) => {
           aspectRatio: '11/5',
           bottom: '184px',
           transform: 'translate(-3%, 0)',
-          '@media (max-width: 320px)': {
-            display: 'none',
-          },
+          ...mobileMediaQuery({ display: 'none' }),
         }}
       >
         <Image src={Character} alt="meeting-character" priority fill />

diff --git a/...-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx b/...-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx
@@ -1,3 +1,4 @@
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { Txt } from '@sambad/sds/components';
 import { size, colors } from '@sambad/sds/theme';
 
@@ -8,9 +9,7 @@ export const InviteCodeHeader = () => {
         marginTop: size['4xl'],
         padding: `${size.xl} ${size['2xs']} ${size.xs}`,
         textAlign: 'center',
-        '@media (max-width: 320px)': {
-          marginTop: 0,
-        },
+        ...mobileMediaQuery({ marginTop: 0 }),
       }}
     >
       <Txt as="h1" color={colors.black} typography="heading1">

diff --git a/...src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx b/...src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx
@@ -1,3 +1,4 @@
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { Txt } from '@sambad/sds/components';
 import { size, colors } from '@sambad/sds/theme';
 
@@ -16,9 +17,7 @@ export const ClosingHeader = ({ meetingName }: ClosingHeaderProps) => {
         marginTop: size['4xl'],
         padding: `${size.xl} ${size['2xs']} ${size.xs}`,
         textAlign: 'center',
-        '@media (max-width: 320px)': {
-          marginTop: 0,
-        },
+        ...mobileMediaQuery({ marginTop: 0 }),
       }}
     >
       <Txt as="h1" color={colors.black} typography="heading1">

diff --git a/packages/web-domains/src/user/features/user-role-closing/containers/OwnerStartContainer.tsx b/packages/web-domains/src/user/features/user-role-closing/containers/OwnerStartContainer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { Txt } from '@sambad/sds/components';
 import { colors, size } from '@sambad/sds/theme';
 
@@ -29,14 +30,12 @@ export const OwnerStartContainer = () => {
         <div
           css={{
             marginTop: size['4xl'],
-            '@media (max-width: 320px)': {
-              marginTop: 0,
-            },
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             padding: `${size.xl} ${size['2xs']} ${size.xs}`,
+            ...mobileMediaQuery({ marginTop: 0 }),
           }}
         >
           <CheckIcon />
@@ -59,9 +58,7 @@ export const OwnerStartContainer = () => {
             css={{
               position: 'relative',
               width: '80%',
-              '@media (max-width: 320px)': {
-                width: '232px',
-              },
+              ...mobileMediaQuery({ marginTop: 0 }),
             }}
           >
             <OnwerCaracter css={{ position: 'absolute', height: '100%', width: '100%' }} />