Skip to content

Commit

Permalink
storybook: SVG, PNG 에셋 스토리북 추가 및 불필요한 에셋 삭제 적용
Browse files Browse the repository at this point in the history
  • Loading branch information
semnil5202 committed Jan 11, 2024
1 parent 1eaf3d0 commit 0fe32c1
Show file tree
Hide file tree
Showing 15 changed files with 368 additions and 31 deletions.
Binary file removed src/assets/image/header_logo.png
Binary file not shown.
Binary file removed src/assets/image/main_logo.png
Binary file not shown.
Binary file removed src/assets/image/plus.png
Binary file not shown.
File renamed without changes
40 changes: 20 additions & 20 deletions src/components/Header/Header.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Meta, StoryObj } from '@storybook/react';
import Header from './Header';
import {
SVGBack24B,
SVGBack24W,
SVGCheck24,
SVGFeedDotsVertical,
SVGFilter,
SVGMainLogo,
SVGSetting,
SVGHeaderBack24B,
SVGHeaderBack24W,
SVGHeaderCheck24,
SVGTripleDots,
SVGHeaderFilter,
SVGHeaderMainLogo,
SVGHeaderSetting,
} from '../..';

const meta = {
Expand Down Expand Up @@ -43,10 +43,10 @@ export const Default: Story = {
<>
<Header main={main} spacerPosition={spacerPosition}>
<Header.Item>
<SVGMainLogo cursor="pointer" />
<SVGHeaderMainLogo cursor="pointer" />
</Header.Item>
<Header.Item>
<SVGFilter cursor="pointer" />
<SVGHeaderFilter cursor="pointer" />
</Header.Item>
</Header>
</>
Expand All @@ -60,8 +60,8 @@ export const FeedDetail: Story = {
},
render: ({ main, spacerPosition }) => (
<Header main={main} spacerPosition={spacerPosition}>
<SVGBack24W cursor="pointer" />
<SVGMainLogo cursor="pointer" />
<SVGHeaderBack24W cursor="pointer" />
<SVGHeaderMainLogo cursor="pointer" />
</Header>
),
};
Expand All @@ -72,10 +72,10 @@ export const MyFeedDetail: Story = {
},
render: ({ main, spacerPosition }) => (
<Header main={main} spacerPosition={spacerPosition}>
<SVGBack24W cursor="pointer" />
<SVGMainLogo cursor="pointer" />
<SVGHeaderBack24W cursor="pointer" />
<SVGHeaderMainLogo cursor="pointer" />
<div style={{ position: 'relative' }}>
<SVGFeedDotsVertical cursor="pointer" />
<SVGTripleDots cursor="pointer" />
</div>
</Header>
),
Expand All @@ -87,7 +87,7 @@ export const WriteFeed: Story = {
},
render: ({ main, spacerPosition }) => (
<Header main={main} spacerPosition={spacerPosition}>
<SVGBack24B cursor="pointer" />
<SVGHeaderBack24B cursor="pointer" />
<span
style={{
fontSize: '16px',
Expand All @@ -97,7 +97,7 @@ export const WriteFeed: Story = {
>
글쓰기
</span>
<SVGCheck24 cursor="pointer" />
<SVGHeaderCheck24 cursor="pointer" />
</Header>
),
};
Expand Down Expand Up @@ -136,10 +136,10 @@ export const Profile: Story = {
render: ({ main, spacerPosition }) => (
<Header main={main} spacerPosition={spacerPosition}>
<Header.Item>
<SVGMainLogo cursor="pointer" />
<SVGHeaderMainLogo cursor="pointer" />
</Header.Item>
<Header.Item>
<SVGSetting cursor="pointer" />
<SVGHeaderSetting cursor="pointer" />
</Header.Item>
</Header>
),
Expand All @@ -153,7 +153,7 @@ export const ProfileSetting: Story = {
render: ({ main, spacerPosition }) => (
<Header main={main} spacerPosition={spacerPosition}>
<Header.Item>
<SVGBack24W cursor="pointer" />
<SVGHeaderBack24W cursor="pointer" />
</Header.Item>
<Header.Item>
<span
Expand All @@ -178,7 +178,7 @@ export const ProfileMore: Story = {
render: ({ main, spacerPosition }) => (
<Header main={main} spacerPosition={spacerPosition}>
<Header.Item>
<SVGBack24B cursor="pointer" />
<SVGHeaderBack24B cursor="pointer" />
</Header.Item>
<Header.Item>
<span
Expand Down
6 changes: 3 additions & 3 deletions src/components/Navigation/Navigation.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
SVGNavActiveProfile,
SVGNavFeed,
SVGNavProfile,
SVGWrite24,
SVGNavWrite24,
} from '../..';
import { userEvent, within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
Expand Down Expand Up @@ -44,7 +44,7 @@ export const Default: Story = {
position="center"
onClick={() => setNavPosition('center')}
>
<SVGWrite24 />
<SVGNavWrite24 />
</Navigation.Item>
<Navigation.Item onClick={() => setNavPosition('right')}>
{navPosition === 'right' ? (
Expand Down Expand Up @@ -80,7 +80,7 @@ export const InteractionTest: Story = {
position="center"
onClick={() => setNavPosition('center')}
>
<SVGWrite24 />
<SVGNavWrite24 />
</Navigation.Item>
<Navigation.Item
data-testid="navigation-item"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tag/Tag.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from '@emotion/styled';

import { ReactComponent as SVGCancel } from '../../assets/svg/x.svg';
import { ReactComponent as SVGCancel } from '../../assets/svg/cancel.svg';
import Spacer from '../Spacer/Spacer';
import Text from '../Text/Text';

Expand Down
8 changes: 1 addition & 7 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import PNGAgreementBackground from './assets/image/agreement_bg.png';
import PNGBottomBackground from './assets/image/bottom_bg.png';
import PNGHeaderLogo from './assets/image/header_logo.png';
import PNGIdeaBackground1 from './assets/image/idea_back_1.png';
import PNGIdeaBackground2 from './assets/image/idea_back_2.png';
import PNGIdeaBackground3 from './assets/image/idea_back_3.png';
import PNGIdeaBackground4 from './assets/image/idea_back_4.png';
import PNGIdeaBackground5 from './assets/image/idea_back_5.png';
import PNGMainLogo from './assets/image/main_logo.png';
import PNGPlus from './assets/image/plus.png';
import Badge from './components/Badge/Badge';
import BottomSheet from './components/BottomSheet/BottomSheet';
import Box from './components/Box/Box';
Expand Down Expand Up @@ -60,13 +57,13 @@ export { ReactComponent as SVGCardLike14 } from './assets/svg/card/like_14.svg';
export { ReactComponent as SVGCardScrap14 } from './assets/svg/card/scrap_14.svg';
export { ReactComponent as SVGCardView14 } from './assets/svg/card/view_14.svg';

export { ReactComponent as SVGNavImageWrite } from './assets/svg/navigation/image_write.svg';
export { ReactComponent as SVGNavWrite24 } from './assets/svg/navigation/write24.svg';
export { ReactComponent as SVGNavActiveFeed } from './assets/svg/navigation/feed_active.svg';
export { ReactComponent as SVGNavFeed } from './assets/svg/navigation/feed.svg';
export { ReactComponent as SVGNavActiveProfile } from './assets/svg/navigation/profile_active.svg';
export { ReactComponent as SVGNavProfile } from './assets/svg/navigation/profile.svg';

export { ReactComponent as SVGLoginImageWrite } from './assets/svg/login/image_write.svg';
export { ReactComponent as SVGLoginNaver } from './assets/svg/login/naver.svg';
export { ReactComponent as SVGLoginKakao } from './assets/svg/login/kakao.svg';
export { ReactComponent as SVGLoginLogo } from './assets/svg/login/login_logo.svg';
Expand Down Expand Up @@ -109,12 +106,9 @@ export {
theme,
PNGAgreementBackground,
PNGBottomBackground,
PNGHeaderLogo,
PNGIdeaBackground1,
PNGIdeaBackground2,
PNGIdeaBackground3,
PNGIdeaBackground4,
PNGIdeaBackground5,
PNGMainLogo,
PNGPlus,
};
72 changes: 72 additions & 0 deletions src/stories/PNGCommon.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { Meta, StoryObj } from '@storybook/react';

import {
PNGAgreementBackground,
PNGBottomBackground,
PNGIdeaBackground1,
PNGIdeaBackground2,
PNGIdeaBackground3,
PNGIdeaBackground4,
PNGIdeaBackground5,
} from '..';

const meta = {
title: 'Assets/PNG/Common',
tags: ['autodocs'],
} as Meta<object>;

export default meta;
type Story = StoryObj<object>;

export const Default: Story = {
render: () => (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
<div>
<img
width={331}
height={331}
src={PNGAgreementBackground}
alt="PNGAgreementBackground"
/>
<img
width={375}
height={75}
src={PNGBottomBackground}
alt="PNGBottomBackground"
/>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
<img
width={140}
height={180}
src={PNGIdeaBackground1}
alt="PNGIdeaBackground1"
/>
<img
width={140}
height={180}
src={PNGIdeaBackground2}
alt="PNGIdeaBackground2"
/>
<img
width={140}
height={180}
src={PNGIdeaBackground3}
alt="PNGIdeaBackground3"
/>
<img
width={140}
height={180}
src={PNGIdeaBackground4}
alt="PNGIdeaBackground4"
/>
<img
width={140}
height={180}
src={PNGIdeaBackground5}
alt="PNGIdeaBackground5"
/>
</div>
</div>
),
};
27 changes: 27 additions & 0 deletions src/stories/SVGCard.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Meta, StoryObj } from '@storybook/react';

import {
SVGCardComment14,
SVGCardLike14,
SVGCardScrap14,
SVGCardView14,
} from '..';

const meta = {
title: 'Assets/SVG/Card',
tags: ['autodocs'],
} as Meta<object>;

export default meta;
type Story = StoryObj<object>;

export const Default: Story = {
render: () => (
<div style={{ display: 'flex', gap: '20px' }}>
<SVGCardComment14 />
<SVGCardLike14 />
<SVGCardScrap14 />
<SVGCardView14 />
</div>
),
};
43 changes: 43 additions & 0 deletions src/stories/SVGCommon.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Meta, StoryObj } from '@storybook/react';

import {
SVGAdd24,
SVGCancel,
SVGCheckFilled24,
SVGFeed24,
SVGFeedFilled24,
SVGProfile24,
SVGProfileFilled24,
SVGScrap24,
SVGScrapFilled24,
SVGTextRequired,
SVGTripleDots,
SVGDropdownArrow,
} from '..';

const meta = {
title: 'Assets/SVG/Common',
tags: ['autodocs'],
} as Meta<object>;

export default meta;
type Story = StoryObj<object>;

export const Default: Story = {
render: () => (
<div style={{ display: 'flex', gap: '20px' }}>
<SVGAdd24 />
<SVGDropdownArrow />
<SVGCancel />
<SVGCheckFilled24 />
<SVGFeed24 />
<SVGFeedFilled24 />
<SVGProfile24 />
<SVGProfileFilled24 />
<SVGScrap24 />
<SVGScrapFilled24 />
<SVGTextRequired />
<SVGTripleDots />
</div>
),
};
44 changes: 44 additions & 0 deletions src/stories/SVGFeed.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Meta, StoryObj } from '@storybook/react';

import {
SVGFeedWrite40,
SVGFeedLike,
SVGFeedUnLike,
SVGFeedReCommentLine,
SVGFeedMessage,
SVGFeedPencil,
SVGFeedScrap,
SVGFeedUnScrap,
} from '..';

const meta = {
title: 'Assets/SVG/Feed',
tags: ['autodocs'],
} as Meta<object>;

export default meta;
type Story = StoryObj<object>;

export const Default: Story = {
render: () => (
<div style={{ display: 'flex', gap: '20px' }}>
<div
style={{
width: 'min-content',
height: 'min-content',
backgroundColor: '#5F27FF',
}}
>
<SVGFeedWrite40 />
</div>
<SVGFeedLike />
<SVGFeedUnLike />
<SVGFeedMessage />
<SVGFeedPencil />
<SVGFeedReCommentLine />
<SVGFeedScrap />
<SVGFeedUnLike />
<SVGFeedUnScrap />
</div>
),
};
Loading

0 comments on commit 0fe32c1

Please sign in to comment.