카테고리 원자 컴포넌트 (#115)

* feat: 카테고리 원자 컴포넌트

* chore: interface 패턴 추가

Author: MINJE-98

.eslintrc.json

@@ -45,6 +45,10 @@
             "pattern": "@til-log.lab/**",
             "group": "parent"
           },
+          {
+            "pattern": "**/interface",
+            "group": "type"
+          },
           {
             "pattern": "**/interface/**",
             "group": "type"

src/components/atom/card/category/CategoryCard.tsx

@@ -0,0 +1,46 @@
+import { useRouter } from "next/router";
+import React from "react";
+
+import LinkTo from "@Components/molecules/LinkTo";
+
+import { CategoryCardProps } from "@Components/atom/card/category/interface";
+
+const CategoryCard = ({
+  categoryCardStyle,
+  categoryName,
+}: CategoryCardProps) => {
+  const router = useRouter();
+
+  if (router.query.category !== categoryName) {
+    return (
+      <LinkTo
+        href={{
+          pathname: router.pathname,
+          query: { ...router.query, category: categoryName },
+        }}
+      >
+        <span
+          className={`${categoryCardStyle} text-neutral-400 text-xl font-eng-sub-font-1`}
+        >
+          # {categoryName}
+        </span>
+      </LinkTo>
+    );
+  }
+  return (
+    <LinkTo
+      href={{
+        pathname: router.pathname,
+        query: { ...router.query, category: null },
+      }}
+    >
+      <span
+        className={`${categoryCardStyle} text-xl text-${categoryName} font-semibold font-eng-sub-font-1`}
+      >
+        # {categoryName}
+      </span>
+    </LinkTo>
+  );
+};
+
+export default CategoryCard;

src/components/atom/card/category/interface/categoryCardProps.ts

@@ -0,0 +1,4 @@
+export default interface CategoryCardProps {
+  categoryCardStyle?: string;
+  categoryName: string;
+}

src/components/atom/card/category/interface/index.ts

@@ -0,0 +1,3 @@
+import CategoryCardProps from "@Components/atom/card/category/interface/categoryCardProps";
+
+export type { CategoryCardProps };