아이콘 이미지 경로 충돌 해결

.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;

.storybook/preview-head.html

@@ -1,3 +1,5 @@
+<base href="/frontend/" />
+
 <link
   rel="preload"
   href="/fonts/PretendardVariable.woff2"

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

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]"
                 />

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">

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>

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]"
         />

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]"
         />

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"