Comment 데모

DS Comment는 한 줄 댓글 입력과 “보내기” 버튼(·Enter)이 묶인 필드입니다. onSend는 값을 넘기지 않으므로, 보낸 내용이 필요하면 제어 모드(value state)로 읽으면 됩니다.

import

default export입니다.

import Comment from "@/shared/components/ds/Comment/Comment";

import type { CommentProps } from "@/shared/components/ds/Comment/Comment";

기본 (비제어)

내부 state로 관리됩니다. 기본 `placeholder`·`aria-label`은 컴포넌트에 정의되어 있습니다.

<Comment />

<Comment placeholder="댓글을 입력해 주세요" />

onSend (Enter 또는 보내기)

`onSend`는 보낸 직전 입력 문자열을 인자로 넘깁니다(한글 IME·Enter 시 상위 `value` state와 어긋날 수 있으므로 이 인자 사용을 권장). 보내기 버튼·`Enter`로 호출됩니다.

const [text, setText] = useState("");
const [lastSent, setLastSent] = useState<string | null>(null);

<Comment
  value={text}
  onChange={(e) => setText(e.target.value)}
  onSend={(sent) => setLastSent(sent)}
/>

아직 전송하지 않았습니다.

제어 (value + onChange)

`value`를 주면 제어 모드입니다.

const [body, setBody] = useState("");

<Comment
  value={body}
  onChange={(e) => setBody(e.target.value)}
  placeholder="제어 예시"
/>

현재 값: «빈 문자열»

비활성 (disabled)

`disabled`이면 입력·보내기가 막힙니다.

<Comment disabled defaultValue="비활성 예시" />

aria-label · placeholder

`aria-label`·`placeholder`로 맥락에 맞게 바꿀 수 있습니다.

<Comment
  aria-label="Q&A에 답 남기기"
  placeholder="궁금한 점을 짧게 적어 주세요"
/>

스타일 확장 (className, wrapperClassName)

`className`은 입력에, `wrapperClassName`은 둥근 래퍼(배경·보버)에 붙습니다.

<Comment
  className="text-(--color-text-primary)"
  wrapperClassName="w-full max-w-xl"
  placeholder="가로만 넓힌 예시"
/>