Skip to content

Commit 2f27569

Browse files
wkdtnqls0506wkdtnqls0506
committed
refactor(#93): BottomSheet 컴포넌트 변경에 따른 스토리북 수정
1 parent efb2f24 commit 2f27569

File tree

1 file changed

+49
-90
lines changed

1 file changed

+49
-90
lines changed

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

Lines changed: 49 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -2,137 +2,96 @@ import type { Meta, StoryObj } from "@storybook/nextjs";
22
import { useState } from "react";
33

44
import { Button } from "../Button";
5+
import { Text } from "../Text";
56
import { BottomSheet } from "./BottomSheet";
6-
import * as styles from "./BottomSheet.css";
77

8-
const meta: Meta<typeof BottomSheet> = {
8+
const meta: Meta<typeof BottomSheet.Root> = {
99
title: "Components/BottomSheet",
10-
component: BottomSheet,
10+
component: BottomSheet.Root,
1111
tags: ["autodocs"],
12-
argTypes: {
13-
open: { table: { disable: true } },
14-
title: { control: "text" },
15-
trigger: { control: false },
16-
footer: { control: false },
17-
content: { control: false },
18-
},
1912
};
2013
export default meta;
2114

22-
type Story = StoryObj<typeof BottomSheet>;
15+
type Story = StoryObj<typeof BottomSheet.Root>;
2316

24-
const BottomSheetWrapper = (
25-
args: React.ComponentProps<typeof BottomSheet> & {
26-
content?: React.ReactNode;
27-
footer?: React.ReactNode;
28-
}
29-
) => {
30-
const [isOpen, setIsOpen] = useState(args.open || false);
17+
const BottomSheetWrapper = ({
18+
defaultOpen = false,
19+
title = "서비스 필수 이용 약관",
20+
bodyText = "회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고 있습니다.",
21+
confirmText = "동의하고 계속하기",
22+
}: {
23+
defaultOpen?: boolean;
24+
title?: string;
25+
bodyText?: string;
26+
confirmText?: string;
27+
}) => {
28+
const [isOpen, setIsOpen] = useState(defaultOpen);
3129

3230
return (
33-
<BottomSheet
34-
{...args}
35-
open={isOpen}
36-
onOpenChange={setIsOpen}
37-
trigger={
31+
<BottomSheet.Root open={isOpen} onOpenChange={setIsOpen}>
32+
<BottomSheet.Trigger>
3833
<Button variant='primary' onClick={() => setIsOpen(true)}>
3934
바텀시트 열기
4035
</Button>
41-
}
42-
content={args.content}
43-
/>
36+
</BottomSheet.Trigger>
37+
38+
<BottomSheet.Content>
39+
<BottomSheet.Title>
40+
<Text typo='title3Sb'>{title}</Text>
41+
</BottomSheet.Title>
42+
43+
<BottomSheet.Body>
44+
<Text>{bodyText}</Text>
45+
</BottomSheet.Body>
46+
47+
<BottomSheet.Footer>
48+
<Button size='fullWidth' onClick={() => setIsOpen(false)}>
49+
{confirmText}
50+
</Button>
51+
</BottomSheet.Footer>
52+
</BottomSheet.Content>
53+
</BottomSheet.Root>
4454
);
4555
};
4656

4757
export const Default: Story = {
48-
render: args => (
58+
render: () => (
4959
<BottomSheetWrapper
50-
{...args}
51-
title='서비스 필수 이용약관'
52-
footer={
53-
<Button size='fullWidth' onClick={() => alert("동의합니다")}>
54-
동의하고 계속하기
55-
</Button>
56-
}
57-
content={
58-
<>
59-
<h2 className={styles.sheetBodyTitle}>비밀번호를 변경해 안내 설명</h2>
60-
<p className={styles.sheetBodyDescription}>
61-
회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인 경우
62-
비밀번호 변경을 안내해 드리고 있습니다. 회원님의 개인정보 보호를
63-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
64-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
65-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
66-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
67-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
68-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
69-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
70-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
71-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
72-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
73-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
74-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
75-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
76-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
77-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
78-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
79-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
80-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
81-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
82-
있습니다.회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인
83-
경우 비밀번호 변경을 안내해 드리고 있습니다.회원님의 개인정보 보호를
84-
위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고
85-
있습니다.
86-
</p>
87-
</>
88-
}
60+
defaultOpen={false}
61+
title='서비스 필수 이용 약관'
62+
bodyText={`회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고 있습니다.
63+
동일한 설명이 반복되어 내용이 길어지면, Body 영역에 scroll이 적용됩니다.`}
64+
confirmText='동의하고 계속하기'
8965
/>
9066
),
9167
parameters: {
9268
docs: {
9369
description: {
9470
story:
95-
"버튼을 클릭하면 바텀시트가 열리고, 하단에 footer 버튼이 렌더링됩니다.",
71+
"Trigger 버튼을 클릭하면 BottomSheet가 열리고 Title/Body/Footer가 표시됩니다.",
9672
},
9773
},
9874
},
9975
};
10076

10177
export const Opened: Story = {
102-
render: (args, { viewMode }) => {
78+
render: (_, { viewMode }) => {
10379
const forceClosedInDocs = viewMode === "docs";
80+
10481
return (
10582
<BottomSheetWrapper
106-
{...args}
107-
open={forceClosedInDocs ? false : args.open}
83+
defaultOpen={!forceClosedInDocs}
10884
title='즉시 열리는 바텀시트'
109-
footer={
110-
<Button size='fullWidth' onClick={() => alert("닫기")}>
111-
확인
112-
</Button>
113-
}
114-
content={
115-
<>
116-
<h2 className={styles.sheetBodyTitle}>
117-
비밀번호를 변경해 안내 설명
118-
</h2>
119-
<p className={styles.sheetBodyDescription}>
120-
회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인 경우
121-
비밀번호 변경을 안내해 드리고 있습니다.
122-
</p>
123-
</>
124-
}
85+
bodyText='회원님의 개인정보 보호를 위해 장기간 비밀번호를 유지 중인 경우 비밀번호 변경을 안내해 드리고 있습니다.'
86+
confirmText='확인'
12587
/>
12688
);
12789
},
128-
args: {
129-
open: true,
130-
},
13190
parameters: {
13291
docs: {
13392
description: {
13493
story:
135-
"Canvas에선 열린 상태로 시작되며, 하단에 버튼이 함께 표시됩니다.",
94+
"Canvas에선 열린 상태로 시작되며, 닫기 버튼을 통해 닫을 수 있습니다.",
13695
},
13796
},
13897
},

0 commit comments

Comments
 (0)