Feat: HeartButton 컴포넌트 구현

src/components/HeartButton/index.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { faHeart as farHeart } from '@fortawesome/free-regular-svg-icons';
+import { faHeart as fasHeart } from '@fortawesome/free-solid-svg-icons';
+import * as S from './styles';
+
+interface HeartButtonProps {
+  initialClicked?: boolean;
+  onClick?: (isClicked: boolean) => void;
+}
+
+export const HeartButton = ({ initialClicked = false, onClick }: HeartButtonProps) => {
+  const [isClicked, setIsClicked] = useState(initialClicked);
+
+  const handleClick = () => {
+    const newClickedState = !isClicked;
+    setIsClicked(newClickedState);
+    if (onClick) {
+      onClick(newClickedState);
+    }
+  };
+
+  return <S.HeartButton icon={isClicked ? fasHeart : farHeart} $isClicked={isClicked} onClick={handleClick} />;
+};

src/components/HeartButton/styles.ts

@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const HeartButton = styled(FontAwesomeIcon)<{ $isClicked: boolean }>`
+  color: ${({ theme, $isClicked }) => ($isClicked ? theme.colors.primary : theme.colors.gray)};
+  cursor: pointer;
+  transition: color 0.1s ease;
+  font-size: 18px;
+`;