✨ 대분류 페이지 1차 추가 (#133)

* design: 대분류 페이지 디자인 수정

* feat: 소개 대분류 페이지 추가

* feat: 소식 대분류 페이지 추가

* feat: 연구 대분류 페이지 추가

* design: 교과목 로드맵 변경

* fix: 대분류 페이지 명칭 변경

* feat: 대분류 페이지 이동 로직 추가

* fix: 리뷰 반영

apis/about.ts

@@ -1,4 +1,5 @@
 import {
+  getMockAboutDescription,
   getMockClubs,
   getMockContact,
   getMockDirections,
@@ -9,6 +10,8 @@ import {
   getMockOverview,
 } from '@/data/about';
 
+export const getAboutDescription = getMockAboutDescription;
+
 export const getOverview = getMockOverview;
 
 export const getGreetings = getMockGreetings;

apis/community.ts

@@ -0,0 +1,3 @@
+import { getMockCommunityDescription } from '@/data/community';
+
+export const getCommunityDescription = getMockCommunityDescription;

apis/people.ts

@@ -5,11 +5,10 @@ import {
   getMockFacultyList,
   getMockStaffList,
   getMockStaff,
+  getMockPeopleDescription,
 } from '@/data/faculty';
 
-import { StaffList, Staff } from '@/types/people';
-
-import { getRequest } from '.';
+export const getPeopleDescription = getMockPeopleDescription;
 
 export const getFacultyList = getMockFacultyList;
 

apis/research.ts

@@ -1,20 +1,23 @@
 import {
   getMockResearchCenters,
+  getMockResearchDescription,
   getMockResearchGroups,
   getMockResearchLab,
   getMockSimpleResearchLabs,
   getMockTopConferenceList,
 } from '@/data/research';
 
-import {
-  ResearchCenter,
-  ResearchGroups,
-  ResearchLab,
-  SimpleResearchLab,
-  TopConferenceList,
-} from '@/types/research';
-
-import { getRequest } from '.';
+// import {
+//   ResearchCenter,
+//   ResearchGroups,
+//   ResearchLab,
+//   SimpleResearchLab,
+//   TopConferenceList,
+// } from '@/types/research';
+
+// import { getRequest } from '.';
+
+export const getResearchDescription = getMockResearchDescription;
 
 export const getResearchGroups = getMockResearchGroups;
 

app/[locale]/about/page.tsx

@@ -0,0 +1,9 @@
+import { getAboutDescription } from '@/apis/about';
+
+import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
+
+export default async function AboutPage() {
+  const description = await getAboutDescription();
+
+  return <MajorCategoryPageLayout subtitle="About CSE" description={description} />;
+}

app/[locale]/community/page.tsx

@@ -0,0 +1,9 @@
+import { getCommunityDescription } from '@/apis/community';
+
+import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
+
+export default async function CommunityPage() {
+  const description = await getCommunityDescription();
+
+  return <MajorCategoryPageLayout subtitle="Communicate with CSE" description={description} />;
+}

app/[locale]/people/page.tsx

@@ -1,9 +1,9 @@
-import GuidePageLayout from '@/components/layout/pageLayout/GuidePageLayout';
+import { getPeopleDescription } from '@/apis/people';
 
-export default function PeoplePage() {
-  return <GuidePageLayout description={mockDescription} />;
-}
+import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
+
+export default async function PeoplePage() {
+  const description = await getPeopleDescription();
 
-const mockDescription = `
-컴퓨터공학부는 35명의 훌륭한 교수진과 최신 시설을 갖추고 400여 명의 학부생과 350여 명의 대학원생에게 세계 최고 수준의 교육 연구 환경을 제공하고 있다. 2005년에는 서울대학교 최초로 외국인 정교수인 Robert Ian McKay 교수를 임용한 것을 시작으로 교내에서 가장 국제화가 활발하게 이루어지고 있는 학부로 평가받고 있다. 현재 훌륭한 외국인 교수님 두 분이 학부 학생들의 교육 및 연구 지도에 총력을 기울이고 있다. 다수의 외국인 학부생, 대학원생이 재학 중에 있으며 매 학기 전공 필수 과목을 비롯한 30% 이상의 과목이 영어로 개설되고 있어 외국인 학생의 학업을 돕는 동시에 한국인 학생이 세계로 진출하는 초석이 되고 있다. 또한 CSE int’l Luncheon을 개최하여 학부 내 외국인 구성원의 화합과 생활의 불편함을 최소화하는 등 학부 차원에서 최선을 다하고 있다.
-`;
+  return <MajorCategoryPageLayout subtitle="Leading CSE" description={description} />;
+}

app/[locale]/research/page.tsx

@@ -0,0 +1,9 @@
+import { getResearchDescription } from '@/apis/research';
+
+import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
+
+export default async function ResearchPage() {
+  const description = await getResearchDescription();
+
+  return <MajorCategoryPageLayout subtitle="Research CSE" description={description} />;
+}

components/academics/RoadMapModal.tsx

@@ -8,7 +8,7 @@ import ModalFrame from '@/components/modal/ModalFrame';
 export default function RoadMapModal({ onClose }: { onClose: () => void }) {
   return (
     <ModalFrame onClose={onClose}>
-      <div className="relative flex flex-col gap-4 p-6 w-fit max-w-[768px] bg-neutral-50 border-t-2 border-b rounded-t-sm border-main-orange overflow-auto styled-scrollbar overflow-x-hidden">
+      <div className="relative flex flex-col gap-4 p-6 w-fit max-w-[768px] bg-neutral-100 border-t-2 border-b rounded-t-sm border-main-orange overflow-auto styled-scrollbar overflow-x-hidden">
         <RoadMapTitle />
         <RoadMapDescription />
         <RoadMap />

components/common/Nodes.tsx

@@ -34,7 +34,7 @@ export function CurvedHorizontalNodeGray() {
 export function CurvedVerticalNode({ grow = false, length = 'h-full' }: CurvedNodeProps) {
   return (
     <div className={`flex flex-col ${grow ? 'grow' : ''} ${length} w-[25px]`}>
-      <StraightNode grow={false} direction="col" length="h-[32px]" />
+      <StraightNode grow={false} direction="col" length="h-[36px]" />
       <Diagonal
         width="w-[25px]"
         translateX="translate-x-[5.1px]"

components/editor/HTMLViewer.tsx

@@ -3,7 +3,7 @@
 import Autolinker from 'autolinker';
 import DOMPurify from 'isomorphic-dompurify';
 import Image from 'next/image';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 import './common/suneditor-contents.css';
 
@@ -32,9 +32,15 @@ interface HTMLViewerProps {
   // 우측 상단 표시될 요소
   topRightContent?: TopRightImage | TopRightComponent;
   margin?: string;
+  style?: CSSProperties;
 }
 
-export default function HTMLViewer({ htmlContent, topRightContent, margin = '' }: HTMLViewerProps) {
+export default function HTMLViewer({
+  htmlContent,
+  topRightContent,
+  margin = '',
+  style,
+}: HTMLViewerProps) {
   const sanitizedHTML = DOMPurify.sanitize(htmlContent);
   const linkedHTML = Autolinker.link(sanitizedHTML);
 
@@ -44,7 +50,11 @@ export default function HTMLViewer({ htmlContent, topRightContent, margin = '' }
         <TopRightImageContent {...topRightContent} />
       )}
       {topRightContent?.type === 'component' && <TopRightComponent {...topRightContent} />}
-      <div className="sun-editor-editable" dangerouslySetInnerHTML={{ __html: linkedHTML }} />
+      <div
+        className="sun-editor-editable"
+        dangerouslySetInnerHTML={{ __html: linkedHTML }}
+        style={style}
+      />
     </div>
   );
 }

components/layout/navbar/NavbarRoot.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl';
 
 import { NavbarState } from '@/contexts/NavbarContext';
+import { Link } from '@/navigation';
 import DotEmpty from '@/public/image/navbar/dot_empty.svg';
 import DotFill from '@/public/image/navbar/dot_fill.svg';
 import SnuLogo from '@/public/image/SNU_Logo.svg';
@@ -11,7 +12,7 @@ import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
 
 import { SegmentNode, main as mainSegmentNode } from '@/types/page';
 
-import { isAncestorNode } from '@/utils/page';
+import { getPath, isAncestorNode } from '@/utils/page';
 
 export default function NavbarRoot({
   state,
@@ -84,6 +85,7 @@ function NavList({
             key={i}
             highlight={shouldHighlight(child)}
             name={t(child.name)}
+            href={getPath(child)}
             onMouseEnter={() => setState({ type: 'hovered', segmentNode: child })}
           />
         ))}
@@ -95,10 +97,12 @@ function NavList({
 function NavListRow({
   name,
   highlight,
+  href,
   onMouseEnter,
 }: {
   name: string;
   highlight: boolean;
+  href: string;
   onMouseEnter: () => void;
 }) {
   const color = highlight ? 'text-white' : 'text-neutral-500';
@@ -107,7 +111,9 @@ function NavListRow({
       className={`text-[0.9375rem] font-medium ${color} cursor-pointer whitespace-nowrap`}
       onMouseEnter={onMouseEnter}
     >
-      {name}
+      <Link href={href} className="block">
+        {name}
+      </Link>
     </li>
   );
 }

components/layout/pageLayout/MajorCategoryPageLayout.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+import HTMLViewer from '@/components/editor/HTMLViewer';
+
+import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
+
+import { getPath } from '@/utils/page';
+
+interface GuidePageLayoutProps {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+}
+
+export default function MajorCategoryPageLayout({
+  title,
+  subtitle = '',
+  description = '',
+}: GuidePageLayoutProps) {
+  const t = useTranslations('Nav');
+  const currentPage = useCurrentSegmentNode();
+  title ||= t(currentPage.name);
+
+  return (
+    <div className="bg-neutral-850">
+      <div className="max-w-[80rem] pt-12 pb-[4.5rem] px-[6.25rem]">
+        <div className="text-neutral-500 text-[20px] font-light">{subtitle}</div>
+        <div className="text-white text-[64px] font-semibold tracking-wide mb-8">{title}</div>
+        <HTMLViewer htmlContent={description} style={{ color: '#f5f5f5' }} />
+      </div>
+      <div className="bg-neutral-900 pt-10 pb-[12.5rem] px-[6.25rem]">
+        <div className="grid gap-10 grid-cols-[repeat(auto-fill,_300px)]">
+          {currentPage.children!.map((subpage, index) => (
+            <DetailItem
+              key={index}
+              title={subpage.name}
+              description={subpage.description ?? ''}
+              href={getPath(subpage)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface DetailItemProps {
+  title: string;
+  description: string;
+  href: string;
+}
+
+function DetailItem({ title, description, href }: DetailItemProps) {
+  return (
+    <Link href={href}>
+      <div className="w-[300px] h-[160px] bg-neutral-100 px-7 py-6 hover:bg-main-orange-dark flex flex-col justify-between">
+        <div>
+          <h3 className="text-neutral-800 text-[20px] font-medium mb-[16px]">{title}</h3>
+          <p className="text-neutral-800 text-[16px]">{description}</p>
+        </div>
+        <div className="text-end">
+          <span className="material-symbols-outlined font-extralight text-[32px] text-neutral-800">
+            arrow_forward
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}