#37 feat: 블록 width 넘겨주기

Author: namdaeun

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

@@ -4,7 +4,6 @@ export const blockStyle = {
   display: 'flex',
 
   height: '5.6rem',
-  marginRight: 'auto',
   padding: '0.5rem',
   justifyContent: 'center',
   alignItems: 'center',
@@ -21,6 +20,7 @@ export const blockStyle = {
 
 export const spanStyle = {
   padding: '2rem 0.8rem',
+  marginRight: 'auto',
 
   overflow: 'hidden',
   textOverflow: 'ellipsis',

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

@@ -6,12 +6,13 @@ import Eclipse from '@/common/asset/svg/eclipse.svg?react';
 
 interface TimeBlockProps {
   children: ReactNode;
+  width: number;
 }
 
-const TimeBlock = ({ children }: TimeBlockProps) => {
+const TimeBlock = ({ children, width }: TimeBlockProps) => {
   return (
     <>
-      <div css={blockStyle}>
+      <div css={[blockStyle, { width: `${width}rem` }]}>
         <Eclipse width={47} height={47} css={{ flexShrink: 0 }} />
         <span css={spanStyle}>{children}</span>
       </div>

src/story/page/archiving/TimeBlock.stories.tsx

@@ -8,14 +8,20 @@ const meta = {
     layout: 'centered',
   },
   args: {
-    children: ['타임 블록fjlaeijfla'],
+    children: ['타임 블록'],
+    width: 10,
   },
   argTypes: {
     children: {
       control: {
         type: 'text',
       },
     },
+    width: {
+      control: {
+        type: 'number',
+      },
+    },
   },
 } satisfies Meta<typeof TimeBlock>;