♻️ 학사 및 교과 리팩터링 (#159)

* refactor: 학부 안내, 교과 과정, 전공 이수 표준 형태

* refactor: undergraduate/general-studies-requirement 리팩터링

* refactor: 학부 졸업 규정 SSR로 수정

* refactor: 학부 교과목 변경 내역 리팩터링

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

* refactor: 장학 제도 SSR로 리팩터링

* fix: 장학금 상세 페이지 force-static

.github/workflows/deploy.yaml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - refactor/research
+      - refactor/academics
 
 jobs:
   build:

app/[locale]/academics/graduate/course-changes/page.tsx

@@ -1,21 +1,6 @@
-'use client';
-
-import { useState } from 'react';
-import useSWR from 'swr';
-
 import { getCourseChanges } from '@/apis/academics';
 
-import TimeLine from '@/components/academics/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 },
@@ -27,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} />;
 }

app/[locale]/academics/graduate/courses/page.tsx

@@ -1,13 +1,14 @@
 import { getCourses } from '@/apis/academics';
 
-import CourseRow from '@/components/academics/CourseRow';
+import CourseRow from '@/app/[locale]/academics/helper/courses/CourseRow';
+
 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">
@@ -24,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;
 };

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>
   );

app/[locale]/academics/graduate/scholarship/[id]/page.tsx

@@ -2,23 +2,12 @@ export const dynamic = 'force-static';
 
 import { getScholarship } from '@/apis/academicsServer';
 
-import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import ScholarshipDetail from '../../../helper/ScholarshipDetail';
 
 export default async function GraduateScholarshipPage({ params }: { params: { id: string } }) {
-  const { name, description } = await getScholarship(parseInt(params.id), 'graduate');
+  const scholarship = await getScholarship(parseInt(params.id), 'graduate');
 
-  return (
-    // 타이틀이 긴 경우 정규표현식으로 괄호 내부 내용을 제거
-    // ex) 교외장학금 (현송문화재단, 유한재단, ...) -> 교외장학금
-    <PageLayout
-      title={name.length > 20 ? name.replace(/\([^)]*\)/g, '') : name}
-      titleType="big"
-      titleMargin="mb-8"
-    >
-      <HTMLViewer htmlContent={description} />
-    </PageLayout>
-  );
+  return <ScholarshipDetail scholarship={scholarship} />;
 }
 
 export async function generateStaticParams() {

app/[locale]/academics/graduate/scholarship/page.tsx

@@ -1,27 +1,9 @@
-export const dynamic = 'force-static';
-
 import { getMockGraduateScholarshipList } from '@/data/serverObjects';
 
-import { ScholarshipRow } from '@/components/academics/ScholarshipRow';
-import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import ScholarshipPreview from '../../helper/ScholarshipPreview';
 
 export default async function GraduateScholarshipListPage() {
-  const { description, scholarship } = await getMockGraduateScholarshipList();
+  const data = await getMockGraduateScholarshipList();
 
-  return (
-    <PageLayout titleType="big">
-      <HTMLViewer htmlContent={description} className="mt-7" />
-      <div className=" mt-10 flex flex-col">
-        <h3 className="border-b-[1px] border-b-neutral-200 pb-2 text-[20px] font-bold leading-10">
-          장학금 종류
-        </h3>
-        <ul className="mt-2">
-          {scholarship.map((item) => (
-            <ScholarshipRow id={item.id} name={item.name} key={item.id} type="GRADUATE" />
-          ))}
-        </ul>
-      </div>
-    </PageLayout>
-  );
+  return <ScholarshipPreview description={data.description} scholarshipList={data.scholarship} />;
 }

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}학년도 교과과정 변경 내역은 없습니다.` }];
+};

app/[locale]/academics/helper/ScholarshipDetail.tsx

@@ -0,0 +1,20 @@
+import HTMLViewer from '@/components/editor/HTMLViewer';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+
+import { Scholarship } from '@/types/academics';
+
+export default async function ScholarshipDetail({
+  scholarship: { name, description },
+}: {
+  scholarship: Scholarship;
+}) {
+  // 타이틀이 긴 경우 정규표현식으로 괄호 내부 내용을 제거
+  // ex) 교외장학금 (현송문화재단, 유한재단, ...) -> 교외장학금
+  const shortTitle = name.length > 20 ? name.replace(/\([^)]*\)/g, '') : name;
+
+  return (
+    <PageLayout title={shortTitle} titleType="big" titleMargin="mb-8">
+      <HTMLViewer htmlContent={description} />
+    </PageLayout>
+  );
+}

app/[locale]/academics/helper/ScholarshipPreview.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link';
+
+import HTMLViewer from '@/components/editor/HTMLViewer';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+
+import { getPath } from '@/utils/page';
+import { undergraduateScholarship, graduateScholarship } from '@/utils/segmentNode';
+
+const undergraduateScholarshipPath = getPath(undergraduateScholarship);
+const graduateScholarshipPath = getPath(graduateScholarship);
+
+export default async function ScholarshipPreview({
+  description,
+  scholarshipList,
+}: {
+  description: string;
+  scholarshipList: { id: number; name: string }[];
+}) {
+  return (
+    <PageLayout titleType="big">
+      <HTMLViewer htmlContent={description} className="mt-7" />
+      <div className=" mt-10 flex flex-col">
+        <h3 className="border-b-[1px] border-b-neutral-200 pb-2 text-[20px] font-bold leading-10">
+          장학금 종류
+        </h3>
+        <ul className="mt-2">
+          {scholarshipList.map((item) => (
+            <ScholarshipRow id={item.id} name={item.name} key={item.id} type="UNDERGRADUATE" />
+          ))}
+        </ul>
+      </div>
+    </PageLayout>
+  );
+}
+
+export interface ScholarshipRowProps {
+  id: number;
+  name: string;
+  type: 'GRADUATE' | 'UNDERGRADUATE';
+}
+
+export function ScholarshipRow({ id, name, type }: ScholarshipRowProps) {
+  return (
+    <li className="my-1 w-fit">
+      <Link
+        href={`${
+          type === 'GRADUATE' ? graduateScholarshipPath : undergraduateScholarshipPath
+        }/${id}`}
+        className="group flex h-7 items-center gap-2.5 px-3"
+      >
+        <div className="h-2.5 w-2.5 rounded-full border border-main-orange duration-300 group-hover:bg-main-orange" />
+        <span className="text-sm font-medium duration-300 group-hover:text-main-orange">
+          {name}
+        </span>
+      </Link>
+    </li>
+  );
+}

components/academics/CourseCards.tsx → app/[locale]/academics/helper/courses/CourseCards.tsx

@@ -7,6 +7,7 @@ interface CourseCardProps {
   selectedOption: SortOption;
 }
 
+// TODO: CourseCards가 CourseCard의 배열 형태가 아닌 것 -> rename
 export default function CourseCards({ courses, selectedOption }: CourseCardProps) {
   const sortedCourses = sortCourses(courses ?? [], selectedOption);
 

app/[locale]/academics/undergraduate/course-changes/page.tsx

@@ -1,21 +1,6 @@
-'use client';
-
-import { useState } from 'react';
-import useSWR from 'swr';
-
 import { getCourseChanges } from '@/apis/academics';
 
-import TimeLine from '@/components/academics/TimeLine';
-import HTMLViewer from '@/components/editor/HTMLViewer';
-import PageLayout from '@/components/layout/pageLayout/PageLayout';
-
-import { CourseChange } from '@/types/academics';
-
-const YEAR_LIMIT = 2010;
-const noChange = (year: number): CourseChange => ({
-  year,
-  description: `${year}학년도 교과과정 변경 내역은 없습니다.`,
-});
+import CourseChanges from '../../helper/CourseChanges';
 
 const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
   { year: 2020 },
@@ -30,30 +15,8 @@ const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
   { year: 2010, margin: 'ml-7', 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 UndergraduateCourseChangesPage() {
-  const { data } = useSWR('undergraduate', getCourseChanges);
-  const [selectedYear, setSelectedYear] = useState<number>(2020);
-  const selectedChanges = getSelectedChanges(selectedYear, data ?? []);
+export default async function UndergraduateCourseChangesPage() {
+  const changes = await getCourseChanges('graduate');
 
-  return (
-    <PageLayout titleType="big">
-      <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} />;
 }

components/academics/CoursePageContent.tsx → app/[locale]/academics/undergraduate/courses/CoursePageContent.tsx

@@ -4,9 +4,9 @@ import { useState } from 'react';
 
 import { Course, SortOption, ViewOption } from '@/types/academics';
 
-import CourseCards from './CourseCards';
-import CourseList from './CourseList';
 import CourseToolbar from './CourseToolbar';
+import CourseCards from '../../helper/courses/CourseCards';
+import CourseList from '../../helper/courses/CourseList';
 
 interface CoursePageContentProps {
   courses: Course[];

app/[locale]/academics/undergraduate/courses/page.tsx

@@ -1,7 +1,8 @@
 import { getCourses } from '@/apis/academics';
 
-import CoursePageContent from '@/components/academics/CoursePageContent';
-import RoadMapButton from '@/components/academics/RoadMapButton';
+import RoadMapButton from '@/app/[locale]/academics/helper/RoadMapButton';
+import CoursePageContent from '@/app/[locale]/academics/undergraduate/courses/CoursePageContent';
+
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { Course } from '@/types/academics';