방문자수, readme 구현

pknu-wap · Nov 30, 2023 · f68f66c · f68f66c
1 parent 8f4e831
commit f68f66c
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 155 deletions.
diff --git a/client/src/api/mypage-api.ts b/client/src/api/mypage-api.ts
@@ -45,3 +45,20 @@ export const postChangeBlogNameApi = async (body: IBlogInfo) => {
 
   return data;
 };
+
+export const getVisitApi = async () => {
+  const { data } = await defaultInstance.get(`/visit`);
+
+  return data;
+};
+
+export const useGetVisitQuery = () => {
+  const { isLoading, error, data } = useQuery([`visit`], () => getVisitApi());
+  return { data, isLoading, error };
+};
+
+export const postVisitApi = async (body: { blogId: number }) => {
+  const { data } = await defaultInstance.post(`/visit?blogId=${body.blogId}`);
+
+  return data;
+};
diff --git a/client/src/api/readme-api.ts b/client/src/api/readme-api.ts
@@ -27,9 +27,7 @@ export const usegetblogIdQuery = (params: IBlogIdParams) => {
 };
 
 export const PutReadMeApi = async (body: IReadMe) => {
-  const { data } = await defaultInstance.put('/read-me', {
-    body,
-  });
+  const { data } = await defaultInstance.put('/read-me', body);
 
   return data;
 };
diff --git a/client/src/api/userDetail-api.ts b/client/src/api/userDetail-api.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { defaultInstance } from '.';
+import { IUserDetail } from '@/types/dto';
 
 export const GetUserDetailApi = async () => {
   const { data } = await defaultInstance.get('/user/detail');
@@ -8,7 +9,13 @@ export const GetUserDetailApi = async () => {
 };
 
 export const useGetUserDetailQuery = () => {
-  const { isLoading, error, data } = useQuery(['userDetail'], () => GetUserDetailApi());
+  const {
+    isLoading,
+    error,
+    data: backendData,
+  } = useQuery(['userDetail'], () => GetUserDetailApi());
+
+  const data: IUserDetail = backendData;
 
   return { isLoading, error, data };
 };
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -48,10 +48,11 @@ import { usegetblogIdQuery } from '@/api/readme-api';
 import { AddLikeApi, DeleteWriteApi } from '@/api/write-api';
 import { enqueueSnackbar } from 'notistack';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import { postVisitApi } from '@/api/mypage-api';
 
 const page = ({ params }: { params: { blogName: string; categoryId: string; postId: string } }) => {
   const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
-  const [, setBlogId] = useState<IBlogId>();
+  const [blogId, setBlogId] = useState<IBlogId>();
   const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData });
   const { data: postData } = useGetPostQuery({ postId: Number(params.postId) });
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
@@ -89,6 +90,16 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
     },
   });
 
+  const postVisitQuery = useMutation(postVisitApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['visit']);
+    },
+  });
+
+  useEffect(() => {
+    postVisitQuery.mutate({ blogId: blogId?.blogId ?? 0 });
+  }, []);
+
   const ReplyOnClick = () => {
     const newReplyBody = {
       postId: Number(params.postId),
@@ -345,8 +356,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                   </Stack>
                   <Stack direction="row" spacing={2}>
                     <Button size="small" variant="outlined">
-                      <PageLink href={`/${introduce?.blogUrl}`}> </PageLink>
-                      블로그 바로가기
+                      <PageLink href={`/${introduce?.blogUrl}`}>블로그 바로가기</PageLink>
                     </Button>
                   </Stack>
                 </Stack>

diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
@@ -252,8 +252,7 @@ function RepliesComponent({
                   </Stack>
                   <Stack direction="row" spacing={2}>
                     <Button size="small" variant="outlined">
-                      <PageLink href={`/${introduce?.blogUrl}`}> </PageLink>
-                      블로그 바로가기
+                      <PageLink href={`/${introduce?.blogUrl}`}> 블로그 바로가기</PageLink>
                     </Button>
                   </Stack>
                 </Stack>

diff --git a/client/src/app/[blogName]/page.tsx b/client/src/app/[blogName]/page.tsx
@@ -1,73 +1,52 @@
 'use client';
 
 import { useGetSidebarQuery } from '@/api/blog-api';
-import { PutReadMeApi, useGetReadMeQuery, usegetblogIdQuery } from '@/api/readme-api';
+import { useGetReadMeQuery, usegetblogIdQuery } from '@/api/readme-api';
 import Button from '@/components/Button/Button';
 import DragAndDrop from '@/components/DND/DragAndDrop';
 import FootPrintAnimation from '@/components/FootPrint/FootPrintAnimation';
 import { ISidebarContent } from '@/types/dto';
-import { Stack, TextField } from '@mui/material';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Stack } from '@mui/material';
 import MDEditor from '@uiw/react-md-editor';
-import { enqueueSnackbar } from 'notistack';
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 const Home = ({ params }: { params: { blogName: string } }) => {
   const [writeList, setWriteList] = useState<ISidebarContent[]>();
-
-  //[FIXME: 나중에 blogName blogUrl로 바꾸기]
-  const [, setBlogId] = useState();
   const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
 
   const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData });
   const { data: readMeData } = useGetReadMeQuery({ blogId: blogIdData });
   const [readMe, setReadMe] = useState('');
-  const queryClient = useQueryClient();
-
-  const [content, setContent] = useState<string>('');
-  const putReadMeCreateQuery = useMutation(PutReadMeApi, {
-    onSuccess: () => {
-      queryClient.invalidateQueries(['readMe']);
-      enqueueSnackbar({ message: '리드미 페이지가 수정되었습니다.', variant: 'success' });
-    },
-    onError: () => {
-      enqueueSnackbar({ message: '리드미 페이지가 수정되지 않았습니다.', variant: 'error' });
-    },
-    }
-  );
-
-  const ReadMeOnClick = () => {
-    const newReadMeBody = {
-      content: content,
-    };
-
-    putReadMeCreateQuery.mutate(newReadMeBody);
-  };
+  const router = useRouter();
 
   useEffect(() => {
     setWriteList(sidebarData?.sidebarDtos);
     setReadMe(readMeData?.body?.content);
-    setBlogId(blogIdData);
-  }, [sidebarData, readMeData, blogIdData]);
+  }, [sidebarData, readMeData]);
 
   return (
-    <Stack height={'fit-content'}>
+    <Stack mt={3} height={'fit-content'}>
       <DragAndDrop
         blogName={params.blogName}
         footprintList={writeList}
         rightContainer={
-          <Stack width="80%" margin="auto" overflow={'scroll'}>
-            <TextField
-              label="수정할 리드미를 입력해주세요"
-              variant="standard"
-              onChange={(e) => {
-                setContent(e.target.value);
-              }}
-            />
-            <Button variant="outlined" sx={{ width: '100px' }} onClick={() => ReadMeOnClick()}>
-              수정하기
+          <Stack alignItems="flex-end" spacing={2}>
+            <Button
+              onClick={() => router.push(`/write/readme/${params.blogName}`)}
+              sx={{ width: 'fit-content' }}
+              variant="contained">
+              수정
             </Button>
-            <MDEditor.Markdown source={readMe} />
+            <Stack
+              boxShadow="2px 2px 5px rgba(0, 0, 0, 0.1)"
+              p={8}
+              width="100%"
+              margin="auto"
+              minHeight="80vh"
+              overflow={'scroll'}>
+              <MDEditor.Markdown source={readMe} />
+            </Stack>
           </Stack>
         }
       />

diff --git a/client/src/app/globals.css b/client/src/app/globals.css
@@ -14,6 +14,7 @@ html {
 }
 
 .w-md-editor {
+  color: #000;
   background-color: transparent !important;
   --md-editor-box-shadow-color: #d0d7de !important;
 }

diff --git a/client/src/app/mypage/page.tsx b/client/src/app/mypage/page.tsx
@@ -19,6 +19,7 @@ import {
   postChangeUserInfoApi,
   useGetHistoryQuery,
   useGetMypageQuery,
+  useGetVisitQuery,
 } from '@/api/mypage-api';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
@@ -35,6 +36,7 @@ function page() {
   const fileInput = useRef<any>(null);
   const [imageSrc, setImageSrc] = useState<string | null>(null);
   const [image, setImage] = useState('');
+  const { data } = useGetVisitQuery();
 
   const handleAlignment = (_: React.MouseEvent<HTMLElement>, newYearWeekToggle: string | null) => {
     if (newYearWeekToggle !== null) {
@@ -345,6 +347,7 @@ function page() {
             )}
           </CenterContent>
         </Stack>
+        <Stack>방문자 수 : {data} </Stack>
       </CenterContent>
     </>
   );

diff --git a/client/src/app/write/readme/[blogName]/page.tsx b/client/src/app/write/readme/[blogName]/page.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { Stack } from '@mui/material';
+import { useState } from 'react';
+import MDEditor from '@uiw/react-md-editor';
+import '@uiw/react-md-editor/markdown-editor.css';
+import '@uiw/react-markdown-preview/markdown.css';
+import { useUserThemeSSR } from '../../../../../hooks/useRecoilSSR';
+import Button from '@/components/Button/Button';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { PutReadMeApi } from '@/api/readme-api';
+import { useRouter } from 'next/navigation';
+
+const ReadMe = ({ params }: { params: { blogName: string } }) => {
+  const [userTheme] = useUserThemeSSR();
+  const [content, setContent] = useState<string | undefined>('');
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const putReadmeQuery = useMutation(PutReadMeApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['readMe']);
+      router.push(`/${params.blogName}`);
+    },
+  });
+
+  const readmeSaveOnClick = () => {
+    const newReadMeBody = {
+      content: content,
+    };
+
+    putReadmeQuery.mutate(newReadMeBody);
+  };
+
+  return (
+    <Stack mt={10} spacing={4} data-color-mode={userTheme}>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Stack fontSize="18px" fontWeight="bold">
+          README
+        </Stack>
+        <Button onClick={readmeSaveOnClick} sx={{ width: 'fit-content' }} variant="contained">
+          저장
+        </Button>
+      </Stack>
+      <MDEditor height="80vh" value={content} onChange={setContent} />
+    </Stack>
+  );
+};
+
+export default ReadMe;
diff --git a/client/src/app/write/readme/page.tsx b/client/src/app/write/readme/page.tsx