[feat] 챗봇 추천페이지 입력 폼 기능

src/app/recommend/page.tsx

@@ -1,6 +1,4 @@
-import ChatForm from '@/domains/recommend/components/ChatForm';
-import MyChat from '@/domains/recommend/components/MyChat';
-import SsuryChat from '@/domains/recommend/components/SsuryChat';
+import ChatSection from '@/domains/recommend/components/ChatSection';
 import Bg from '@/shared/assets/images/recommend_bg.webp';
 
 function Page() {
@@ -10,13 +8,7 @@ function Page() {
       style={{ backgroundImage: `url(${Bg.src})` }}
     >
       <h1 className="sr-only">취향추천하기</h1>
-      <div className="page-layout max-w-1024 py-12 ">
-        <div className="flex flex-col gap-10 pb-20">
-          <SsuryChat />
-          <MyChat></MyChat>
-        </div>
-      </div>
-      <ChatForm />
+      <ChatSection />
     </div>
   );
 }

src/domains/recipe/skeleton/SkeletonRecipe.tsx

@@ -38,7 +38,6 @@ function SkeletonRecipe() {
           </li>
         ))}
       </ul>
-
     </div>
   );
 }

src/domains/recommend/components/ChatForm.tsx

@@ -1,16 +1,23 @@
 'use client';
 
 import Send from '@/shared/assets/icons/send_36.svg';
-import { keyDown } from '@/shared/utills/keyDown';
+import { handleTextareaSubmit } from '@/shared/utills/handleTextareaSubmit';
+import { resizeTextarea } from '@/shared/utills/textareaResize';
+import { useRef, useState } from 'react';
 
-function ChatForm() {
-  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    const target = e.currentTarget;
+interface Props {
+  onSubmit: (message: string) => void;
+}
+
+function ChatForm({ onSubmit }: Props) {
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-    if (target.value == '') {
-      target.style.height = '';
-    }
-    target.style.height = `${target.scrollHeight}px`;
+  const handleSubmit = (value: string) => {
+    const text = value.trim();
+    if (!text) return;
+    onSubmit(text);
+    setValue('');
   };
 
   return (
@@ -21,15 +28,19 @@ function ChatForm() {
             질문 입력창
           </label>
           <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => handleTextareaSubmit(e, textareaRef.current, handleSubmit)}
             id="chatInput"
             name="chatInput"
-            onKeyDown={(e) => keyDown(e)}
-            onInput={(e) => handleInput(e)}
+            onInput={(e) => resizeTextarea(e.currentTarget)}
             placeholder="칵테일 추천 질문을 입력해주세요."
             className="w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5 rounded-lg h-[40px] md:h-[52px] max-h-[160px] md:max-h-[280px] bg-white text-primary placeholder:text-gray-dark resize-none outline-none"
           />
           <button
             type="button"
+            onClick={() => handleTextareaSubmit(null, textareaRef.current, handleSubmit)}
             aria-label="보내기"
             className="flex-center w-10 md:w-13 h-10 md:h-13 rounded-xl border-1 border-white bg-secondary/20"
           >

src/domains/recommend/components/ChatSection.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+import ChatForm from './ChatForm';
+import MyChat from './MyChat';
+import SsuryChat from './SsuryChat';
+
+function ChatSection() {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const handleSubmit = (message: string) => {
+    setMessages((prev) => [...prev, message]);
+  };
+
+  return (
+    <section className="page-layout max-w-1024 py-12 ">
+      <h2 className="sr-only">대화 목록 및 입력 창</h2>
+      <div className="flex flex-col gap-10 pb-20">
+        <SsuryChat />
+        {messages.map((msg, i) => (
+          <MyChat key={i} message={msg} />
+        ))}
+      </div>
+      <ChatForm onSubmit={handleSubmit} />
+    </section>
+  );
+}
+export default ChatSection;

src/domains/recommend/components/MyChat.tsx

@@ -1,21 +1,18 @@
-interface Message {
-  id: string;
-  sender: 'ssury' | 'user';
-  text: string;
-  type?: 'radio' | 'text';
+interface Props {
+  message: string;
 }
 
-// 메시지 (연속 메시지)
-const messages: Message[] = [
-  {
-    id: '1',
-    sender: 'user',
-    text: '냥냥냥글자가길어지면 어케될까요 너무너무너무 궁금해요 하하하하하하하하하하하하하하하하하하ㅏ',
-  },
-  { id: '2', sender: 'user', text: '배고파요' },
-];
+// 메시지 (연속 메시지) 예시..
+// const messages: Message[] = [
+//   {
+//     id: '1',
+//     sender: 'user',
+//     text: '냥냥냥글자가길어지면 어케될까요 너무너무너무 궁금해요 하하하하하하하하하하하하하하하하하하ㅏ',
+//   },
+//   { id: '2', sender: 'user', text: '배고파요' },
+// ];
 
-function MyChat() {
+function MyChat({ message }: Props) {
   return (
     <article aria-label="내 메시지" className="flex flex-col items-end">
       <header className="w-fit">
@@ -24,14 +21,9 @@ function MyChat() {
 
       {/* 메시지 그룹 */}
       <div className="flex flex-col items-end gap-3 mt-3 pr-3 max-w-[80%]">
-        {messages.map((msg) => (
-          <div
-            key={msg.id}
-            className="w-fit min-w-[120px] p-3 rounded-2xl rounded-tr-none bg-tertiary text-white"
-          >
-            <p className="whitespace-pre-line">{msg.text}</p>
-          </div>
-        ))}
+        <div className="w-fit min-w-[120px] p-3 rounded-2xl rounded-tr-none bg-tertiary text-white">
+          <p className="whitespace-pre-line">{message}</p>
+        </div>
       </div>
     </article>
   );

src/shared/utills/handleTextareaSubmit.ts

@@ -0,0 +1,34 @@
+export const handleTextareaSubmit = (
+  e: React.KeyboardEvent<HTMLTextAreaElement> | null,
+  textarea: HTMLTextAreaElement | null,
+  onSubmit: (value: string) => void
+) => {
+  if (!textarea) return;
+
+  if (!e) {
+    const value = textarea.value.trim();
+    if (!value) return;
+
+    onSubmit(value);
+    textarea.value = '';
+    textarea.style.height = '';
+    return;
+  }
+
+  // 엔터 처리
+  if (e.key === 'Enter') {
+    if (e.shiftKey) return; // Shift+Enter
+
+    e.preventDefault();
+
+    // mac OS 일때는 Composing 방지
+    if (e.nativeEvent.isComposing) return;
+
+    const value = textarea.value.trim();
+    if (!value) return;
+
+    onSubmit(value);
+    textarea.value = '';
+    textarea.style.height = '';
+  }
+};

src/shared/utills/textareaResize.ts

@@ -0,0 +1,5 @@
+export const resizeTextarea = (textarea: HTMLTextAreaElement) => {
+  if (!textarea) return;
+  textarea.style.height = '';
+  textarea.style.height = `${textarea.scrollHeight}px`;
+};