diff --git a/src/domains/recommend/components/ChatList.tsx b/src/domains/recommend/components/ChatList.tsx index 2178539e..4687b795 100644 --- a/src/domains/recommend/components/ChatList.tsx +++ b/src/domains/recommend/components/ChatList.tsx @@ -20,7 +20,7 @@ function ChatList({ messages, userCurrentStep, onSelectedOption }: ChatListProps
{messages.map((msg, i) => { diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx index db972b7c..1158db08 100644 --- a/src/domains/recommend/components/ChatSection.tsx +++ b/src/domains/recommend/components/ChatSection.tsx @@ -5,9 +5,10 @@ import MessageInput from './user/MessageInput'; import { fetchSendStepMessage, fetchSendTextMessage } from '../api/chat'; import { ChatMessage, stepPayload } from '../types/recommend'; import ChatList from './ChatList'; -import { useChatInit } from '../hook/useChatInit'; import { useSelectedOptions } from '../hook/useSelectedOptions'; import { useAuthStore } from '@/domains/shared/store/auth'; +import { useChatInit } from '../hook/useChatInit'; +import { useChatWarning } from '../hook/useChatWarning'; function ChatSection() { const [messages, setMessages] = useState([]); @@ -121,10 +122,14 @@ function ChatSection() { }; useChatInit(setMessages); + useChatWarning(messages); return (

대화 목록 및 입력 창

+
+ ⚠️ 페이지를 벗어나면 채팅내용이 사라집니다. +
- +
resizeTextarea(e.currentTarget)} - placeholder={disabled ? '옵션을 선택해주세요.' : '칵테일 추천 질문을 입력해주세요.'} + placeholder={disabled ? '옵션 선택' : '칵테일 추천 질문 입력'} disabled={disabled} className={` w-[calc(100%-3rem)] md:w-[calc(100%-3.75rem)] px-4 py-2 md:py-3.5 diff --git a/src/domains/recommend/hook/useChatInit.ts b/src/domains/recommend/hook/useChatInit.ts index 13e2a922..341ae672 100644 --- a/src/domains/recommend/hook/useChatInit.ts +++ b/src/domains/recommend/hook/useChatInit.ts @@ -2,24 +2,18 @@ import { useEffect } from 'react'; import { ChatMessage } from '../types/recommend'; -import { fetchChatHistory, fetchGreeting } from '../api/chat'; +import { fetchGreeting } from '../api/chat'; -// 채팅 기록 불러오기 없으면 greeting api 호출 export function useChatInit(setMessages: React.Dispatch>) { useEffect(() => { - const loadChatHistory = async () => { + const loadGreeting = async () => { try { - const history = await fetchChatHistory(); - if (history && history.length > 0) { - setMessages(history.sort((a, b) => Number(a.id) - Number(b.id))); - } else { - const greeting = await fetchGreeting(''); - if (greeting) setMessages([greeting]); - } + const greeting = await fetchGreeting(''); + if (greeting) setMessages([greeting]); } catch (err) { console.error('채팅 초기화 실패:', err); } }; - loadChatHistory(); + loadGreeting(); }, [setMessages]); } diff --git a/src/domains/recommend/hook/useChatWarning.ts b/src/domains/recommend/hook/useChatWarning.ts new file mode 100644 index 00000000..97c1d2fc --- /dev/null +++ b/src/domains/recommend/hook/useChatWarning.ts @@ -0,0 +1,18 @@ +'use client'; + +import { useEffect } from 'react'; +import { ChatMessage } from '../types/recommend'; + +export function useChatWarning(messages: ChatMessage[]) { + useEffect(() => { + const handleBeforeUnload = (e: BeforeUnloadEvent) => { + if (messages.length > 0) { + e.preventDefault(); + e.returnValue = ''; + } + }; + + window.addEventListener('beforeunload', handleBeforeUnload); + return () => window.removeEventListener('beforeunload', handleBeforeUnload); + }, [messages]); +} diff --git a/src/domains/recommend/types/recommend.ts b/src/domains/recommend/types/recommend.ts index 9b7ab0f9..837e0b14 100644 --- a/src/domains/recommend/types/recommend.ts +++ b/src/domains/recommend/types/recommend.ts @@ -6,10 +6,10 @@ export interface StepOption { export interface RecommendationItem { cocktailId: number; - cocktailName: string; + cocktailName?: string; cocktailNameKo: string; cocktailImgUrl: string; - alcoholStrength: string; + alcoholStrength?: string; } export interface StepRecommendation {