diff --git a/.storybook/main.ts b/.storybook/main.ts
index e8b970e8..1da33627 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,3 +1,4 @@
+import { mergeConfig } from "vite";
 import type { StorybookConfig } from "@storybook/nextjs-vite";
 
 const config: StorybookConfig = {
@@ -12,10 +13,26 @@ const config: StorybookConfig = {
     name: "@storybook/nextjs-vite",
     options: {},
   },
-  staticDirs: [{ from: "../public", to: "/" }],
+
+  staticDirs: [{ from: "../public", to: "frontend" }],
+
   viteFinal: async (config) => {
-    config.base = "/frontend/";
-    return config;
+    return mergeConfig(config, {
+      base: "/frontend/",
+
+      build: {
+        assetsInlineLimit: 0,
+      },
+
+      resolve: {
+        alias: {
+          "/icons": "/public/icons",
+          "/images": "/public/images",
+          "/fonts": "/public/fonts",
+        },
+      },
+    });
   },
 };
+
 export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 29fef473..62316a68 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,5 @@
+<base href="/frontend/" />
+
 <link
   rel="preload"
   href="/fonts/PretendardVariable.woff2"
diff --git a/src/entities/chat/ui/ChattingRoom/ChattingRoom.tsx b/src/entities/chat/ui/ChattingRoom/ChattingRoom.tsx
index e2543815..5040b8a1 100644
--- a/src/entities/chat/ui/ChattingRoom/ChattingRoom.tsx
+++ b/src/entities/chat/ui/ChattingRoom/ChattingRoom.tsx
@@ -3,7 +3,6 @@ import React, { useState, useRef, useEffect } from "react";
 import { Message } from "../Message/Message";
 import Button from "@/shared/ui/Button/Button";
 import { TextField } from "@/shared/ui/TextField/TextField";
-import ImageSelectIcon from "@/shared/images/image-select.svg";
 import DeleteIcon from "@/shared/images/delete.svg";
 
 interface ChatMessage {
@@ -137,8 +136,9 @@ export const ChattingRoom = () => {
       {/* 메시지 입력 창 영역 */}
       <div className="absolute bottom-0 left-0 flex h-[100px] w-full items-center gap-4 p-4">
         <label className="bg-black-900 cursor-pointer rounded-full p-2">
-          <ImageSelectIcon
-            aria-label="Upload Icon"
+          <img
+            src="/icons/image-select.svg"
+            alt="Upload Icon"
             className="h-[24px] w-[24px] md:h-[25px] md:w-[25px] xl:h-[34px] xl:w-[34px]"
           />
           <input
diff --git a/src/entities/post/ui/card/PostCard.tsx b/src/entities/post/ui/card/PostCard.tsx
index a9215066..64ed742e 100644
--- a/src/entities/post/ui/card/PostCard.tsx
+++ b/src/entities/post/ui/card/PostCard.tsx
@@ -57,13 +57,13 @@ const PostCard = ({
               </div>
               <div className="flex items-center gap-[4px]">
                 <img
-                  src="icons/chat.svg"
+                  src="/icons/chat.svg"
                   alt="채팅 수"
                   className="h-[10px] w-[10px]"
                 />
                 <span>{chatCount}</span>
                 <img
-                  src="icons/heart.svg"
+                  src="/icons/heart.svg"
                   alt="좋아요 수"
                   className="h-[10px] w-[10px]"
                 />
diff --git a/src/shared/images/delete.svg b/src/shared/images/delete.svg
new file mode 100644
index 00000000..f679d808
--- /dev/null
+++ b/src/shared/images/delete.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9993 13.2287L6.08064 19.1473C5.91911 19.3088 5.71607 19.3915 5.47152 19.3952C5.22698 19.399 5.02021 19.3163 4.8512 19.1473C4.68217 18.9783 4.59766 18.7734 4.59766 18.5326C4.59766 18.2918 4.68217 18.0869 4.8512 17.9179L10.7698 11.9993L4.8512 6.08063C4.68966 5.91911 4.60702 5.71607 4.60329 5.47152C4.59953 5.22699 4.68217 5.02021 4.8512 4.8512C5.02021 4.68217 5.22512 4.59766 5.46592 4.59766C5.70672 4.59766 5.91162 4.68217 6.08064 4.8512L11.9993 10.7698L17.9179 4.8512C18.0794 4.68966 18.2824 4.60702 18.527 4.60329C18.7715 4.59953 18.9783 4.68217 19.1473 4.8512C19.3163 5.02021 19.4008 5.22512 19.4008 5.46592C19.4008 5.70672 19.3163 5.91162 19.1473 6.08063L13.2287 11.9993L19.1473 17.9179C19.3088 18.0794 19.3915 18.2824 19.3952 18.527C19.399 18.7715 19.3163 18.9783 19.1473 19.1473C18.9783 19.3163 18.7734 19.4008 18.5326 19.4008C18.2918 19.4008 18.0869 19.3163 17.9179 19.1473L11.9993 13.2287Z" />
+</svg>
diff --git a/src/widgets/header/ui/Header.tsx b/src/widgets/header/ui/Header.tsx
index 51489439..16e67974 100644
--- a/src/widgets/header/ui/Header.tsx
+++ b/src/widgets/header/ui/Header.tsx
@@ -17,23 +17,30 @@ const navItems = [
   {
     href: "/chat",
     label: "채팅하기",
-    icon: "icons/chats.svg",
+    icon: "/icons/chats.svg",
     hasDivider: false,
   },
   {
     href: "/ai",
     label: "분석하기",
-    icon: "icons/analyze.svg",
+    icon: "/icons/analyze.svg",
     hasDivider: true,
   },
   {
     href: "/my",
     label: "마이페이지",
-    icon: "icons/user.svg",
+    icon: "/icons/user.svg",
     hasDivider: false,
   },
 ];
 
+type TabKey = "all" | "buyer" | "seller";
+const TABS: { key: TabKey; label: string }[] = [
+  { key: "all", label: "전체" },
+  { key: "buyer", label: "구매" },
+  { key: "seller", label: "판매" },
+];
+
 const Header = () => {
   const [showSearch, setShowSearch] = useState(false);
   const isLogined = useAuthStore((state) => state.isLogined);
@@ -129,10 +136,9 @@ const Header = () => {
                 <h2 className="text-md font-semibold text-white">
                   {selectedChatId ? `채팅방` : "채팅"}
                 </h2>
-                <DeleteIcon
-                  onClick={closeChat}
-                  className="h-4 w-4 cursor-pointer text-white/80"
-                />
+                <button onClick={closeChat} aria-label="닫기">
+                  <img src="/icons/delete.svg" alt="" className="h-4 w-4" />
+                </button>
               </header>
 
               <div className="flex h-[calc(100dvh-60px)] flex-col">
diff --git a/src/widgets/header/ui/HeaderDesktop.tsx b/src/widgets/header/ui/HeaderDesktop.tsx
index 1d0e3d0b..2f2c38db 100644
--- a/src/widgets/header/ui/HeaderDesktop.tsx
+++ b/src/widgets/header/ui/HeaderDesktop.tsx
@@ -37,10 +37,24 @@ const HeaderDesktop = ({
                     : ""
                 } `}
               >
-                <Link href={href} className="flex items-center justify-center">
-                  <img src={icon} alt={label} className="h-[16px] w-[16px]" />
-                  <p className="ml-1">{label}</p>
-                </Link>
+                {href === "/chat" && onOpenChat ? (
+                  <button
+                    type="button"
+                    onClick={onOpenChat}
+                    className="flex cursor-pointer items-center justify-center"
+                  >
+                    <img src={icon} alt={label} className="h-[16px] w-[16px]" />
+                    <p className="ml-1">{label}</p>
+                  </button>
+                ) : (
+                  <Link
+                    href={href}
+                    className="flex items-center justify-center"
+                  >
+                    <img src={icon} alt={label} className="h-[16px] w-[16px]" />
+                    <p className="ml-1">{label}</p>
+                  </Link>
+                )}
               </li>
             ))}
           </ul>
diff --git a/src/widgets/header/ui/HeaderMobile.tsx b/src/widgets/header/ui/HeaderMobile.tsx
index e6a72f2e..168e6428 100644
--- a/src/widgets/header/ui/HeaderMobile.tsx
+++ b/src/widgets/header/ui/HeaderMobile.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Link from "next/link";
+
 interface HeaderMobileProps {
   setShowSearch: (value: boolean) => void;
   onOpenMenu: () => void;
@@ -8,8 +10,13 @@ interface HeaderMobileProps {
 const HeaderMobile = ({ setShowSearch, onOpenMenu }: HeaderMobileProps) => {
   return (
     <div className="flex w-full items-center justify-between md:hidden">
-      <button aria-label="menu" type="button" className="cursor-pointer">
-        <img src="icons/menu.svg" alt="menu" className="h-[24px] w-[24px]" />
+      <button
+        aria-label="menu"
+        type="button"
+        className="cursor-pointer"
+        onClick={onOpenMenu}
+      >
+        <img src="/icons/menu.svg" alt="menu" className="h-[24px] w-[24px]" />
       </button>
 
       <div className="flex-1 text-center text-white">
@@ -23,7 +30,7 @@ const HeaderMobile = ({ setShowSearch, onOpenMenu }: HeaderMobileProps) => {
         onClick={() => setShowSearch(true)}
       >
         <img
-          src="icons/search.svg"
+          src="/icons/search.svg"
           alt="search"
           className="h-[24px] w-[24px]"
         />
diff --git a/src/widgets/header/ui/HeaderMobileSearch.tsx b/src/widgets/header/ui/HeaderMobileSearch.tsx
index 7419e9f6..e380df1b 100644
--- a/src/widgets/header/ui/HeaderMobileSearch.tsx
+++ b/src/widgets/header/ui/HeaderMobileSearch.tsx
@@ -15,7 +15,7 @@ const HeaderMobileSearch = ({ setShowSearch }: HeaderMobileSearchProps) => {
         onClick={() => setShowSearch(false)}
       >
         <img
-          src="icons/delete.svg"
+          src="/icons/delete.svg"
           alt="검색 닫기"
           className="h-[16px] w-[16px]"
         />
diff --git a/src/widgets/header/ui/SearchForm.tsx b/src/widgets/header/ui/SearchForm.tsx
index 917601fa..82e152c0 100644
--- a/src/widgets/header/ui/SearchForm.tsx
+++ b/src/widgets/header/ui/SearchForm.tsx
@@ -46,7 +46,7 @@ const SearchForm = ({
     >
       {showIcon && (
         <img
-          src="icons/search.svg"
+          src="/icons/search.svg"
           alt="search"
           aria-hidden="true"
           className="h-6 w-6 shrink-0"