Skip to content

Commit b28e99f

Browse files
SionparadoxSionparadox
committed
[test] 🏀 스토리북 거의 완성
1 parent 96fc581 commit b28e99f

27 files changed

+803
-15
lines changed

Diff for: ‎.storybook/preview.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,15 @@ const preview: Preview = {
2424
],
2525
},
2626
textColor: '#FFFFFF',
27+
options: {
28+
storySort: {
29+
order: ['Logo', 'Atoms', 'Molecules', '*'],
30+
},
31+
},
2732
},
2833
decorators: [
2934
(Story) => (
30-
<div className='App font-sans' style={{ minHeight: 'auto' }}>
35+
<div className='App font-sans py-4' style={{ minHeight: 'auto' }}>
3136
<Story />
3237
</div>
3338
),

Diff for: ‎app/(head)/cart/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Loading from '@/components/Loading';
44
import DeliveryFeeProgress from '@/components/molecules/DeliveryFeeProgress';
55
import CardSlide from '@/components/molecules/sion/CardSlide';
66
import { CartProductCard } from '@/components/molecules/sion/CartProductCard';
7-
import { ToTalPriceBox } from '@/components/molecules/sion/ToTalPriceBox';
7+
import { TotalPriceBox } from '@/components/molecules/sion/TotalPriceBox';
88
import { Button } from '@/components/ui/button';
99
import { Checkbox } from '@/components/ui/checkbox';
1010
import { QUERY_KEYS } from '@/constants/queryKey';
@@ -320,7 +320,7 @@ export default function CartPage() {
320320
</div>
321321
</div>
322322
<div className='w-[111.2%] bg-black -mx-[5.6%]'>
323-
<ToTalPriceBox
323+
<TotalPriceBox
324324
totalPrice={calculateTotalPrice()}
325325
deliveryFee={calculateDeliveryFee()}
326326
/>

Diff for: ‎components/molecules/CardCarousel.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import CardCarouselItem from './CardCarouselItem';
1717
import SimpleBottomSheet from './ui/SimpleBottomSheet';
1818

1919
export const cardImgs = [
20-
'/images/cards/hana.svg',
21-
'/images/cards/sinhan.svg',
22-
'/images/cards/samsung.svg',
20+
'/images/cards/hana.png',
21+
'/images/cards/sinhan.png',
22+
'/images/cards/hyundai.png',
2323
];
2424

2525
export const payment_detail = [

Diff for: ‎components/molecules/sion/SionSion.tsx

-3
This file was deleted.

Diff for: ‎components/molecules/sion/ToTalPriceBox.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const ToTalPriceBox = ({
1+
export const TotalPriceBox = ({
22
totalPrice,
33
deliveryFee,
44
}: {

Diff for: ‎stories/atoms/AccentText.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { AccentText } from '@/components/ui/AccentText';
22
import type { Meta, StoryObj } from '@storybook/react';
33

44
const meta: Meta<typeof AccentText> = {
5-
title: 'Components/AccentText',
5+
title: 'Atoms/AccentText',
66
component: AccentText,
77
tags: ['autodocs'],
88
argTypes: {

Diff for: ‎stories/atoms/Button.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
22
import type { Meta, StoryObj } from '@storybook/react';
33

44
const meta: Meta<typeof Button> = {
5-
title: 'Components/Button',
5+
title: 'Atoms/Button',
66
component: Button,
77
tags: ['autodocs'],
88
argTypes: {

Diff for: ‎stories/atoms/Checkbox.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Checkbox } from '@/components/ui/checkbox';
22
import type { Meta, StoryObj } from '@storybook/react';
33

44
const meta: Meta<typeof Checkbox> = {
5-
title: 'Components/Checkbox',
5+
title: 'Atoms/Checkbox',
66
component: Checkbox,
77
tags: ['autodocs'],
88
argTypes: {

Diff for: ‎stories/atoms/Counter.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Counter } from '@/components/ui/Counter';
22
import type { Meta, StoryObj } from '@storybook/react';
33

44
const meta: Meta<typeof Counter> = {
5-
title: 'Components/Counter',
5+
title: 'Atoms/Counter',
66
component: Counter,
77
tags: ['autodocs'],
88
argTypes: {

Diff for: ‎stories/atoms/PayAllLogo.stories.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { PayAllLogo } from '@/components/ui/PayAllLogo';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
const meta: Meta<typeof PayAllLogo> = {
5+
title: 'Logo/PayAllLogo',
6+
component: PayAllLogo,
7+
tags: ['autodocs'],
8+
argTypes: {
9+
width: { control: 'number' },
10+
height: { control: 'number' },
11+
className: { control: 'text' },
12+
},
13+
};
14+
15+
export default meta;
16+
type Story = StoryObj<typeof PayAllLogo>;
17+
18+
export const Default: Story = {
19+
args: {
20+
width: 120,
21+
height: 120,
22+
},
23+
};
24+
25+
export const CustomSize: Story = {
26+
args: {
27+
width: 200,
28+
height: 200,
29+
},
30+
};

Diff for: ‎stories/atoms/SquareImage.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SquareImage } from '@/components/ui/SquareImage';
22
import type { Meta, StoryObj } from '@storybook/react';
33

44
const meta: Meta<typeof SquareImage> = {
5-
title: 'Components/SquareImage',
5+
title: 'Atoms/SquareImage',
66
component: SquareImage,
77
tags: ['autodocs'],
88
argTypes: {

Diff for: ‎stories/atoms/TitleBottomLine.stories.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import TitleBottomLine from '@/components/ui/TitleBottomLine';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
const meta: Meta<typeof TitleBottomLine> = {
5+
title: 'Atoms/TitleBottomLine',
6+
component: TitleBottomLine,
7+
tags: ['autodocs'],
8+
argTypes: {
9+
left: { control: 'text' },
10+
right: { control: 'text' },
11+
children: { control: 'text' },
12+
},
13+
};
14+
15+
export default meta;
16+
type Story = StoryObj<typeof TitleBottomLine>;
17+
18+
export const Default: Story = {
19+
args: {
20+
left: '왼쪽 텍스트',
21+
right: '오른쪽 텍스트',
22+
children: '내용',
23+
},
24+
};
25+
26+
export const WithLongText: Story = {
27+
args: {
28+
left: '긴 왼쪽 텍스트입니다',
29+
right: '긴 오른쪽 텍스트입니다',
30+
children: '여기에 들어갈 내용입니다',
31+
},
32+
};

Diff for: ‎stories/molecules/AccountCard.stories.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { AccountCard } from '@/components/molecules/sion/AccountCard';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
const meta = {
5+
title: 'Molecules/AccountCard',
6+
component: AccountCard,
7+
tags: ['autodocs'],
8+
decorators: [
9+
(Story) => (
10+
<div className='py-4 max-w-md'>
11+
<Story />
12+
</div>
13+
),
14+
],
15+
argTypes: {
16+
account: { control: 'object' },
17+
onClick: { action: 'clicked' },
18+
},
19+
} satisfies Meta<typeof AccountCard>;
20+
21+
export default meta;
22+
type Story = StoryObj<typeof AccountCard>;
23+
24+
export const Default: Story = {
25+
args: {
26+
account: {
27+
accountId: 1,
28+
userId: 1,
29+
accountNumber: 1234567890,
30+
bankName: '하나은행',
31+
accountName: '일상통장',
32+
balance: 1500000,
33+
},
34+
},
35+
};
36+
37+
export const HighBalance: Story = {
38+
args: {
39+
account: {
40+
accountId: 2,
41+
userId: 1,
42+
accountNumber: 1234567890,
43+
bankName: '국민은행',
44+
accountName: '급여통장',
45+
balance: 5000000,
46+
},
47+
},
48+
};
49+
50+
export const LowBalance: Story = {
51+
args: {
52+
account: {
53+
accountId: 3,
54+
userId: 1,
55+
accountNumber: 1234567890,
56+
bankName: '카카오뱅크',
57+
accountName: '비상금통장',
58+
balance: 100000,
59+
},
60+
},
61+
};

Diff for: ‎stories/molecules/AccountUnionCard.stories.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import AccountUnionCard from '@/components/molecules/sion/AccountUnionCard';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
const meta = {
5+
title: 'Molecules/AccountUnionCard',
6+
component: AccountUnionCard,
7+
tags: ['autodocs'],
8+
decorators: [
9+
(Story) => (
10+
<div className='py-4 max-w-md'>
11+
<Story />
12+
</div>
13+
),
14+
],
15+
argTypes: {
16+
username: { control: 'text' },
17+
formattedLastMonthDate: { control: 'text' },
18+
totalBalance: { control: 'number' },
19+
difference: { control: 'number' },
20+
},
21+
} satisfies Meta<typeof AccountUnionCard>;
22+
23+
export default meta;
24+
type Story = StoryObj<typeof AccountUnionCard>;
25+
26+
export const Default: Story = {
27+
args: {
28+
username: '홍길동',
29+
formattedLastMonthDate: '2024.02',
30+
totalBalance: 1500000,
31+
difference: 50000,
32+
},
33+
};
34+
35+
export const Decreased: Story = {
36+
args: {
37+
username: '김철수',
38+
formattedLastMonthDate: '2024.02',
39+
totalBalance: 3000000,
40+
difference: -120000,
41+
},
42+
};
43+
44+
export const HighBalance: Story = {
45+
args: {
46+
username: '이영희',
47+
formattedLastMonthDate: '2024.02',
48+
totalBalance: 10000000,
49+
difference: 500000,
50+
},
51+
};

Diff for: ‎stories/molecules/AdCarousel.stories.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { AdCarousel } from '@/components/molecules/sion/AdCarousel';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
const meta = {
5+
title: 'Molecules/AdCarousel',
6+
component: AdCarousel,
7+
tags: ['autodocs'],
8+
decorators: [
9+
(Story) => (
10+
<div className='py-4 max-w-md'>
11+
<Story />
12+
</div>
13+
),
14+
],
15+
} satisfies Meta<typeof AdCarousel>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof AdCarousel>;
19+
20+
export const Default: Story = {
21+
args: {},
22+
};
23+
24+
export const WithCustomContent: Story = {
25+
args: {},
26+
render: () => <AdCarousel />,
27+
};

Diff for: ‎stories/molecules/CardCarousel.stories.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { CardCarousel } from '@/components/molecules/CardCarousel';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
4+
const meta = {
5+
title: 'Molecules/CardCarousel',
6+
component: CardCarousel,
7+
tags: ['autodocs'],
8+
decorators: [
9+
(Story) => (
10+
<div className='py-4 max-w-md'>
11+
<Story />
12+
</div>
13+
),
14+
],
15+
argTypes: {
16+
cards: { control: 'object' },
17+
},
18+
} satisfies Meta<typeof CardCarousel>;
19+
20+
export default meta;
21+
type Story = StoryObj<typeof CardCarousel>;
22+
23+
export const Default: Story = {
24+
args: {
25+
cards: [
26+
{
27+
category: 'CAFE',
28+
storeName: '스타벅스',
29+
discountAmount: 3000,
30+
productId: 1,
31+
productName: '하나',
32+
productType: 'CARD',
33+
},
34+
{
35+
category: 'SHOPPING',
36+
storeName: '쿠팡',
37+
discountAmount: 5000,
38+
productId: 2,
39+
productName: 'hana',
40+
productType: 'CARD',
41+
},
42+
{
43+
category: 'TRANSPORT',
44+
storeName: '카카오T',
45+
discountAmount: 2000,
46+
productId: 3,
47+
productName: '카카오T',
48+
productType: 'CARD',
49+
},
50+
],
51+
},
52+
};
53+
54+
export const SingleCard: Story = {
55+
args: {
56+
cards: [
57+
{
58+
category: 'CAFE',
59+
storeName: '스타벅스',
60+
discountAmount: 3000,
61+
productId: 1,
62+
productName: '아메리카노',
63+
productType: 'CARD',
64+
},
65+
],
66+
},
67+
};

0 commit comments

Comments
 (0)