kb-hackathon-ssh · smilevictory · Sep 10, 2025 · Sep 10, 2025
diff --git a/ssh/src/assets/logo1.png b/ssh/src/assets/logo1.png
diff --git a/ssh/src/assets/logo2.png b/ssh/src/assets/logo2.png
diff --git a/ssh/src/components/Layout/Footer/index.tsx b/ssh/src/components/Layout/Footer/index.tsx
@@ -1,42 +1,43 @@
-import { Separator } from "@/components/ui/separator";
-import { Github, Slack, Instagram } from "lucide-react";
+import { Separator } from '@/components/ui/separator';
+import { Github, Slack, Instagram } from 'lucide-react';
+import logo from '@/assets/logo1.png';
 
 type LinkItem = { label: string; href: string };
 type LinkGroup = { title: string; links: LinkItem[] };
 
 const linkGroups: LinkGroup[] = [
   {
-    title: "서비스 안내",
+    title: '서비스 안내',
     links: [
-      { label: "은행 서비스 배우기", href: "#" },
-      { label: "ATM 위치 찾기", href: "#" },
-      { label: "보이스 피싱 자가 진단하기", href: "#" },
-      { label: "보이스 피싱 관련 정보 조회하기", href: "#" },
-      { label: "기부하기", href: "#" },
-      { label: "자주 묻는 질문", href: "#" },
+      { label: '은행 서비스 배우기', href: '#' },
+      { label: 'ATM 위치 찾기', href: '#' },
+      { label: '보이스 피싱 자가 진단하기', href: '#' },
+      { label: '보이스 피싱 관련 정보 조회하기', href: '#' },
+      { label: '기부하기', href: '#' },
+      { label: '자주 묻는 질문', href: '#' },
     ],
   },
   {
-    title: "고객 지원",
+    title: '고객 지원',
     links: [
-      { label: "고객 센터", href: "#" },
-      { label: "문의하기", href: "#" },
+      { label: '고객 센터', href: '#' },
+      { label: '문의하기', href: '#' },
     ],
   },
   {
-    title: "약관 및 정책",
+    title: '약관 및 정책',
     links: [
-      { label: "이용 약관", href: "#" },
-      { label: "개인정보 처리방침", href: "#" },
-      { label: "위치 기반 서비스 이용약관", href: "#" },
+      { label: '이용 약관', href: '#' },
+      { label: '개인정보 처리방침', href: '#' },
+      { label: '위치 기반 서비스 이용약관', href: '#' },
     ],
   },
   {
-    title: "회사 정보",
+    title: '회사 정보',
     links: [
-      { label: "회사 소개", href: "#" },
-      { label: "채용 안내", href: "#" },
-      { label: "직원 소개", href: "#" },
+      { label: '회사 소개', href: '#' },
+      { label: '채용 안내', href: '#' },
+      { label: '직원 소개', href: '#' },
     ],
   },
 ];
@@ -50,24 +51,19 @@ export default function Footer() {
     >
       <div className="px-6 py-12">
         <div className="mb-10 flex justify-center">
-          <div className="rounded border border-dashed px-8 py-6 text-sm font-semibold text-stone-800">
-            Logo
+          <div>
+            <img src={logo} alt="Logo" className="h-12 w-auto object-contain" />
           </div>
         </div>
 
         <div className="grid gap-10 text-center sm:grid-cols-2 lg:grid-cols-4">
           {linkGroups.map((group) => (
             <nav key={group.title}>
-              <h3 className="mb-4 text-sm font-semibold text-stone-900">
-                {group.title}
-              </h3>
+              <h3 className="mb-4 text-sm font-semibold text-stone-900">{group.title}</h3>
               <ul className="space-y-3 text-sm text-stone-600">
                 {group.links.map((link) => (
                   <li key={link.label}>
-                    <a
-                      href={link.href}
-                      className="hover:text-stone-900 hover:underline"
-                    >
+                    <a href={link.href} className="hover:text-stone-900 hover:underline">
                       {link.label}
                     </a>
                   </li>
@@ -80,25 +76,13 @@ export default function Footer() {
         <Separator className="my-8" />
 
         <div className="flex items-center justify-center gap-6 py-2">
-          <a
-            aria-label="Github"
-            href="#"
-            className="transition hover:opacity-80"
-          >
+          <a aria-label="Github" href="#" className="transition hover:opacity-80">
             <Github className="h-5 w-5" />
           </a>
-          <a
-            aria-label="Slack"
-            href="#"
-            className="transition hover:opacity-80"
-          >
+          <a aria-label="Slack" href="#" className="transition hover:opacity-80">
             <Slack className="h-5 w-5" />
           </a>
-          <a
-            aria-label="Instagram"
-            href="#"
-            className="transition hover:opacity-80"
-          >
+          <a aria-label="Instagram" href="#" className="transition hover:opacity-80">
             <Instagram className="h-5 w-5" />
           </a>
         </div>
@@ -111,8 +95,8 @@ export default function Footer() {
             <p className="font-medium text-stone-700">(주) 마음 잇는 목소리</p>
             <p>사업자 등록번호 : 123-45-67890 | 대표 : 상소회</p>
             <p>
-              호스팅 서비스 : (주) 마음 잇는 목소리 | 통신판매업 신고번호 :
-              2025-서울중구-00001 사업자정보확인
+              호스팅 서비스 : (주) 마음 잇는 목소리 | 통신판매업 신고번호 : 2025-서울중구-00001
+              사업자정보확인
             </p>
             <p>04520 서울특별시 중구 세종대로 110, 7층 (펜텀타워, 신어타워)</p>
             <p>고객센터 : 1234-0000 | 이메일 : 마음잇는목소리@gmail.com</p>
@@ -149,9 +133,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="mt-8 text-center text-xs text-stone-400">
-          All Rights Reserved
-        </div>
+        <div className="mt-8 text-center text-xs text-stone-400">All Rights Reserved</div>
       </div>
     </footer>
   );

diff --git a/ssh/src/components/Layout/Header/index.tsx b/ssh/src/components/Layout/Header/index.tsx
@@ -1,6 +1,7 @@
 import { Link, useLocation } from 'react-router-dom';
 import { ROUTING_PATH } from '@/routes/path.constants';
 import { MessageSquare, CircleUserRound } from 'lucide-react';
+import logo from '@/assets/logo1.png';
 
 const toAbs = (seg: string) => (!seg ? '/' : seg.startsWith('/') ? seg : `/${seg}`);
 
@@ -30,25 +31,30 @@ export default function Header() {
 
   return (
     <header className="fixed top-0 z-50 w-full bg-background/90 backdrop-blur supports-[backdrop-filter]:backdrop-blur">
-      <div className="mx-auto w-full max-w-screen-xl px-8 py-4">
+      <div className="mx-auto w-full max-w-screen-2xl px-6 py-4">
         <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-          <nav className="flex flex-wrap items-center gap-3">
-            {NAV.map((item) => {
-              const href = toAbs(item.seg);
-              const active = isActive(item.seg);
-              return (
-                <Link
-                  key={item.label}
-                  to={href}
-                  aria-current={active ? 'page' : undefined}
-                  className={[basePill, active ? activePill : inactivePill].join(' ')}
-                >
-                  {item.label}
-                </Link>
-              );
-            })}
-          </nav>
+          <div className="flex items-center gap-20">
+            <Link to={ROUTING_PATH.home} className="shrink-0">
+              <img src={logo} alt="Logo" className="h-10 w-auto object-contain" />
+            </Link>
 
+            <nav className="flex flex-nowrap items-center gap-2">
+              {NAV.map((item) => {
+                const href = toAbs(item.seg);
+                const active = isActive(item.seg);
+                return (
+                  <Link
+                    key={item.label}
+                    to={href}
+                    aria-current={active ? 'page' : undefined}
+                    className={[basePill, active ? activePill : inactivePill].join(' ')}
+                  >
+                    {item.label}
+                  </Link>
+                );
+              })}
+            </nav>
+          </div>
           <nav className="flex items-center gap-3">
             <Link
               to={toAbs(ROUTING_PATH.setting)}

diff --git a/ssh/src/pages/Chatbot/components/appsidebar.tsx b/ssh/src/pages/Chatbot/components/appsidebar.tsx
@@ -11,8 +11,8 @@ import {
 } from '@/components/ui/sidebar';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Bot, MessageSquare, History, Users, Settings, PanelLeftClose } from 'lucide-react';
-
+import { MessageSquare, History, Users, Settings, PanelLeftClose } from 'lucide-react';
+import logo2 from '@/assets/logo2.png';
 export default function AppSidebar({
   className = '',
   onClose,
@@ -25,8 +25,11 @@ export default function AppSidebar({
       <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="grid h-7 w-7 place-items-center rounded-full bg-primary/10">
-              <Bot className="h-4 w-4 text-primary" />
+            <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>
             <span className="font-semibold">마음 채팅</span>
           </div>

diff --git a/ssh/src/pages/Chatbot/components/chatbot.tsx b/ssh/src/pages/Chatbot/components/chatbot.tsx
@@ -17,11 +17,11 @@ import { Separator } from '@/components/ui/separator';
 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,
-  Bot,
   ChevronDown,
   CircleUser,
   Mic,
@@ -84,9 +84,10 @@ export default function Chatbot() {
                       aria-label="사이드바 열기"
                       className="btn-ghost-brand"
                     >
-                      <Bot className="h-5 w-5" />
+                      <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" />
                   </SheetContent>
@@ -139,7 +140,9 @@ export default function Chatbot() {
                 <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">
-                      <Bot className="h-5 w-5 text-primary" />
+                      <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>
 
                     <h2 className="text-lg font-semibold">