💄 통합검색 디자인 반영 (#142)

* feat: 통합검색 디자인 반영 * fix: NewsRow 이미지 fill -> cover * fix: 대분류에서 navbar dot이 표시되지 않는 문제 * refactor: page -> segmentNode 수정 * fix: 대분류 페이지 번역 적용 * refactor: api 폴더의 server action들 action 폴더로 이동 * refactor: component 폴더 간략화 * design: 학부 소개 디자인 반영 * design: 학부장 인사말 수정, 연혁 이미지 교체 * design: 졸업생 진로 디자인 반영 * design: 소개탭 디자인 반영 * design: 소식 부분 디자인 반영
wafflestudio · Mar 2, 2024 · dcd09e8 · dcd09e8
1 parent 5e55315
commit dcd09e8
Show file tree

Hide file tree

Showing 181 changed files with 953 additions and 987 deletions.
diff --git a/actions/newsActions.ts b/actions/newsActions.ts
@@ -3,11 +3,10 @@
 import { revalidateTag } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { deleteNews } from '@/apis/newsServer';
-
-import { news } from '@/types/page';
+import { deleteNews } from '@/actions/newsServer';
 
 import { getPath } from '@/utils/page';
+import { news } from '@/utils/segmentNode';
 
 const newsPath = getPath(news);
 

diff --git a/apis/newsServer.ts → actions/newsServer.ts b/apis/newsServer.ts → actions/newsServer.ts
@@ -1,7 +1,7 @@
 import { News, NewsPreviewList } from '@/types/news';
 import { PostSearchQueryParams } from '@/types/post';
 
-import { deleteRequest, getRequest } from './serverIndex';
+import { deleteRequest, getRequest } from '../apis/serverIndex';
 
 const newsPath = '/news';
 

diff --git a/actions/noticeActions.ts b/actions/noticeActions.ts
@@ -3,11 +3,10 @@
 import { revalidateTag } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { batchDeleteNotice, batchUnpinNotice, deleteNotice } from '@/apis/noticeServer';
-
-import { notice } from '@/types/page';
+import { batchDeleteNotice, batchUnpinNotice, deleteNotice } from '@/actions/noticeServer';
 
 import { getPath } from '@/utils/page';
+import { notice } from '@/utils/segmentNode';
 
 const noticePath = getPath(notice);
 

diff --git a/apis/noticeServer.ts → actions/noticeServer.ts b/apis/noticeServer.ts → actions/noticeServer.ts
@@ -1,7 +1,7 @@
 import { NoticePreviewList, Notice } from '@/types/notice';
 import { PostSearchQueryParams } from '@/types/post';
 
-import { deleteRequest, getRequest, patchRequest } from './serverIndex';
+import { deleteRequest, getRequest, patchRequest } from '../apis/serverIndex';
 
 const noticePath = '/notice';
 

diff --git a/apis/reservation.ts → actions/reservation.ts b/apis/reservation.ts → actions/reservation.ts
@@ -4,7 +4,7 @@ import { cookies } from 'next/dist/client/components/headers';
 
 import { Reservation, ReservationPostBody, ReservationPreview } from '@/types/reservation';
 
-import { deleteRequest, getRequest, postRequest } from '.';
+import { deleteRequest, getRequest, postRequest } from '../apis';
 
 const reservationPath = '/reservation';
 

diff --git a/actions/seminarActions.ts b/actions/seminarActions.ts
@@ -3,11 +3,10 @@
 import { revalidateTag } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { deleteSeminar } from '@/apis/seminarServer';
-
-import { seminar } from '@/types/page';
+import { deleteSeminar } from '@/actions/seminarServer';
 
 import { getPath } from '@/utils/page';
+import { seminar } from '@/utils/segmentNode';
 
 const seminarPath = getPath(seminar);
 

diff --git a/apis/seminarServer.ts → actions/seminarServer.ts b/apis/seminarServer.ts → actions/seminarServer.ts
@@ -1,7 +1,7 @@
 import { PostSearchQueryParams } from '@/types/post';
 import { SeminarList, Seminar } from '@/types/seminar';
 
-import { deleteRequest, getRequest } from './serverIndex';
+import { deleteRequest, getRequest } from '../apis/serverIndex';
 
 const seminarPath = '/seminar';
 

diff --git a/apis/index.ts b/apis/index.ts
@@ -49,9 +49,9 @@ export const deleteRequest = async (url: string, init?: RequestInit) => {
 };
 
 export const checkError = (response: Response) => {
-  if (!response.ok) {
-    throw new NetworkError(response.status);
-  }
+  if (response.ok) return;
+
+  throw new NetworkError(response.status);
 };
 
 export class NetworkError extends Error {

diff --git a/apis/search.ts b/apis/search.ts
@@ -1,3 +1,5 @@
+import { NewsSearchResult, NoticeSearchResult } from '@/types/search';
+
 import { getRequest } from '.';
 
 export const getNoticeSearch = (params: {

diff --git a/apis/seminar.ts b/apis/seminar.ts
@@ -1,4 +1,4 @@
-import { PATCHSeminarBody, POSTSeminarBody, Seminar, SeminarList } from '@/types/seminar';
+import { PATCHSeminarBody, POSTSeminarBody } from '@/types/seminar';
 
 import { patchRequest, postRequest } from '.';
 

diff --git a/components/directions/DirectionsDetails.tsx → ...e]/about/directions/DirectionsDetails.tsx b/components/directions/DirectionsDetails.tsx → ...e]/about/directions/DirectionsDetails.tsx
@@ -6,7 +6,7 @@ export default function DirectionsDetails({ direction }: { direction: Direction
   return (
     <div>
       <DirectionsTitle name={direction.name} />
-      <HTMLViewer htmlContent={direction.description} margin="ml-2.5" />
+      <HTMLViewer htmlContent={direction.description} className="ml-2.5" />
     </div>
   );
 }

diff --git a/components/directions/LocationGuide.tsx → ...ocale]/about/directions/LocationGuide.tsx b/components/directions/LocationGuide.tsx → ...ocale]/about/directions/LocationGuide.tsx
@@ -1,14 +1,13 @@
 import { Link } from '@/navigation';
 
-import { staff } from '@/types/page';
-
 import { getPath } from '@/utils/page';
+import { staff } from '@/utils/segmentNode';
 
 const staffPath = getPath(staff);
 
 export default function LocationGuide() {
   return (
-    <p className="text-sm leading-6 mb-8">
+    <p className="text-md leading-[200%] mb-8">
       컴퓨터공학부는 서울대학교 관악 301동(신공학관1)에 있습니다.
       <br />
       주소: 08826 서울특별시 관악구 관악로 1 서울대학교 공과대학 컴퓨터공학부 행정실(301동 316호)

diff --git a/components/directions/LocationMap.tsx → ...[locale]/about/directions/LocationMap.tsx b/components/directions/LocationMap.tsx → ...[locale]/about/directions/LocationMap.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef } from 'react';
 
 declare global {
   interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     kakao: any;
   }
 }

diff --git a/app/[locale]/about/directions/page.tsx b/app/[locale]/about/directions/page.tsx
@@ -1,15 +1,15 @@
 import { getDirections } from '@/apis/about';
 
+import DirectionsDetails from '@/app/[locale]/about/directions/DirectionsDetails';
+import LocationGuide from '@/app/[locale]/about/directions/LocationGuide';
+import LocationMap from '@/app/[locale]/about/directions/LocationMap';
+
 import SelectionList from '@/components/common/selection/SelectionList';
-import DirectionsDetails from '@/components/directions/DirectionsDetails';
-import LocationGuide from '@/components/directions/LocationGuide';
-import LocationMap from '@/components/directions/LocationMap';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
-import { directions } from '@/types/page';
-
 import { findSelectedItem } from '@/utils/findSelectedItem';
 import { getPath } from '@/utils/page';
+import { directions } from '@/utils/segmentNode';
 
 interface DirectionsPageProps {
   searchParams: { selected?: string };

diff --git a/app/[locale]/about/facilities/FacilitiesList.tsx b/app/[locale]/about/facilities/FacilitiesList.tsx
@@ -0,0 +1,65 @@
+import Image from 'next/image';
+
+import Distance from '@/public/image/about/distance.svg';
+
+import { Facilities } from '@/types/about';
+
+import HTMLViewer from '../../../../components/editor/HTMLViewer';
+
+export default function FacilitesList({ facilities }: { facilities: Facilities }) {
+  return (
+    <div className="flex flex-col">
+      {facilities.facilitiesList.map((post, index) => (
+        <FacilitiesRow
+          key={index}
+          name={post.name}
+          description={post.description}
+          location={post.location}
+          imageURL={post.imageURL}
+          border={index !== 0}
+        />
+      ))}
+    </div>
+  );
+}
+
+export interface FacilitiesRowProps {
+  name: string;
+  description: string;
+  location: string;
+  imageURL: string;
+  border: boolean;
+}
+
+function FacilitiesRow({ name, description, location, imageURL, border }: FacilitiesRowProps) {
+  return (
+    <article
+      className={`text-neutral-700 flex py-[1.2rem] flex-row items-start justify-between break-all ${
+        border ? 'border-t-[1px] border-neutral-200' : undefined
+      }`}
+    >
+      <div className="flex flex-col w-[35.5rem]">
+        <h3 className="text-neutral-800 text-base font-noto font-bold mb-[.69rem] leading-5">
+          {name}
+        </h3>
+        <HTMLViewer htmlContent={description} />
+        <div className="flex items-center gap-[0.12rem]">
+          <Distance />
+          <p className="text-md leading-[1.63rem] translate-x-[-2px]">{location}</p>
+        </div>
+      </div>
+
+      <FacilitiesRowImage imageURL={imageURL} />
+    </article>
+  );
+}
+
+function FacilitiesRowImage({ imageURL }: { imageURL: string }) {
+  const src = `/image/facilities/${imageURL}-color.png`;
+
+  return (
+    <div className="w-60 h-40 relative">
+      <Image alt="대표 이미지" src={src} fill sizes="10rem" />
+    </div>
+  );
+}
diff --git a/app/[locale]/about/facilities/page.tsx b/app/[locale]/about/facilities/page.tsx
@@ -1,6 +1,7 @@
 import { getFacilities } from '@/apis/about';
 
-import FacilitesList from '@/components/facilities/FacilitiesList';
+import FacilitesList from '@/app/[locale]/about/facilities/FacilitiesList';
+
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 export default async function FacilitiesPage() {

diff --git a/components/futureCareers/CareerStat.tsx → ...cale]/about/future-careers/CareerStat.tsx b/components/futureCareers/CareerStat.tsx → ...cale]/about/future-careers/CareerStat.tsx
@@ -6,7 +6,7 @@ import { careerStatCols, careerStatRows } from '@/data/objects';
 
 import { FutureCareers } from '@/types/about';
 
-import Dropdown from '../common/Dropdown';
+import Dropdown from '../../../../components/common/form/Dropdown';
 
 export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
   const [selectedCareerStatIndex, setSelectedCareerStatIndex] = useState(0);
@@ -21,7 +21,7 @@ export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
           onClick={setSelectedCareerStatIndex}
         />
       </div>
-      <div className="w-[21.3rem] h-[13.1rem] flex flex-col text-xs font-normal justify-stretch border-y-[1px] border-y-neutral-300 mb-9">
+      <div className="w-[21.3rem] h-[14rem] flex flex-col text-xs font-normal justify-stretch border-y-[1px] border-y-neutral-300 mb-9">
         <StatTableHeader />
         {stat[2021 - selectedCareerStatIndex].map((arr, index) => (
           <StatTableHeaderRow key={index} rowName={careerStatRows[index]} values={arr} />
@@ -37,7 +37,7 @@ function StatTableHeader() {
       <div className="flex-1" />
       {careerStatCols.map((colName) => (
         <div key={colName} className="flex justify-center items-center w-[5rem]">
-          <p>{colName}</p>
+          <p className="text-sm">{colName}</p>
         </div>
       ))}
     </div>
@@ -47,9 +47,11 @@ function StatTableHeader() {
 function StatTableHeaderRow({ rowName, values }: { rowName: string; values: number[] }) {
   return (
     <div className={`flex flex-1 flex-row border-b border-neutral-200 last:border-0`}>
-      <div className="flex w-[6.25rem] bg-neutral-100 justify-center items-center">{rowName}</div>
+      <div className="flex w-[6.25rem] bg-neutral-100 justify-center items-center text-sm">
+        {rowName}
+      </div>
       {values.map((value, index) => (
-        <div key={index} className="flex flex-1 justify-center items-center">
+        <div key={index} className="flex flex-1 justify-center items-center text-md">
           {value}
         </div>
       ))}

diff --git a/app/[locale]/about/future-careers/page.tsx b/app/[locale]/about/future-careers/page.tsx
@@ -1,6 +1,7 @@
 import { getFutureCareeres } from '@/apis/about';
 
-import CareerStat from '@/components/futureCareers/CareerStat';
+import CareerStat from '@/app/[locale]/about/future-careers/CareerStat';
+
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { FutureCareers } from '@/types/about';
@@ -9,7 +10,7 @@ export default async function GreetingsPage() {
   const { description, stat, companies } = await getFutureCareeres();
   return (
     <PageLayout titleType="big" titleMargin="mb-[2.31rem]">
-      <p className="text-sm font-normal leading-[1.625rem] mb-9 break-keep whitespace-pre-wrap">
+      <p className="text-md font-normal leading-[1.625rem] mb-9 break-keep whitespace-pre-wrap">
         {description}
       </p>
       <CareerStat stat={stat} />
@@ -24,7 +25,7 @@ function CareerCompanies({ companies }: { companies: FutureCareers['companies']
       <h3 className="text-base font-noto font-bold leading-[1.625rem] mb-[0.8rem]">
         졸업생 창업 기업
       </h3>
-      <div className="text-xs font-normal border-y-[1px] border-neutral-200 inline-block">
+      <div className="text-sm font-normal border-y-[1px] border-neutral-200 inline-block">
         <CompanyTableHeader />
         <ol>
           {companies.map((company, index) => (
@@ -36,7 +37,7 @@ function CareerCompanies({ companies }: { companies: FutureCareers['companies']
   );
 }
 
-const TABLE_COLUMN_SIZE = ['w-12', 'w-[12.5rem]', 'w-80', 'w-20'];
+const TABLE_COLUMN_SIZE = ['w-[3.5rem]', 'w-[12.5rem]', 'w-80', 'w-20'];
 
 function CompanyTableHeader() {
   return (

diff --git a/app/[locale]/about/greetings/page.tsx b/app/[locale]/about/greetings/page.tsx
diff --git a/app/[locale]/about/history/page.tsx b/app/[locale]/about/history/page.tsx
@@ -1,4 +1,4 @@
-import history_image from '@/public/image/history_image.png';
+import history_image from '@/public/image/about/history.png';
 
 import { getHistory } from '@/apis/about';
 

diff --git a/app/[locale]/about/overview/page.tsx b/app/[locale]/about/overview/page.tsx
@@ -1,19 +1,52 @@
-import { getOverview } from '@/apis/about';
+import Image from 'next/image';
+
+import brochure1 from '@/public/image/about/brochure1.png';
+import brochure2 from '@/public/image/about/brochure2.png';
 
 import Attachment from '@/components/common/Attachments';
 import HTMLViewer from '@/components/editor/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
+// 학부 소개 페이지 - 학부장 인삿말 페이지의 형식이 동일
+// 두 곳에서만 겹쳐서 따로 컴포넌트화하지 않음
 export default async function OverviewPage() {
-  const response = await getOverview();
-
   return (
-    <PageLayout titleType="big" titleMargin="mb-9">
-      <HTMLViewer
-        htmlContent={response.description}
-        topRightContent={{ type: 'image', width: 320, height: 213, url: response.imageURL }}
-      />
-      <Attachment files={[response.attachment]} />
+    <PageLayout titleType="big" titleMargin="mb-9" bodyStyle={{ padding: 0 }}>
+      <div className="flex gap-10 bg-neutral-100 py-10 pl-[6.25rem] pr-[22rem] items-start">
+        <HTMLViewer htmlContent={description} className="w-[37.5rem] shrink-0" />
+        <Image
+          src="https://cse-dev-waffle.bacchus.io/sites/default/files/styles/medium-larger/public/node--page/301302.jpg?itok=96k1IsL0"
+          alt="학교 전경"
+          width={320}
+          height={213}
+        />
+      </div>
+      <div className="pt-10 pl-[6.25rem] pb-[7.88rem]">
+        <h2 className="text-base font-semibold mb-6">학부 소개 책자</h2>
+        <div className="flex gap-6 mb-10">
+          <Image src={brochure1.src} width={227} height={320} alt="소개 책자" />
+          <Image src={brochure2.src} width={227} height={320} alt="소개 책자" />
+        </div>
+        <Attachment files={[attachment]} />
+      </div>
     </PageLayout>
   );
 }
+
+const description = `
+<p>
+컴퓨터공학은 정보화 사회로의 이행에 있어 필수적이고 핵심적인 학문으로서, 성능이 우수한 컴퓨터를 설계 제작하고 운영 및 응용에 필요한 소프트웨어를 개발하여, 산업 전반에서 이를 활용할 수 있게 하는 학문이다. 컴퓨터공학은 이론적인 측면에서의 기반 기술 연구와 이를 실생활에 직접 응용할 수 있는 응용 연구를 추구하고 있다. 현대의 모든 산업들은 점차 그 복잡도가 증가함에 따라 컴퓨터를 통한 문제 해결을 시도하고 있다. 컴퓨터공학은 이러한 융합적, 통섭적 사고와 연구를 주도하고 있으며, 이를 통해 산업 전반에 걸쳐 영향력을 확대하고 있다.
+<br/>
+<br/>
+컴퓨터 분야의 교육 및 연구 내용은 공학 및 과학의 기초 지식을 바탕으로 한 논리적 추리 및 독창적 사고력을 요한다. 컴퓨터 소프트웨어 및 하드웨어는 매우 긴밀한 유기적 연관을 갖기 때문에 하드웨어와 소프트웨어에 관한 전문 지식을 함께 공부하며 이를 바탕으로 컴퓨터 구조, 운영체제, 데이타베이스, 프로그래밍언어, 컴퓨터 통신, 컴퓨터 이용설계, 인공지능, 알고리즘, 자연언어처리, 멀티미디어시스템, 객체지향시스템, 분산시스템, 실시간시스템 등에 관한 전문 지식을 습득하고 새로운 이론 정립 및 실험 연구를 수행한다.
+<br/>
+<br/>
+컴퓨터 산업은 대표적인 기술 및 두뇌 집약형 산업으로서 국책 산업의 하나로 지정되어 국가적인 차원에서 지원, 육성되고 있다. 미래를 선도할 AI 기술 개발, 고성능 컴퓨터 개발, 차세대 인터넷 및 통신 기술 개발, 인간 친화적 지능형 소프트웨어 기술 등 새로운 컴퓨터 기술이 산업 전반에 걸쳐 역할을 증대하고 있다. 이에 따라, 컴퓨터 고급전문인력에 대한 산업계의 수요는 급격히 증가하고 있으며, 서울대학교 컴퓨터공학부는 첨단 컴퓨터 기술 연구와 이를 통한 인력 양성의 구심체가 되고자 노력하고 있다.
+</p>
+`;
+
+const attachment = {
+  name: 'CSE_Brochure.pdf',
+  url: 'https://cse.snu.ac.kr/sites/default/files/node--page/CSE_Brochure.pdf',
+  bytes: 281500,
+};
diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
@@ -1,5 +1,10 @@
 import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
 
 export default async function AboutPage() {
-  return <MajorCategoryPageLayout subtitle="About CSE" />;
+  return (
+    <MajorCategoryPageLayout
+      subtitle="About CSE"
+      description="컴퓨터 산업은 대표적인 기술 및 두뇌 집약형 산업으로서 국책 산업의 하나로 지정되어 국가적인 차원에서 지원, 육성되고 있습니다. 미래를 선도할 AI 기술 개발, 고성능 컴퓨터 개발, 차세대 인터넷 및 통신 기술 개발, 인간 친화적 지능형 소프트웨어 기술 등 새로운 컴퓨터 기술이 산업 전반에 걸쳐 역할을 증대하고 있습니다. 이에 따라, 컴퓨터 고급전문인력에 대한 산업계의 수요는 급격히 증가하고 있으며, 서울대학교 컴퓨터공학부는 첨단 컴퓨터 기술 연구와 이를 통한 인력 양성의 구심체가 되고자 노력하고 있습니다."
+    />
+  );
 }
diff --git a/components/studentClubs/ClubDetails.tsx → ...cale]/about/student-clubs/ClubDetails.tsx b/components/studentClubs/ClubDetails.tsx → ...cale]/about/student-clubs/ClubDetails.tsx
@@ -12,7 +12,7 @@ export default function ClubDetails({ club }: { club: Club }) {
         topRightContent={
           club.imageURL ? { type: 'image', width: 320, height: 200, url: club.imageURL } : undefined
         }
-        margin="ml-2.5"
+        className="ml-2.5"
       />
     </div>
   );