-
-
- {/* 수정 예정 */}
(null);
+ const chunksRef = useRef([]);
+ const timerRef = useRef(null);
+ const streamRef = useRef(null);
+
+ // 대화 상태
+ const [conversationContext, setConversationContext] = useState(null);
+ const [messages, setMessages] = useState([]);
+ const objectUrlsRef = useRef([]);
+ const audioRefs = useRef>({});
+
+ // start API
+ const [greetingText, setGreetingText] = useState('');
+ const [quickSelections, setQuickSelections] = useState>(
+ [],
+ );
+ const [startLoading, setStartLoading] = useState(false);
+
+ // 글자 크기 & 볼륨 (로컬 보존)
+ const [fontPx, setFontPx] = useState(() => {
+ const saved = localStorage.getItem('chat.fontPx');
+ return saved ? Number(saved) : 16;
+ });
+ const [volume, setVolume] = useState(() => {
+ const saved = localStorage.getItem('chat.volume');
+ return saved ? Number(saved) : 0.8; // 0~1
+ });
+
+ // Web Speech TTS
+ const speechRef = useRef(null);
+ const speak = (text: string) => {
+ if (!text) return;
+ try {
+ if (typeof window.speechSynthesis === 'undefined') return;
+ // 진행 중인 발화 취소
+ window.speechSynthesis.cancel();
+ const u = new SpeechSynthesisUtterance(text);
+ u.volume = Math.max(0, Math.min(1, volume));
+ u.lang = 'ko-KR';
+ u.rate = 1.0;
+ u.pitch = 1.0;
+ speechRef.current = u;
+ window.speechSynthesis.speak(u);
+ } catch (e) {
+ console.warn('TTS 실패:', e);
+ }
+ };
+
+ // 마운트/언마운트
+ useEffect(() => {
+ // 언마운트 시 TTS/리소스 정리
+ return () => {
+ try {
+ window.speechSynthesis?.cancel();
+ } catch {}
+ objectUrlsRef.current.forEach((u) => URL.revokeObjectURL(u));
+ objectUrlsRef.current = [];
+ stopTimer();
+ stopTracks();
+ };
+ }, []);
+
+ // start API 호출
+ useEffect(() => {
+ (async () => {
+ try {
+ setStartLoading(true);
+ const res = await fetch('/api/public/chat/start', {
+ method: 'GET',
+ credentials: 'include',
+ });
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ const data: StartApiSuccess = await res.json();
+
+ if (data?.success && data.data) {
+ setGreetingText(
+ data.data.greetingText ??
+ '안녕하세요. 무엇을 도와드릴까요? 아래에서 항목을 선택하거나 메시지를 입력해 주세요.',
+ );
+
+ const raw = Array.isArray(data.data.options) ? data.data.options : [];
+ const normalized = raw
+ .map((it) => {
+ const text = String(it?.text ?? '').trim();
+ const msgRaw = typeof it?.message === 'string' ? it.message : '';
+ const message = (msgRaw || text).trim();
+ return { text, message };
+ })
+ .filter((it) => it.text.length > 0 && it.message.length > 0);
+
+ setQuickSelections(normalized);
+ }
+ } catch (e) {
+ console.error(e);
+ // 폴백
+ setGreetingText(
+ "안녕하세요, 어르신. 디지털 금융 동반자 '마음 잇는 목소리'입니다.
아래에서 원하시는 서비스를 선택하시거나, 편하게 말씀해주세요.", + ); + + setQuickSelections([ + { text: '주변 ATM 찾기 안내', message: 'ATM은 어떻게 찾아요?' }, + { text: '보이스피싱 진단 안내', message: '보이스피싱은 어떻게 확인해요?' }, + { text: '유산 기부 방법 안내', message: '유산 기부는 어떻게 해요?' }, + ]); + } finally { + setStartLoading(false); + } + })(); + }, []); + + // 로컬스토리지 동기화 + useEffect(() => localStorage.setItem('chat.fontPx', String(fontPx)), [fontPx]); + useEffect(() => localStorage.setItem('chat.volume', String(volume)), [volume]); + + // 볼륨 변경 시
- {/* 사용자 정보 및 날짜 수정 예정 */}
-
-
@@ -58,13 +94,11 @@ export default function AppSidebar({
- 
-
- 마음 채팅
+
+
마음 채팅
글자 크기
-
-
-
+
+ {/* 음성 출력 볼륨 */}
+ 음성 출력 볼륨
setFontPx(Number(e.target.value))}
+ className="w-full"
+ aria-label="글자 크기 슬라이더"
/>
- 80% (미구현)
+
+
+
+
+ setVolume(Number(e.target.value) / 100)}
+ className="w-full"
+ aria-label="음성 볼륨 슬라이더"
+ />
+
+
+ {Math.round(volume * 100)}%
+ {/* 왼쪽 아바타 (assistant) */}
+ {!isUser && (
+
+ );
+});
diff --git a/ssh/src/pages/Chatbot/components/chat/ChatDateDivider.tsx b/ssh/src/pages/Chatbot/components/chat/ChatDateDivider.tsx
new file mode 100644
index 0000000..a19c070
--- /dev/null
+++ b/ssh/src/pages/Chatbot/components/chat/ChatDateDivider.tsx
@@ -0,0 +1,9 @@
+export default function ChatDateDivider({ date }: { date: string }) {
+ return (
+
+ {showAvatar ? (
+
+ )}
+
+ {/* 말풍선 + 시간 */}
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {/* 오른쪽 아바타 (user) */}
+ {isUser && (
+
+ {formatText(text)}
+
+ {videoUrl && (
+
+
+ {/* 시간 */}
+ {time && (
+
+
+ )}
+
+ {audioUrl && (
+
+
+
+ {time}
+ )}
+
+ {showAvatar ? (
+
+ )}
+
+
+ ) : (
+
+ )}
+
+
+ {date}
+
+
+ );
+}
diff --git a/ssh/src/pages/Chatbot/components/chat/chat-utils.ts b/ssh/src/pages/Chatbot/components/chat/chat-utils.ts
new file mode 100644
index 0000000..147fb7a
--- /dev/null
+++ b/ssh/src/pages/Chatbot/components/chat/chat-utils.ts
@@ -0,0 +1,58 @@
+import type { ChatMessage } from '@/pages/Chatbot/components/chat/types';
+
+export type DecoratedMsg = ChatMessage & {
+ time?: string;
+ showAvatar?: boolean;
+ showTail?: boolean;
+ stackPosition?: 'single' | 'top' | 'mid' | 'bottom';
+ dateKey: string;
+};
+
+const sameSender = (a: ChatMessage, b: ChatMessage) => a.role === b.role;
+
+export function decorateMessages(
+ items: ChatMessage[],
+ opts?: { locale?: string },
+): Array<{ type: 'date'; dateKey: string } | { type: 'msg'; item: DecoratedMsg }> {
+ const out: Array<{ type: 'date'; dateKey: string } | { type: 'msg'; item: DecoratedMsg }> = [];
+ const locale = opts?.locale ?? 'ko-KR';
+
+ const fmtTime = () =>
+ new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }).format(new Date());
+ const fmtDateKey = (d: Date) =>
+ new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(d);
+
+ let prevDateKey = '';
+
+ items.forEach((m, i) => {
+ const dateKey = fmtDateKey(new Date()); // TODO: 실제 메시지 시간으로 교체
+ if (dateKey !== prevDateKey) {
+ out.push({ type: 'date', dateKey });
+ prevDateKey = dateKey;
+ }
+
+ const prev = items[i - 1];
+ const next = items[i + 1];
+ const isTop = !prev || !sameSender(prev, m);
+ const isBottom = !next || !sameSender(next, m);
+ const stackPosition =
+ isTop && isBottom ? 'single' : isTop ? 'top' : isBottom ? 'bottom' : 'mid';
+
+ const showAvatar = isBottom;
+ const showTail = isBottom;
+
+ out.push({
+ type: 'msg',
+ item: {
+ ...m,
+ time: fmtTime(),
+ showAvatar,
+ showTail,
+ stackPosition,
+ dateKey,
+ },
+ });
+ });
+
+ return out;
+}
diff --git a/ssh/src/pages/Chatbot/components/chat/types.ts b/ssh/src/pages/Chatbot/components/chat/types.ts
new file mode 100644
index 0000000..39fda6c
--- /dev/null
+++ b/ssh/src/pages/Chatbot/components/chat/types.ts
@@ -0,0 +1,10 @@
+// 공통 채팅 타입 (모든 컴포넌트가 이걸 import)
+export type ChatRole = 'user' | 'assistant';
+
+export type ChatMessage = {
+ role: ChatRole;
+ text: string;
+ audioUrl?: string;
+ videoUrl?: string;
+ // 필요하면 createdAt?: number; 등 추가
+};
diff --git a/ssh/src/pages/Chatbot/components/chatbot.tsx b/ssh/src/pages/Chatbot/components/chatbot.tsx
index 50e4cb0..3c1b4cf 100644
--- a/ssh/src/pages/Chatbot/components/chatbot.tsx
+++ b/ssh/src/pages/Chatbot/components/chatbot.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { ROUTING_PATH } from '@/routes/path.constants';
import { Button } from '@/components/ui/button';
@@ -18,7 +18,6 @@ import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { SidebarProvider } from '@/components/ui/sidebar';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import logo2 from '@/assets/logo2.png';
-
import {
ArrowLeft,
Bell,
@@ -29,15 +28,472 @@ import {
PanelLeftOpen,
Phone,
Send,
+ Loader2,
} from 'lucide-react';
import AppSidebar from './appsidebar';
+import { ChatBubble } from '@/pages/Chatbot/components/chat/ChatBubble';
+import ChatDateDivider from '@/pages/Chatbot/components/chat/ChatDateDivider';
+import { decorateMessages } from '@/pages/Chatbot/components/chat/chat-utils';
+import type { ChatMessage } from '@/pages/Chatbot/components/chat/types';
+
+// 16k 변환 유틸
+import { blobToWav16kMono } from '@/pages/Donation/sections/Features/Register/utils/audio.ts';
+
+type SpeechApiResponse = {
+ userMessageText: string;
+ chatbotMessageText: string;
+ chatbotAudio: string | null;
+ actionType: string | null;
+ actionData: any | null;
+ conversationContext: string | null;
+};
+
+type StartApiSuccess = {
+ success: true;
+ data: {
+ greetingText?: string;
+ options?: Array<{ text: string; message: string }>;
+ };
+ error: null;
+};
+
+type MessageApiSuccess = {
+ success: true;
+ data: {
+ responseText: string;
+ actionType?: 'SPEAK' | 'HIGHLIGHT_ELEMENT' | 'SHOW_VIDEO';
+ actionData?: any;
+ conversationContext?: string | null;
+ };
+ error: null;
+};
+
+type MessageApiError = {
+ success: false;
+ data: null;
+ error: { message?: string; status?: number } | null;
+};
+
export default function Chatbot() {
const navigate = useNavigate();
const [value, setValue] = useState('');
const [desktopOpen, setDesktopOpen] = useState(true);
const [mobileOpen, setMobileOpen] = useState(false);
+ // 음성 녹음/업로드 관련
+ const [isRecording, setIsRecording] = useState(false);
+ const [seconds, setSeconds] = useState(0);
+ const [uploading, setUploading] = useState(false);
+
+ const mediaRef = useRef아래에서 원하시는 서비스를 선택하시거나, 편하게 말씀해주세요.", + ); + + setQuickSelections([ + { text: '주변 ATM 찾기 안내', message: 'ATM은 어떻게 찾아요?' }, + { text: '보이스피싱 진단 안내', message: '보이스피싱은 어떻게 확인해요?' }, + { text: '유산 기부 방법 안내', message: '유산 기부는 어떻게 해요?' }, + ]); + } finally { + setStartLoading(false); + } + })(); + }, []); + + // 로컬스토리지 동기화 + useEffect(() => localStorage.setItem('chat.fontPx', String(fontPx)), [fontPx]); + useEffect(() => localStorage.setItem('chat.volume', String(volume)), [volume]); + + // 볼륨 변경 시
+
+
-
@@ -120,7 +585,6 @@ export default function Chatbot() {
-
-
-
-
-
-
+
+ {/* 초기 카드: 환영문 + 빠른 선택 */}
+
+
- 빠르게 선택해서 안내받으실 수 있습니다
+
+ {/* 입력 영역 */}
+
-
- 빠르게 선택해서 안내받으실 수 있습니다
+
+ {startLoading ? '준비 중…' : greetingText}
-
- 자주 묻는 항목을 선택하거나 메시지를 입력해 보세요. -
- -
- {[
- {
- title: '우리 서비스\n전체적으로\n설명받기',
- color: 'bg-primary/80 text-primary-foreground',
- },
- {
- title: '챗봇 서비스\n이용 방법',
- color: 'bg-primary/80 text-primary-foreground',
- },
- {
- title: '현금 인출기\n(ATM 기계)\n위치 찾기\n이용 방법',
- color: 'bg-primary/80 text-primary-foreground',
- },
- {
- title: '보이스 피싱\n확인하는 서비스\n이용 방법',
- color: 'bg-primary/80 text-primary-foreground',
- },
- ].map((item, i) => (
+
+
+
+
+ {(quickSelections.length
+ ? quickSelections
+ : [
+ { text: '유산 기부 방법 안내', message: '유산 기부는 어떻게 해요?' },
+ { text: '주변 ATM 찾기 안내', message: 'ATM은 어떻게 찾아요?' },
+ {
+ text: '보이스피싱 진단 안내',
+ message: '보이스피싱은 어떻게 확인해요?',
+ },
+ ]
+ ).map((item, i) => (
handleQuickClick(item.message)}
+ className="cursor-pointer border border-border transition hover:shadow-md bg-primary/80 text-primary-foreground"
>
-
- '),
- }}
- />
+
+
+ {item.text}
+
))}
+ {decorateMessages(messages).map((node, idx) =>
+ node.type === 'date' ? (
+
-
+
-
첨부
@@ -204,25 +682,45 @@ export default function Chatbot() {
setValue(e.target.value)}
- placeholder="궁금한 내용을 적어주세요."
- className="min-h-11 flex-1 bg-background"
+ placeholder="궁금한 내용을 적어주세요. (음성 전송은 오른쪽 마이크)"
+ className="min-h-14 flex-1 bg-background text-lg px-4"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSendTextClick();
+ }
+ }}
/>
-
- 음성 입력
+ {isRecording ? '녹음 종료' : '음성 입력'}
diff --git a/ssh/src/pages/Chatbot/index.tsx b/ssh/src/pages/Chatbot/index.tsx
index 56668db..bc4ca50 100644
--- a/ssh/src/pages/Chatbot/index.tsx
+++ b/ssh/src/pages/Chatbot/index.tsx
@@ -1,4 +1,12 @@
+import Header from '@/components/Layout/Header';
import Chatbot from '@/pages/Chatbot/components/chatbot';
export default function ChatbotPage() {
- return
+
+
+
+ );
}