Skip to content

Commit 7c80156

Browse files
SeojunhwanSeojunhwan
committed
docs(66): Bleed, Spacer, Stack, Text 컴포넌트의 스토리북 예제 및 문서 개선
1 parent 7fc2154 commit 7c80156

File tree

4 files changed

+422
-97
lines changed

4 files changed

+422
-97
lines changed

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

Lines changed: 148 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,66 @@ const meta: Meta<typeof Bleed> = {
66
title: "Components/Bleed",
77
component: Bleed,
88
tags: ["autodocs"],
9+
parameters: {
10+
docs: {
11+
description: {
12+
component:
13+
"Bleed 컴포넌트는 부모 요소의 여백(padding)을 무시하고 특정 방향으로 확장되어야 하는 UI를 구현할 때 사용됩니다. 이를 통해 페이지나 섹션의 전체 너비를 차지하는 컴포넌트를 쉽게 만들 수 있습니다.",
14+
},
15+
},
16+
},
917
argTypes: {
18+
as: {
19+
control: false,
20+
description: "컴포넌트의 HTML 태그를 설정합니다.",
21+
table: {
22+
type: { summary: "React.ElementType" },
23+
defaultValue: { summary: "div" },
24+
},
25+
},
1026
inline: {
1127
control: "number",
28+
description:
29+
"좌우 여백을 설정합니다. `inlineStart`와 `inlineEnd`를 동시에 설정합니다.",
30+
table: {
31+
type: { summary: "number | string" },
32+
},
1233
},
1334
block: {
1435
control: "number",
36+
description:
37+
"상하 여백을 설정합니다. `blockStart`와 `blockEnd`를 동시에 설정합니다.",
38+
table: {
39+
type: { summary: "number | string" },
40+
},
1541
},
1642
inlineStart: {
1743
control: "number",
44+
description: "시작 방향(LTR 환경에서는 왼쪽)의 여백을 설정합니다.",
45+
table: {
46+
type: { summary: "number | string" },
47+
},
1848
},
1949
inlineEnd: {
2050
control: "number",
51+
description: "끝 방향(LTR 환경에서는 오른쪽)의 여백을 설정합니다.",
52+
table: {
53+
type: { summary: "number | string" },
54+
},
2155
},
2256
blockStart: {
2357
control: "number",
58+
description: "위쪽 여백을 설정합니다.",
59+
table: {
60+
type: { summary: "number | string" },
61+
},
2462
},
2563
blockEnd: {
2664
control: "number",
65+
description: "아래쪽 여백을 설정합니다.",
66+
table: {
67+
type: { summary: "number | string" },
68+
},
2769
},
2870
},
2971
};
@@ -33,38 +75,131 @@ type Story = StoryObj<typeof Bleed>;
3375

3476
export const InlineBleed: Story = {
3577
render: () => (
36-
<div style={{ padding: "10px" }}>
37-
<Bleed inline={10}>
38-
<span>Hello</span>
39-
<span>World</span>
78+
<div
79+
style={{
80+
padding: "16px",
81+
backgroundColor: "rgba(255, 0, 0, 0.1)",
82+
width: "300px",
83+
}}
84+
>
85+
<div
86+
style={{
87+
backgroundColor: "rgba(0, 255, 0, 0.1)",
88+
padding: "12px",
89+
textAlign: "center",
90+
}}
91+
>
92+
컨텐츠 영역
93+
</div>
94+
<Bleed inline={16}>
95+
<div
96+
style={{
97+
backgroundColor: "rgba(0, 0, 255, 0.1)",
98+
padding: "12px",
99+
textAlign: "center",
100+
}}
101+
>
102+
Bleed 영역
103+
</div>
40104
</Bleed>
41-
<span>요거</span>
105+
<div
106+
style={{
107+
backgroundColor: "rgba(0, 255, 0, 0.1)",
108+
padding: "12px",
109+
textAlign: "center",
110+
marginTop: "8px",
111+
}}
112+
>
113+
컨텐츠 영역
114+
</div>
42115
</div>
43116
),
44117
parameters: {
45118
docs: {
46119
description: {
47-
story: "인라인 블레드 컴포넌트입니다.",
120+
story:
121+
"`inline` prop을 사용하여 좌우로 확장된 컴포넌트입니다. 부모 요소의 `padding`을 무시하고 좌우로 확장됩니다. 붉은 영역이 부모의 padding 영역을 시각화합니다.",
48122
},
49123
},
50124
},
51125
};
52126

53127
export const BlockBleed: Story = {
54128
render: () => (
55-
<div style={{ padding: "10px" }}>
56-
<Bleed block={10}>
57-
<span>Hello</span>
58-
<span>World</span>
129+
<div
130+
style={{
131+
padding: "16px",
132+
backgroundColor: "rgba(255, 0, 0, 0.1)",
133+
}}
134+
>
135+
<div
136+
style={{
137+
backgroundColor: "rgba(0, 255, 0, 0.1)",
138+
padding: "12px",
139+
textAlign: "center",
140+
}}
141+
>
142+
컨텐츠 영역
143+
</div>
144+
<Bleed block={16}>
145+
<div
146+
style={{
147+
backgroundColor: "rgba(0, 0, 255, 0.1)",
148+
padding: "12px",
149+
textAlign: "center",
150+
}}
151+
>
152+
Bleed 영역
153+
</div>
154+
</Bleed>
155+
<div
156+
style={{
157+
backgroundColor: "rgba(0, 255, 0, 0.1)",
158+
padding: "12px",
159+
textAlign: "center",
160+
marginTop: "8px",
161+
}}
162+
>
163+
컨텐츠 영역
164+
</div>
165+
</div>
166+
),
167+
parameters: {
168+
docs: {
169+
description: {
170+
story:
171+
"`block` prop을 사용하여 상하로 확장된 컴포넌트입니다. 부모 요소의 `padding`을 무시하고 상하로 확장됩니다. 붉은 영역이 부모의 padding 영역을 시각화합니다.",
172+
},
173+
},
174+
},
175+
};
176+
177+
export const AllDirectionsBleed: Story = {
178+
render: () => (
179+
<div
180+
style={{
181+
padding: "16px",
182+
backgroundColor: "rgba(255, 0, 0, 0.1)",
183+
}}
184+
>
185+
<Bleed inline={16} block={16}>
186+
<div
187+
style={{
188+
backgroundColor: "rgba(0, 0, 255, 0.1)",
189+
padding: "12px",
190+
textAlign: "center",
191+
}}
192+
>
193+
Bleed 영역
194+
</div>
59195
</Bleed>
60-
<span>요거</span>
61196
</div>
62197
),
63-
args: {},
64198
parameters: {
65199
docs: {
66200
description: {
67-
story: "블럭 블레드 컴포넌트입니다.",
201+
story:
202+
"`inline`과 `block` prop을 모두 사용하여 모든 방향으로 확장된 컴포넌트입니다.",
68203
},
69204
},
70205
},

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

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,90 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22

3-
import { HStack, VStack } from "../Stack/Stack";
3+
import { Stack } from "../Stack";
4+
import { Text } from "../Text";
45
import { Spacer } from "./Spacer";
56

67
const meta: Meta<typeof Spacer> = {
78
title: "Components/Spacer",
89
component: Spacer,
910
tags: ["autodocs"],
11+
parameters: {
12+
docs: {
13+
description: {
14+
component:
15+
"Spacer 컴포넌트는 UI 요소들 사이에 시각적인 간격을 만들기 위해 사용됩니다. `size`와 `direction` prop을 통해 간격의 크기와 방향(수직/수평)을 조절할 수 있습니다. 레이아웃의 유연성을 높이고 일관된 간격 시스템을 유지하는 데 도움이 됩니다.",
16+
},
17+
},
18+
},
1019
argTypes: {
1120
size: {
1221
control: "number",
22+
description: "간격의 크기를 설정합니다. `rem` 단위로 변환됩니다.",
23+
table: {
24+
type: { summary: "number | string" },
25+
defaultValue: { summary: "0" },
26+
},
1327
},
1428
direction: {
15-
control: "select",
29+
control: "radio",
1630
options: ["vertical", "horizontal"],
31+
description: "간격의 방향을 설정합니다.",
32+
table: {
33+
type: { summary: "'vertical' | 'horizontal'" },
34+
defaultValue: { summary: "vertical" },
35+
},
36+
},
37+
as: {
38+
control: false,
39+
description: "컴포넌트의 HTML 태그를 설정합니다.",
40+
table: {
41+
type: { summary: "React.ElementType" },
42+
defaultValue: { summary: "span" },
43+
},
1744
},
1845
},
1946
};
2047

2148
export default meta;
2249
type Story = StoryObj<typeof Spacer>;
2350

24-
export const HorizontalSpacer: Story = {
25-
render: ({ size, direction }) => (
26-
<>
27-
<HStack justify='start' align='start' wrap='nowrap' gap={10}>
28-
<span>Hello</span>
29-
<Spacer size={size} direction={direction} />
30-
<span>World</span>
31-
</HStack>
32-
</>
51+
export const Vertical: Story = {
52+
render: args => (
53+
<Stack direction='column'>
54+
<Text>첫 번째 문단입니다.</Text>
55+
<Spacer {...args} />
56+
<Text>Spacer 위에 있는 두 번째 문단입니다.</Text>
57+
</Stack>
3358
),
3459
args: {
35-
size: 10,
36-
direction: "horizontal",
60+
size: 20,
61+
direction: "vertical",
3762
},
3863
parameters: {
3964
docs: {
4065
description: {
41-
story: "수평 여백 컴포넌트입니다.",
66+
story: "수직 방향으로 간격을 만듭니다 (`direction: 'vertical'`).",
4267
},
4368
},
4469
},
4570
};
4671

47-
export const VerticalSpacer: Story = {
48-
render: ({ size, direction }) => (
49-
<>
50-
<VStack justify='start' align='start' wrap='nowrap' gap={10}>
51-
<span>Hello</span>
52-
<Spacer size={size} direction={direction} />
53-
<span>World</span>
54-
</VStack>
55-
</>
72+
export const Horizontal: Story = {
73+
render: args => (
74+
<Stack direction='row' align='center'>
75+
<Text>왼쪽 텍스트</Text>
76+
<Spacer {...args} />
77+
<Text>오른쪽 텍스트</Text>
78+
</Stack>
5679
),
5780
args: {
58-
size: 10,
59-
direction: "vertical",
81+
size: 20,
82+
direction: "horizontal",
6083
},
6184
parameters: {
6285
docs: {
6386
description: {
64-
story: "수직 여백 컴포넌트입니다.",
87+
story: "수평 방향으로 간격을 만듭니다 (`direction: 'horizontal'`).",
6588
},
6689
},
6790
},

0 commit comments

Comments
 (0)