#37 feat: 블록 앞 아이콘 배치

Author: namdaeun

src/common/asset/svg/eclipse.svg

@@ -8,7 +8,6 @@ export const blockStyle = {
   padding: '0.5rem',
   justifyContent: 'center',
   alignItems: 'center',
-  gap: '0.5rem',
 
   borderRadius: '10rem',
 
@@ -19,3 +18,11 @@ export const blockStyle = {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 };
+
+export const spanStyle = {
+  padding: '2rem 0.8rem',
+
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};

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

@@ -1,15 +1,20 @@
-import { blockStyle } from '@/page/archiving/component/TimeBlock/TimeBlock.style';
+import { blockStyle, spanStyle } from '@/page/archiving/component/TimeBlock/TimeBlock.style';
 
 import { ReactNode } from 'react';
 
+import Eclipse from '@/common/asset/svg/eclipse.svg?react';
+
 interface TimeBlockProps {
   children: ReactNode;
 }
 
 const TimeBlock = ({ children }: TimeBlockProps) => {
   return (
     <>
-      <div css={blockStyle}>{children}</div>
+      <div css={blockStyle}>
+        <Eclipse width={47} height={47} css={{ flexShrink: 0 }} />
+        <span css={spanStyle}>{children}</span>
+      </div>
     </>
   );
 };

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

@@ -1,5 +1,5 @@
 import TimeBlock from '@/page/archiving/component/TimeBlock/TimeBlock';
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
   title: 'Page/Archiving/TimeBlock',
@@ -8,7 +8,7 @@ const meta = {
     layout: 'centered',
   },
   args: {
-    children: 'TimeBlock',
+    children: ['타임 블록fjlaeijfla'],
   },
   argTypes: {
     children: {