From edf0d6968908055a79da0fe5a85498ca2f41b2f4 Mon Sep 17 00:00:00 2001
From: smilevictory <leevictory7272@gmail.com>
Date: Thu, 11 Sep 2025 22:38:41 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=B1=97=EB=B4=87=20=EC=84=9C?=
 =?UTF-8?q?=EB=B9=84=EC=8A=A4=20api=20=EC=97=B0=EB=8F=99=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ssh/src/components/Layout/Header/index.tsx    |   7 +
 ssh/src/index.css                             |  62 ++
 .../pages/Chatbot/components/appsidebar.tsx   | 119 +++-
 .../Chatbot/components/chat/ChatBubble.tsx    | 125 ++++
 .../components/chat/ChatDateDivider.tsx       |   9 +
 .../Chatbot/components/chat/chat-utils.ts     |  58 ++
 .../pages/Chatbot/components/chat/types.ts    |  10 +
 ssh/src/pages/Chatbot/components/chatbot.tsx  | 614 ++++++++++++++++--
 ssh/src/pages/Chatbot/index.tsx               |  10 +-
 9 files changed, 932 insertions(+), 82 deletions(-)
 create mode 100644 ssh/src/pages/Chatbot/components/chat/ChatBubble.tsx
 create mode 100644 ssh/src/pages/Chatbot/components/chat/ChatDateDivider.tsx
 create mode 100644 ssh/src/pages/Chatbot/components/chat/chat-utils.ts
 create mode 100644 ssh/src/pages/Chatbot/components/chat/types.ts

diff --git a/ssh/src/components/Layout/Header/index.tsx b/ssh/src/components/Layout/Header/index.tsx
index 209a9b8..b460176 100644
--- a/ssh/src/components/Layout/Header/index.tsx
+++ b/ssh/src/components/Layout/Header/index.tsx
@@ -48,9 +48,16 @@ export default function Header() {
               {NAV.map((item) => {
                 const href = toAbs(item.seg);
                 const active = isActive(item.seg);
+
+                // ✅ 라벨/seg에 따라 id 부여 (HIGHLIGHT_ELEMENT에서 사용할 고정 셀렉터)
+                let id: string | undefined;
+                if (item.seg === ROUTING_PATH.atmmap) id = 'header-atm-button';
+                if (item.seg === ROUTING_PATH.voicephishing) id = 'header-phishing-button';
+
                 return (
                   <Link
                     key={item.label}
+                    id={id} // ✅ 여기!
                     to={href}
                     aria-current={active ? 'page' : undefined}
                     className={[basePill, active ? activePill : inactivePill].join(' ')}
diff --git a/ssh/src/index.css b/ssh/src/index.css
index 199be88..7bc0cf0 100644
--- a/ssh/src/index.css
+++ b/ssh/src/index.css
@@ -196,3 +196,65 @@ body {
     @apply h-7 w-7;
   }
 }
+
+/* ===== Kakao-like chat bubbles ===== */
+.kakao-bubble {
+  position: relative;
+  max-width: min(78%, 640px);
+  word-break: break-word;
+}
+
+.kakao-bubble.user {
+  background: #a8bfe4; /* 카카오 노랑 */
+  color: #111827; /* text-gray-900 */
+}
+
+.kakao-bubble.assistant {
+  background: #ffffff;
+  color: #111827;
+  border: 1px solid hsl(0 0% 90% / 1);
+}
+
+/* 꼬리 (좌) */
+.kakao-bubble.assistant.tail::after {
+  content: '';
+  position: absolute;
+  left: -6px; /* 좌측 밖으로 */
+  bottom: 10px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent #ffffff transparent transparent;
+  filter: drop-shadow(0 0 0 hsl(0 0% 90% / 1)); /* 경계선 자연스러움 */
+}
+
+/* 꼬리 (우) */
+.kakao-bubble.user.tail::after {
+  content: '';
+  position: absolute;
+  right: -6px; /* 우측 밖으로 */
+  bottom: 10px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent transparent transparent #a8bfe4;
+}
+
+/* 연속 말풍선은 모서리/꼬리 처리 */
+.kakao-bubble.stack-top {
+  border-bottom-left-radius: 0.5rem !important;
+  border-bottom-right-radius: 0.5rem !important;
+}
+.kakao-bubble.stack-mid {
+  border-radius: 0.5rem !important;
+}
+.kakao-bubble.stack-bottom {
+  border-top-left-radius: 0.5rem !important;
+  border-top-right-radius: 0.5rem !important;
+}
+
+/* 시간 뱃지 */
+.kakao-time {
+  font-size: 12px;
+  line-height: 1;
+  color: hsl(215 16% 47% / 1); /* text-muted-foreground 느낌 */
+  white-space: nowrap;
+}
diff --git a/ssh/src/pages/Chatbot/components/appsidebar.tsx b/ssh/src/pages/Chatbot/components/appsidebar.tsx
index 9ec90de..e1db622 100644
--- a/ssh/src/pages/Chatbot/components/appsidebar.tsx
+++ b/ssh/src/pages/Chatbot/components/appsidebar.tsx
@@ -11,25 +11,61 @@ import {
 } from '@/components/ui/sidebar';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { MessageSquare, History, Users, Settings, PanelLeftClose } from 'lucide-react';
+import {
+  MessageSquare,
+  History,
+  Users,
+  Settings,
+  PanelLeftClose,
+  Volume2,
+  Play,
+} from 'lucide-react';
 import logo2 from '@/assets/logo2.png';
+
 export default function AppSidebar({
   className = '',
   onClose,
+  fontPx,
+  setFontPx,
+  volume,
+  setVolume,
 }: {
   className?: string;
   onClose?: () => void;
+  fontPx: number;
+  setFontPx: (v: number | ((prev: number) => number)) => void;
+  volume: number; // 0 ~ 1
+  setVolume: (v: number) => void;
 }) {
+  // 현재 볼륨으로 0.4초 테스트 사운드
+  const playTestSound = async () => {
+    try {
+      const Ctx = (window as any).AudioContext || (window as any).webkitAudioContext;
+      if (!Ctx) return;
+      const ctx = new Ctx();
+      const osc = ctx.createOscillator();
+      const gain = ctx.createGain();
+      osc.type = 'sine';
+      osc.frequency.value = 880;
+      gain.gain.value = Math.max(0, Math.min(1, volume));
+      osc.connect(gain).connect(ctx.destination);
+      osc.start();
+      setTimeout(() => {
+        osc.stop();
+        ctx.close();
+      }, 400);
+    } catch (e) {
+      console.warn('Test sound failed', e);
+    }
+  };
+
   return (
     <Sidebar className={className}>
       <SidebarHeader className="bg-background">
         <div className="flex items-center justify-between px-2 py-1.5">
           <div className="flex items-center gap-2">
-            <div className="flex items-center gap-2">
-              <div className="grid h-7 w-7 place-items-center rounded-full bg-primary/10 overflow-hidden">
-                <img src={logo2} alt="Logo" className="h-5 w-5 object-contain" />
-              </div>
-              <span className="font-semibold">마음 채팅</span>
+            <div className="grid h-7 w-7 place-items-center rounded-full bg-primary/10 overflow-hidden">
+              <img src={logo2} alt="Logo" className="h-5 w-5 object-contain" />
             </div>
             <span className="font-semibold">마음 채팅</span>
           </div>
@@ -58,13 +94,11 @@ export default function AppSidebar({
                   <MessageSquare /> 새 대화
                 </SidebarMenuButton>
               </SidebarMenuItem>
-
               <SidebarMenuItem>
                 <SidebarMenuButton className="hover:bg-accent hover:text-accent-foreground">
                   <History /> 과거 대화
                 </SidebarMenuButton>
               </SidebarMenuItem>
-
               <SidebarMenuItem>
                 <SidebarMenuButton className="hover:bg-accent hover:text-accent-foreground">
                   <Users /> 관련 부서 연결
@@ -72,38 +106,77 @@ export default function AppSidebar({
               </SidebarMenuItem>
             </SidebarMenu>
 
-            {/* 수정 예정 */}
             <div className="mt-4 border-t border-border pt-4">
               <div className="mb-2 flex items-center gap-2 text-sm font-semibold">
                 <Settings className="h-4 w-4" />
                 설정
-                <span className="chat-chip">준비중</span>
               </div>
 
+              {/* 글자 크기 */}
               <div className="mb-4 space-y-2">
                 <div className="chat-subtitle">글자 크기</div>
                 <div className="flex items-center gap-2">
-                  <Button variant="outline" size="sm" className="btn-outline-brand" disabled>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="btn-outline-brand"
+                    onClick={() => setFontPx((v) => Math.max(12, Number(v) - 1))}
+                    aria-label="글자 작게"
+                  >
                     작게
                   </Button>
-                  <div className="text-sm text-muted-foreground">14px</div>
-                  <Button variant="outline" size="sm" className="btn-outline-brand" disabled>
+                  <div className="text-sm text-muted-foreground min-w-12 text-center">
+                    {fontPx}px
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="btn-outline-brand"
+                    onClick={() => setFontPx((v) => Math.min(24, Number(v) + 1))}
+                    aria-label="글자 크게"
+                  >
                     크게
                   </Button>
                 </div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="chat-subtitle">음성 출력 볼륨</div>
                 <input
                   type="range"
-                  min={0}
-                  max={100}
-                  defaultValue={80}
-                  className="w-full opacity-60"
-                  disabled
+                  min={12}
+                  max={24}
+                  step={1}
+                  value={fontPx}
+                  onChange={(e) => setFontPx(Number(e.target.value))}
+                  className="w-full"
+                  aria-label="글자 크기 슬라이더"
                 />
-                <div className="text-xs text-muted-foreground">80% (미구현)</div>
+              </div>
+
+              {/* 음성 출력 볼륨 */}
+              <div className="space-y-2">
+                <div className="chat-subtitle flex items-center gap-2">
+                  <Volume2 className="h-4 w-4" />
+                  음성 출력 볼륨
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="range"
+                    min={0}
+                    max={100}
+                    value={Math.round(volume * 100)}
+                    onChange={(e) => setVolume(Number(e.target.value) / 100)}
+                    className="w-full"
+                    aria-label="음성 볼륨 슬라이더"
+                  />
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    aria-label="테스트 사운드"
+                    title="현재 볼륨으로 테스트 사운드 재생"
+                    onClick={playTestSound}
+                  >
+                    <Play className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className="text-xs text-muted-foreground">{Math.round(volume * 100)}%</div>
               </div>
             </div>
           </SidebarGroupContent>
diff --git a/ssh/src/pages/Chatbot/components/chat/ChatBubble.tsx b/ssh/src/pages/Chatbot/components/chat/ChatBubble.tsx
new file mode 100644
index 0000000..e1c461a
--- /dev/null
+++ b/ssh/src/pages/Chatbot/components/chat/ChatBubble.tsx
@@ -0,0 +1,125 @@
+import { memo } from 'react';
+import { cn } from '@/lib/utils'; // shadcn 유틸(없으면 className join 함수로 대체)
+import logo2 from '@/assets/logo2.png';
+import { CircleUser } from 'lucide-react';
+
+export type ChatRole = 'user' | 'assistant';
+
+export type ChatBubbleProps = {
+  role: ChatRole;
+  text: string;
+  time?: string; // "오후 3:21" 같은 표시용
+  showAvatar?: boolean; // 첫 말풍선에만 아바타
+  showTail?: boolean; // 묶음의 마지막 말풍선에만 꼬리
+  stackPosition?: 'single' | 'top' | 'mid' | 'bottom';
+  audioUrl?: string;
+  videoUrl?: string;
+  fontPx?: number; // 글자 크기 동기화
+  volume?: number;
+};
+
+function formatText(t: string) {
+  return t.replace(/\n/g, '\n');
+}
+
+export const ChatBubble = memo(function ChatBubble({
+  role,
+  text,
+  time,
+  showAvatar = false,
+  showTail = true,
+  stackPosition = 'single',
+  audioUrl,
+  videoUrl,
+  fontPx = 16,
+  volume = 0.8,
+}: ChatBubbleProps) {
+  const isUser = role === 'user';
+
+  return (
+    <div
+      className={cn('flex w-full items-end gap-2', isUser ? 'justify-end' : 'justify-start')}
+      style={{ ['--chat-font-size' as any]: `${fontPx}px` }}
+    >
+      {/* 왼쪽 아바타 (assistant) */}
+      {!isUser && (
+        <div className="w-7 shrink-0 self-end">
+          {showAvatar ? (
+            <div className="h-7 w-7 overflow-hidden rounded-full border border-border bg-primary/10 grid place-items-center">
+              <img src={logo2} alt="bot" className="h-full w-full object-contain" />
+            </div>
+          ) : (
+            <div className="h-7 w-7" />
+          )}
+        </div>
+      )}
+
+      {/* 말풍선 + 시간 */}
+      <div className={cn('flex max-w-[90%] items-end', isUser ? 'flex-row-reverse' : 'flex-row')}>
+        <div
+          className={cn(
+            'kakao-bubble whitespace-pre-wrap px-3.5 py-2.5 text-[length:var(--chat-font-size)]',
+            'rounded-2xl',
+            isUser ? 'user' : 'assistant',
+            showTail && 'tail',
+            stackPosition === 'single' && 'rounded-2xl',
+            stackPosition === 'top' && 'stack-top',
+            stackPosition === 'mid' && 'stack-mid',
+            stackPosition === 'bottom' && 'stack-bottom',
+          )}
+        >
+          {formatText(text)}
+
+          {videoUrl && (
+            <div className="mt-2">
+              <div className="aspect-video w-[72vw] max-w-[520px] overflow-hidden rounded-lg border">
+                <iframe
+                  className="h-full w-full"
+                  src={
+                    videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')
+                      ? videoUrl.replace('watch?v=', 'embed/')
+                      : videoUrl
+                  }
+                  title="안내 영상"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                />
+              </div>
+            </div>
+          )}
+
+          {audioUrl && (
+            <audio
+              className="mt-2 w-[72vw] max-w-[520px]"
+              controls
+              src={audioUrl}
+              autoPlay={false}
+              onLoadedMetadata={(e) => {
+                const el = e.currentTarget as HTMLAudioElement;
+                el.volume = Math.max(0, Math.min(1, volume));
+              }}
+            />
+          )}
+        </div>
+
+        {/* 시간 */}
+        {time && (
+          <div className={cn('kakao-time mx-2', isUser ? 'order-0' : 'order-2')}>{time}</div>
+        )}
+      </div>
+
+      {/* 오른쪽 아바타 (user) */}
+      {isUser && (
+        <div className="w-7 shrink-0 self-end">
+          {showAvatar ? (
+            <div className="h-7 w-7 grid place-items-center rounded-full border border-border bg-muted">
+              <CircleUser className="h-4 w-4" />
+            </div>
+          ) : (
+            <div className="h-7 w-7" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
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 (
+    <div className="my-4 flex items-center justify-center">
+      <span className="rounded-full border border-border bg-background px-3 py-1 text-xs text-muted-foreground">
+        {date}
+      </span>
+    </div>
+  );
+}
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<MediaRecorder | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+  const timerRef = useRef<number | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  // 대화 상태
+  const [conversationContext, setConversationContext] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const objectUrlsRef = useRef<string[]>([]);
+  const audioRefs = useRef<Record<number, HTMLAudioElement | null>>({});
+
+  // start API
+  const [greetingText, setGreetingText] = useState<string>('');
+  const [quickSelections, setQuickSelections] = useState<Array<{ text: string; message: string }>>(
+    [],
+  );
+  const [startLoading, setStartLoading] = useState<boolean>(false);
+
+  // 글자 크기 & 볼륨 (로컬 보존)
+  const [fontPx, setFontPx] = useState<number>(() => {
+    const saved = localStorage.getItem('chat.fontPx');
+    return saved ? Number(saved) : 16;
+  });
+  const [volume, setVolume] = useState<number>(() => {
+    const saved = localStorage.getItem('chat.volume');
+    return saved ? Number(saved) : 0.8; // 0~1
+  });
+
+  // Web Speech TTS
+  const speechRef = useRef<SpeechSynthesisUtterance | null>(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(
+          "안녕하세요, 어르신. 디지털 금융 동반자 '마음 잇는 목소리'입니다.<br/>아래에서 원하시는 서비스를 선택하시거나, 편하게 말씀해주세요.",
+        );
+
+        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]);
+
+  // 볼륨 변경 시 <audio>에 반영
+  useEffect(() => {
+    Object.values(audioRefs.current).forEach((el) => {
+      if (el) el.volume = volume;
+    });
+  }, [volume]);
+
+  // MediaRecorder util
+  const pickMime = () => {
+    const MR = (window as any).MediaRecorder;
+    if (!MR) return '';
+    if (MR.isTypeSupported('audio/webm')) return 'audio/webm';
+    if (MR.isTypeSupported('audio/mp4')) return 'audio/mp4';
+    if (MR.isTypeSupported('audio/ogg')) return 'audio/ogg';
+    return '';
+  };
+  const startTimer = () => {
+    stopTimer();
+    timerRef.current = window.setInterval(() => setSeconds((s) => s + 1), 1000);
+  };
+  const stopTimer = () => {
+    if (timerRef.current) {
+      window.clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  const stopTracks = () => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+  };
+
+  // Base64 -> Blob URL
+  const base64ToUrl = (base64: string, mime = 'audio/mpeg') => {
+    try {
+      const byteStr = atob(base64);
+      const bytes = new Uint8Array(byteStr.length);
+      for (let i = 0; i < byteStr.length; i++) bytes[i] = byteStr.charCodeAt(i);
+      const blob = new Blob([bytes], { type: mime });
+      const url = URL.createObjectURL(blob);
+      objectUrlsRef.current.push(url);
+      return url;
+    } catch {
+      return null;
+    }
+  };
+
+  // ===== 액션 처리기 =====
+  const performAction = (
+    actionType: string,
+    actionData: any,
+    patch: (x: Partial<ChatMessage>) => void,
+  ) => {
+    switch (actionType) {
+      case 'HIGHLIGHT_ELEMENT': {
+        const sel = actionData?.elementId as string | undefined;
+        if (sel) {
+          const el = document.querySelector(sel) as HTMLElement | null;
+          if (el) {
+            el.classList.add('ring-4', 'ring-primary', 'ring-offset-2', 'rounded-md');
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            setTimeout(() => {
+              el.classList.remove('ring-4', 'ring-primary', 'ring-offset-2', 'rounded-md');
+            }, 2000);
+          }
+        }
+        break;
+      }
+      case 'SHOW_VIDEO': {
+        const url = actionData?.videoUrl as string | undefined;
+        if (url) patch({ videoUrl: url });
+        break;
+      }
+      case 'SPEAK': {
+        // speak는 sendTextMessage에서 next.text로 호출
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  // ===== 텍스트 메시지 전송 =====
+  const sendTextMessage = async (userText: string) => {
+    const msg = (userText ?? '').trim();
+    if (!msg) return;
+
+    // 1) 사용자 메시지 먼저 화면에 출력
+    setMessages((prev) => [...prev, { role: 'user', text: msg }]);
+
+    try {
+      const payload: Record<string, any> = { userMessage: msg };
+      if (typeof conversationContext === 'string' && conversationContext.length > 0) {
+        payload.conversationContext = conversationContext;
+      }
+
+      const res = await fetch('/api/public/chat/message', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify(payload),
+        credentials: 'include',
+      });
+
+      const raw = await res.text();
+
+      // 2) 타입 유니온으로 파싱
+      let json: MessageApiSuccess | MessageApiError | null = null;
+      try {
+        json = raw ? (JSON.parse(raw) as MessageApiSuccess | MessageApiError) : null;
+      } catch {
+        // JSON 파싱 실패
+      }
+
+      // 3) HTTP 오류 처리
+      if (!res.ok) {
+        const detail = (json as MessageApiError)?.error?.message ?? raw ?? `HTTP ${res.status}`;
+        throw new Error(detail);
+      }
+
+      // 4) 성공 응답 체크
+      if (!json?.success || !json.data) {
+        throw new Error(`Unexpected response: ${raw?.slice(0, 300)}`);
+      }
+
+      // 5) 데이터 구조 분해
+      const { responseText, actionType, actionData, conversationContext: newCtx } = json.data;
+
+      let next: ChatMessage = { role: 'assistant', text: responseText || '' };
+
+      // 6) 액션 처리 (SHOW_VIDEO 등)
+      if (actionType) {
+        performAction(actionType, actionData, (patch) => {
+          next = { ...next, ...patch };
+        });
+      }
+
+      // 7) SPEAK 액션이면 즉시 TTS 실행
+      if (actionType === 'SPEAK') {
+        speak(next.text);
+      }
+
+      // 8) 메시지 출력
+      setMessages((prev) => [...prev, next]);
+
+      // 9) 컨텍스트 갱신
+      if (typeof newCtx === 'string') {
+        setConversationContext(newCtx || null);
+      }
+    } catch (e: any) {
+      console.error('[chat/message] failed:', e);
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          text: `서버가 요청을 처리하지 못했습니다.\n상세: ${e?.message ?? e}`,
+        },
+      ]);
+    }
+  };
+
+  // 빠른 선택 클릭
+  const handleQuickClick = (m: string) => {
+    const msg = (m ?? '').trim();
+    if (!msg) return;
+    sendTextMessage(msg);
+  };
+
+  // ===== 음성 녹음/전송 =====
+  const handleStartRecording = async () => {
+    if (uploading) return;
+    try {
+      if (!navigator.mediaDevices?.getUserMedia) {
+        alert('이 브라우저는 녹음을 지원하지 않습니다.');
+        return;
+      }
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      chunksRef.current = [];
+
+      const mimeType = pickMime() || undefined;
+      const mr = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+      mediaRef.current = mr;
+
+      mr.ondataavailable = (e) => e.data?.size && chunksRef.current.push(e.data);
+      mr.onstop = async () => {
+        const raw = new Blob(chunksRef.current, { type: mr.mimeType || 'audio/webm' });
+        let wav16: Blob;
+        try {
+          wav16 = await blobToWav16kMono(raw, 16000);
+        } catch (err) {
+          console.error('16k 변환 실패, 원본으로 전송', err);
+          wav16 = raw;
+        }
+        await sendSpeech(wav16);
+        stopTimer();
+        stopTracks();
+        setSeconds(0);
+      };
+
+      setIsRecording(true);
+      setSeconds(0);
+      mr.start(100);
+      startTimer();
+    } catch (e: any) {
+      alert(e?.message ?? '마이크 권한을 확인해 주세요.');
+    }
+  };
+
+  const handleStopRecording = () => {
+    if (!isRecording) return;
+    setIsRecording(false);
+    mediaRef.current?.stop();
+  };
+
+  const sendSpeech = async (wavBlob: Blob) => {
+    setUploading(true);
+    try {
+      const fd = new FormData();
+      fd.append('audioFile', new File([wavBlob], 'speech.wav', { type: 'audio/wav' }));
+      if (conversationContext) fd.append('conversationContext', conversationContext);
+
+      const res = await fetch('/api/public/chat/speech', {
+        method: 'POST',
+        body: fd,
+        credentials: 'include',
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+      const data: SpeechApiResponse = await res.json();
+
+      if (data.userMessageText) {
+        setMessages((prev) => [...prev, { role: 'user', text: data.userMessageText }]);
+      }
+
+      let audioUrl: string | undefined;
+      if (data.chatbotAudio) {
+        audioUrl = base64ToUrl(data.chatbotAudio, 'audio/mpeg') ?? undefined;
+      }
+
+      setMessages((prev) => [
+        ...prev,
+        { role: 'assistant', text: data.chatbotMessageText || '(응답 없음)', audioUrl },
+      ]);
+
+      if (data.conversationContext) setConversationContext(data.conversationContext);
+
+      if (data.actionType) {
+        // 필요 시 음성 경로에서도 SHOW_VIDEO/HIGHLIGHT 처리 가능
+        performAction(data.actionType, data.actionData, () => {});
+      }
+    } catch (err: any) {
+      console.error(err);
+      alert('음성 전송 중 오류가 발생했습니다.');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  // UI
+  const recordingBadge = isRecording ? (
+    <span className="ml-2 inline-flex items-center gap-2 text-red-600 text-sm">
+      <span className="inline-block h-2 w-2 rounded-full bg-red-600 animate-pulse" />
+      녹음 중… {String(Math.floor(seconds / 60)).padStart(2, '0')}:
+      {String(seconds % 60).padStart(2, '0')}
+    </span>
+  ) : null;
+
+  const handleSendTextClick = () => {
+    const msg = value.trim();
+    if (!msg) return;
+    setValue('');
+    sendTextMessage(msg);
+  };
+
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    // 1) 우선 기준점으로 스무스 스크롤
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+
+    // 2) 레이아웃 확정 이후(iframe/audio 로드 등) 강제 보정
+    requestAnimationFrame(() => {
+      const viewport = bottomRef.current?.closest(
+        '[data-radix-scroll-area-viewport]',
+      ) as HTMLElement | null;
+      if (viewport) {
+        viewport.scrollTop = viewport.scrollHeight;
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
   return (
     <TooltipProvider>
       <SidebarProvider>
@@ -46,6 +502,10 @@ export default function Chatbot() {
             <AppSidebar
               className="hidden md:flex sidebar-xl"
               onClose={() => setDesktopOpen(false)}
+              fontPx={fontPx}
+              setFontPx={setFontPx}
+              volume={volume}
+              setVolume={setVolume}
             />
           )}
 
@@ -87,24 +547,29 @@ export default function Chatbot() {
                       <img src={logo2} alt="Logo" className="h-5 w-5 object-contain" />
                     </Button>
                   </SheetTrigger>
-
                   <SheetContent side="left" className="p-0 w-[320px]">
-                    <AppSidebar className="block sidebar-xl" />
+                    <AppSidebar
+                      className="block sidebar-xl"
+                      fontPx={fontPx}
+                      setFontPx={setFontPx}
+                      volume={volume}
+                      setVolume={setVolume}
+                    />
                   </SheetContent>
                 </Sheet>
               </div>
-              {/* 사용자 정보 및 날짜 수정 예정 */}
-              <div className="mx-auto flex items-center gap-2 text-sm text-muted-foreground">
+
+              <div className="mx-auto flex items-center gap-2 text-lg text-muted-foreground">
                 <CircleUser className="h-4 w-4" /> 구석현
                 <Separator orientation="vertical" className="mx-1 h-4" />
                 2025년 8월 25일
+                {recordingBadge}
               </div>
 
               <div className="ml-auto flex items-center gap-1">
                 <Button size="icon" variant="ghost" aria-label="콜" className="btn-ghost-brand">
                   <Phone className="h-5 w-5" />
                 </Button>
-
                 <Button size="icon" variant="ghost" aria-label="알림" className="btn-ghost-brand">
                   <Bell className="h-5 w-5" />
                 </Button>
@@ -120,7 +585,6 @@ export default function Chatbot() {
                     <ChevronDown className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
-
                 <DropdownMenuContent
                   align="end"
                   className="bg-popover text-popover-foreground border border-border"
@@ -137,65 +601,79 @@ export default function Chatbot() {
 
             <div className="flex min-h-0 flex-1 flex-col chatbot-bg bg-primary/10">
               <ScrollArea className="flex-1">
-                <div className="mx-auto w-full max-w-5xl px-4 pb-24 pt-10">
-                  <div className="relative mx-auto max-w-3xl rounded-2xl border border-border bg-card p-10 text-center">
-                    <div className="mx-auto mb-6 grid h-10 w-10 place-items-center rounded-full bg-primary/10">
-                      <div className="mx-auto mb-6 grid h-10 w-10 place-items-center rounded-full bg-primary/10 overflow-hidden">
-                        <img src={logo2} alt="Logo" className="h-6 w-6 object-contain" />
-                      </div>
+                <div className="mx-auto w-full max-w-5xl px-2 pb-24 pt-10">
+                  {/* 초기 카드: 환영문 + 빠른 선택 */}
+                  <div className="relative mx-auto max-w-4xl rounded-2xl border border-border bg-card p-10 text-center">
+                    <div className="mx-auto mb-6 grid h-10 w-10 place-items-center rounded-full bg-primary/10 overflow-hidden">
+                      <img src={logo2} alt="Logo" className="h-10 w-10 object-contain" />
                     </div>
 
-                    <h2 className="text-lg font-semibold">
-                      빠르게 선택해서 안내받으실 수 있습니다
+                    <h2 className="text-2xl md:text-3xl font-semibold whitespace-pre-line">
+                      {startLoading ? '준비 중…' : greetingText}
                     </h2>
-                    <p className="mt-1 text-sm text-muted-foreground">
-                      자주 묻는 항목을 선택하거나 메시지를 입력해 보세요.
-                    </p>
-
-                    <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
-                      {[
-                        {
-                          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) => (
+
+                    <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+                      {(quickSelections.length
+                        ? quickSelections
+                        : [
+                            { text: '유산 기부 방법 안내', message: '유산 기부는 어떻게 해요?' },
+                            { text: '주변 ATM 찾기 안내', message: 'ATM은 어떻게 찾아요?' },
+                            {
+                              text: '보이스피싱 진단 안내',
+                              message: '보이스피싱은 어떻게 확인해요?',
+                            },
+                          ]
+                      ).map((item, i) => (
                         <Card
-                          key={i}
-                          className={`cursor-pointer border border-border transition hover:shadow-md ${item.color}`}
+                          key={`${item.text}-${i}`}
+                          onClick={() => handleQuickClick(item.message)}
+                          className="cursor-pointer border border-border transition hover:shadow-md bg-primary/80 text-primary-foreground"
                         >
-                          <CardContent className="flex h-40 items-center justify-center p-4 text-center">
-                            <span
-                              className="whitespace-pre-line text-base font-semibold leading-snug"
-                              dangerouslySetInnerHTML={{
-                                __html: item.title.replace(/\n/g, '<br/>'),
-                              }}
-                            />
+                          <CardContent className="flex min-h-24 items-center justify-center p-4 text-center">
+                            <span className="whitespace-normal break-words text-xl font-semibold leading-relaxed">
+                              {item.text}
+                            </span>
                           </CardContent>
                         </Card>
                       ))}
                     </div>
                   </div>
+
+                  <div
+                    className="mx-auto mt-6 w-full max-w-5xl space-y-3 px-4 sm:px-6 md:px-8"
+                    style={{ ['--chat-font-size' as any]: `${fontPx}px` }}
+                  >
+                    {decorateMessages(messages).map((node, idx) =>
+                      node.type === 'date' ? (
+                        <ChatDateDivider key={`d-${idx}-${node.dateKey}`} date={node.dateKey} />
+                      ) : (
+                        <ChatBubble
+                          key={`m-${idx}`}
+                          role={node.item.role}
+                          text={node.item.text}
+                          time={node.item.time}
+                          showAvatar={node.item.showAvatar}
+                          showTail={node.item.showTail}
+                          stackPosition={node.item.stackPosition}
+                          audioUrl={node.item.audioUrl}
+                          videoUrl={node.item.videoUrl}
+                          fontPx={fontPx}
+                          volume={volume}
+                        />
+                      ),
+                    )}
+                    <div ref={bottomRef} aria-hidden="true" />
+                  </div>
                 </div>
               </ScrollArea>
 
+              {/* 입력 영역 */}
               <div className="sticky bottom-0 z-10 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-                <div className="mx-auto flex w-full max-w-3xl items-end gap-2 px-4 py-3">
+                <div className="mx-auto flex w-full max-w-3xl items-end gap-4 px-5 py-5 text-lg">
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Button variant="ghost" size="icon" aria-label="더보기">
-                        <MoreHorizontal className="h-5 w-5" />
+                      <Button variant="ghost" size="icon" aria-label="더보기" className="h-12 w-12">
+                        <MoreHorizontal className="h-7 w-7" />
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>첨부</TooltipContent>
@@ -204,25 +682,45 @@ export default function Chatbot() {
                   <Input
                     value={value}
                     onChange={(e) => 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();
+                      }
+                    }}
                   />
 
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Button variant="secondary" size="icon" aria-label="음성 입력">
-                        <Mic className="h-4 w-4" />
+                      <Button
+                        variant={isRecording ? 'destructive' : 'secondary'}
+                        size="icon"
+                        aria-label="음성 입력"
+                        onClick={isRecording ? handleStopRecording : handleStartRecording}
+                        disabled={uploading}
+                        className={`h-12 w-12 ${uploading ? 'opacity-70' : ''}`}
+                        title={isRecording ? '녹음 종료' : '녹음 시작'}
+                      >
+                        {uploading ? (
+                          <Loader2 className="h-7 w-7 animate-spin" />
+                        ) : (
+                          <Mic className="h-7 w-7" />
+                        )}
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>음성 입력</TooltipContent>
+                    <TooltipContent>{isRecording ? '녹음 종료' : '음성 입력'}</TooltipContent>
                   </Tooltip>
 
                   <Button
                     size="icon"
                     aria-label="전송"
-                    className="ring-offset-background focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                    onClick={handleSendTextClick}
+                    className="h-12 w-12 ring-offset-background focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                    title="텍스트 전송"
                   >
-                    <Send className="h-4 w-4" />
+                    <Send className="h-7 w-7" />
                   </Button>
                 </div>
               </div>
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 <Chatbot />;
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header />
+      <main className="flex-1">
+        <Chatbot />
+      </main>
+    </div>
+  );
 }