Merge pull request #83 from geulDa/feat/#69/chatbotpage

✨Feat: 챗봇페이지 제작

Author: KongMezu

src/pages/chatbot/components/ChattingBubble.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/shared/lib';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const chatBubbleStyle = cva(
+  `
+  flex items-center
+  px-[1.9rem] py-[1.3rem]
+  rounded-[2rem]
+  text-label-lg foreground
+  break-words
+  w-fit max-w-[80%]
+  `,
+  {
+    variants: {
+      variant: {
+        received: 'bg-gray-100 self-start',
+        sent: 'bg-mint-100  self-end',
+      },
+    },
+    defaultVariants: {
+      variant: 'received',
+    },
+  },
+);
+
+interface ChattingProps extends VariantProps<typeof chatBubbleStyle> {
+  message: string;
+}
+
+export default function Chatting({ message, variant }: ChattingProps) {
+  return (
+    <div className='w-full flex flex-col'>
+      <div className={cn(chatBubbleStyle({ variant }))}>{message}</div>
+    </div>
+  );
+}

src/pages/chatbot/components/ChattingInput.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+import { cva } from 'class-variance-authority';
+import { useChattingInput } from '@/shared/hooks/useChattingInput';
+
+const inputWrapperStyle = cva(
+  'flex items-center justify-between w-full bg-gray-100 px-[0.6rem] py-[0.7rem] rounded-[2rem]',
+);
+
+interface ChattingInputProps {
+  onSend?: (text: string) => void;
+}
+
+
+export default function ChattingInput({ onSend }: ChattingInputProps) {
+  const {
+    message,
+    setMessage,
+    inputRef,
+    handleSubmit,
+    handleKeyDown,
+  } = useChattingInput({ onSend });
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-0 left-1/2 -translate-x-1/2 w-full bg-gray-100 px-[0.6rem] py-[0.7rem] flex items-center gap-[0.8rem]',
+      )}
+    >
+      <div
+        className={cn(
+          inputWrapperStyle(),
+          'flex-1 h-[4rem] bg-white border border-gray-200 rounded-[2rem] flex items-center pl-[1.4rem] pr-[1.2rem] py-[1rem]',
+        )}
+      >
+        <input
+          ref={inputRef}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          type='text'
+          placeholder='무엇이든 물어보세요'
+          className='w-full bg-transparent outline-none text-label-lg placeholder:text-gray-300 text-gray-900'
+        />
+      </div>
+
+      <button
+        type='button'
+        onClick={handleSubmit}
+        className={cn(
+          'w-[4rem] h-[4rem] flex justify-center items-center rounded-[2rem] bg-mint-500 flex-shrink-0',
+        )}
+      >
+        <Icon name='backto' size={20} color='gray-50' rotate={90} />
+      </button>
+    </div>
+  );
+}

src/pages/chatbot/index.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/shared/lib';
+import { Header } from '@/shared/components';
+import Chatting from '@/pages/chatbot/components/ChattingBubble';
+import ChattingInput from '@/pages/chatbot/components/ChattingInput';
+
+const chatPageStyle = cva(
+  'relative w-full h-dvh overflow-hidden bg-white flex flex-col',
+);
+
+const mainStyle = cva(
+  'relative w-full flex-1 pt-[14.4rem] pb-[10rem] px-[2.4rem] overflow-auto flex flex-col gap-[0.6rem]',
+);
+
+const introStyle = cva('flex flex-col items-start gap-[1rem]');
+
+export default function ChatPage() {
+  const router = useRouter();
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  type Message = {
+    id: number;
+    text: string;
+    variant: 'received' | 'sent';
+  };
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  // 새로운 채팅 자동 스크롤
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // 메세지 전송 핸들러
+  const handleSend = (text: string) => {
+    if (!text.trim()) return;
+    const newMsg = { id: Date.now(), text, variant: 'sent' as const };
+    setMessages((prev) => [...prev, newMsg]);
+  };
+
+  return (
+    <div className={cn(chatPageStyle())}>
+      {/* 헤더 고정 */}
+      <div className='fixed top-0 left-0 w-full z-10'>
+        <Header title='ChatBot' onClick={() => router.back()} />
+      </div>
+
+      {/* 메인 콘텐츠 */}
+      <main className={cn(mainStyle())}>
+        {/* 로고 + 기본 멘트 */}
+        <div className={cn(introStyle())}>
+          {/* 로고 자리 (임시) */}
+          <div className='w-[6rem] h-[6rem] rounded-full bg-gray-200 flex-shrink-0' />
+          <Chatting
+            message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
+            variant='received'
+          />
+          <Chatting
+            message='원하시는 정보를 물어봐주세요!'
+            variant='received'
+          />
+        </div>
+
+        {/* 사용자 메시지 */}
+        {messages
+          .filter((msg) => msg.id > 2)
+          .map((msg) => (
+            <Chatting key={msg.id} message={msg.text} variant={msg.variant} />
+          ))}
+
+        {/* 스크롤 */}
+        <div ref={bottomRef} />
+      </main>
+
+      {/* 입력창 */}
+      <ChattingInput onSend={handleSend} />
+    </div>
+  );
+}

src/shared/hooks/useChattingInput.ts

@@ -0,0 +1,49 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+
+interface UseChattingInputProps {
+  onSend?: (text: string) => void;
+}
+
+export const useChattingInput = ({ onSend }: UseChattingInputProps) => {
+  const [message, setMessage] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // focus 시 스크롤 중앙으로
+  useEffect(() => {
+    const handleFocus = () => {
+      setTimeout(() => {
+        inputRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      }, 200);
+    };
+    const el = inputRef.current;
+    el?.addEventListener('focus', handleFocus);
+    return () => el?.removeEventListener('focus', handleFocus);
+  }, []);
+
+  // 메시지 전송
+  const handleSubmit = () => {
+    if (!message.trim()) return;
+    onSend?.(message);
+    setMessage('');
+  };
+
+  // 엔터키 전송
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return {
+    message,
+    setMessage,
+    inputRef,
+    handleSubmit,
+    handleKeyDown,
+  };
+};