isr 기능 수정 main branch 반영

.github/workflows/CI.yaml

@@ -0,0 +1,37 @@
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+      - dev
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: true
+      matrix:
+        node: [18, 20]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run build
+        run: npm run build
+        env:
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL}}
+          NEXT_PUBLIC_KAKAO_API_KEY: ${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}

src/app/action/invalidateHomeData.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { revalidateTag } from "next/cache";
+
+export const InvalidateHomeData = async () => {
+  revalidateTag("homeData");
+};

src/app/components/Navbar.tsx

@@ -2,17 +2,41 @@
 
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-
-import Logo from "/public/Logo.png";
-import BookIcon from "/public/icons/Books.png";
+import { useEffect } from "react";
 
 import { useSearchStore } from "@/stores/searchStore";
 import SearchBar from "./SearchBar";
+import { InvalidateHomeData } from "../action/invalidateHomeData";
+
+import Logo from "/public/Logo.png";
+import BookIcon from "/public/icons/Books.png";
 
 export default function Navbar() {
   const router = useRouter();
   const { resetSearchState } = useSearchStore();
 
+  useEffect(() => {
+    revalidateData();
+  }, []);
+
+  const revalidateData = async () => {
+    const currentDate = new Date().getDate();
+
+    if (localStorage.getItem("date") !== currentDate.toString()) {
+      await InvalidateHomeData();
+      localStorage.setItem("date", currentDate.toString());
+    }
+  };
+
+  const handleHomeClick = async () => {
+    if (window.location.pathname === "/") {
+      return;
+    }
+    await revalidateData();
+    resetSearchState();
+    router.push("/");
+  };
+
   return (
     <div className="flex w-full items-center justify-between border-b-2 border-borderColor bg-navbar p-4">
       <Image
@@ -23,10 +47,7 @@ export default function Navbar() {
         height={75}
         priority={true}
         style={{ width: 75, height: 75 }}
-        onClick={() => {
-          resetSearchState();
-          router.push("/");
-        }}
+        onClick={handleHomeClick}
       />
       <SearchBar />
       <Image

src/app/page.tsx

@@ -1,30 +1,30 @@
-import { todayTopic } from "@/libs/apis/todayTopic";
-import { todayAuthors } from "../libs/apis/todayAuthors";
+import Carousel from "./components/home/Carousel";
+
 import topics from "@/data/topics";
 import authors from "@/data/authors";
-import Carousel from "./components/home/Carousel";
-import GetRevalidationTime from "@/libs/isr/GetRevalidationTime";
+import { todayTopic } from "@/libs/apis/todayTopic";
+import { todayAuthors } from "@/libs/apis/todayAuthors";
+import GetIndex from "@/libs/isr/GetIndex";
 
 export default async function Home() {
-  const randomIndex = Math.floor(Math.random() * 15);
-  const revalidationTime = GetRevalidationTime();
+  const index = GetIndex();
 
   const bookData = {
-    topic: await todayTopic(randomIndex, revalidationTime),
-    author: await todayAuthors(randomIndex, revalidationTime),
+    topic: await todayTopic(index),
+    author: await todayAuthors(index),
   };
 
   return (
     <main className="mt-20 flex w-full flex-col items-center gap-4">
       <div className="flex w-2/3 flex-col gap-4 px-5 py-3">
         <div className="flex items-center gap-7">
           <h1 className="text-2xl font-bold">오늘의 주제</h1>
-          <h3 className="text-xl font-semibold">{topics[randomIndex]}</h3>
+          <h3 className="text-xl font-semibold">{topics[index]}</h3>
         </div>
         <Carousel books={bookData.topic} isModal={true} />
         <div className="flex items-center gap-7">
           <h1 className="text-2xl font-bold">오늘의 작가</h1>
-          <h3 className="text-xl font-semibold">{authors[randomIndex]}</h3>
+          <h3 className="text-xl font-semibold">{authors[index]}</h3>
         </div>
         <Carousel books={bookData.author} isModal={false} />
       </div>

src/libs/apis/todayAuthors.ts

@@ -1,10 +1,7 @@
 import authors from "@/data/authors";
 
-export const todayAuthors = async (
-  randomIndex: number,
-  revalidationTime: number,
-) => {
-  const query = authors[randomIndex];
+export const todayAuthors = async (index: number) => {
+  const query = authors[index];
   const res = await fetch(
     `${process.env.NEXT_PUBLIC_API_URL}v3/search/book?query=${query}&target=person`,
     {
@@ -13,7 +10,7 @@ export const todayAuthors = async (
         "Content-Type": "application/json",
         Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_API_KEY}`,
       },
-      next: { revalidate: revalidationTime },
+      next: { tags: ["homeData"] },
     },
   );
 

src/libs/apis/todayTopic.ts

@@ -1,10 +1,7 @@
 import topics from "@/data/topics";
 
-export const todayTopic = async (
-  randomIndex: number,
-  revalidationTime: number,
-) => {
-  const query = topics[randomIndex];
+export const todayTopic = async (index: number) => {
+  const query = topics[index];
   const res = await fetch(
     `${process.env.NEXT_PUBLIC_API_URL}v3/search/book?query=${query}`,
     {
@@ -13,7 +10,7 @@ export const todayTopic = async (
         "Content-Type": "application/json",
         Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_API_KEY}`,
       },
-      next: { revalidate: revalidationTime },
+      next: { tags: ["homeData"] },
     },
   );
 

src/libs/isr/GetIndex.ts

@@ -0,0 +1,9 @@
+export default function GetIndex() {
+  const currentDate = new Date().getDate();
+
+  if (currentDate === 31) {
+    return 7;
+  } else {
+    return currentDate % 15;
+  }
+}