Update types

components/ArchiveCard.tsx

@@ -14,7 +14,6 @@ import { useRouter } from 'next/router';
 import useGetColors from 'lib/hooks/useGetColors';
 import useLazyLoad from 'lib/hooks/useLazyload';
 import dynamic from 'next/dynamic';
-// import useIntersection from 'lib/hooks/useIntersection';
 
 const Date = dynamic(() => import('./DateFormater'));
 
@@ -27,7 +26,6 @@ const ArchiveCard: FC<Props> = ({ post }) => {
   const router = useRouter();
 
   const { initSrc, blur, targetRef } = useLazyLoad(post.index_img);
-  // const { targetRef: cardRef, intersect } = useIntersection();
 
   const { borderColor, headingColor } = useGetColors();
 
@@ -37,11 +35,6 @@ const ArchiveCard: FC<Props> = ({ post }) => {
     router.push(`/p/${post.url}`);
   };
 
-  // useEffect(() => {
-  //   intersect && router.prefetch(`/p/${post.url}`);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [post.url, intersect]);
-
   return (
     <>
       <LinkBox as="article" borderBottom="1px" borderColor={borderColor}>

components/Paging.tsx

@@ -5,7 +5,7 @@ import useGetColors from 'lib/hooks/useGetColors';
 
 interface Props {
   allPages: number;
-  num: string;
+  num?: string;
 }
 
 const paging: FC<Props> = ({ allPages, num }) => {

components/PostCard.tsx

@@ -22,7 +22,7 @@ const PostCard: FC<Props> = ({ post }) => {
   const router = useRouter();
 
   const { initSrc, targetRef } = useLazyLoad(post.index_img);
-  const { targetRef: cardRef, intersect } = useIntersection();
+  const { targetRef: cardRef, inView } = useIntersection();
 
   const { boxBg, textColor, headingColor } = useGetColors();
 
@@ -33,9 +33,8 @@ const PostCard: FC<Props> = ({ post }) => {
   };
 
   useEffect(() => {
-    intersect && router.prefetch(`/p/${post.url}`);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [post.url, intersect]);
+    inView && router.prefetch(`/p/${post.url}`);
+  }, [post.url, inView, router]);
 
   return (
     <>

components/search/HitCard.tsx

@@ -20,7 +20,7 @@ const HitCard: FC<Props> = ({ hit }) => {
   const router = useRouter();
   const { boxBg, headingColor } = useGetColors();
 
-  const { targetRef, intersect } = useIntersection();
+  const { targetRef, inView } = useIntersection();
 
   const goToPost = (
     e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>,
@@ -32,8 +32,8 @@ const HitCard: FC<Props> = ({ hit }) => {
   };
 
   useEffect(() => {
-    intersect && router.prefetch(`/p/${url}`);
-  }, [url, intersect, router]);
+    inView && router.prefetch(`/p/${url}`);
+  }, [url, inView, router]);
 
   return (
     <>

lib/hooks/useIntersection.ts

@@ -7,14 +7,14 @@ import { useEffect, useRef, useState } from 'react';
 const useIntersection = () => {
   const targetRef = useRef(null);
 
-  const [intersect, setIntersect] = useState(false);
+  const [inView, setInView] = useState(false);
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           if (targetRef.current) {
-            setIntersect(true);
+            setInView(true);
             observer.unobserve(targetRef.current);
           }
         }
@@ -26,7 +26,7 @@ const useIntersection = () => {
 
   return {
     targetRef,
-    intersect,
+    inView,
   };
 };
 

lib/posts.ts

@@ -104,6 +104,13 @@ export async function getAllPostNum() {
   return numPages;
 }
 
+export interface PagingData {
+  totalNum: number;
+  pagingSize: number;
+  allPages: number;
+  postDatas: AllPostsData[];
+}
+
 export function getPagingData(allPostsData: AllPostsData[], start?: string) {
   const totalNum = allPostsData.length;
   const pagingSize = 10;
@@ -153,8 +160,9 @@ export async function getAllPostSlugs() {
   );
 }
 
-export interface MyPost extends AllPostsData {
-  contentHtml: string;
+export interface MyPost extends MyMatters {
+  id: string;
+  content: string;
 }
 
 export async function getPostData(slug: string) {

pages/p/[slug].tsx

@@ -1,6 +1,6 @@
 import { createElement, Fragment } from 'react';
 import { Box, Image, Flex, Button } from '@chakra-ui/react';
-import { getAllPostSlugs, getPostData } from 'lib/posts';
+import { MyPost, getAllPostSlugs, getPostData } from 'lib/posts';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
@@ -50,7 +50,9 @@ export async function getStaticPaths() {
   };
 }
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
+export const getStaticProps: GetStaticProps<{ postData: MyPost }> = async ({
+  params,
+}) => {
   const postData = await getPostData(params?.slug?.toString() ?? '');
   return {
     props: {
@@ -96,8 +98,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter();
 
   // Lazy loading comment
-  const { targetRef: commentRef, intersect: commentInterSect } =
-    useIntersection();
+  const { targetRef: commentRef, inView: commentInView } = useIntersection();
 
   const goBack = () => {
     dispatch(cleanFromPath());
@@ -188,7 +189,7 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
 
           {/* Comment */}
           <Box ref={commentRef} h="382px">
-            {commentInterSect && <PostComment />}
+            {commentInView && <PostComment />}
           </Box>
 
           <Footer />

pages/page/[num].tsx

@@ -9,6 +9,7 @@ import {
   getSortedPostsData,
 } from 'lib/posts';
 import HomeLayout from 'layouts/HomeLayout';
+import type { PagingData } from 'lib/posts';
 
 const Paging = dynamic(() => import('components/Paging'));
 const PostCard = dynamic(() => import('components/PostCard'));
@@ -21,7 +22,9 @@ export async function getStaticPaths() {
   };
 }
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
+export const getStaticProps: GetStaticProps<
+  { num: string | undefined } & PagingData
+> = async ({ params }) => {
   const allPostsData = await getSortedPostsData();
 
   return {