Skip to content

Commit

Permalink
feat: tag 컴포넌트 스토리북 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
sikkzz committed Feb 1, 2025
1 parent 51db87a commit 37c8648
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 0 deletions.
19 changes: 19 additions & 0 deletions src/components/ui/Tag/Tag.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,22 @@
fill: var(--color-gray500);
}
}

.TagStory {
display: flex;
flex-direction: column;
gap: 1rem;

.Wrapper {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
width: 300px;
}

.Text {
font-size: 1.125rem;
width: 120px;
}
}
44 changes: 44 additions & 0 deletions src/components/ui/Tag/Tag.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import Tag from "@/components/ui/Tag/Tag";
import styles from "@/components/ui/Tag/Tag.module.scss";
import type { TagProps } from "@/components/ui/Tag/Tag.types";

import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Tag> = {
title: "Example/Tag",
component: Tag,
parameters: {
layout: "centered",
},
tags: ["!autodocs"],
};

export default meta;

export const Primary: StoryObj<TagProps> = {
args: {
text: "태그",
variant: "primary",
isSelect: false,
},
};

export const VariantProps: StoryObj<typeof Tag> = {
render: () => (
<div className={styles.TagStory}>
<div className={styles.Wrapper}>
<p className={styles.Text}>primary</p>
<Tag variant="primary" text="primary" />
</div>
<div className={styles.Wrapper}>
<p className={styles.Text}>add</p>

<Tag variant="add" text="add" />
</div>
<div className={styles.Wrapper}>
<p className={styles.Text}>isSelect</p>
<Tag variant="primary" text="isSelect" isSelect />
</div>
</div>
),
};

0 comments on commit 37c8648

Please sign in to comment.