feat: viewcount 수정

#104

src/app/village/[id]/page.tsx

@@ -19,7 +19,12 @@ const Page = async ({ params }: { params: { id: number } }) => {
       <Stack alignItems="center" p={10}>
         <Box sx={{ maxWidth: '600px' }}>
           <Box sx={{ marginBottom: '2rem' }}>
-            <Headline source="경단" title={village.title} uploadDate={village.publishedAt} viewCount={3} />
+            <Headline
+              source="경단"
+              title={village.title}
+              uploadDate={village.publishedAt}
+              viewCount={village.viewCount}
+            />
           </Box>
           <CommentCard isCharacter isStroke content={`오늘은 ${village.title}에 대해 소개해줄게😃`} />
           <Box mt="2.5rem">
@@ -47,10 +52,10 @@ const Page = async ({ params }: { params: { id: number } }) => {
           <CommentCard isCharacter isChat content="위치는 여기야📍" />
           <CommentCard isChat content="다음에 같이 가보자!" />
         </Box>
+        <Box>
+          <KakaoMap initialLat={village.latitude} initialLon={village.longitude} level={7} villages={[village]} />
+        </Box>
       </Stack>
-      <Box sx={{ marginTop: -2 }}>
-        <KakaoMap initialLat={village.latitude} initialLon={village.longitude} level={7} villages={[village]} />
-      </Box>
     </GradientBox>
   );
 };

src/components/KakaoMap.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 
 declare global {

src/mocks/villages.ts

@@ -11,6 +11,7 @@ const hiddenGems: Village[] = [
     latitude: 37.3793,
     longitude: 128.6616,
     publishedAt: '2024-07-20',
+    viewCount: 3,
   },
   {
     id: 2,
@@ -22,6 +23,7 @@ const hiddenGems: Village[] = [
     latitude: 36.3446,
     longitude: 129.0571,
     publishedAt: '2024-07-20',
+    viewCount: 2,
   },
   {
     id: 3,
@@ -33,6 +35,7 @@ const hiddenGems: Village[] = [
     latitude: 38.1016,
     longitude: 127.9897,
     publishedAt: '2024-07-20',
+    viewCount: 3,
   },
   {
     id: 4,
@@ -44,6 +47,7 @@ const hiddenGems: Village[] = [
     latitude: 34.6421,
     longitude: 126.7658,
     publishedAt: '2024-07-20',
+    viewCount: 5,
   },
   {
     id: 5,
@@ -55,6 +59,7 @@ const hiddenGems: Village[] = [
     latitude: 35.0633,
     longitude: 126.5167,
     publishedAt: '2024-07-20',
+    viewCount: 6,
   },
 ];
 

src/types.ts

@@ -36,4 +36,5 @@ export interface Village {
   latitude: number;
   longitude: number;
   publishedAt: string;
+  viewCount: number;
 }