refactor: 교과목 변경 내역 SSR로 수정

wafflestudio · Mar 10, 2024 · 82e2f58 · 82e2f58
1 parent 6203614
commit 82e2f58
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 86 deletions.
diff --git a/app/[locale]/academics/graduate/course-changes/page.tsx b/app/[locale]/academics/graduate/course-changes/page.tsx
@@ -1,22 +1,6 @@
-'use client';
-
-import { useState } from 'react';
-import useSWR from 'swr';
-
 import { getCourseChanges } from '@/apis/academics';
 
-import TimeLine from '@/app/[locale]/academics/helper/TimeLine';
-
-import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
-
-import { CourseChange } from '@/types/academics';
-
-const YEAR_LIMIT = 2011;
-const noChange = (year: number): CourseChange => ({
-  year,
-  description: `${year}학년도 교과과정 변경 내역은 없습니다.`,
-});
+import CourseChanges from '../../helper/CourseChanges';
 
 const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
   { year: 2020 },
@@ -28,30 +12,8 @@ const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
   { year: 2011, margin: 'ml-[12.625rem]', isLast: true },
 ];
 
-const getSelectedChanges = (selectedYear: number, data: CourseChange[]) => {
-  if (selectedYear <= YEAR_LIMIT) return data.filter((d) => d.year <= YEAR_LIMIT);
-
-  const change = data.find((d) => d.year === selectedYear);
-  return change ? [change] : [noChange(selectedYear)];
-};
-
-// TODO: 연도 추가되어도 타임라인 잘 설정되도록 리팩토링
-export default function GraduateCourseChangesPage() {
-  const { data } = useSWR('graduate', getCourseChanges);
-  const [selectedYear, setSelectedYear] = useState<number>(2020);
-  const selectedChanges = getSelectedChanges(selectedYear, data ?? []);
+export default async function GraduateCourseChangesPage() {
+  const changes = await getCourseChanges('graduate');
 
-  return (
-    <PageLayout titleType="big" titleMargin="mb-14">
-      <TimeLine
-        timeSpots={TIME_SPOTS}
-        selectedYear={selectedYear}
-        setSelectedYear={setSelectedYear}
-      />
-      {selectedChanges &&
-        selectedChanges.map((change) => (
-          <HTMLViewer htmlContent={change.description} className="mt-12" key={change.year} />
-        ))}
-    </PageLayout>
-  );
+  return <CourseChanges changes={changes ?? []} yearLimit={2011} timeSpots={TIME_SPOTS} />;
 }
diff --git a/app/[locale]/academics/graduate/courses/page.tsx b/app/[locale]/academics/graduate/courses/page.tsx
@@ -7,8 +7,8 @@ import PageLayout from '@/components/layout/pageLayout/PageLayout';
 import { Course } from '@/types/academics';
 
 export default async function GraduateCoursePage() {
-  const data = await getCourses('graduate');
-  const chunckedCourses = data ? chunkCourse(data) : [];
+  const courstList = await getCourses('graduate');
+  const chunckedCourses = chunkCourse(courstList);
 
   return (
     <PageLayout titleType="big">
@@ -25,12 +25,12 @@ export default async function GraduateCoursePage() {
 
 const chunkCourse = (courses: Course[]) => {
   const chunckedCourses: Course[][] = [];
-  const countPerLine = Math.floor(courses.length / 4);
+  const chunkSize = Math.floor(courses.length / 4);
 
-  chunckedCourses.push(courses.slice(0, countPerLine));
-  chunckedCourses.push(courses.slice(countPerLine, countPerLine * 2));
-  chunckedCourses.push(courses.slice(countPerLine * 2, countPerLine * 3));
-  chunckedCourses.push(courses.slice(countPerLine * 3));
+  chunckedCourses.push(courses.slice(0, chunkSize));
+  chunckedCourses.push(courses.slice(chunkSize, chunkSize * 2));
+  chunckedCourses.push(courses.slice(chunkSize * 2, chunkSize * 3));
+  chunckedCourses.push(courses.slice(chunkSize * 3));
 
   return chunckedCourses;
 };
diff --git a/app/[locale]/academics/graduate/guide/page.tsx b/app/[locale]/academics/graduate/guide/page.tsx
@@ -9,7 +9,7 @@ export default async function GraduateGuidePage() {
 
   return (
     <PageLayout titleType="big">
-      {data.attachments.length > 0 && <Attachments files={data.attachments} />}
+      <Attachments files={data.attachments} />
       <HTMLViewer htmlContent={data.description} />
     </PageLayout>
   );

diff --git a/app/[locale]/academics/helper/CourseChanges.tsx b/app/[locale]/academics/helper/CourseChanges.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'react';
+
+import TimeLine from '@/app/[locale]/academics/helper/TimeLine';
+
+import HTMLViewer from '@/components/editor/HTMLViewer';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+
+import { CourseChange } from '@/types/academics';
+
+export type TimeSpots = { year: number; margin?: string; isLast?: boolean }[];
+
+type CourseChangesProps = {
+  changes: CourseChange[];
+  yearLimit: number;
+  timeSpots: TimeSpots;
+};
+
+// TODO: 연도 추가되어도 타임라인 잘 설정되도록 리팩토링
+export default function CourseChanges({ changes, yearLimit, timeSpots }: CourseChangesProps) {
+  const [year, setYear] = useState(2020);
+  const selectedChanges = getSelectedChanges(year, yearLimit, changes);
+
+  return (
+    <PageLayout titleType="big">
+      <TimeLine timeSpots={timeSpots} selectedYear={year} setSelectedYear={setYear} />
+      {selectedChanges.map((change) => (
+        <HTMLViewer htmlContent={change.description} className="mt-12" key={change.year} />
+      ))}
+    </PageLayout>
+  );
+}
+
+const getSelectedChanges = (year: number, yearLimit: number, data: CourseChange[]) => {
+  if (year <= yearLimit) return data.filter((d) => d.year <= yearLimit);
+
+  const change = data.find((d) => d.year === year);
+  return change
+    ? [change]
+    : [{ year, description: `${year}학년도 교과과정 변경 내역은 없습니다.` }];
+};
diff --git a/app/[locale]/academics/undergraduate/course-changes/page.tsx b/app/[locale]/academics/undergraduate/course-changes/page.tsx
@@ -1,18 +1,6 @@
-'use client';
-
-import { useState } from 'react';
-import useSWR from 'swr';
-
 import { getCourseChanges } from '@/apis/academics';
 
-import TimeLine from '@/app/[locale]/academics/helper/TimeLine';
-
-import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
-
-import { CourseChange } from '@/types/academics';
-
-const YEAR_LIMIT = 2010;
+import CourseChanges from '../../helper/CourseChanges';
 
 const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
   { year: 2020 },
@@ -27,28 +15,8 @@ const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
   { year: 2010, margin: 'ml-7', isLast: true },
 ];
 
-// TODO: 연도 추가되어도 타임라인 잘 설정되도록 리팩토링
-export default function UndergraduateCourseChangesPage() {
-  const { data } = useSWR('undergraduate', getCourseChanges);
-
-  const [year, setYear] = useState(2020);
-  const selectedChanges = getSelectedChanges(year, data ?? []);
+export default async function UndergraduateCourseChangesPage() {
+  const changes = await getCourseChanges('graduate');
 
-  return (
-    <PageLayout titleType="big">
-      <TimeLine timeSpots={TIME_SPOTS} selectedYear={year} setSelectedYear={setYear} />
-      {selectedChanges.map((change) => (
-        <HTMLViewer htmlContent={change.description} className="mt-12" key={change.year} />
-      ))}
-    </PageLayout>
-  );
+  return <CourseChanges changes={changes} yearLimit={2011} timeSpots={TIME_SPOTS} />;
 }
-
-const getSelectedChanges = (year: number, data: CourseChange[]) => {
-  if (year <= YEAR_LIMIT) return data.filter((d) => d.year <= YEAR_LIMIT);
-
-  const change = data.find((d) => d.year === year);
-  return change
-    ? [change]
-    : [{ year, description: `${year}학년도 교과과정 변경 내역은 없습니다.` }];
-};