diff --git a/src/hooks/use-chat-form.hooks.ts b/src/hooks/use-chat-form.hooks.ts index 0fe9ce9..a53642b 100644 --- a/src/hooks/use-chat-form.hooks.ts +++ b/src/hooks/use-chat-form.hooks.ts @@ -1,4 +1,3 @@ -// src/hooks/useChatForm.ts import { useState, useCallback } from 'react'; import { useAutoComplete } from './use-auto-complete.hooks'; import useChatStore from '../store/chat-store'; @@ -46,7 +45,7 @@ const useChatForm = () => { }; const handleSubmit = useCallback( - async (e: React.FormEvent) => { + async (e: React.FormEvent | React.KeyboardEvent) => { e.preventDefault(); try { addMessage({ content, role: 'user' }); diff --git a/src/hooks/use-textarea-submit.hooks.ts b/src/hooks/use-textarea-submit.hooks.ts new file mode 100644 index 0000000..f55d177 --- /dev/null +++ b/src/hooks/use-textarea-submit.hooks.ts @@ -0,0 +1,14 @@ +interface TextAreaSubmitHooksProps { + handleSubmit: (e: React.FormEvent | React.KeyboardEvent) => void; +} + +export function useTextAreaSubmit({ handleSubmit }: TextAreaSubmitHooksProps) { + const handlePressEnter = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSubmit(e); + } + }; + + return { handlePressEnter }; +} diff --git a/src/ui/components/molecule/chat-form/chat-form.tsx b/src/ui/components/molecule/chat-form/chat-form.tsx index 2219e3d..cb2a8d0 100644 --- a/src/ui/components/molecule/chat-form/chat-form.tsx +++ b/src/ui/components/molecule/chat-form/chat-form.tsx @@ -1,4 +1,3 @@ -// src/ui/molecule/chat-form.tsx import React from 'react'; import TextInput from '../../atom/text-input/text-input'; import IconButton from '../../atom/icon/icon-button'; @@ -6,10 +5,11 @@ import { ReactComponent as SendIcon } from '../../../../assets/Send.svg'; import AutoCompleteList from '../../atom/auto-complete/auto-complete'; import { cn } from '../../../../utils/style'; import useChatForm from '../../../../hooks/use-chat-form.hooks'; +import { useTextAreaSubmit } from '../../../../hooks/use-textarea-submit.hooks'; const ChatForm = () => { const { content, autoOpen, disabled, results, handleChange, handleSelect, handleSubmit } = useChatForm(); - + const { handlePressEnter } = useTextAreaSubmit({ handleSubmit }); return ( <> {autoOpen && } @@ -17,11 +17,18 @@ const ChatForm = () => { className={cn('flex flex-nowrap rounded-2xl border py-2 pr-1', 'bg-background-default')} onSubmit={handleSubmit} > - handleChange(e.target.value)} + onKeyDown={handlePressEnter} + placeholder="질문을 입력해주세요" />