refactor(swc): swc 지원 위해 @emotion/css 제거

src/components/Container/index.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { HTMLAttributes } from 'react';
 import { isMatchedSM } from '../../utils/mediaQuery';
 interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
@@ -9,11 +10,11 @@ export function Container({ children, fluid = false, ...props }: ContainerProps)
 
   return (
     <div
-      css={{
-        width: '100%',
-        maxWidth,
-        margin: '0 auto',
-      }}
+      css={css`
+        width: 100%;
+        max-width: ${maxWidth};
+        margin: 0 auto;
+      `}
       {...props}
     >
       {children}

src/components/Flex/index.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { CSSProperties, ElementType, forwardRef, PropsWithRef, Ref } from 'react';
 import { OverridableProps } from '../../types/OverridableProps';
 
@@ -26,12 +27,12 @@ const Flex = <T extends ElementType = 'div'>(
   return (
     <Component
       ref={ref}
-      css={{
-        display: 'flex',
-        flexDirection: direction,
-        alignItems: align,
-        justifyContent: justify,
-      }}
+      css={css`
+        display: flex;
+        flex-direction: ${direction};
+        align-items: ${align};
+        justify-content: ${justify};
+      `}
       {...rest}
     >
       {children}

src/components/Grid/Row.tsx

@@ -2,6 +2,7 @@ import { ElementType, Ref, forwardRef } from 'react';
 import { DEFAULT_ELEMENT } from './types';
 import { OverridableProps } from '../../types/OverridableProps';
 import { gridGutter } from './constants';
+import { css } from '@emotion/react';
 
 type BaseAlign = 'flex-start' | 'center' | 'flex-end';
 interface RowBaseProps {
@@ -26,15 +27,15 @@ const Row = <T extends ElementType = typeof DEFAULT_ELEMENT>(
   return (
     <Component
       ref={ref}
-      css={{
-        display: 'flex',
-        flexDirection: direction,
-        justifyContent: justify,
-        alignItems: alignItems,
-        margin: `0 ${gridGutter / 2}px`,
-        flexWrap: 'wrap',
-        boxSizing: 'border-box',
-      }}
+      css={css`
+        display: flex;
+        flex-direction: ${direction};
+        justify-content: ${justify};
+        align-items: ${alignItems};
+        margin: 0 ${gridGutter} 2px;
+        flex-wrap: wrap;
+        box-sizing: 'border-box';
+      `}
       {...props}
     />
   );

src/components/Skeleton/Circle.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { CombineElementProps } from '../../types/utils';
 
 type Props = Omit<
@@ -16,11 +17,13 @@ const Circle = ({ width, height, backgroundStyle, style, ...rest }: Props) => {
   return (
     <div
       css={{
-        display: 'inline-block',
-        width: `${width}px`,
-        height: `${height}px`,
-        background: backgroundStyle,
-        borderRadius: '50%',
+        ...css`
+          display: inline-block;
+          width: ${width}px;
+          height: ${height}px;
+          background: ${backgroundStyle};
+          border-radius: '50%';
+        `,
         ...style,
       }}
       role="img"

src/components/Skeleton/Rect.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { CombineElementProps } from '../../types/utils';
 
 type Props = Omit<
@@ -16,10 +17,12 @@ const Rect = ({ width, height, backgroundStyle, style, ...rest }: Props) => {
   return (
     <div
       css={{
-        display: 'inline-block',
-        width: `${width}px`,
-        height: `${height}px`,
-        background: backgroundStyle,
+        ...css`
+          display: inline-block;
+          width: ${width}px;
+          height: ${height}px;
+          background: ${backgroundStyle};
+        `,
         ...style,
       }}
       role="img"

src/components/Spacing/index.tsx

@@ -1,14 +1,16 @@
+import { css } from '@emotion/react';
+
 interface Props {
   size: number;
 }
 export const Spacing = ({ size }: Props) => {
   return (
     <div
-      css={{
-        width: 0,
-        display: 'block',
-        height: size,
-      }}
+      css={css`
+        width: 0;
+        display: 'block';
+        height: ${size};
+      `}
     />
   );
 };

src/components/Text/index.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { CSSProperties } from '@emotion/react/node_modules/@emotion/serialize';
 import { ElementType, Ref, forwardRef } from 'react';
 import { OverridableProps } from '../../types/OverridableProps';
@@ -24,14 +25,14 @@ const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
     <Component
       ref={ref}
       role="text"
-      css={{
-        display,
-        fontWeight: weight,
-        lineHeight,
-        fontSize: size,
-        color,
-        textAlign: align,
-      }}
+      css={css`
+        display: ${display};
+        font-weight: ${weight};
+        line-height: ${lineHeight};
+        font-size: ${size};
+        color: ${color};
+        text-align: ${align};
+      `}
       {...props}
     >
       {children}

src/stories/Components/Flex/Components.tsx

@@ -1,11 +1,13 @@
+import { css } from '@emotion/react';
+
 export function Box({ color }: { color: string }) {
   return (
     <div
-      css={{
-        width: 100,
-        height: 100,
-        backgroundColor: color,
-      }}
+      css={css`
+        width: 100%;
+        height: 100%;
+        background-color: ${color};
+      `}
     />
   );
 }

src/stories/Components/Spacing/Components.tsx

@@ -1,11 +1,13 @@
+import { css } from '@emotion/react';
+
 export function Box({ color }: { color: string }) {
   return (
     <div
-      css={{
-        width: 100,
-        height: 100,
-        backgroundColor: color,
-      }}
+      css={css`
+        width: 100;
+        height: 100;
+        background-color: ${color};
+      `}
     />
   );
 }

src/stories/Components/Stack/Components.tsx

@@ -1,11 +1,13 @@
+import { css } from '@emotion/react';
+
 export function Box({ color }: { color: string }) {
   return (
     <div
-      css={{
-        width: 100,
-        height: 100,
-        backgroundColor: color,
-      }}
+      css={css`
+        width: 100;
+        height: 100;
+        background-color: ${color};
+      `}
     />
   );
 }