[#8] 좋아요 버튼 컴포넌트 제작

src/app/example/page.tsx

@@ -8,6 +8,7 @@ import {
   SelectType,
   TextInput,
 } from "@/components";
+import LikeButton from "@/components/button/like-button";
 import Profile from "@/components/profile/profile";
 import Searchbar from "@/components/searchbar/searchbar";
 import WineImg from "@/components/wine-img/wine-img";
@@ -115,6 +116,11 @@ const Page = () => {
         <Searchbar onChange={handleChange} />
       </section>
 
+      <section>
+        <LikeButton count={24} />
+        <LikeButton count={24} isLike={true} />
+      </section>
+
       <br />
     </div>
   );

src/components/button/Button.stories.tsx

@@ -3,6 +3,7 @@ import Button from "./basic-button";
 import IconButton from "./icon-button";
 import ArrowButton from "./arrow-button";
 import ICON_MAP from "../icon/icon-map";
+import LikeButton from "./like-button";
 
 const meta: Meta<typeof Button> = {
   title: "Components/Button",
@@ -131,3 +132,15 @@ export const Variations: Story = {
     layout: "fullscreen",
   },
 };
+
+export const DefaultLike: Story = {
+  render: () => {
+    return <LikeButton count={24} />;
+  },
+};
+
+export const Liked: Story = {
+  render: () => {
+    return <LikeButton count={24} isLike={true} />;
+  },
+};

src/components/button/like-button.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/utils";
+import Button from "./basic-button";
+import { ComponentProps } from "react";
+
+interface LikeButtonProps extends ComponentProps<"button"> {
+  isLike?: boolean;
+  count?: number;
+}
+
+/**
+ * 좋아요 버튼 컴포넌트
+ * @author hwitae
+ * @param isLike 좋아요 상태 true/false
+ * @param count 좋아요 개수
+ * @returns button
+ */
+const LikeButton = ({ isLike, count, ...props }: LikeButtonProps) => {
+  return (
+    <div>
+      <Button
+        icon={isLike ? "LikeOnIcon" : "LikeOffIcon"}
+        appearance="outline"
+        aria-label="좋아요버튼"
+        className={cn(
+          "cursor-pointer rounded-lg py-1 pl-2 pr-3",
+          "mobile:h-8 mobile:gap-[2px]",
+          "tablet:h-8 tablet:gap-[2px]",
+          "pc:h-9 pc:gap-[4px] pc:py-[6px] pc:pl-3 pc:pr-[14px]",
+          isLike && "border border-red-200"
+        )}
+        iconClassName={cn("mobile:ic-sm", "tablet:ic-sm", "pc:ic-md")}
+        iconColor={isLike ? "danger200" : "default"}
+        {...props}
+      >
+        <span
+          className={cn(
+            "text-body-lg font-normal tracking-[-0.02em]",
+            isLike && "text-lg text-red-200"
+          )}
+        >
+          {count}
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+export default LikeButton;

src/components/index.ts

@@ -15,3 +15,4 @@ export { default as ArrowButton } from "./button/arrow-button";
 export { default as IconButton } from "./button/icon-button";
 export { default as StarRating } from "./star-rating/star-rating";
 export { default as RatingBreakdown } from "./star-rating/rating-breakdown";
+export { default as Searchbar } from "./searchbar/searchbar";