feat: FAB 플로팅 액션 버튼 컴포넌트

This commit is contained in:
2026-04-23 14:36:38 +09:00
parent 6875a28e92
commit 80921563be
2 changed files with 87 additions and 0 deletions

37
src/components/FAB.jsx Normal file
View File

@@ -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>
);
}