feat(F-070): completed feature

project/frontend/src/components/product/ProductAttributes.tsx

@@ -0,0 +1,25 @@
+import type { ProductAttribute } from '@/types/api';
+import { ATTRIBUTE_LABELS } from '@/lib/product-attributes';
+
+interface Props {
+  attributes: ProductAttribute[] | undefined;
+  className?: string;
+}
+
+export default function ProductAttributes({ attributes, className }: Props) {
+  if (!attributes || attributes.length === 0) return null;
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className ?? ''}`}>
+      {attributes.map((attr) => (
+        <span
+          key={attr}
+          className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800"
+          title={ATTRIBUTE_LABELS[attr]}
+        >
+          {ATTRIBUTE_LABELS[attr]}
+        </span>
+      ))}
+    </div>
+  );
+}