[Deploy] Develop -> Main

src/features/Common/AIChatModal.styles.ts

@@ -13,16 +13,17 @@ export const Container = styled.div`
   position: absolute;
   top: 70px;
   right: 0;
-  width: 450px;
-  height: 430px;
+  width: 500px;
+  height: 400px;
   z-index: 999;
+  will-change: transform, opacity;
 
   ${media.down(theme.breakPoints.desktop)} {
     position: relative;
     top: 0;
     right: 0;
     width: 100%;
-    height: auto;
+    height: 430px;
     margin: 20px 0;
     z-index: 1;
     box-shadow: none;
@@ -31,6 +32,7 @@ export const Container = styled.div`
   ${media.down(theme.breakPoints.tablet)} {
     padding: 20px;
     border-radius: 20px;
+    height: 380px;
   }
 `
 
@@ -42,6 +44,7 @@ export const Title = styled.h2`
   font-weight: 600;
   color: ${theme.colors.primary2};
   padding: 10px 0;
+  flex-shrink: 0;
 `
 
 export const IconWrapper = styled.div`
@@ -57,22 +60,47 @@ export const IconWrapper = styled.div`
   }
 `
 
-export const ChatBox = styled.div`
+interface ChatBoxProps {
+  isEmpty?: boolean
+}
+
+export const ChatBox = styled.div<ChatBoxProps>`
   flex: 1;
   background: ${theme.colors.white};
   border-radius: 16px;
   margin-bottom: 16px;
   overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  /* 비어있을 때는 중앙 정렬 연산 수행 */
+  justify-content: ${({ isEmpty }) => (isEmpty ? 'center' : 'flex-start')};
+  align-items: ${({ isEmpty }) => (isEmpty ? 'center' : 'stretch')};
+
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: ${theme.colors.GRAY || '#e0e0e0'};
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
 `
 
 export const InputWrapper = styled.div`
   display: flex;
   align-items: center;
-
   background: ${theme.colors.white};
   border-radius: 24px;
   padding: 4px 4px 4px 16px;
   width: 100%;
+  flex-shrink: 0;
 
   &:focus-within {
     box-shadow: 0 0 0 2px ${theme.colors.primary2}40;
@@ -86,7 +114,6 @@ export const Input = styled.input`
   background: transparent;
   font-size: 15px;
   padding: 8px 0;
-  border-radius: 20px;
 
   ${media.down(theme.breakPoints.mobile)} {
     font-size: 14px;
@@ -100,6 +127,7 @@ export const SendButton = styled.button`
   align-items: center;
   border-radius: 20px;
   padding: 14.5px 17px 13.5px 17px;
+  margin-left: 8px;
   background: ${theme.colors.primary2};
   color: ${theme.colors.white};
   border: none;
@@ -110,4 +138,58 @@ export const SendButton = styled.button`
   &:active {
     transform: scale(0.9);
   }
+
+  &:disabled {
+    background: ${theme.colors.GRAY || '#cbd5e1'};
+    cursor: not-allowed;
+  }
+`
+export const UserMessageWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`
+
+export const UserBubble = styled.div`
+  background: ${theme.colors.primary2};
+  color: ${theme.colors.white};
+  padding: 10px 16px;
+  border-radius: 16px 16px 4px 16px;
+  font-size: 14px;
+  line-height: 1.4;
+  max-width: 75%;
+  word-break: break-all;
+`
+
+export const BotMessageWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+`
+
+export const BotContentArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 80%;
+`
+
+export const BotFallbackBubble = styled.div`
+  background: ${theme.colors.GRAY || '#f1f3f5'};
+  color: ${theme.colors.black || '#333333'};
+  padding: 10px 14px;
+  border-radius: 4px 16px 16px 16px;
+  font-size: 14px;
+  line-height: 1.4;
+`
+
+export const EmptyState = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  color: ${theme.colors.GRAY || '#adb5bd'};
 `

src/features/Common/AIChatModal.tsx

@@ -1,7 +1,91 @@
+import { useQueryClient } from '@tanstack/react-query' // 1. useQueryClient 임포트
+import React, { useEffect, useRef, useState } from 'react'
+
+import { nlpApi } from '@/shared/api/home/home'
+import ChatIcon from '@/shared/assets/icons/chat.svg'
+import RobotIcon from '@/shared/assets/icons/robot.svg'
+import type { ChatMessage } from '@/shared/types/home/home'
+
 import { SparkleIcon } from '../Home/Icon/SparkleIcon'
 import * as S from './AIChatModal.styles'
 
 function AIChatModal() {
+  const queryClient = useQueryClient()
+  const [inputValue, setInputValue] = useState('')
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const chatBoxRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (chatBoxRef.current) {
+      chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight
+    }
+  }, [messages, isLoading])
+
+  const handleSendMessage = async () => {
+    if (!inputValue.trim() || isLoading) return
+
+    const userText = inputValue
+    setInputValue('')
+
+    const userMessage: ChatMessage = {
+      id: crypto.randomUUID(),
+      sender: 'user',
+      text: userText,
+    }
+    setMessages((prev) => [...prev, userMessage])
+    setIsLoading(true)
+
+    try {
+      const response = await nlpApi.sendMessage(userText)
+
+      if (response.isSuccess && response.result) {
+        const botMessage: ChatMessage = {
+          id: crypto.randomUUID(),
+          sender: 'bot',
+          text: response.result.reply,
+          action: response.result.action,
+        }
+        setMessages((prev) => [...prev, botMessage])
+
+        if (response.result.action === 'UPDATED') {
+          queryClient.invalidateQueries({ queryKey: ['calendar'] })
+          queryClient.invalidateQueries({ queryKey: ['events'] })
+          queryClient.invalidateQueries({ queryKey: ['todos'] })
+        }
+      } else {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: crypto.randomUUID(),
+            sender: 'bot',
+            text: response.message || '죄송해요, 잠시 대화를 이해하지 못했어요.',
+          },
+        ])
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: crypto.randomUUID(),
+          sender: 'bot',
+          text: 'AI 비서 서버와 연결에 실패했습니다. 잠시 후 다시 시도해주세요.',
+        },
+      ])
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSendMessage()
+    }
+  }
+
+  const isChatEmpty = messages.length === 0 && !isLoading
+
   return (
     <S.Container>
       <S.Title>
@@ -11,11 +95,65 @@ function AIChatModal() {
         AI 비서에게 일정을 맡기세요
       </S.Title>
 
-      <S.ChatBox>{/* 채팅 메시지들이 들어갈 공간으로 비워두겠습니다 */}</S.ChatBox>
+      <S.ChatBox ref={chatBoxRef} isEmpty={isChatEmpty}>
+        {isChatEmpty ? (
+          <S.EmptyState>
+            <img src={ChatIcon} alt="채팅 시작" width="150" height="150" />
+          </S.EmptyState>
+        ) : (
+          <>
+            {messages.map((msg) => {
+              if (msg.sender === 'user') {
+                return (
+                  <S.UserMessageWrapper key={msg.id}>
+                    <S.UserBubble>{msg.text}</S.UserBubble>
+                  </S.UserMessageWrapper>
+                )
+              }
+
+              return (
+                <S.BotMessageWrapper key={msg.id}>
+                  <img
+                    src={RobotIcon}
+                    width={32}
+                    height={32}
+                    style={{ flexShrink: 0 }}
+                    alt="robot"
+                  />
+                  <S.BotContentArea>
+                    <S.BotFallbackBubble>{msg.text}</S.BotFallbackBubble>
+                  </S.BotContentArea>
+                </S.BotMessageWrapper>
+              )
+            })}
+
+            {isLoading && (
+              <S.BotMessageWrapper>
+                <img src={RobotIcon} width={32} height={32} style={{ flexShrink: 0 }} alt="robot" />
+                <S.BotContentArea>
+                  <S.BotFallbackBubble>답변을 생각하고 있습니다...</S.BotFallbackBubble>
+                </S.BotContentArea>
+              </S.BotMessageWrapper>
+            )}
+          </>
+        )}
+      </S.ChatBox>
 
       <S.InputWrapper>
-        <S.Input placeholder="예시) 내일 오후 3시 치과 진료 받으러 감" />
-        <S.SendButton aria-label="전송">↑</S.SendButton>
+        <S.Input
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="예시) 내일 오후 3시 치과 진료 받으러 감"
+          disabled={isLoading}
+        />
+        <S.SendButton
+          onClick={handleSendMessage}
+          disabled={isLoading || !inputValue.trim()}
+          aria-label="전송"
+        >
+          ↑
+        </S.SendButton>
       </S.InputWrapper>
     </S.Container>
   )

src/shared/api/home/home.ts

@@ -1,5 +1,6 @@
 import type {
   BriefingResponse,
+  ChatResponse,
   ReminderResponse,
   SuggestionListResponse,
 } from '@/shared/types/home/home'
@@ -40,3 +41,10 @@ export const suggestionApi = {
     await axiosInstance.delete('/suggestions')
   },
 }
+
+export const nlpApi = {
+  sendMessage: async (message: string): Promise<ChatResponse> => {
+    const res = await axiosInstance.post<ChatResponse>('/chat', { message })
+    return res.data
+  },
+}