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

src/app/example/page.tsx

@@ -10,6 +10,7 @@ import {
   TextInput,
   Card,
 } 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";
@@ -277,6 +278,11 @@ const Page = () => {
         </div>
       </section>
 
+      <section>
+        <LikeButton count={642304} />
+        <LikeButton count={5024} isLike={true} />
+      </section>
+
       <br />
     </>
   );

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,46 @@
+import { cn, formatCount } 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 = 0, ...props }: LikeButtonProps) => {
+  return (
+    <Button
+      icon={isLike ? "LikeOnIcon" : "LikeOffIcon"}
+      appearance="outline"
+      aria-label={isLike ? "좋아요" : "좋아요 취소"}
+      aria-pressed={isLike}
+      className={cn(
+        "h-8 w-fit cursor-pointer gap-[2px] rounded-lg py-1 pl-2 pr-3",
+        "tablet:h-9 tablet:w-fit tablet:gap-[4px] tablet:py-[6px] tablet:pl-3 tablet:pr-[14px]",
+        "pc:h-9 pc:w-fit 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-lg font-normal tracking-[-0.02em]",
+          isLike ? "text-red-200" : "text-primary"
+        )}
+      >
+        {formatCount(count)}
+      </span>
+    </Button>
+  );
+};
+
+export default LikeButton;

src/components/index.ts

@@ -13,5 +13,6 @@ 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";
 export { default as WineTaste } from "./wine-taste/wine-taste";
 export { default as Card } from "./card/card";

src/lib/utils.ts

@@ -4,3 +4,38 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * 숫자 표기 포맷을 변경한다.
+ * 1000 -> "1천개"
+ * 12000 -> "1.2만개"
+ * @author hwitae
+ * @param count
+ * @returns string
+ */
+export const formatCount = (count: number): string => {
+  // ~천
+  if (count > 1000 && count < 10000) {
+    const formatted = (count / 1000).toFixed(1);
+
+    return (
+      (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "천"
+    );
+    // ~만
+  } else if (count > 10000 && count < 100000) {
+    const formatted = (count / 10000).toFixed(1);
+
+    return (
+      (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "만"
+    );
+    // ~십만
+  } else if (count > 100000 && count < 1000000) {
+    const formatted = (count / 10000).toFixed(0);
+
+    return (
+      (formatted.endsWith(".0") ? formatted.slice(0, -2) : formatted) + "만"
+    );
+  } else {
+    return count.toString();
+  }
+};