feat: 기사 클릭하면 이동하도록 설정

#104
Gyeongdan · Jul 21, 2024 · 40ecba9 · 40ecba9
1 parent 2cd4204
commit 40ecba9
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 8 deletions.
diff --git a/src/app/newsletter/page.tsx b/src/app/newsletter/page.tsx
@@ -58,6 +58,7 @@ const Page = () => {
                           content={item.content}
                           id={item.id}
                           imageUrl={item.imageUrl}
+                          path="newsletter"
                           publishedAt={item.publishedAt.split('T')[0]}
                           title={item.title}
                         />
@@ -70,6 +71,7 @@ const Page = () => {
                             content={filteredItem.content}
                             id={filteredItem.id}
                             imageUrl={filteredItem.imageUrl}
+                            path="newsletter"
                             publishedAt={filteredItem.publishedAt.split('T')[0]}
                             title={filteredItem.title}
                           />

diff --git a/src/app/village/[id]/page.tsx b/src/app/village/[id]/page.tsx
@@ -12,7 +12,7 @@ import color from '@/constants/color';
 import hiddenGems from '@/mocks/villages';
 
 const Page = async ({ params }: { params: { id: number } }) => {
-  const village = hiddenGems[params.id];
+  const village = hiddenGems[params.id - 1];
 
   return (
     <GradientBox>

diff --git a/src/app/village/page.tsx b/src/app/village/page.tsx
@@ -39,7 +39,9 @@ const Page = () => {
                 <NewsCardVertical
                   date={village.publishedAt}
                   description={village.content}
+                  id={village.id}
                   imageUrl={village.imageUrl}
+                  path="village"
                   title={village.title}
                 />
               </Box>
@@ -58,6 +60,7 @@ const Page = () => {
                 content={filteredItem.content}
                 id={filteredItem.id}
                 imageUrl={filteredItem.imageUrl}
+                path="village"
                 publishedAt="2024-01-20"
                 title={filteredItem.title}
               />

diff --git a/src/components/NewsCardHorizontal.tsx b/src/components/NewsCardHorizontal.tsx
@@ -10,16 +10,17 @@ interface NewsCardHorizontalProps {
   content: string;
   publishedAt: string;
   imageUrl?: string;
+  path: string;
 }
 
-const NewsCardHorizontal = ({ id, title, content, publishedAt, imageUrl }: NewsCardHorizontalProps) => {
+const NewsCardHorizontal = ({ id, title, content, publishedAt, imageUrl, path }: NewsCardHorizontalProps) => {
   return (
     <Stack alignItems="center" direction="row" height="180px" justifyContent="space-between">
       <Stack>
         <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
           {publishedAt}
         </Typography>
-        <Link color="inherit" href={`/newsletter/${id}`} underline="none">
+        <Link color="inherit" href={`/${path}/${id}`} underline="none">
           <Typography
             mb={1}
             sx={{

diff --git a/src/components/NewsCardVertical.tsx b/src/components/NewsCardVertical.tsx
@@ -1,20 +1,26 @@
-import { Card, CardContent, CardMedia, Typography } from '@mui/material';
+import Image from 'next/image';
+
+import { Card, CardContent, CardMedia, Link, Typography } from '@mui/material';
 
 import color from '@/constants/color';
 
 interface NewsCardVerticalProps {
+  id: number;
   date: string;
   title: string;
   description: string;
   imageUrl?: string;
+  path?: string;
 }
 
-const NewsCardVertical = ({ date, title, description, imageUrl }: NewsCardVerticalProps) => {
+const NewsCardVertical = ({ id, date, title, description, imageUrl, path }: NewsCardVerticalProps) => {
   return (
     <Card sx={{ maxWidth: 350, boxShadow: 'none', borderRadius: 4 }}>
-      {imageUrl && (
-        <CardMedia alt="articleImage" component="img" image={imageUrl} sx={{ height: 190, borderRadius: 2 }} />
-      )}
+      <Link color="inherit" href={`/${path}/${id}`} underline="none">
+        {imageUrl && (
+          <CardMedia alt="articleImage" component="img" image={imageUrl} sx={{ height: 190, borderRadius: 2 }} />
+        )}
+      </Link>
       <CardContent>
         <Typography color={color.blue} fontWeight="600" mb={1} variant="body2">
           {date}
@@ -43,6 +49,20 @@ const NewsCardVertical = ({ date, title, description, imageUrl }: NewsCardVertic
           {description}
         </Typography>
       </CardContent>
+      {imageUrl && (
+        <Link
+          borderRadius={2}
+          height={130}
+          href={`/newsletter/${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>
   );
 };