Skip to content

Commit 891724e

Browse files
sikkzzsikkzz
committed
feat: 텍스트 컴포넌트 story 추가
1 parent 42c5df4 commit 891724e

File tree

7 files changed

+143
-8
lines changed

7 files changed

+143
-8
lines changed

‎src/App.module.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616
}
1717

1818
.Test3 {
19-
width: 99px;
19+
width: 216px;
2020
display: flex;
2121
flex-direction: column;
22-
gap: 16px;
22+
align-items: center;
23+
gap: 8px;
2324
}

‎src/App.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,17 @@ const App = () => {
1717
<div className={styles.Test3}>
1818
<IconButton size="sm" text="복사하기" iconName="paste" />
1919
</div>
20-
<Text>test</Text>
20+
<div className={styles.Test3}>
21+
<Text align="center" color="gradient" size="lg" weight="bold">
22+
영수증으로
23+
</Text>
24+
<Text align="center" color="gradient" size="lg" weight="bold">
25+
AI 음식 리뷰 남겨요
26+
</Text>
27+
<Text color="primary" weight="medium">
28+
손쉬운 음식 리뷰 작성
29+
</Text>
30+
</div>
2131
</div>
2232
);
2333
};

‎src/components/ui/Text/Text.module.scss‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
}
2525

2626
&.color-gradient {
27-
color: var(--color-text-gradient);
27+
background: var(--color-text-gradient);
28+
-webkit-background-clip: text;
29+
background-clip: text;
30+
-webkit-text-fill-color: transparent;
2831
}
2932

3033
&.size-xxs {
@@ -99,3 +102,16 @@
99102
line-clamp: 2;
100103
}
101104
}
105+
106+
.TextStory {
107+
display: flex;
108+
flex-direction: column;
109+
gap: 1rem;
110+
width: 200px;
111+
112+
.Wrapper {
113+
display: flex;
114+
gap: 1rem;
115+
justify-content: center;
116+
}
117+
}

‎src/components/ui/Text/Text.stories.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import Text from "@/components/ui/Text/Text";
2+
import styles from "@/components/ui/Text/Text.module.scss";
3+
import type { TextProps } from "@/components/ui/Text/Text.types";
4+
5+
import type { Meta, StoryObj, StoryFn } from "@storybook/react";
6+
7+
const meta: Meta<typeof Text> = {
8+
title: "Example/Text",
9+
component: Text,
10+
parameters: {
11+
layout: "centered",
12+
},
13+
tags: ["!autodocs"],
14+
};
15+
16+
export default meta;
17+
18+
const Template: StoryFn<TextProps> = ({ children, ...props }) => (
19+
<div className={styles.TextStory}>
20+
<Text {...props}>{children}</Text>
21+
</div>
22+
);
23+
24+
export const Primary: StoryObj<TextProps> = {
25+
render: Template,
26+
args: {
27+
size: "default",
28+
color: "black",
29+
weight: "regular",
30+
align: "left",
31+
truncated: false,
32+
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
33+
},
34+
};
35+
36+
export const SizeProps: StoryObj<typeof Text> = {
37+
render: () => (
38+
<div className={styles.TextStory}>
39+
<div className={styles.Wrapper}>
40+
<Text size="xxs" children="xxs" />
41+
</div>
42+
<div className={styles.Wrapper}>
43+
<Text size="xs" children="xs" />
44+
</div>
45+
<div className={styles.Wrapper}>
46+
<Text size="sm" children="sm" />
47+
</div>
48+
<div className={styles.Wrapper}>
49+
<Text size="default" children="default" />
50+
</div>
51+
<div className={styles.Wrapper}>
52+
<Text size="md" children="md" />
53+
</div>
54+
<div className={styles.Wrapper}>
55+
<Text size="lg" children="lg" />
56+
</div>
57+
<div className={styles.Wrapper}>
58+
<Text size="xl" children="xl" />
59+
</div>
60+
</div>
61+
),
62+
};
63+
64+
export const WeightProps: StoryObj<typeof Text> = {
65+
render: () => (
66+
<div className={styles.TextStory}>
67+
<div className={styles.Wrapper}>
68+
<Text weight="regular" children="regular" />
69+
</div>
70+
<div className={styles.Wrapper}>
71+
<Text weight="medium" children="medium" />
72+
</div>
73+
<div className={styles.Wrapper}>
74+
<Text weight="semi-bold" children="semi-bold" />
75+
</div>
76+
<div className={styles.Wrapper}>
77+
<Text weight="bold" children="bold" />
78+
</div>
79+
</div>
80+
),
81+
};
82+
83+
export const ColorPorps: StoryObj<typeof Text> = {
84+
render: () => (
85+
<div className={styles.TextStory}>
86+
<div className={styles.Wrapper}>
87+
<Text color="white" children="white" />
88+
</div>
89+
<div className={styles.Wrapper}>
90+
<Text color="black" children="black" />
91+
</div>
92+
<div className={styles.Wrapper}>
93+
<Text color="primary" children="primary" />
94+
</div>
95+
<div className={styles.Wrapper}>
96+
<Text color="secondary" children="secondary" />
97+
</div>
98+
<div className={styles.Wrapper}>
99+
<Text color="tertiary" children="tertiary" />
100+
</div>
101+
<div className={styles.Wrapper}>
102+
<Text color="quarternary" children="quarternary" />
103+
</div>
104+
<div className={styles.Wrapper}>
105+
<Text color="gradient" children="gradient" />
106+
</div>
107+
</div>
108+
),
109+
};

‎src/components/ui/Text/Text.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
1414
size = "default",
1515
className,
1616
weight = "regular",
17-
align,
17+
align = "left",
1818
truncated,
1919
...props
2020
},
@@ -30,7 +30,7 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
3030
styles[`color-${color}`],
3131
styles[`size-${size}`],
3232
styles[`weight-${weight}`],
33-
align && styles[`align-${align}`],
33+
styles[`align-${align}`],
3434
truncated === true
3535
? styles.truncated
3636
: isMultiLineTruncated && styles["multi-line-truncated"],

‎src/components/ui/Text/Text.types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
1818
color?: TextColor;
1919
size?: TextSize;
2020
weight?: TextWeight;
21-
bold?: boolean;
2221
align?: TextAlign;
2322
truncated?: boolean | number;
2423
}

‎src/styles/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
--color-text-secondary: #68696e;
1919
--color-text-tertiary: #a6a6ad;
2020
--color-text-quarternary: #e0e0e0;
21-
--color-text-gradient: linear-gradient(#d444ba, #443fb6);
21+
--color-text-gradient: linear-gradient(90deg, #d444ba, #443fb6);
2222

2323
--color-white: #ffffff;
2424
--color-black: #000000;

0 commit comments

Comments
 (0)