[style, docs] 챗봇 로딩 컴포넌트 /페이지 안 컴포넌트 네이밍 변경 (#81)

* [style] 추천 배경 이미지 변경 , repeat 넣기

* [style] 하트 z-index 제거

* [style] 배경 변경

* [style] input 최대 width 제한

* [style] 스켈레톤 ui 추가(spinner 오류로 임시)

* [feat, fix] textarea 유틸함수 추가 및 수정 (resize. submit)

* [fix] 채팅 목록 및 입력창 컴포넌트 분리

* [feat] textarea 입력 시 mychat이랑 연결

* [fix] husky 오류 해결

* [docs] 챗봇페이지 컴포넌트 직관적인 네이밍으로 변경

* [feat] 채팅 로딩 컴포넌트 구현

Author: ahk0413

src/domains/recommend/components/ChatCocktailCard.tsx renamed to src/domains/recommend/components/BotCocktailCard.tsx

@@ -3,7 +3,7 @@ import Dummy from '@/shared/assets/images/dummy/exampleCocktail.png';
 import Link from 'next/link';
 import Keep from '@/domains/shared/components/keep/Keep';
 
-function ChatCocktailCard() {
+function BotCocktailCard() {
   return (
     <div className="relative flex flex-col w-full min-w-[200px] rounded-2xl overflow-hidden bg-white shadow-[0_0_12px_rgba(255,255,255,0.4)]">
       <Link href="/" className="block relative">
@@ -20,4 +20,4 @@ function ChatCocktailCard() {
     </div>
   );
 }
-export default ChatCocktailCard;
+export default BotCocktailCard;

src/domains/recommend/components/SsuryChat.tsx renamed to src/domains/recommend/components/BotMessage.tsx

@@ -3,16 +3,16 @@
 import Ssury from '@/shared/assets/ssury/ssury_shaker.webp';
 import Image from 'next/image';
 import { useState } from 'react';
-import ChatRadio from './ChatRadio';
-import ChatCocktailCard from './ChatCocktailCard';
+import BotCocktailCard from './BotCocktailCard';
+import BotOptions from './BotOptions';
 
 interface Message {
   id: string;
   text?: string;
   type?: 'radio' | 'text' | 'recommend';
 }
 
-function SsuryChat() {
+function BotMessage() {
   const [selected, setSelected] = useState('option1');
 
   // radio 옵션
@@ -61,13 +61,13 @@ function SsuryChat() {
             {msg.type === 'recommend' ? (
               <ul className="inline-grid grid-cols-1 sm:grid-cols-3 gap-2 justify-start">
                 <li>
-                  <ChatCocktailCard />
+                  <BotCocktailCard />
                 </li>
                 <li>
-                  <ChatCocktailCard />
+                  <BotCocktailCard />
                 </li>
                 <li>
-                  <ChatCocktailCard />
+                  <BotCocktailCard />
                 </li>
               </ul>
             ) : (
@@ -76,7 +76,7 @@ function SsuryChat() {
 
                 {/* radio */}
                 {msg.type === 'radio' && (
-                  <ChatRadio options={options} value={selected} onChange={setSelected} />
+                  <BotOptions options={options} value={selected} onChange={setSelected} />
                 )}
               </div>
             )}
@@ -86,4 +86,4 @@ function SsuryChat() {
     </article>
   );
 }
-export default SsuryChat;
+export default BotMessage;

src/domains/recommend/components/ChatRadio.tsx renamed to src/domains/recommend/components/BotOptions.tsx

@@ -9,7 +9,7 @@ interface RadioGroupProps {
   onChange: (value: string) => void;
 }
 
-function ChatRadio({ options, value, onChange }: RadioGroupProps) {
+function BotOptions({ options, value, onChange }: RadioGroupProps) {
   return (
     <div role="radiogroup" className="flex flex-col gap-3 mt-5">
       {options.map((opt) => (
@@ -39,4 +39,4 @@ function ChatRadio({ options, value, onChange }: RadioGroupProps) {
     </div>
   );
 }
-export default ChatRadio;
+export default BotOptions;

src/domains/recommend/components/ChatSection.tsx

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

src/domains/recommend/components/ChatForm.tsx renamed to src/domains/recommend/components/MessageInput.tsx

@@ -9,7 +9,7 @@ interface Props {
   onSubmit: (message: string) => void;
 }
 
-function ChatForm({ onSubmit }: Props) {
+function MessageInput({ onSubmit }: Props) {
   const [value, setValue] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -51,4 +51,4 @@ function ChatForm({ onSubmit }: Props) {
     </div>
   );
 }
-export default ChatForm;
+export default MessageInput;

src/domains/recommend/components/TypingIndicator.tsx

@@ -0,0 +1,14 @@
+import Image from 'next/image';
+import shaker from '@/shared/assets/images/shaker.png';
+
+function TypingIndicator() {
+  return (
+    <div className="relative flex items-center w-fit p-3 rounded-2xl rounded-tl-none bg-white text-black overflow-hidden">
+      <p className="inline-block animate-fade-in">준비 중…</p>
+      <div className="relative w-10 h-10 animate-shake">
+        <Image src={shaker} alt="Cocktail Shaker" fill className="object-contain" priority />
+      </div>
+    </div>
+  );
+}
+export default TypingIndicator;

src/domains/recommend/components/MyChat.tsx renamed to src/domains/recommend/components/UserMessage.tsx

@@ -12,7 +12,7 @@ interface Props {
 //   { id: '2', sender: 'user', text: '배고파요' },
 // ];
 
-function MyChat({ message }: Props) {
+function UserMessage({ message }: Props) {
   return (
     <article aria-label="내 메시지" className="flex flex-col items-end">
       <header className="w-fit">
@@ -28,4 +28,4 @@ function MyChat({ message }: Props) {
     </article>
   );
 }
-export default MyChat;
+export default UserMessage;

src/shared/assets/images/shaker.png

@@ -55,24 +55,44 @@
     display: none;
   }
 
-  @media (min-width: 768px) {
-    .custom-scrollbar {
-      scrollbar-width: thin; /* Firefox 전용 */
-      scrollbar-color: #7a7581; /* Firefox 전용: thumb track */
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateY(0) rotate(0deg) scale(1);
     }
 
-    .custom-scrollbar::-webkit-scrollbar {
-      width: 4px;
-      border-radius: 8px;
+    10% {
+      transform: rotate(-25deg) scaleX(1.05) scaleY(0.95);
+    }
+    20% {
+      transform: rotate(25deg) scaleX(0.95) scaleY(1.05);
+    }
+    30% {
+      transform: rotate(-20deg) scaleX(1.05) scaleY(0.95);
+    }
+    40% {
+      transform: rotate(20deg) scaleX(0.95) scaleY(1.05);
     }
 
-    .custom-scrollbar::-webkit-scrollbar-thumb {
-      background-color: #ab98c2;
-      border-radius: 8px;
+    50% {
+      transform: translateY(-10px) rotate(360deg) scale(1);
     }
 
-    .custom-scrollbar::-webkit-scrollbar-track {
-      background-color: aliceblue;
+    60% {
+      transform: translateY(-25px) rotate(20deg) scaleX(1.05) scaleY(0.95);
+    }
+    70% {
+      transform: translateY(-10px) rotate(-25deg) scaleX(0.95) scaleY(1.05);
     }
+    80% {
+      transform: translateY(-5px) rotate(20deg) scaleX(1.02) scaleY(0.98);
+    }
+    90% {
+      transform: translateY(-2px) rotate(-15deg) scale(1);
+    }
+  }
+
+  .animate-shake {
+    animation: shake 3s ease-in-out infinite;
   }
 }