feat: BLOG-50 LCP방지를 위해 카드컴포넌트는 라이브러리꺼 쓰지 않기

src/app/_components/Cards/Card/index.module.scss

@@ -1,8 +1,88 @@
 @use "src/styles/libs" as *;
+
+@mixin multi-line-ellipse($line) {
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
 .card {
-  @include mobile_screen {
-    img {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+
+  cursor: pointer;
+  &:hover {
+    transition: all 0.2s ease-in-out;
+    transform: scale(1.01);
+  }
+
+  align-items: center;
+  background-color: $WHITE;
+
+  border-radius: 20px;
+
+  color: $GRAY-600;
+  background-color: $WHITE;
+
+  img {
+    @include mobile_screen {
       display: none;
     }
+    background-color: #ffffff;
+    border-radius: 20px 0 0 20px;
+    object-fit: cover;
+  }
+
+  &_content {
+    display: flex;
+    flex-direction: column;
+    max-width: 508px;
+    padding: 10px;
+    gap: 10px;
+    &-title {
+      @include font-size;
+      @include multi-line-ellipse(1);
+      font-size: $NORMAL;
+      margin: 0;
+    }
+
+    &-description {
+      max-height: 80px;
+
+      font-size: $SMALL;
+      @include multi-line-ellipse(1);
+    }
+
+    &-tagbox {
+      display: flex;
+      gap: 10px;
+      font-size: $SMALL;
+
+      & > &-createdAt {
+        vertical-align: middle;
+        padding: 3px;
+      }
+      & > &-tag {
+        background-color: $GRAY-200;
+        padding: 3px 6px;
+        border-radius: 6px;
+        &:hover {
+          color: $GRAY-500;
+        }
+
+        & > a {
+          text-decoration: none;
+          color: $BLACK;
+        }
+      }
+    }
+  }
+
+  &_box-shadow {
+    box-shadow: 5px 5px 5px 5px gray;
   }
 }

src/app/_components/Cards/Card/index.tsx

@@ -1,34 +1,41 @@
-"use client";
-
-import {
-  CardProps as StorybookCardProps,
-  Card as StorybookCard,
-} from "junyeol-components";
 import Link from "next/link";
 import styles from "./index.module.scss";
+import { ReactNode } from "react";
 
-interface CardProps extends StorybookCardProps {
+interface CardProps {
   id: number;
+  Thumbnail: JSX.Element;
+  title: string;
+  description: string;
+  createdAt: string;
+  subCategory?: ReactNode;
 }
 
 export const Card = ({
   id,
   Thumbnail,
   title,
   description,
-  boxShadow = true,
   createdAt,
-  subCategoryLink,
+  subCategory,
 }: CardProps) => (
   <Link href={`/post/${id}`}>
-    <StorybookCard
-      className={styles.card}
-      createdAt={createdAt}
-      subCategoryLink={subCategoryLink}
-      boxShadow={boxShadow}
-      title={title}
-      description={description}
-      Thumbnail={Thumbnail}
-    />
+    <div className={`${styles.card} ${styles["card_box-shadow"]} `}>
+      {Thumbnail}
+      <div className={styles["card_content"]}>
+        <h3 className={`${styles["card_content-title"]}`}>{title}</h3>
+        <div className={`${styles["card_content-description"]}`}>
+          {description}
+        </div>
+        <div className={`${styles["card_content-tagbox"]}`}>
+          <div className={`${styles["card_content-tagbox-createdAt"]}`}>
+            {createdAt}
+          </div>
+          <div className={`${styles["card_content-tagbox-tag"]}`}>
+            {subCategory}
+          </div>
+        </div>
+      </div>
+    </div>
   </Link>
 );

src/app/_components/Cards/index.tsx

@@ -5,7 +5,6 @@ import styles from "./index.module.scss";
 import { PostType } from "@/types";
 import Image from "next/image";
 import { Card } from "@/app/_components/Cards/Card";
-// import Link from "next/link";
 import { devideCategoryObject } from "@/utils/getCategoryLink";
 import { IMAGE_SIZE_IN_POSTS } from "@/utils/constant";
 
@@ -33,10 +32,7 @@ const Cards = ({ articles }: CardsProps) => (
             title={metaField?.title || "no title"}
             description={metaField.description || "no description"}
             createdAt={createdAt}
-            subCategoryLink={
-              // <Link href={`${categoryLink}`}>{subCategory}</Link>
-              <>{subCategory}</>
-            }
+            subCategory={<>{subCategory}</>}
             Thumbnail={
               <Image
                 width={IMAGE_SIZE_IN_POSTS.width}

src/app/layout.tsx

@@ -7,11 +7,7 @@ import styles from "./page.module.scss";
 import { SidebarWrapper } from "@/app/_components/SidebarWrapper";
 import Link from "next/link";
 import { BASE_URL } from "@/utils/constant";
-import dynamic from "next/dynamic";
-
-const Provider = dynamic(() => import("@/app/_components/Provider"), {
-  ssr: false,
-});
+import Provider from "@/app/_components/Provider";
 
 const inter = Inter({ subsets: ["latin"] });