첫 커밋

src/components/SearchFilterButton.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface SearchFilterButtonProps {
+  displayText: string;
+  isActive: boolean;
+  onClick: () => void;
+  className?: string;
+  showIcon?: boolean;
+  disabled?: boolean;
+}
+
+const SearchFilterButton: React.FC<SearchFilterButtonProps> = ({
+  displayText,
+  isActive,
+  onClick,
+  className = '',
+  showIcon = true,
+  disabled = false
+}) => {
+  const baseClasses = "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500";
+  
+  const activeClasses = isActive
+    ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-100"
+    : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400";
+    
+  const disabledClasses = disabled
+    ? "opacity-50 cursor-not-allowed"
+    : "cursor-pointer";
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseClasses} ${activeClasses} ${disabledClasses} ${className}`}
+    >
+      {showIcon && (
+        <svg 
+          className="w-4 h-4 mr-2" 
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path 
+            strokeLinecap="round" 
+            strokeLinejoin="round" 
+            strokeWidth={2} 
+            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" 
+          />
+        </svg>
+      )}
+      <span className="truncate">{displayText}</span>
+      {isActive && (
+        <div className="ml-2 w-2 h-2 bg-blue-500 rounded-full flex-shrink-0" />
+      )}
+    </button>
+  );
+};
+
+export default SearchFilterButton;