From 6cff133940c3770085e6e375929f89d3df8b6c7d Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 3 Nov 2023 11:27:49 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Input/Input.stories.tsx | 49 +++++++++++++++++++++++++++++++++++++ src/Input/index.ts | 5 ++++ src/index.ts | 1 + 3 files changed, 55 insertions(+) create mode 100644 src/Input/Input.stories.tsx create mode 100644 src/Input/index.ts diff --git a/src/Input/Input.stories.tsx b/src/Input/Input.stories.tsx new file mode 100644 index 0000000..eca0da5 --- /dev/null +++ b/src/Input/Input.stories.tsx @@ -0,0 +1,49 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Input from './Input'; + +const meta: Meta = { + title: 'Input', + component: Input, + argTypes: { + rightIcon: { + control: { type: 'boolean' }, + mapping: { false: '', true: 'πŸ”Ž' }, + }, + }, + args: { + customWidth: '300px', + isError: false, + rightIcon: false, + errorMessage: '', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithPlaceholder: Story = { + args: { + placeholder: 'μƒν’ˆ 이름을 κ²€μƒ‰ν•˜μ„Έμš”.', + }, +}; + +export const WithIcon: Story = { + args: { + placeholder: 'μƒν’ˆ 이름을 κ²€μƒ‰ν•˜μ„Έμš”.', + rightIcon: true, + }, +}; + +export const Error: Story = { + args: { + isError: true, + errorMessage: '10κΈ€μž μ΄λ‚΄λ‘œ μž…λ ₯ν•΄μ£Όμ„Έμš”.', + }, +}; + +export const Disabled: Story = { + render: () => , +}; diff --git a/src/Input/index.ts b/src/Input/index.ts new file mode 100644 index 0000000..c90e5ad --- /dev/null +++ b/src/Input/index.ts @@ -0,0 +1,5 @@ +import Input from './Input'; + +export type { InputProps } from './Input'; + +export default Input; diff --git a/src/index.ts b/src/index.ts index c847503..cac763d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,3 +14,4 @@ export { default as Link } from './Link'; export { default as Spacing } from './Spacing'; export { default as Text } from './Text'; export { default as Textarea } from './Textarea'; +export { default as Input } from './Input'; From 61ace7572d1e36d981a976300ea7d65818c0bf62 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 3 Nov 2023 11:29:09 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20input=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Input/Input.tsx | 98 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/Input/Input.tsx diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx new file mode 100644 index 0000000..0d361a2 --- /dev/null +++ b/src/Input/Input.tsx @@ -0,0 +1,98 @@ +import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from 'react'; +import { forwardRef } from 'react'; +import styled from 'styled-components'; + +import Text from '../Text'; + +export interface InputProps extends ComponentPropsWithRef<'input'> { + /** + * Input μ»΄ν¬λ„ŒνŠΈμ˜ λ„ˆλΉ„κ°’μž…λ‹ˆλ‹€. + */ + customWidth?: string; + /** + * Input μ»΄ν¬λ„ŒνŠΈμ˜ μ΅œμ†Œ λ„ˆλΉ„κ°’μž…λ‹ˆλ‹€. + */ + minWidth?: string; + /** + * Input value에 μ—λŸ¬κ°€ μžˆλŠ”μ§€ μ—¬λΆ€μž…λ‹ˆλ‹€. + */ + isError?: boolean; + /** + * Input μ»΄ν¬λ„ŒνŠΈ 였λ₯Έμͺ½μ— μœ„μΉ˜ν•  μ•„μ΄μ½˜μž…λ‹ˆλ‹€. + */ + rightIcon?: ReactNode; + /** + * isErrorκ°€ true일 λ•Œ 보여쀄 μ—λŸ¬ λ©”μ‹œμ§€μž…λ‹ˆλ‹€. + */ + errorMessage?: string; +} + +const Input = forwardRef( + ( + { customWidth = '300px', minWidth, isError = false, rightIcon, errorMessage, ...props }: InputProps, + ref: ForwardedRef + ) => { + return ( + <> + + + {rightIcon && {rightIcon}} + + {isError && {errorMessage}} + + ); + } +); + +Input.displayName = 'Input'; + +export default Input; + +type InputContainerStyleProps = Pick; +type CustomInputStyleProps = Pick; + +const InputContainer = styled.div` + position: relative; + min-width: ${({ minWidth }) => minWidth ?? 0}; + max-width: ${({ customWidth }) => customWidth}; + text-align: center; +`; + +const CustomInput = styled.input` + width: 100%; + height: 40px; + padding: 10px 0 10px 12px; + color: ${({ isError, theme }) => (isError ? theme.colors.error : theme.textColors.default)}; + border: 1px solid ${({ isError, theme }) => (isError ? theme.colors.error : theme.borderColors.default)}; + border-radius: 5px; + + &:focus { + border: 2px solid ${({ isError, theme }) => (isError ? theme.colors.error : theme.borderColors.strong)}; + outline: none; + } + + &:disabled { + border: 1px solid ${({ theme }) => theme.borderColors.disabled}; + background: ${({ theme }) => theme.colors.gray1}; + } + + &::placeholder { + color: ${({ theme }) => theme.textColors.disabled}; + font-size: ${({ theme }) => theme.fontSizes.sm}; + } +`; + +const IconWrapper = styled.div` + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + height: 100%; + margin-right: 8px; +`; + +const ErrorMessage = styled(Text)` + color: ${({ theme }) => theme.colors.error}; + font-size: ${({ theme }) => theme.fontSizes.xs}; +`; From f5bda61dda52144372610455ea81b6b873cc65fa Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 3 Nov 2023 11:29:24 +0900 Subject: [PATCH 3/5] =?UTF-8?q?docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 185 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 117 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index a456d1e..b0cff0b 100644 --- a/README.md +++ b/README.md @@ -36,24 +36,27 @@ import FunEatProvider from '@fun-eat/design-system'; ### Props -| props | value | description | -| --------- | ----------------------------------------------------- | -------------------------------------------- | -| element | p, span (default: span) | Badge μ»΄ν¬λ„ŒνŠΈμ˜ element νƒ€μž…μž…λ‹ˆλ‹€. | -| color | CSSProperties['color'] | Badge μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€ μƒ‰μƒμž…λ‹ˆλ‹€. | -| textColor | CSSProperties['color'] | Badge μ»΄ν¬λ„ŒνŠΈμ— λ“€μ–΄κ°ˆ ν…μŠ€νŠΈμ˜ μƒ‰μƒμž…λ‹ˆλ‹€. | -| size? | `xs` , `sm`, `md` , `lg` , `xl`
(default: `sm`) | Badge μ»΄ν¬λ„ŒνŠΈμ— λ“€μ–΄κ°ˆ ν…μŠ€νŠΈμ˜ ν¬κΈ°μž…λ‹ˆλ‹€. | -| css? | CSSProp | Badge μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | +| props | value | description | +| --------- | -------------------------------------- | -------------------------------------------- | +| element | p, span
(default: span) | Badge μ»΄ν¬λ„ŒνŠΈμ˜ element νƒ€μž…μž…λ‹ˆλ‹€. | +| color | CSSProperties['color'] | Badge μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€ μƒ‰μƒμž…λ‹ˆλ‹€. | +| textColor | CSSProperties['color'] | Badge μ»΄ν¬λ„ŒνŠΈμ— λ“€μ–΄κ°ˆ ν…μŠ€νŠΈμ˜ μƒ‰μƒμž…λ‹ˆλ‹€. | +| size? | xs, sm, md, lg, xl
(default: sm) | Badge μ»΄ν¬λ„ŒνŠΈμ— λ“€μ–΄κ°ˆ ν…μŠ€νŠΈμ˜ ν¬κΈ°μž…λ‹ˆλ‹€. | +| css? | CSSProp | Badge μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | ### Example -```jsx -뱃지 -뱃지 +```tsx + + ``` +
+ ## BottomSheet μ•„λž˜μ—μ„œ μœ„λ‘œ μ˜¬λΌμ˜€λŠ” λ°”ν…€μ‹œνŠΈ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. + @fun-eat/design-systemμ—μ„œ μ œκ³΅ν•˜λŠ” useBottomSheet와 μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. ### Props @@ -85,22 +88,24 @@ const Parent = () => { }; ``` +
+ ## Button λ²„νŠΌ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| ------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| customWidth? | string
(default: 120px) | Button μ»΄ν¬λ„ŒνŠΈμ˜ λ„“μ΄μž…λ‹ˆλ‹€. | -| customHeight? | string
(default: 40px) | Button μ»΄ν¬λ„ŒνŠΈμ˜ λ†’μ΄μž…λ‹ˆλ‹€. | -| color? | color
(default: `primary`) | Button μ»΄ν¬λ„ŒνŠΈμ˜ μƒ‰μƒμž…λ‹ˆλ‹€. | -| textColor? | color
(default: `default`) | Button μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ μƒ‰μƒμž…λ‹ˆλ‹€. | -| size? | `xs`, `sm`, `md`, `lg`, `xl`
(default: `md`) | Button μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | -| weight? | `light`, `regular`, `bold`
(default: `bold`) | Button μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | -| variant? | `outlined`, `filled`, `transparent`
(default: `filled`) | Button μ»΄ν¬λ„ŒνŠΈμ˜ μŠ€νƒ€μΌλ‘œ 배경색 없이 아웃라인이 μžˆλŠ”μ§€, 배경색이 있고 아웃라인이 μ—†λŠ”μ§€, 투λͺ… 배경인지 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | -| css? | CSSProp | Button μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | +| props | value | description | +| ------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| customWidth? | string
(default: 120px) | Button μ»΄ν¬λ„ŒνŠΈμ˜ λ„“μ΄μž…λ‹ˆλ‹€. | +| customHeight? | string
(default: 40px) | Button μ»΄ν¬λ„ŒνŠΈμ˜ λ†’μ΄μž…λ‹ˆλ‹€. | +| color? | color
(default: primary) | Button μ»΄ν¬λ„ŒνŠΈμ˜ μƒ‰μƒμž…λ‹ˆλ‹€. | +| textColor? | color
(default: default) | Button μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ μƒ‰μƒμž…λ‹ˆλ‹€. | +| size? | xs, sm, md, lg, xl
(default: md) | Button μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | +| weight? | light, regular, bold
(default: bold) | Button μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | +| variant? | outlined, filled, transparent
(default: filled) | Button μ»΄ν¬λ„ŒνŠΈμ˜ μŠ€νƒ€μΌλ‘œ 배경색 없이 아웃라인이 μžˆλŠ”μ§€, 배경색이 있고 아웃라인이 μ—†λŠ”μ§€, 투λͺ… 배경인지 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. | +| css? | CSSProp | Button μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | ### Example @@ -109,18 +114,20 @@ const Parent = () => { ``` -## Checkbox +
+ +## **Checkbox** μ²΄ν¬λ°•μŠ€ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| --------- | --------------------------------------------------- | ---------------------------------------- | -| size? | `xs`, `sm`, `md`, `lg`, `xl`
(default: `md`) | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ μ²΄ν¬λ°•μŠ€ ν¬κΈ°μž…λ‹ˆλ‹€. | -| fontSize? | `xs`, `sm`, `md`, `lg`, `xl`
(default: `md`) | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | -| weight? | `light`, `regular`, `bold`
(default: `bold`) | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | -| tabIndex? | `-1`, `0`, `1`
| Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ tabIndexμž…λ‹ˆλ‹€. | +| props | value | description | +| --------- | ------------------------------------------ | ---------------------------------------- | +| size? | xs, sm, md, lg, xl
(default: md) | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ μ²΄ν¬λ°•μŠ€ ν¬κΈ°μž…λ‹ˆλ‹€. | +| fontSize? | xs, sm, md, lg, xl
(default: md) | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | +| weight? | light, regular, bold
(default: bold) | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | +| tabIndex? | -1,Β 0,Β 1 | Checkbox μ»΄ν¬λ„ŒνŠΈμ˜ tabIndexμž…λ‹ˆλ‹€. | ### Example @@ -130,40 +137,43 @@ const Parent = () => { 재ꡬ맀 μ˜μ‚¬κ°€ μžˆμœΌμ‹ κ°€μš”? ``` +
+ ## Divider ν™”λ©΄ ꡬ역을 λ‚˜λˆ„λŠ” μ„  μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| ------------- | ----------------------------------------------------- | ----------------------------------------------------------- | -| variant? | default , strong , disabled
(default: default) | Divider μ»΄ν¬λ„ŒνŠΈμ˜ μ’…λ₯˜μž…λ‹ˆλ‹€. κ°•μ‘°μ˜ 정도 차이가 μžˆμŠ΅λ‹ˆλ‹€. | -| customWidth? | string
(default: 100%) | Divider μ»΄ν¬λ„ŒνŠΈμ˜ κΈΈμ΄μž…λ‹ˆλ‹€. | -| customHeight? | string
(default: 1px) | Divider μ»΄ν¬λ„ŒνŠΈμ˜ λ‘κ»˜μž…λ‹ˆλ‹€. | -| css? | CSSProp | Divider μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | +| props | value | description | +| ------------- | ---------------------------------------------------- | ----------------------------------------------------------- | +| variant? | default , strong , disabled
(default: default) | Divider μ»΄ν¬λ„ŒνŠΈμ˜ μ’…λ₯˜μž…λ‹ˆλ‹€. κ°•μ‘°μ˜ 정도 차이가 μžˆμŠ΅λ‹ˆλ‹€. | +| customWidth? | string
(default: 100%) | Divider μ»΄ν¬λ„ŒνŠΈμ˜ κΈΈμ΄μž…λ‹ˆλ‹€. | +| customHeight? | string
(default: 1px) | Divider μ»΄ν¬λ„ŒνŠΈμ˜ λ‘κ»˜μž…λ‹ˆλ‹€. | +| css? | CSSProp | Divider μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | ### Example ```jsx - + ``` +
+ ## Heading HTML heading νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| --------- | ------------------------------------- | ------------------------------------------- | -| children? | ReactNode | Heading μ»΄ν¬λ„ŒνŠΈμ˜ μžμ‹ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. | -| size? | `xs`, `sm`, `md`, `lg`, `xl` | Heading μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | -| weight? | `light`, `regular`, `bold` | Heading μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | -| css? | CSSProp | Heading μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | -| as? | `h1` ,`h2`, `h3`
(default: `h1`) | Heading μ»΄ν¬λ„ŒνŠΈμ˜ HTML νƒœκ·Έμž…λ‹ˆλ‹€. | -| css? | CSSProp | Heading μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | +| props | value | description | +| --------- | ----------------------------- | ------------------------------------------- | +| children? | ReactNode | Heading μ»΄ν¬λ„ŒνŠΈμ˜ μžμ‹ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. | +| as? | h1 ,h2, h3
(default: h1) | Heading μ»΄ν¬λ„ŒνŠΈμ˜ HTML νƒœκ·Έμž…λ‹ˆλ‹€. | +| size? | xs,Β sm,Β md,Β lg,Β xl | Heading μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | +| weight? | light,Β regular,Β bold | Heading μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | +| css? | CSSProp | Heading μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | ### Example @@ -174,20 +184,53 @@ HTML heading νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. λ‘œλ§μ˜€μš°νƒ€ν•΄ν™© ``` +
+ +## Input + +인풋 μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. + +### Props + +| props | value | description | +| ------------- | --------- | --------------------------------------------- | +| customWidth? | string | Input μ»΄ν¬λ„ŒνŠΈμ˜ λ„ˆλΉ„κ°’μž…λ‹ˆλ‹€. | +| minWidth? | string | Input μ»΄ν¬λ„ŒνŠΈμ˜ μ΅œμ†Œ λ„ˆλΉ„κ°’μž…λ‹ˆλ‹€. | +| isError? | boolean | Input value에 μ—λŸ¬κ°€ μžˆλŠ”μ§€ μ—¬λΆ€μž…λ‹ˆλ‹€. | +| rightIcon? | ReactNode | Input μ»΄ν¬λ„ŒνŠΈ 였λ₯Έμͺ½μ— μœ„μΉ˜ν•  μ•„μ΄μ½˜μž…λ‹ˆλ‹€. | +| errorMessage? | string | isErrorκ°€ true일 λ•Œ 보여쀄 μ—λŸ¬ λ©”μ‹œμ§€μž…λ‹ˆλ‹€. | + +### Example + +```jsx + + + + + } +/> +``` + +
+ ## Link -λ‹€λ₯Έ URL둜 μ—°κ²°ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. -`react-router-dom`κ³Ό ν•¨κ»˜ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. +λ‹€λ₯Έ URL둜 μ—°κ²°ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€.Β `react-router-dom`κ³Ό ν•¨κ»˜ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ### Props -| props | value | description | -| ----------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| isExternal? | boolean
(default: false) | Link μ»΄ν¬λ„ŒνŠΈμ˜ 링크 클릭 μ‹œ μƒˆλ‘œμš΄ νƒ­μœΌλ‘œ 열도둝 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. | -| block | boolean
(default: false) | Link μ»΄ν¬λ„ŒνŠΈμ˜ λ””μŠ€ν”Œλ ˆμ΄ 속성이 block인지 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. | -| css? | CSSProp | Link μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | -| as? | `a` ,`Link(react-router-dom의 Link)`, `NavLink(react-router-dom의 NavLink)`
(default: `a`) | Link μ»΄ν¬λ„ŒνŠΈλ‘œ μ‚¬μš©ν•  HTML νƒœκ·Έ λ˜λŠ” μ™ΈλΆ€ 링크 μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. | -| css? | CSSProp | Link μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | +| props | value | description | +| ----------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | +| as? | a, Link(react-router-dom의 Link),Β NavLink(react-router-dom의 NavLink)
(default:Β a) | Link μ»΄ν¬λ„ŒνŠΈλ‘œ μ‚¬μš©ν•  HTML νƒœκ·Έ λ˜λŠ” μ™ΈλΆ€ 링크 μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. | +| isExternal? | boolean
(default: false) | Link μ»΄ν¬λ„ŒνŠΈμ˜ 링크 클릭 μ‹œ μƒˆλ‘œμš΄ νƒ­μœΌλ‘œ 열도둝 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. | +| block | boolean
(default: false) | Link μ»΄ν¬λ„ŒνŠΈμ˜ λ””μŠ€ν”Œλ ˆμ΄ 속성이 block인지 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. | +| css? | CSSProp | Link μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | ### Example @@ -203,16 +246,18 @@ import {Link as RouterLink, NavLink} from 'react-router-dom' 링크둜 μ΄λ™ν•©λ‹ˆλ‹€. ``` +
+ ## Spacing ν™”λ©΄ ꡬ역을 λ‚˜λˆ„λŠ” μ—¬λ°± μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| ---------- | ---------------------------------------------------- | ------------------------------ | -| direction? | `vertical`, `horizontal`
(default: `vertical`) | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ λ°©ν–₯μž…λ‹ˆλ‹€. | -| size | number | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ ν¬κΈ°μž…λ‹ˆλ‹€. | +| props | value | description | +| ---------- | --------------------------------------------- | ------------------------------ | +| direction? | vertical, horizontal
(default: default) | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ λ°©ν–₯μž…λ‹ˆλ‹€. | +| size | number | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ ν¬κΈ°μž…λ‹ˆλ‹€. | ### Example @@ -221,22 +266,24 @@ import {Link as RouterLink, NavLink} from 'react-router-dom' ``` +
+ ## Text ν…μŠ€νŠΈ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| ----------- | -------------------------------------------------- | ---------------------------------------- | -| children? | ReactNode | Text μ»΄ν¬λ„ŒνŠΈμ˜ μžμ‹ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. | -| size? | `xs`, `sm`, `md`, `lg`, `xl`
(default: `md`) | Text μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | -| weight? | `light`, `regular`, `bold`
(default: regular) | Text μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | -| lineHeight? | `xs`,`sm`, `md`, `xl`
(default: `md`) | Text μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ λ†’μ΄μž…λ‹ˆλ‹€. | -| color? | CSSProperties['color']
(default: β€˜#232527’) | Text μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ μƒ‰μƒμž…λ‹ˆλ‹€. | -| align? | `left`, `center`, `right`
(default: `left`) | Text μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ μ •λ ¬μž…λ‹ˆλ‹€. | -| css? | CSSProp | Text μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | -| as? | `p` ,`span`
(default: `p`) | Text μ»΄ν¬λ„ŒνŠΈμ˜ HTML νƒœκ·Έμž…λ‹ˆλ‹€. | +| props | value | description | +| ----------- | ------------------------------------------------- | ---------------------------------------- | +| children? | ReactNode | Text μ»΄ν¬λ„ŒνŠΈμ˜ μžμ‹ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. | +| as? | p, span
(default: p) | Text μ»΄ν¬λ„ŒνŠΈμ˜ HTML νƒœκ·Έμž…λ‹ˆλ‹€. | +| size? | xs, sm, md, lg, xl
(default: md) | Text μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 ν¬κΈ°μž…λ‹ˆλ‹€. | +| weight? | light, regular, bold
(default: regular) | Text μ»΄ν¬λ„ŒνŠΈμ˜ 폰트 κ°€μ€‘μΉ˜μž…λ‹ˆλ‹€. | +| lineHeight? | xs, sm, md, lg, xl
(default: md) | Text μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ λ†’μ΄μž…λ‹ˆλ‹€. | +| color? | CSSProperties['color']
(default: β€˜#232527’) | Text μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ μƒ‰μƒμž…λ‹ˆλ‹€. | +| align? | left, center, right
(default: left) | Text μ»΄ν¬λ„ŒνŠΈμ˜ ν…μŠ€νŠΈ μ •λ ¬μž…λ‹ˆλ‹€. | +| css? | CSSProp | Text μ»΄ν¬λ„ŒνŠΈμ— μ μš©ν•  CSS μŠ€νƒ€μΌμž…λ‹ˆλ‹€. | ### Example @@ -247,15 +294,17 @@ import {Link as RouterLink, NavLink} from 'react-router-dom' λ‘œλ§μ˜€μš°νƒ€ν•΄ν™© ``` +
+ ## Textarea 멀티라인 ν…μŠ€νŠΈ μž…λ ₯ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. ### Props -| props | value | description | -| ------- | ----------------------------------------------------------------- | ------------------------------------------------ | -| resize? | `both`, `horizontal`, `vertical`, `none`
(default: `both`) | Textarea μ»΄ν¬λ„ŒνŠΈμ˜ 크기 μž¬μ‘°μ • λ°©ν–₯ μ„€μ •μž…λ‹ˆλ‹€. | +| props | value | description | +| ------- | ------------------------------------------------------ | ------------------------------------------------ | +| resize? | both,Β horizontal,Β vertical,Β none
(default:Β both) | Textarea μ»΄ν¬λ„ŒνŠΈμ˜ 크기 μž¬μ‘°μ • λ°©ν–₯ μ„€μ •μž…λ‹ˆλ‹€. | ### Example From 44fc33bd700a12e1df02be7bee67c7fcacfa2d19 Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 4 Nov 2023 22:20:27 +0900 Subject: [PATCH 4/5] =?UTF-8?q?chore:=20preview=20body=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-body.html | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .storybook/preview-body.html diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 0000000..6322ef7 --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,2 @@ +
+
From 2f5908361e36c21045f23a6c09fe384c8a0410f1 Mon Sep 17 00:00:00 2001 From: hae-on Date: Sun, 5 Nov 2023 23:22:34 +0900 Subject: [PATCH 5/5] =?UTF-8?q?docs:=20=EB=AC=B8=EC=84=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b0cff0b..542296b 100644 --- a/README.md +++ b/README.md @@ -47,8 +47,8 @@ import FunEatProvider from '@fun-eat/design-system'; ### Example ```tsx - - +뱃지 +뱃지 ```
@@ -254,10 +254,10 @@ import {Link as RouterLink, NavLink} from 'react-router-dom' ### Props -| props | value | description | -| ---------- | --------------------------------------------- | ------------------------------ | -| direction? | vertical, horizontal
(default: default) | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ λ°©ν–₯μž…λ‹ˆλ‹€. | -| size | number | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ ν¬κΈ°μž…λ‹ˆλ‹€. | +| props | value | description | +| ---------- | ---------------------------------------------- | ------------------------------ | +| direction? | vertical, horizontal
(default: vertical) | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ λ°©ν–₯μž…λ‹ˆλ‹€. | +| size | number | Spacing μ»΄ν¬λ„ŒνŠΈμ˜ ν¬κΈ°μž…λ‹ˆλ‹€. | ### Example