Feat: media.tsx 파일 추가 #13

media.tsx 파일에 반응형 크기 설정 파일 생성

src/styles/media.tsx

@@ -0,0 +1,26 @@
+import { css, type CSSObject, type Interpolation } from 'styled-components';
+
+export type Breakpoints = 'small' | 'medium' | 'large' | 'notLarge';
+
+export const breakpoints: Record<Breakpoints, string> = {
+  small: '@media (max-width: 375px)',
+  medium: '@media (max-width: 744px)',
+  large: '@media (min-width: 745px)',
+  notLarge: '@media not all and (min-width: 745px)',
+};
+
+const media = Object.entries(breakpoints).reduce((acc, [key, value]) => {
+  return {
+    ...acc,
+    [key]: (
+      first: CSSObject | TemplateStringsArray,
+      ...interpolations: Interpolation<Object>[]
+    ) => css`
+      ${value} {
+        ${css(first, ...interpolations)}
+      }
+    `,
+  };
+}, {}) as Record<Breakpoints, any>;
+
+export default media;