[Feat] FavoriteButton 컴포넌트 제작

src/pages/playground.tsx

@@ -2,6 +2,7 @@ import { BannerCard } from '@shared/ui/BannerCard/BannerCard';
 import { Button } from '@shared/ui/Button/Button';
 import { Card } from '@shared/ui/Card/Card';
 import { Checkbox } from '@shared/ui/Checkbox/Checkbox';
+import { FavoriteButton } from '@shared/ui/FavoriteButton';
 import { Header } from '@shared/ui/Header/Header';
 import { Modal } from '@shared/ui/Modal/Modal';
 import { Profile } from '@shared/ui/Profile/Profile';
@@ -121,6 +122,16 @@ export default function Playground() {
         <h2 className="typo-body-1">SearchBar</h2>
         <SearchBar placeholder="어떤 제품을 찾으시나요?" onSearch={() => {}} />
       </section>
+      {/* Favorite Button */}
+      <section className="flex flex-col gap-4">
+        <h2 className="typo-body-1">FavoriteButton</h2>
+        <div className="flex items-center gap-4">
+          <FavoriteButton />
+          <div className="rounded-full bg-[var(--color-black)] p-2">
+            <FavoriteButton variant="inverse" />
+          </div>
+        </div>
+      </section>
       {/* BannerCard */}
       <section className="flex flex-col gap-4">
         <h2 className="typo-body-1">Banner Card</h2>

src/shared/assets/icons/common/index.ts

@@ -2,3 +2,4 @@ export { default as CaretDownMdIcon } from './caret-down-md.svg?react';
 export { default as CheckIcon } from './check.svg?react';
 export { default as DoneIcon } from './done.svg?react';
 export { default as SearchMagnifyingGlassIcon } from './search-magnifying-glass.svg?react';
+export { default as HeartIcon } from './heart-outline.svg?react';

src/shared/assets/icons/index.ts

@@ -1,2 +1,2 @@
-export { CaretDownMdIcon, CheckIcon, DoneIcon, SearchMagnifyingGlassIcon } from './common';
+export { CaretDownMdIcon, CheckIcon, DoneIcon, HeartIcon, SearchMagnifyingGlassIcon } from './common';
 export { GearIcon, ShoppingIcon, SellIcon } from './banner';

src/shared/ui/FavoriteButton/FavoriteButton.tsx

@@ -0,0 +1,47 @@
+import { HeartIcon } from '@shared/assets/icons';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { favoriteButtonVariants } from './FavoriteButton.variants';
+
+export interface FavoriteButtonProps {
+  defaultActive?: boolean;
+  onToggle?: (isActive: boolean) => void;
+  ariaLabel?: string;
+  variant?: 'default' | 'inverse';
+}
+
+export const FavoriteButton = ({
+  defaultActive = false,
+  onToggle,
+  ariaLabel = '찜',
+  variant = 'default',
+}: FavoriteButtonProps) => {
+  const [isActive, setActive] = useState<boolean>(defaultActive);
+
+  const styles = favoriteButtonVariants({ variant });
+
+  const handleClick = () => {
+    const nextActive = !isActive;
+    setActive(nextActive);
+    onToggle?.(nextActive);
+  };
+
+  const iconStateClassName = clsx(
+    'fill-[var(--icon-fill)]',
+    'stroke-[var(--icon-stroke)]',
+    isActive ? '[--icon-fill:var(--icon-fill-active)]' : '[--icon-fill:transparent]',
+    'group-focus-visible:[--icon-fill:var(--icon-fill-active)]'
+  );
+
+  return (
+    <button
+      type="button"
+      className={styles.root()}
+      aria-pressed={isActive}
+      aria-label={ariaLabel}
+      onClick={handleClick}
+    >
+      <HeartIcon className={clsx(styles.icon(), iconStateClassName)} aria-hidden="true" />
+    </button>
+  );
+};

src/shared/ui/FavoriteButton/FavoriteButton.variants.ts

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+
+export const favoriteButtonVariants = tv({
+  slots: {
+    root: ['group inline-flex items-center justify-center', 'w-[44px] h-[44px]', 'transition-colors'],
+    icon: ['w-[33px] h-[29.26px]', 'transition-colors', '[--icon-fill-active:var(--color-green-300)]'],
+  },
+
+  variants: {
+    variant: {
+      default: {
+        icon: ['[--icon-stroke:var(--color-black)]'],
+      },
+      inverse: {
+        icon: ['[--icon-stroke:var(--color-white)]'],
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'default',
+  },
+});

src/shared/ui/FavoriteButton/index.ts

@@ -0,0 +1,2 @@
+export { FavoriteButton } from './FavoriteButton';
+export type { FavoriteButtonProps } from './FavoriteButton';

src/shared/ui/SearchBar/index.ts

@@ -1,2 +1 @@
 export { SearchBar } from './SearchBar';
-export type { SearchBarProps } from './SearchBar';