From 49dee2a701201ec1279240619a606bd21694920a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EC=A7=80=EB=AF=BC?=
 <108014449+stopmin@users.noreply.github.com>
Date: Wed, 24 Jul 2024 00:14:10 +0900
Subject: [PATCH] =?UTF-8?q?VerticalCard=20=EB=B2=84=EA=B7=B8=20=ED=94=BD?=
 =?UTF-8?q?=EC=8A=A4=20(#127)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: VerticalCard 버그 픽스
#126

* feat: 의존성 정리
#126
---
 src/app/insight/page.tsx            |  1 +
 src/components/NewsCardVertical.tsx | 96 ++++++++++++++---------------
 2 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/src/app/insight/page.tsx b/src/app/insight/page.tsx
index 0960a89..104da90 100644
--- a/src/app/insight/page.tsx
+++ b/src/app/insight/page.tsx
@@ -102,6 +102,7 @@ const Page = () => {
                     onClick={() => handleInsightClick(insight)}
                   >
                     <NewsCardVertical
+                      isMock
                       date={insight.date}
                       description={insight.content}
                       id={insight.id}
diff --git a/src/components/NewsCardVertical.tsx b/src/components/NewsCardVertical.tsx
index 6e289e0..e62b9c9 100644
--- a/src/components/NewsCardVertical.tsx
+++ b/src/components/NewsCardVertical.tsx
@@ -1,5 +1,3 @@
-import Image from 'next/image';
-
 import { Card, CardContent, CardMedia, Link, Typography } from '@mui/material';
 
 import color from '@/constants/color';
@@ -11,60 +9,60 @@ interface NewsCardVerticalProps {
   description: string;
   imageUrl?: string;
   path?: string;
+  isMock?: boolean;
 }
 
-const NewsCardVertical = ({ id, date, title, description, imageUrl, path }: NewsCardVerticalProps) => {
+const NewsCardVertical = ({ id, date, title, description, imageUrl, path, isMock = false }: NewsCardVerticalProps) => {
+  const cardContent = (
+    <>
+      <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
+        {date}
+      </Typography>
+      <Typography
+        mb={1}
+        sx={{
+          overflow: 'hidden',
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: 'vertical',
+          display: '-webkit-box',
+        }}
+        variant="h5"
+      >
+        {title}
+      </Typography>
+      <Typography
+        sx={{
+          overflow: 'hidden',
+          WebkitLineClamp: 3,
+          WebkitBoxOrient: 'vertical',
+          display: '-webkit-box',
+        }}
+        variant="body2"
+      >
+        {description}
+      </Typography>
+    </>
+  );
+
   return (
     <Card sx={{ maxWidth: 350, boxShadow: 'none', borderRadius: 4 }}>
-      <Link color="inherit" href={`/${path}/${id}`} underline="none">
-        {imageUrl && (
+      {imageUrl &&
+        (isMock ? (
           <CardMedia alt="articleImage" component="img" image={imageUrl} sx={{ height: 190, borderRadius: 2 }} />
-        )}
-      </Link>
+        ) : (
+          <Link color="inherit" href={`/${path}/${id}`} underline="none">
+            <CardMedia alt="articleImage" component="img" image={imageUrl} sx={{ height: 190, borderRadius: 2 }} />
+          </Link>
+        ))}
       <CardContent>
-        <Link color="inherit" href={`/${path}/${id}`} underline="none">
-          <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
-            {date}
-          </Typography>
-          <Typography
-            mb={1}
-            sx={{
-              overflow: 'hidden',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-              display: '-webkit-box',
-            }}
-            variant="h5"
-          >
-            {title}
-          </Typography>
-          <Typography
-            sx={{
-              overflow: 'hidden',
-              WebkitLineClamp: 3,
-              WebkitBoxOrient: 'vertical',
-              display: '-webkit-box',
-            }}
-            variant="body2"
-          >
-            {description}
-          </Typography>
-        </Link>
+        {isMock ? (
+          cardContent
+        ) : (
+          <Link color="inherit" href={`/${path}/${id}`} underline="none">
+            {cardContent}
+          </Link>
+        )}
       </CardContent>
-      {imageUrl && (
-        <Link
-          borderRadius={2}
-          height={130}
-          href={`/${path}/${id}`}
-          minWidth={230}
-          ml={3}
-          mt={2}
-          overflow="hidden"
-          position="relative"
-        >
-          <Image fill priority alt="articleImage" sizes="100%" src={imageUrl} style={{ objectFit: 'cover' }} />
-        </Link>
-      )}
     </Card>
   );
 };