Merge pull request #57 from MARU-EGG/TSK-49

[Tsk-49] ChatForm enter event issue clear

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<HTMLFormElement>) => {
+    async (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
       e.preventDefault();
       try {
         addMessage({ content, role: 'user' });

src/hooks/use-textarea-submit.hooks.ts

@@ -0,0 +1,14 @@
+interface TextAreaSubmitHooksProps {
+  handleSubmit: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+export function useTextAreaSubmit({ handleSubmit }: TextAreaSubmitHooksProps) {
+  const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return { handlePressEnter };
+}

src/ui/components/molecule/chat-form/chat-form.tsx

@@ -1,27 +1,34 @@
-// 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';
 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 && <AutoCompleteList results={results} onSelect={handleSelect} />}
       <form
         className={cn('flex flex-nowrap rounded-2xl border py-2 pr-1', 'bg-background-default')}
         onSubmit={handleSubmit}
       >
-        <TextInput
-          value={content}
-          onValueChange={handleChange}
-          placeholder="메시지를 입력해주세요."
+        <textarea
+          rows={2}
+          className={cn(
+            `w-full resize-none rounded-2xl bg-transparent px-4 py-2 text-base`,
+            `placeholder:text-[#72777A] focus:outline-none`,
+            `disabled:cursor-wait`,
+          )}
           disabled={disabled}
+          value={content}
+          onChange={(e) => handleChange(e.target.value)}
+          onKeyDown={handlePressEnter}
+          placeholder="질문을 입력해주세요"
         />
         <IconButton type="submit" disabled={disabled}>
           <div className="pr-2">