feat: bookmarkBtn UI 추가

Author: yyezzzy

src/app/components/button/BookmarkBtn.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+
+interface BookmarkBtnProps {
+  className?: string;
+}
+
+const BookmarkBtn: React.FC<BookmarkBtnProps> = ({ className = "" }) => {
+  const [isBookmarked, setIsBookmarked] = useState(false);
+
+  const toggleBookmark = () => {
+    setIsBookmarked((prev) => !prev);
+  };
+
+  const baseStyles =
+    "inline-flex items-center justify-center transition-colors rounded-full w-54 h-54 p-4 bg-orange-50";
+
+  const iconStyles = "text-xl text-primary-orange-300";
+
+  return (
+    <button className={`${baseStyles} ${className}`} onClick={toggleBookmark}>
+      {isBookmarked ? <FaBookmark className={iconStyles} /> : <FaRegBookmark className={iconStyles} />}
+    </button>
+  );
+};
+
+export default BookmarkBtn;

src/app/stories/design-system/components/buttons/BookmarkBtn.stories.tsx

@@ -0,0 +1,25 @@
+import BookmarkBtn from "@/app/components/button/BookmarkBtn";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof BookmarkBtn> = {
+  title: "Design System/Components/BookmarkBtn",
+  component: BookmarkBtn,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BookmarkBtn>;
+
+export const Bookmarked: Story = {
+  args: {},
+  render: (args) => {
+    return (
+      <div>
+        <p className="mb-2 text-sm">click !</p>
+        <BookmarkBtn {...args} />
+      </div>
+    );
+  },
+};