Skip to content

Commit 905f9a4

Browse files
jwj0620gcujwj0620gcu
committed
Merge branch '26-feat/모달-컴포넌트-제작' of https://github.com/Leets-Official/LOOPIT-FE into 26-feat/모달-컴포넌트-제작
2 parents a0e9bdd + 01ae397 commit 905f9a4

10 files changed

Lines changed: 738 additions & 0 deletions

File tree

‎src/pages/playground.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Header } from '@shared/ui/Header/Header';
55
import { Modal } from '@shared/ui/Modal/Modal';
66
import { Profile } from '@shared/ui/Profile/Profile';
77
import { RadioButton } from '@shared/ui/RadioButton/RadioButton';
8+
import { TextField } from '@shared/ui/TextField/TextField';
89
import { useState } from 'react';
910

1011
export default function Playground() {
@@ -126,6 +127,124 @@ export default function Playground() {
126127
/>
127128
)}
128129
</section>
130+
131+
{/* TextField 예시 */}
132+
<section className="flex flex-col gap-4">
133+
<h2 className="typo-body-1">TextField</h2>
134+
135+
<div className="flex flex-wrap gap-10">
136+
{/* Char Field */}
137+
<div className="flex flex-col gap-4">
138+
<h3 className="typo-caption-1 font-semibold">Char Field</h3>
139+
140+
<div className="w-127.25">
141+
<TextField
142+
type="char"
143+
label="Char Field"
144+
placeholder="Enter your username"
145+
showCharacterCount
146+
helperText="Default"
147+
/>
148+
</div>
149+
150+
<div className="w-127.25">
151+
<TextField
152+
type="char"
153+
label="Char Field"
154+
placeholder="Enter your username"
155+
showCharacterCount
156+
error
157+
helperText="Error"
158+
/>
159+
</div>
160+
161+
<div className="w-127.25">
162+
<TextField
163+
type="char"
164+
label="Char Field"
165+
placeholder="Enter your username"
166+
showCharacterCount
167+
disabled
168+
helperText="Disabled"
169+
/>
170+
</div>
171+
</div>
172+
173+
{/* TextArea Field */}
174+
<div className="flex flex-col gap-4">
175+
<h3 className="typo-caption-1 font-semibold">TextArea Field</h3>
176+
177+
<div className="w-127.25">
178+
<TextField
179+
type="textarea"
180+
label="TextArea Field"
181+
placeholder="Enter a description"
182+
showCharacterCount
183+
helperText="Default"
184+
/>
185+
</div>
186+
187+
<div className="w-127.25">
188+
<TextField
189+
type="textarea"
190+
label="TextArea Field"
191+
placeholder="Enter a description"
192+
showCharacterCount
193+
error
194+
helperText="Error"
195+
/>
196+
</div>
197+
198+
<div className="w-127.25">
199+
<TextField
200+
type="textarea"
201+
label="TextArea Field"
202+
placeholder="Enter a description"
203+
showCharacterCount
204+
disabled
205+
helperText="Disabled"
206+
/>
207+
</div>
208+
</div>
209+
210+
{/* Price Field */}
211+
<div className="flex flex-col gap-4">
212+
<h3 className="typo-caption-1 font-semibold">Price Field</h3>
213+
214+
<div className="w-127.25">
215+
<TextField
216+
type="price"
217+
label="Price Field"
218+
placeholder="Enter price"
219+
defaultValue="10000"
220+
helperText="Default"
221+
/>
222+
</div>
223+
224+
<div className="w-127.25">
225+
<TextField
226+
type="price"
227+
label="Price Field"
228+
placeholder="Enter price"
229+
defaultValue="10000"
230+
error
231+
helperText="Error"
232+
/>
233+
</div>
234+
235+
<div className="w-127.25">
236+
<TextField
237+
type="price"
238+
label="Price Field"
239+
placeholder="Enter price"
240+
defaultValue="10000"
241+
disabled
242+
helperText="Disabled"
243+
/>
244+
</div>
245+
</div>
246+
</div>
247+
</section>
129248
</div>
130249
);
131250
}

‎src/shared/ui/TextField/CharField.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { TextField } from '@shared/ui/TextField/TextField';
2+
import type { CharFieldProps } from '@shared/ui/TextField/TextField.types';
3+
4+
export const CharField = (props: CharFieldProps) => <TextField type="char" {...props} />;

‎src/shared/ui/TextField/PriceField.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { TextField } from '@shared/ui/TextField/TextField';
2+
import type { PriceFieldProps } from '@shared/ui/TextField/TextField.types';
3+
4+
export const PriceField = (props: PriceFieldProps) => <TextField type="price" {...props} />;

‎src/shared/ui/TextField/TextAreaField.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { TextField } from '@shared/ui/TextField/TextField';
2+
import type { TextAreaFieldProps } from '@shared/ui/TextField/TextField.types';
3+
4+
export const TextAreaField = (props: TextAreaFieldProps) => (
5+
<TextField type="textarea" {...props} />
6+
);

‎src/shared/ui/TextField/TextField.stories.tsx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import { TextField } from '@shared/ui/TextField/TextField';
2+
import type { Meta, StoryObj } from '@storybook/react-vite';
3+
4+
const meta = {
5+
title: 'Shared/UI/TextField',
6+
component: TextField,
7+
parameters: {
8+
layout: 'centered',
9+
},
10+
tags: ['autodocs'],
11+
argTypes: {
12+
type: {
13+
control: 'select',
14+
options: ['text', 'char', 'textarea', 'price'],
15+
description: 'TextField type',
16+
},
17+
label: { control: 'text' },
18+
placeholder: { control: 'text' },
19+
disabled: { control: 'boolean' },
20+
error: { control: 'boolean' },
21+
helperText: { control: 'text' },
22+
showCharacterCount: { control: 'boolean' },
23+
value: { control: 'text' },
24+
defaultValue: { control: 'text' },
25+
},
26+
} satisfies Meta<typeof TextField>;
27+
28+
export default meta;
29+
type Story = StoryObj<typeof meta>;
30+
31+
export const Showcase: Story = {
32+
name: 'Playground Showcase (9)',
33+
render: () => (
34+
<div className="flex flex-wrap gap-10">
35+
{/* Char Field */}
36+
<div className="flex flex-col gap-4">
37+
<h3 className="typo-caption-1 font-semibold">Char Field</h3>
38+
39+
<div className="w-127.25">
40+
<TextField
41+
type="char"
42+
label="Char Field"
43+
placeholder="Enter your username"
44+
showCharacterCount
45+
helperText="Default"
46+
/>
47+
</div>
48+
49+
<div className="w-127.25">
50+
<TextField
51+
type="char"
52+
label="Char Field"
53+
placeholder="Enter your username"
54+
showCharacterCount
55+
error
56+
helperText="Error"
57+
/>
58+
</div>
59+
60+
<div className="w-127.25">
61+
<TextField
62+
type="char"
63+
label="Char Field"
64+
placeholder="Enter your username"
65+
showCharacterCount
66+
disabled
67+
helperText="Disabled"
68+
/>
69+
</div>
70+
</div>
71+
72+
{/* TextArea Field */}
73+
<div className="flex flex-col gap-4">
74+
<h3 className="typo-caption-1 font-semibold">TextArea Field</h3>
75+
76+
<div className="w-127.25">
77+
<TextField
78+
type="textarea"
79+
label="TextArea Field"
80+
placeholder="Enter a description"
81+
showCharacterCount
82+
helperText="Default"
83+
/>
84+
</div>
85+
86+
<div className="w-127.25">
87+
<TextField
88+
type="textarea"
89+
label="TextArea Field"
90+
placeholder="Enter a description"
91+
showCharacterCount
92+
error
93+
helperText="Error"
94+
/>
95+
</div>
96+
97+
<div className="w-127.25">
98+
<TextField
99+
type="textarea"
100+
label="TextArea Field"
101+
placeholder="Enter a description"
102+
showCharacterCount
103+
disabled
104+
helperText="Disabled"
105+
/>
106+
</div>
107+
</div>
108+
109+
{/* Price Field */}
110+
<div className="flex flex-col gap-4">
111+
<h3 className="typo-caption-1 font-semibold">Price Field</h3>
112+
113+
<div className="w-127.25">
114+
<TextField
115+
type="price"
116+
label="Price Field"
117+
placeholder="Enter price"
118+
defaultValue="10000"
119+
helperText="Default"
120+
/>
121+
</div>
122+
123+
<div className="w-127.25">
124+
<TextField
125+
type="price"
126+
label="Price Field"
127+
placeholder="Enter price"
128+
defaultValue="10000"
129+
error
130+
helperText="Error"
131+
/>
132+
</div>
133+
134+
<div className="w-127.25">
135+
<TextField
136+
type="price"
137+
label="Price Field"
138+
placeholder="Enter price"
139+
defaultValue="10000"
140+
disabled
141+
helperText="Disabled"
142+
/>
143+
</div>
144+
</div>
145+
</div>
146+
),
147+
};
148+
149+
/**
150+
* (옵션) 단일 스토리들도 기본적인 확인용으로 남겨두고 싶으면 최소만 유지
151+
*/
152+
export const CharDefault: Story = {
153+
args: {
154+
type: 'char',
155+
label: 'Char Field',
156+
placeholder: 'Enter your username',
157+
showCharacterCount: true,
158+
helperText: 'Default',
159+
},
160+
};
161+
162+
export const TextareaDefault: Story = {
163+
args: {
164+
type: 'textarea',
165+
label: 'TextArea Field',
166+
placeholder: 'Enter a description',
167+
showCharacterCount: true,
168+
helperText: 'Default',
169+
},
170+
};
171+
172+
export const PriceDefault: Story = {
173+
args: {
174+
type: 'price',
175+
label: 'Price Field',
176+
placeholder: 'Enter price',
177+
defaultValue: '10000',
178+
helperText: 'Default',
179+
},
180+
};

0 commit comments

Comments
 (0)