Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
import { useRef, useState } from 'react';
import { Icon } from '@/components/icon';
interface IProps {
onSubmit: (text: string) => void;
}
export const ChatInput = ({ onSubmit }: IProps) => {
const [message, setMessage] = useState('');
const inputRef = useRef<HTMLTextAreaElement>(null);
// Enter 키로 전송, Shift + Enter 로 줄바꿈
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit();
}
};
const handleSubmit = () => {
const changedMessage = message.trim();
if (!changedMessage) {
inputRef.current?.focus();
setMessage('');
return;
}
onSubmit(changedMessage);
setMessage('');
inputRef.current?.focus();
};
return (
<div className='flex w-full justify-center px-5'>
<div className='relative w-full max-w-110'>
<textarea
ref={inputRef}
className='bg-mono-white text-text-md-medium w-full resize-none rounded-2xl border border-gray-300 px-4 py-4 text-gray-800 placeholder:text-gray-500 focus:outline-none [&::-webkit-scrollbar]:hidden'
placeholder='메세지를 입력해주세요.'
rows={1}
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeyDown}
/>
<button className='absolute top-4 right-5 h-6 w-6' aria-label='메세지 전송' type='button'>
<Icon id='send' className='cursor-pointer text-gray-500' onClick={handleSubmit} />
</button>
</div>
</div>
);
};
|