From 80921563bed378420d856d6879fcbb6ac4cc3747 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:36:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20FAB=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?=
 =?UTF-8?q?=EC=95=A1=EC=85=98=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FAB.css | 50 ++++++++++++++++++++++++++++++++++++++++++
 src/components/FAB.jsx | 37 +++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/components/FAB.css
 create mode 100644 src/components/FAB.jsx

diff --git a/src/components/FAB.css b/src/components/FAB.css
new file mode 100644
index 0000000..fdeef4f
--- /dev/null
+++ b/src/components/FAB.css
@@ -0,0 +1,50 @@
+/* FAB — Floating Action Button (mobile-only) */
+
+.fab {
+  display: none;
+  position: fixed;
+  right: 20px;
+  bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom) + 16px);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--gradient-accent);
+  border: none;
+  color: #000;
+  font-size: 24px;
+  z-index: 250;
+  box-shadow: 0 0 0 1px var(--neon-cyan-dim), 0 4px 16px rgba(0, 255, 255, 0.25);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
+}
+
+@media (max-width: 768px) {
+  .fab {
+    display: flex;
+  }
+}
+
+.fab:active {
+  transform: scale(0.92);
+}
+
+.fab__icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+/* Variant: positioned above a music mini-player */
+.fab--above-player {
+  bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom) + 16px + 56px);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .fab {
+    transition: none;
+  }
+}
diff --git a/src/components/FAB.jsx b/src/components/FAB.jsx
new file mode 100644
index 0000000..7376519
--- /dev/null
+++ b/src/components/FAB.jsx
@@ -0,0 +1,37 @@
+import { useIsMobile } from '../hooks/useIsMobile';
+import './FAB.css';
+
+const PlusIcon = () => (
+  <svg
+    className="fab__icon"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 5v14M5 12h14"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export default function FAB({ onClick, icon, label = '액션', className = '' }) {
+  const isMobile = useIsMobile();
+
+  if (!isMobile) return null;
+
+  return (
+    <button
+      type="button"
+      className={`fab ${className}`}
+      onClick={onClick}
+      aria-label={label}
+    >
+      {icon ?? <PlusIcon />}
+    </button>
+  );
+}