Refactor/next cache rsc

app/(main)/academic-detail/[year]/[semester]/apis/getAcademicDetail.ts

@@ -0,0 +1,49 @@
+import type { CourseDetail } from '@/types/api/academic';
+import { cache } from 'react';
+
+interface IAcademicDetailProps {
+  semesterGrades: Array<{
+    year: number;
+    semester: string;
+    earnedCredits: number;
+    attemptedCredits: number;
+    semesterGpa: number;
+    classRank?: number;
+    totalStudents?: number;
+  }>;
+  courses: {
+    major: CourseDetail[];
+    liberal: CourseDetail[];
+  };
+}
+export const getAcademicDetail = cache(async (year: number, semester: number) : Promise<IAcademicDetailProps> => {
+  console.log('🔥 실제 fetch 발생! [getAcademicDetail]');
+  // const cookieStore = await cookies();
+  // const token = cookieStore.getAll();
+
+  const abtoken = process.env.TEST_TOKEN;
+  const token = process.env.TEST_TOKEN2;
+
+
+  const res = await fetch(`http://localhost:3000/api/get-academic/${year}/${semester}`, {
+    cache: 'force-cache', 
+    credentials: 'include',
+    headers: {
+      'Cookie': `${abtoken}; ${token}`,
+    },
+    next: {
+      revalidate: 60 * 60 * 24,
+      tags: [`academic-detail-${year}-${semester}`],
+    },
+  });
+
+  const result = await res.json();
+
+
+
+
+  return {
+    semesterGrades: result.semesterGrades,
+    courses: result.courses,
+  };
+});

app/(main)/academic-detail/[year]/[semester]/apis/getSemesters.ts

@@ -0,0 +1,25 @@
+import { cache } from 'react';
+
+interface Semester {
+  year: number;
+  semester: number;
+}
+
+
+export const getSemesters = cache(async () : Promise<Semester[]> => {
+  const abtoken = process.env.TEST_TOKEN;
+  const token = process.env.TEST_TOKEN2;
+  console.log('🔥 실제 fetch 발생! [getSemesters]');
+
+  const res = await fetch(`http://localhost:3000/api/get-semesters`, {
+    cache: 'force-cache',
+    headers: {
+      'Cookie': `${abtoken}; ${token}`, 
+    },
+    credentials: 'include',         
+    next: { tags: ['semesters'], revalidate: 60 * 60 * 24 } 
+  });
+
+  if (!res.ok) {throw new Error('Failed to fetch');}  
+  return res.json();
+});

app/(main)/academic-detail/[year]/[semester]/components/AcademicDetailContent.tsx

@@ -0,0 +1,42 @@
+import AcademicSummaryCard from "../../../../components/AcademicSummaryCard/AcademicSummaryCard";
+import SectionCourses from "./SectionCourses/SectionCourses";
+import type { CourseDetail } from "@/types/api/academic";
+
+interface AcademicDetailProps {
+    semesterGrades: Array<{
+      year: number;
+      semester: string;
+      earnedCredits: number;
+      attemptedCredits: number;
+      semesterGpa: number;
+      classRank?: number;
+      totalStudents?: number;
+    }>;
+    courses: {
+      major: CourseDetail[];
+      liberal: CourseDetail[];
+    };
+  }
+
+export default function AcademicDetailContent({data}: {data: AcademicDetailProps}) {
+
+  console.log('data',data);
+    return (
+      <>
+        {/* 학기 성적 요약 */}
+        <AcademicSummaryCard
+          earnedCredits={data.semesterGrades[0].earnedCredits}
+          gpa={data.semesterGrades[0].semesterGpa} 
+          classRank={data.semesterGrades[0].classRank}
+          totalStudents={data.semesterGrades[0].totalStudents}
+        />
+        <div className="gap-24"></div>
+        {/* 전공 과목 목록 */}
+        <SectionCourses title="전공" courses={data.courses.major} />
+        {/* 교양 과목 목록 */}
+        <div className="gap-24"></div>
+        <SectionCourses title="교양" courses={data.courses.liberal} />
+      </>
+    );
+  }
+

app/(main)/academic-detail/[year]/[semester]/components/NavBar.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { TopNavigation } from "@/components/ui/TopNavigation";
+import { useInternalRouter } from "@/hooks/useInternalRouter";
+
+export default function NavBar() {
+  const router = useInternalRouter();
+  return (
+    <TopNavigation.Preset title="학기별 세부 성적" type="back" onNavigationClick={() => router.back()} />
+  )
+}

app/(main)/academic-detail/components/SemesterSlider.tsx → app/(main)/academic-detail/[year]/[semester]/components/SemesterSlider.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { ROUTES } from '@/constants/routes';
 import { useInternalRouter } from '@/hooks/useInternalRouter';
 import styles from './SemesterSlider.module.scss';
@@ -13,42 +12,15 @@ interface Semester {
 interface SemesterSliderProps {
   currentYear: number;
   currentSemester: number;
+  semesters: Semester[];
 }
 
-export default function SemesterSlider({ currentYear, currentSemester }: SemesterSliderProps) {
+export default function SemesterSlider({ currentYear, currentSemester , semesters}: SemesterSliderProps) {
   const router = useInternalRouter();
-  const [semesters, setSemesters] = useState<Semester[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const fetchSemesters = async () => {
-      try {
-        const response = await fetch('/api/get-semesters', {
-          next: {
-            revalidate: 3600, // 1시간마다 재검증
-          },
-        });
-        if (!response.ok) {
-          throw new Error('Failed to fetch semesters');
-        }
-        const data = await response.json();
-        setSemesters(data);
-      } catch (error) {
-        console.error('Error fetching semesters:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchSemesters();
-  }, []);
-
-  if (isLoading) {
-    return null;
-  }
 
   const handleSemesterClick = (year: number, semester: number) => {
-    router.replace(ROUTES.ACADEMIC_DETAIL, { year, semester });
+    router.replace(ROUTES.ACADEMIC_DETAIL, { params: [year, semester] });
   };
 
   const getSemesterLabel = (semester: number): string => {
@@ -66,6 +38,7 @@ export default function SemesterSlider({ currentYear, currentSemester }: Semeste
     }
   };
 
+
   return (
     <div className={styles.sliderContainer}>
       {semesters.map(sem => (

app/(main)/academic-detail/[year]/[semester]/layout.tsx

@@ -0,0 +1,14 @@
+export const fetchCache = 'auto'
+
+import NavBar from './components/NavBar';
+import styles from './layout.module.scss';
+
+export default function GraduationProgressLayout({ children }: { children: React.ReactNode }) {
+
+  return (
+    <div className={styles.container}>
+      <NavBar />
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}

app/(main)/academic-detail/[year]/[semester]/page.tsx

@@ -0,0 +1,27 @@
+
+import { Suspense } from 'react';
+import AcademicDetailContent from './components/AcademicDetailContent';
+import { getSemesters } from './apis/getSemesters';
+import { getAcademicDetail } from './apis/getAcademicDetail';
+import SemesterSlider from './components/SemesterSlider';
+
+export const fetchCache = 'force-cache';
+
+export default async function AcademicDetailPage({params}: {params: Promise<{year: number, semester: number}>}) {
+  const {year, semester} = await params;
+
+  const [semesters, data] = await Promise.all([
+    getSemesters(),
+    getAcademicDetail(year, semester),
+  ]);
+
+  return (
+    <Suspense fallback={<div></div>}>
+      <div className="gap-8"></div>
+      <SemesterSlider currentYear={year} currentSemester={semester} semesters={semesters} />
+      <div className="gap-20"></div>
+      <AcademicDetailContent data={data} />
+    </Suspense>
+  );
+}
+

app/api/get-academic/[year]/[semester]/route.ts

@@ -3,7 +3,6 @@ import { NextResponse } from 'next/server';
 import { createClient } from '@/lib/supabase/server';
 import type { Database } from '@/types/supabase';
 
-export const dynamic = 'force-dynamic';
 
 type CourseAreaType = Database['public']['Enums']['course_area_type'];
 
@@ -82,13 +81,10 @@ function getCourseCategory(areaType: CourseAreaType): 'major' | 'liberal' {
   return 'liberal';
 }
 
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ year: string; semester: string }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ year: string; semester: string }> }) {
   const params = await props.params;
   try {
-    const supabase = createClient();
+    const supabase = await createClient();
 
     // 인증된 사용자 확인
     const {