#37 chore: 스타일 인라인 말고 스타일 인자로 전달

Author: namdaeun

src/page/archiving/component/TimeBlock/TimeBlock.style.ts

@@ -1,22 +1,26 @@
+import { css } from '@emotion/react';
+
 import { theme } from '@/common/style/theme/theme';
 
-export const blockStyle = {
-  display: 'flex',
+export const blockStyle = (width: number) =>
+  css({
+    display: 'flex',
 
-  height: '5.6rem',
-  padding: '0.5rem',
-  justifyContent: 'center',
-  alignItems: 'center',
+    width: `${width}rem`,
+    height: '5.6rem',
+    padding: '0.5rem',
+    justifyContent: 'center',
+    alignItems: 'center',
 
-  borderRadius: '100px',
+    borderRadius: '100px',
 
-  backgroundColor: theme.colors.blue_100,
-  ...theme.text.body03,
+    backgroundColor: theme.colors.blue_100,
+    ...theme.text.body03,
 
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-};
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  });
 
 export const spanStyle = {
   padding: '2rem 0.8rem',

src/page/archiving/component/TimeBlock/TimeBlock.tsx

@@ -12,7 +12,7 @@ interface TimeBlockProps {
 const TimeBlock = ({ children, width }: TimeBlockProps) => {
   return (
     <>
-      <div css={[blockStyle, { width: `${width}rem` }]}>
+      <div css={blockStyle(width)}>
         <Eclipse width={47} height={47} css={{ flexShrink: 0 }} />
         <span css={spanStyle}>{children}</span>
       </div>