From 864a581afb7f771563a137090a0c06f000a065c2 Mon Sep 17 00:00:00 2001
From: seyun31 <2ne1jenna@naver.com>
Date: Sun, 15 Feb 2026 21:34:49 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A7=A4=EC=B9=AD=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B0=8F=20=EB=A7=A4=EC=B9=AD=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 매칭리스트 필터 태그 칩 디자인 통일
- 매칭리스트 및 비즈니스 상단 탭 컴포넌트 통일
- 매칭검사 하단 패딩 배경색 오류 수정
---
 app/components/common/FilterButton.tsx        |  9 +++---
 app/components/common/Tabs.tsx                |  2 +-
 .../business/calendar/calendar-content.tsx    | 31 ++++++-------------
 .../brand/components/BrandFilterBar.tsx       |  4 +--
 .../matching/components/MatchingFilter.tsx    | 21 +++----------
 .../matching/test/components/SelectChip.tsx   |  3 +-
 .../matching/test/step1/step1-content.tsx     |  2 +-
 7 files changed, 23 insertions(+), 49 deletions(-)

diff --git a/app/components/common/FilterButton.tsx b/app/components/common/FilterButton.tsx
index 8e8911e3..8375a935 100644
--- 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
index 9d718047..a7861aaf 100644
--- 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
index 22950b91..1d593e85 100644
--- 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
index f3b6256e..77077ff8 100644
--- 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
index 47771163..5cd820b6 100644
--- 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
index b54518ba..fb0c743b 100644
--- 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
index 1c4ccbbc..3084272b 100644
--- 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 />