✨ Top Conference List 페이지 추가 (#45)

* tcl 페이지 생성

* 페이지 디자인 확인 위한 내용 추가

* 디자인 수정

* tailwind even 추가

apis/topConferenceList.ts

@@ -0,0 +1,26 @@
+import { TopConferenceList } from '@/types/research';
+
+import { getRequest } from '.';
+
+export const getTopConferenceList = () =>
+  getRequest('/research/top-conference-list') as Promise<TopConferenceList>;
+
+export const getMockTopConferenceList: typeof getTopConferenceList = async () => {
+  const conferenceList = Array.from({ length: 50 }, (_, index) => {
+    return {
+      id: index + 1,
+      code: 'AAAA001',
+      abbreviation: 'AAAA',
+      name: `컨퍼런스 ${index + 1}컨퍼런스 ${index + 1}컨퍼런스 ${index + 1}컨퍼런스 ${
+        index + 1
+      }컨퍼런스 ${index + 1}컨퍼런스 ${index + 1}컨퍼런스 ${index + 1}컨퍼런스 ${
+        index + 1
+      }컨퍼런스 ${index + 1}`,
+    };
+  });
+  return {
+    modifiedAt: new Date(),
+    author: '한민정',
+    conferenceList: conferenceList,
+  };
+};

app/research/top-conference-list/page.tsx

@@ -0,0 +1,28 @@
+import { getMockTopConferenceList, getTopConferenceList } from '@/apis/topConferenceList';
+
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+import ConferenceListTable from '@/components/research/topConferenceList/ConferenceListTable';
+
+import { formatDateWithDot } from '@/utils/formatting';
+
+export default async function TopConferenceListPage() {
+  const { modifiedAt, author, conferenceList } = await getMockTopConferenceList();
+
+  const modifiedDate = formatDateWithDot(modifiedAt);
+  return (
+    <PageLayout titleType="big">
+      <div className="flex flex-col font-noto font-normal text-neutral-700">
+        <h3 className="font-bold text-base leading-8 mb-5">
+          서울대학교 공과대학 컴퓨터공학부 Top Conference List
+        </h3>
+        <p className="text-sm leading-[26px]">
+          본 리스트는 시간과 상황의 변동에 따라 바뀔 수 있습니다.
+        </p>
+        <p className="text-sm leading-[26px]">
+          수정날짜: {modifiedDate}(작성자: {author})
+        </p>
+        <ConferenceListTable conferenceList={conferenceList} />
+      </div>
+    </PageLayout>
+  );
+}

components/research/topConferenceList/ConferenceListTable.tsx

@@ -0,0 +1,44 @@
+export interface ConferenceListTableProps {
+  id: number;
+  code: string;
+  abbreviation: string;
+  name: string;
+}
+
+export interface ConferenceRowProps {
+  conference: ConferenceListTableProps;
+  index: number;
+}
+
+export default function ConferenceListTable({
+  conferenceList,
+}: {
+  conferenceList: ConferenceListTableProps[];
+}) {
+  return (
+    <div className="w-[780px] flex flex-col text-xs mt-8">
+      <div className="flex flex-row w-full h-10 border-y-[1px] border-y-neutral-200">
+        <div className="flex items-center px-3 w-12">연번</div>
+        <div className="flex items-center px-3 w-20">코드</div>
+        <div className="flex items-center px-3 w-28">약칭</div>
+        <div className="flex items-center px-3 w-[540px]">학술대회명칭</div>
+      </div>
+      {conferenceList.map((conference, index) => (
+        <ConferenceRow conference={conference} key={index} index={index} />
+      ))}
+    </div>
+  );
+}
+
+function ConferenceRow({ conference, index }: ConferenceRowProps) {
+  return (
+    <div
+      className={`flex flex-row w-full h-auto break-words items-center leading-[18px] even:bg-neutral-50`}
+    >
+      <div className="flex px-3 py-2 w-12 h-10 items-center justify-center">{conference.id}</div>
+      <div className="flex px-3 py-2 w-20 items-center">{conference.code}</div>
+      <div className="flex px-3 py-2 w-28 items-center">{conference.abbreviation}</div>
+      <div className="flex px-3 py-2 w-[540px] items-center">{conference.name}</div>
+    </div>
+  );
+}

types/research.ts

@@ -31,3 +31,14 @@ export interface ResearchLab extends ResearchLabInfo {
   websiteURL: string;
   group: string;
 }
+
+export interface TopConferenceList {
+  modifiedAt: Date;
+  author: string;
+  conferenceList: {
+    id: number;
+    code: string;
+    abbreviation: string;
+    name: string;
+  }[];
+}

utils/formatting.ts

@@ -38,3 +38,12 @@ export const formatDateWithDays = (date: Date) => {
 
   return `${month}/${day} (${DAYS[dayOfWeek]})`;
 };
+
+export const formatDateWithDot = (date: Date) => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const dayOfWeek = date.getDay();
+
+  return `${year}.${month}.${day}(${DAYS[dayOfWeek]})`;
+};