VerticalCard 버그 픽스 (#127)

* feat: VerticalCard 버그 픽스 #126 * feat: 의존성 정리 #126
Gyeongdan · Jul 23, 2024 · 49dee2a · 49dee2a
1 parent 5d8bbe1
commit 49dee2a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 49 deletions.
diff --git 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
@@ -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>
   );
 };