From 1474e3666f0ae229242e5735642b3ca5b06772a0 Mon Sep 17 00:00:00 2001
From: seyun31 <2ne1jenna@naver.com>
Date: Sun, 15 Feb 2026 23:25:27 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=99=88/=EB=A7=A4=EC=B9=AD?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8/=EB=B9=84=EC=A6=88=EB=8B=88?=
 =?UTF-8?q?=EC=8A=A4=20=ED=83=AD=20UI=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/common/Tabs.tsx                | 125 ++++++++++++------
 .../brand/components/BrandFilterBar.tsx       |   8 +-
 .../campaign/components/CampaignFilterBar.tsx |   8 +-
 3 files changed, 95 insertions(+), 46 deletions(-)

diff --git a/app/components/common/Tabs.tsx b/app/components/common/Tabs.tsx
index d9348dd1..60fd7893 100644
--- a/app/components/common/Tabs.tsx
+++ b/app/components/common/Tabs.tsx
@@ -1,4 +1,5 @@
-import { NavLink } from 'react-router';
+import { NavLink, useLocation } from 'react-router';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 export interface TabItem {
     label: string;
@@ -13,50 +14,98 @@ interface TabsProps {
     className?: string;
 }
 
+const SIDE_MARGIN_PX = 16;
+
 export default function Tabs({ tabs, activeTab, onTabChange, className = "" }: TabsProps) {
+    const location = useLocation();
+    const hasPath = tabs.some((t) => t.path);
+    const currentActiveTab = hasPath
+        ? tabs.find((t) => t.path && location.pathname.startsWith(t.path))?.value || tabs[0]?.value
+        : activeTab;
+
+    const activeIndex = Math.max(
+        0,
+        tabs.findIndex((t) => t.value === currentActiveTab)
+    );
+
+    const wrapRef = useRef<HTMLDivElement | null>(null);
+    const [wrapWidth, setWrapWidth] = useState(0);
+
+    useLayoutEffect(() => {
+        const el = wrapRef.current;
+        if (!el) return;
+
+        const measure = () => setWrapWidth(el.clientWidth);
+        measure();
+
+        const ro = new ResizeObserver(() => measure());
+        ro.observe(el);
+
+        return () => ro.disconnect();
+    }, []);
+
+    const pxToRem = (px: number) => {
+        if (typeof window === "undefined") return `${px / 16}rem`;
+        const root = window.getComputedStyle(document.documentElement).fontSize;
+        const base = Number.parseFloat(root) || 16;
+        return `${px / base}rem`;
+    };
+
+    const trackWidth = Math.max(0, wrapWidth - SIDE_MARGIN_PX * 2);
+    const tabWidth = trackWidth / tabs.length;
+    const indicatorWidth = tabWidth;
+    const indicatorX = SIDE_MARGIN_PX + tabWidth * activeIndex;
+
     return (
-        <div className={`flex w-full bg-white border-b border-bluegray-2 shrink-0 ${className}`}>
-            {tabs.map((tab) => {
-                const isSelected = activeTab === tab.value;
+        <div ref={wrapRef} className={`relative w-full h-12.5 bg-white shrink-0 ${className}`}>
+            <div className="flex h-full items-center px-4">
+                {tabs.map((tab) => {
+                    const isSelected = currentActiveTab === tab.value;
 
-                // Mode 1: Link-based Tab
-                if (tab.path) {
+                    // Link-based Tab
+                    if (tab.path) {
+                        return (
+                            <NavLink
+                                key={tab.value}
+                                to={tab.path}
+                                className="flex-1 select-none"
+                            >
+                                {({ isActive }) => (
+                                    <div
+                                        className={`h-full flex items-center justify-center text-title2 transition-colors cursor-pointer ${isActive ? 'text-(--color-core-1)' : 'text-text-gray3'
+                                            }`}
+                                    >
+                                        {tab.label}
+                                    </div>
+                                )}
+                            </NavLink>
+                        );
+                    }
+
+                    // Button-based Tab
                     return (
-                        <NavLink
+                        <button
                             key={tab.value}
-                            to={tab.path}
-                            className="flex-1 select-none"
+                            type="button"
+                            onClick={() => onTabChange?.(tab.value)}
+                            className={`flex-1 h-full flex items-center justify-center text-title2 transition-colors ${isSelected ? 'text-(--color-core-1)' : 'text-text-gray3'
+                                }`}
                         >
-                            {({ isActive }) => (
-                                <div
-                                    className={`py-4 text-title-2 text-center relative transition-colors cursor-pointer font-semibold ${isActive ? 'text-core-1' : 'text-text-gray3'
-                                        }`}
-                                >
-                                    {tab.label}
-                                    {isActive && (
-                                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[150px] h-[2px] bg-core-1" />
-                                    )}
-                                </div>
-                            )}
-                        </NavLink>
+                            {tab.label}
+                        </button>
                     );
-                }
-
-                // Mode 2: Button-based Tab (State)
-                return (
-                    <button
-                        key={tab.value}
-                        onClick={() => onTabChange?.(tab.value)}
-                        className={`flex-1 py-4 text-title-2 text-center relative transition-colors select-none font-semibold ${isSelected ? 'text-core-1' : 'text-text-gray3'
-                            }`}
-                    >
-                        {tab.label}
-                        {isSelected && (
-                            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[150px] h-[2px] bg-core-1" />
-                        )}
-                    </button>
-                );
-            })}
+                })}
+            </div>
+
+            <div className="absolute bottom-0 left-0 right-0 h-px bg-black/10" />
+
+            <div
+                className="absolute bottom-0 h-0.5 bg-(--color-success) transition-transform duration-200"
+                style={{
+                    width: pxToRem(indicatorWidth),
+                    transform: `translateX(${pxToRem(indicatorX)})`,
+                }}
+            />
         </div>
     );
 }
diff --git a/app/routes/matching/brand/components/BrandFilterBar.tsx b/app/routes/matching/brand/components/BrandFilterBar.tsx
index 77077ff8..f8067b05 100644
--- a/app/routes/matching/brand/components/BrandFilterBar.tsx
+++ b/app/routes/matching/brand/components/BrandFilterBar.tsx
@@ -16,10 +16,10 @@ export default function BrandFilterBar({ category, onCategoryChange, searchKeywo
                 <div className="flex gap-2 shrink-0">
                     <button
                         className={cn(
-                            "px-[12px] py-[8px] h-10 text-title2 rounded-[8px] whitespace-nowrap cursor-pointer transition-colors",
+                            "px-[10px] py-2 rounded-[8px] text-title2 transition-all",
                             category === "BEAUTY"
                                 ? "bg-core-1 text-white"
-                                : "bg-white text-text-gray3 border border-gray-100"
+                                : "bg-white border border-text-gray5 text-text-gray3"
                         )}
                         onClick={() => onCategoryChange("BEAUTY")}
                     >
@@ -27,10 +27,10 @@ export default function BrandFilterBar({ category, onCategoryChange, searchKeywo
                     </button>
                     <button
                         className={cn(
-                            "px-[12px] py-[8px] h-10 text-title2 rounded-[8px] whitespace-nowrap cursor-pointer transition-colors",
+                            "px-[10px] py-2 rounded-[8px] text-title2 transition-all",
                             category === "FASHION"
                                 ? "bg-core-1 text-white"
-                                : "bg-white text-text-gray3 border border-gray-100"
+                                : "bg-white border border-text-gray5 text-text-gray3"
                         )}
                         onClick={() => onCategoryChange("FASHION")}
                     >
diff --git a/app/routes/matching/campaign/components/CampaignFilterBar.tsx b/app/routes/matching/campaign/components/CampaignFilterBar.tsx
index 9b1ca9d4..6d1cad0d 100644
--- a/app/routes/matching/campaign/components/CampaignFilterBar.tsx
+++ b/app/routes/matching/campaign/components/CampaignFilterBar.tsx
@@ -16,10 +16,10 @@ export default function CampaignFilterBar({ category, onCategoryChange, searchKe
                 <div className="flex gap-2 shrink-0">
                     <button
                         className={cn(
-                            "px-[12px] py-[8px] h-10 text-title2 rounded-[8px] whitespace-nowrap cursor-pointer transition-colors font-semibold",
+                            "px-[10px] py-2 rounded-[8px] text-title2 transition-all",
                             category === "BEAUTY"
                                 ? "bg-core-1 text-white"
-                                : "bg-white text-text-gray3 border border-gray-100"
+                                : "bg-white border border-text-gray5 text-text-gray3"
                         )}
                         onClick={() => onCategoryChange("BEAUTY")}
                     >
@@ -27,10 +27,10 @@ export default function CampaignFilterBar({ category, onCategoryChange, searchKe
                     </button>
                     <button
                         className={cn(
-                            "px-[12px] py-[8px] h-10 text-title2 rounded-[8px] whitespace-nowrap cursor-pointer transition-colors font-semibold",
+                            "px-[10px] py-2 rounded-[8px] text-title2 transition-all",
                             category === "FASHION"
                                 ? "bg-core-1 text-white"
-                                : "bg-white text-text-gray3 border border-gray-100"
+                                : "bg-white border border-text-gray5 text-text-gray3"
                         )}
                         onClick={() => onCategoryChange("FASHION")}
                     >