1. Textarea

Textarea 컴포넌트는 사용자가 긴 텍스트를 입력할 수 있도록 설계된 입력 필드입니다. 크기, 색상, 및 크기 조절 가능 여부를 조정하여 다양한 스타일을 적용할 수 있습니다.

1.1. Import

import Textarea from '@components/Textarea';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Description

import Textarea from '@components/Textarea';

function Example() {
  return (
    <Textarea
      label="Description"
      id="description"
      placeholder="Enter your text here"
    />
  );
}

export default Example;

1.3. Changing the Size of the Textarea

Textarea 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 large입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기
large: 큰 크기 (기본값)
xl: 아주 큰 크기

Extra Small SizeSmall SizeMedium SizeLarge SizeExtra Large Size

import Textarea from '@components/Textarea';

function Example() {
  return (
    <>
      <Textarea label="Extra Small Size" id="xs" size="xs" placeholder="Extra small size" />
      <Textarea label="Small Size" id="small" size="small" placeholder="Small size" />
      <Textarea label="Medium Size" id="medium" size="medium" placeholder="Medium size" />
      <Textarea label="Large Size" id="large" size="large" placeholder="Large size" />
      <Textarea label="Extra Large Size" id="xl" size="xl" placeholder="Extra large size" />
    </>
  );
}

export default Example;

1.4. Changing the Color of the Textarea

Textarea 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 skyblue입니다:

red: 빨간색 테두리
skyblue: 파란색 테두리 (기본값)
green: 초록색 테두리
gray: 회색 테두리

Red ColorSkyblue ColorGreen ColorGray Color

import Textarea from '@components/Textarea';

function Example() {
  return (
    <>
      <Textarea label="Red Color" id="red" color="red" placeholder="Red color" />
      <Textarea label="Skyblue Color" id="skyblue" color="skyblue" placeholder="Skyblue color" />
      <Textarea label="Green Color" id="green" color="green" placeholder="Green color" />
      <Textarea label="Gray Color" id="gray" color="gray" placeholder="Gray color" />
    </>
  );
}

export default Example;

1.5. Changing the Resize Property

Textarea 컴포넌트는 다양한 크기 조절 가능 여부를 설정할 수 있습니다. 기본 resize 속성은 vertical입니다:

none: 크기 조절 불가
both: 가로 및 세로 크기 조절 가능
horizontal: 가로 크기만 조절 가능
vertical: 세로 크기만 조절 가능 (기본값)

No ResizeResize BothResize HorizontalResize Vertical

import Textarea from '@components/Textarea';

function Example() {
  return (
    <>
      <Textarea label="No Resize" id="resize-none" resize="none" placeholder="Resize disabled" />
      <Textarea label="Resize Both" id="resize-both" resize="both" placeholder="Resize in both directions" />
      <Textarea label="Resize Horizontal" id="resize-horizontal" resize="horizontal" placeholder="Resize horizontally" />
      <Textarea label="Resize Vertical" id="resize-vertical" resize="vertical" placeholder="Resize vertically" />
    </>
  );
}

export default Example;

1.6. Props

Textarea 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`label`	Textarea 필드의 레이블을 설정합니다.	`string`	`-`
`id`	Textarea 필드의 id 속성을 설정합니다.	`string`	`-`
`size`	Textarea 필드의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl"`	`"large"`
`color`	Textarea 필드의 테두리 색상을 설정합니다.	`"red" \| "skyblue" \| "green" \| "gray"`	`"skyblue"`
`resize`	Textarea 필드의 크기 조절 가능 여부를 설정합니다.	`"none" \| "both" \| "horizontal" \| "vertical"`	`"vertical"`
`className`	Textarea 필드에 추가적인 CSS 클래스를 적용합니다.	`string`	`-`
`placeholder`	Textarea 필드에 표시될 플레이스홀더 텍스트를 설정합니다.	`string`	`""`

1.7. Full Example

import Textarea from '@components/Textarea';

function Example() {
  return (
    <div>
      <Textarea 
        label="Description" 
        id="description" 
        size="large" 
        color="gray" 
        resize="none" 
        placeholder="Enter your text here" 
        className="mt-4"
      />
    </div>
  );
}

export default Example;

2. TextareaValue

TextareaValue 컴포넌트는 텍스트 영역에 입력된 값을 실시간으로 표시하는 기능을 제공합니다. 사용자가 입력한 내용이 화면에 즉시 반영됩니다.

2.1. Import

import TextareaValue from '@components/TextareaValue';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Textarea value:

import TextareaValue from '@components/TextareaValue';

function Example() {
  const [text, setText] = useState("Initial text");

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.target.value);
  };

  return (
    <TextareaValue 
      placeholder="Type something..." 
      value={text}
      onChange={handleChange}
    />
  );
}

export default Example;

2.3. Props

TextareaValue 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`placeholder`	텍스트 영역에 표시될 플레이스홀더 텍스트를 설정합니다.	`string`	`""`
`value`	텍스트 영역의 값을 설정합니다.	`string`	`""`
`onChange`	텍스트 영역의 값이 변경될 때 호출되는 핸들러입니다.	`(e: React.ChangeEvent<HTMLTextAreaElement>)`	`-`

2.4. Full Example

import TextareaValue from '@components/TextareaValue';

function Example() {
  const [text, setText] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.target.value);
  };

  return (
    <div>
      <TextareaValue 
        placeholder="Type your message here..." 
        value={text}
        onChange={handleChange}
      />
    </div>
  );
}

export default Example;