{
+ /** ์
๋ ฅ๋ ๋ด์ฉ์ด ์กฐ๊ฑด์ ์ด๊ธ๋๋์ง ๋ํ๋ด๋ ์์ฑ */
+ isNegative?: boolean;
+ /** ์
๋ ฅ๋ ๋ด์ฉ์ด ์กฐ๊ฑด์ ๋ถํฉํ๋์ง ๋ํ๋ด๋ ์์ฑ */
+ isPositive?: boolean;
+ /** TextField์ ํฌ์ปค์ค๊ฐ ์กํ์๋์ง ๋ํ๋ด๋ ์์ฑ */
+ isFocused?: boolean;
+ /** isFocused=true์ผ ๋, ์
๋ ฅ๋ ๋ด์ฉ์ด ํ ๊ธ์ ์ด์์ธ์ง ๋ํ๋ด๋ ์์ฑ */
+ isTyping?: boolean;
+
+ /** TextField์ ๋ฌด์์ ์
๋ ฅํด์ผ ํ๋์ง ๊ธฐ์
ํ๋ ์์ฑ */
+ fieldLabel?: string;
+ /** TextField ์๋์ ๋ค์ด๊ฐ๋ ๋์๋ง ํ
์คํธ */
+ helperLabel?: string;
+ /** TextField ๋ด๋ถ ์ค๋ฅธ์ชฝ์ ๋ค์ด๊ฐ ์์ด์ฝ (๋๋ ํ
์คํธ) */
+ suffix?: React.ReactNode;
+ /** TextField ๋ด๋ถ ์ผ์ชฝ์ ๋ค์ด๊ฐ ๊ฒ์ ์์ด์ฝ */
+ searchPrefix?: React.ReactNode;
+ /** TextField์ width */
+ width?: number | string;
+}
diff --git a/src/components/TextField/index.ts b/src/components/TextField/index.ts
new file mode 100644
index 0000000..a2cc4f0
--- /dev/null
+++ b/src/components/TextField/index.ts
@@ -0,0 +1,2 @@
+export { SimpleTextField } from './SimpleTextField/SimpleTextField';
+export type { SimpleTextFieldProps } from './SimpleTextField/SimpleTextField.type';
diff --git a/src/components/Toast/HookSource.md b/src/components/Toast/HookSource.md
new file mode 100644
index 0000000..680d789
--- /dev/null
+++ b/src/components/Toast/HookSource.md
@@ -0,0 +1,19 @@
+```typescript
+import { ToastDuration, useToast, Toast } from '@yourssu/design-system-react';
+
+const ToastWrapper = () => {
+ const toastProps = {
+ children: 'ํ๋ฉด์ ๋์ธ ๋ฉ์์ง',
+ duration: 'long' as ToastDuration,
+ };
+
+ const { showToast, isShowToast } = useToast();
+
+ return (
+
+
+ {isShowToast && }
+
+ );
+};
+```
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
index 5721217..7791ce1 100644
--- a/src/components/Toast/Toast.stories.tsx
+++ b/src/components/Toast/Toast.stories.tsx
@@ -1,7 +1,16 @@
+import {
+ Stories,
+ Primary as PrimaryBlock,
+ Controls,
+ Title,
+ Description,
+ Markdown,
+} from '@storybook/blocks';
import { Meta, StoryObj } from '@storybook/react';
import { useToast } from '@/hooks/useToast';
+import HookSource from './HookSource.md?raw';
import { Toast } from './Toast';
import { ToastDuration } from './Toast.type';
@@ -10,13 +19,36 @@ const meta: Meta = {
component: Toast,
parameters: {
layout: 'centered',
+ docs: {
+ page: () => (
+ <>
+
+
+
+ ์ฃผ์์ฌํญ
+
+ - Toast์ width๋ Toast ๋ฅผ ๊ฐ์ธ๋ ์ปดํฌ๋ํธ์ width์ ์ํฅ์ ๋ฐ์ต๋๋ค.
+ -
+ Toast์ ์์น๋ position: relative ์์ฑ์ด ์ค์ ๋ ๊ฐ์ฅ ๊ฐ๊น์ด ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ์ํด
+ ๊ฒฐ์ ๋ฉ๋๋ค.
+
+
+
+ useToast
+ Toast ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ Custom Hook์
๋๋ค.
+ {HookSource}
+
+
+ >
+ ),
+ },
},
};
export default meta;
const ToastStory = ({ ...toastProps }) => {
return (
-
+
{
return (