File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { useState } from 'react';
import { Field } from '@/components/ui/field';
interface BoardContentFieldProps {
name: string;
label: string;
defaultValue?: string;
maxLength: number;
placeholder?: string;
}
/**
* 본문/답변 입력 — 글자수 카운트가 붙은 textarea(시안의 "50/1000자" 표기).
*
* 시안은 리치 텍스트 에디터(굵게·기울임·링크·목록)지만, 사용자 확인 결과 **이번 범위는 로직만**
* 이라 일반 textarea로 구현했다. 에디터 라이브러리 도입은 별도 협의 대상이다 — 도입하더라도
* 값이 `name`으로 제출되는 계약만 지키면 이 컴포넌트만 교체하면 된다.
*
* 상한 초과는 `maxLength` 속성으로 입력 단계에서 막지만, 최종 판정은 Server Action의 검증이다
* (화면 속성은 신뢰 경계가 아니다).
*/
export function BoardContentField({
name,
label,
defaultValue = '',
maxLength,
placeholder,
}: BoardContentFieldProps) {
const [length, setLength] = useState(defaultValue.length);
return (
<Field label={label}>
<textarea
name={name}
defaultValue={defaultValue}
maxLength={maxLength}
placeholder={placeholder}
rows={6}
onChange={(event) => setLength(event.target.value.length)}
className="w-full rounded-md border border-border bg-surface px-3 py-2 text-body-md text-foreground placeholder:text-foreground-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
/>
<p className="text-right text-body-sm text-foreground-muted">
{length}/{maxLength}자
</p>
</Field>
);
}