RealMatchTeam · seyun31 · Feb 15, 2026 · Feb 15, 2026
diff --git a/app/components/common/FilterButton.tsx b/app/components/common/FilterButton.tsx
@@ -16,11 +16,10 @@ export default function FilterButton({
 }: FilterButtonProps) {
   return (
     <button
-      className={`flex items-center w-fit h-7 pl-3 pr-1.5 rounded-full border transition-colors cursor-pointer text-[14px] font-Pretendard ${
-        isActive
-          ? "border-core-3 text-core-1 bg-core-2 font-medium"
-          : "border-core-2 text-text-gray2 bg-white text-title3"
-      } ${className}`}
+      className={`flex items-center w-fit h-7 pl-3 pr-1.5 rounded-full border transition-colors cursor-pointer text-title3 ${isActive
+        ? "border-core-3 text-core-1 bg-core-70"
+        : "border-core-2 text-text-gray2 bg-white"
+        } ${className}`}
       {...props}
     >
       {truncateLabel(label)}

diff --git a/app/components/common/Tabs.tsx b/app/components/common/Tabs.tsx
@@ -29,7 +29,7 @@ export default function Tabs({ tabs, activeTab, onTabChange, className = "" }: T
                         >
                             {({ isActive }) => (
                                 <div
-                                    className={`py-4 text-title-1 text-center relative transition-colors cursor-pointer ${isActive ? 'text-core-1' : 'text-text-gray3'
+                                    className={`py-4 text-title-2 text-center relative transition-colors cursor-pointer ${isActive ? 'text-core-1' : 'text-text-gray3'
                                         }`}
                                 >
                                     {tab.label}

diff --git a/app/routes/business/calendar/calendar-content.tsx b/app/routes/business/calendar/calendar-content.tsx
@@ -11,6 +11,7 @@ import MatchingCard from "../components/MatchingCard";
 import MatchingTabSection from "../components/MatchingTabSection";
 import EmptyState from "../components/EmptyState";
 import LoadingSpinner from "../../../components/common/LoadingSpinner";
+import Tabs from "../../../components/common/Tabs";
 
 export default function CalendarContent() {
   const navigate = useNavigate();
@@ -142,28 +143,14 @@ export default function CalendarContent() {
 
   return (
     <div className="flex flex-col w-full min-h-screen bg-bluegray-1">
-      <div className="flex w-full bg-bg-w border-text-gray5">
-        <button
-          onClick={() => setMainTab("collaboration")}
-          className={`flex-1 py-4 text-[16px] font-medium text-[16px] relative transition-colors ${mainTab === "collaboration" ? "text-core-1" : "text-text-gray3"
-            }`}
-        >
-          협업 현황
-          {mainTab === "collaboration" && (
-            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[120px] h-[2px] bg-core-1" />
-          )}
-        </button>
-        <button
-          onClick={() => setMainTab("matching")}
-          className={`flex-1 py-4 text-[16px] font-medium text-[16px] relative transition-colors ${mainTab === "matching" ? "text-core-1" : "text-text-gray3"
-            }`}
-        >
-          매칭 현황
-          {mainTab === "matching" && (
-            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[120px] h-[2px] bg-core-1" />
-          )}
-        </button>
-      </div>
+      <Tabs
+        tabs={[
+          { label: "협업 현황", value: "collaboration" },
+          { label: "매칭 현황", value: "matching" },
+        ]}
+        activeTab={mainTab}
+        onTabChange={(value) => setMainTab(value as "collaboration" | "matching")}
+      />
 
       <main className="flex flex-col flex-1">
         {mainTab === "collaboration" ? (

diff --git a/app/routes/matching/brand/components/BrandFilterBar.tsx b/app/routes/matching/brand/components/BrandFilterBar.tsx
@@ -16,7 +16,7 @@ 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 font-semibold",
+                            "px-[12px] py-[8px] h-10 text-title2 rounded-[8px] whitespace-nowrap cursor-pointer transition-colors",
                             category === "BEAUTY"
                                 ? "bg-core-1 text-white"
                                 : "bg-white text-text-gray3 border border-gray-100"
@@ -27,7 +27,7 @@ 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 font-semibold",
+                            "px-[12px] py-[8px] h-10 text-title2 rounded-[8px] whitespace-nowrap cursor-pointer transition-colors",
                             category === "FASHION"
                                 ? "bg-core-1 text-white"
                                 : "bg-white text-text-gray3 border border-gray-100"

diff --git a/app/routes/matching/components/MatchingFilter.tsx b/app/routes/matching/components/MatchingFilter.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { cn } from "../../../lib/utils";
-import FilterChip from "../../../components/common/FilterChip";
 import SelectChip from "../test/components/SelectChip";
 import {
     SORT_OPTIONS,
@@ -82,7 +81,7 @@ export default function MatchingFilter({
                     <button
                         type="button"
                         className={cn(
-                            "text-title3 font-semibold cursor-pointer transition-colors",
+                            "text-title3 cursor-pointer transition-colors",
                             mainTab === "정렬 필터" ? "text-text-black" : "text-text-gray3",
                         )}
                         onClick={() => setMainTab("정렬 필터")}
@@ -94,7 +93,7 @@ export default function MatchingFilter({
                     <button
                         type="button"
                         className={cn(
-                            "text-title3 font-semibold cursor-pointer transition-colors",
+                            "text-title3 cursor-pointer transition-colors",
                             mainTab === filterTabName ? "text-text-black" : "text-text-gray3",
                         )}
                         onClick={() => setMainTab(filterTabName)}
@@ -162,22 +161,12 @@ export default function MatchingFilter({
                             </button>
                             {(filterData[subTab as keyof typeof filterData] as readonly string[]).map((tag) => {
                                 const selected = currentTags.includes(tag);
-                                if (filterType === "BEAUTY") {
-                                    return (
-                                        <SelectChip
-                                            key={tag}
-                                            label={tag}
-                                            isSelected={selected}
-                                            onToggle={() => toggleTag(tag)}
-                                        />
-                                    );
-                                }
                                 return (
-                                    <FilterChip
+                                    <SelectChip
                                         key={tag}
                                         label={tag}
-                                        selected={selected}
-                                        onClick={() => toggleTag(tag)}
+                                        isSelected={selected}
+                                        onToggle={() => toggleTag(tag)}
                                     />
                                 );
                             })}

diff --git a/app/routes/matching/test/components/SelectChip.tsx b/app/routes/matching/test/components/SelectChip.tsx
@@ -18,11 +18,10 @@ export default function SelectChip({
       disabled={disabled}
       className={[
         "flex items-center justify-center",
-        "h-[28px] px-[10px] py-1",
+        "h-[28px] px-2.5 py-1",
         "rounded-[20px]",
         "border",
         "text-body1",
-        "shadow-[0_1px_3px_0_var(--color-text-gray4)]",
         "transition-colors",
         disabled ? "opacity-50 cursor-not-allowed" : "active:opacity-90",
         isSelected

diff --git a/app/routes/matching/test/step1/step1-content.tsx b/app/routes/matching/test/step1/step1-content.tsx
@@ -86,7 +86,7 @@ export default function MatchingTestContent({
     <div className="w-full mx-auto h-full bg-white flex flex-col">
       <MatchingTestTopBar step={1} totalSteps={3} onBack={onBack} />
 
-      <main className="flex-1 px-6 pb-6">
+      <main className="flex-1 px-6 pb-6 bg-white">
         <h1 className="text-title leading-8 text-text-black">
           관심 있는 <span className="text-core-1">뷰티 특성</span>을
           <br />