Skip to content

Commit

Permalink
#37 feat: 블록 앞 아이콘 배치
Browse files Browse the repository at this point in the history
  • Loading branch information
namdaeun committed Jul 8, 2024
1 parent be9aa30 commit bcb08f5
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 5 deletions.
11 changes: 11 additions & 0 deletions src/common/asset/svg/eclipse.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion src/page/archiving/component/TimeBlock/TimeBlock.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export const blockStyle = {
padding: '0.5rem',
justifyContent: 'center',
alignItems: 'center',
gap: '0.5rem',

borderRadius: '10rem',

Expand All @@ -19,3 +18,11 @@ export const blockStyle = {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
};

export const spanStyle = {
padding: '2rem 0.8rem',

overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
};
9 changes: 7 additions & 2 deletions src/page/archiving/component/TimeBlock/TimeBlock.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/story/page/archiving/TimeBlock.stories.tsx
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -8,7 +8,7 @@ const meta = {
layout: 'centered',
},
args: {
children: 'TimeBlock',
children: ['타임 블록fjlaeijfla'],
},
argTypes: {
children: {
Expand Down

0 comments on commit bcb08f5

Please sign in to comment.