♻️ Context 관련 리팩터링 (#149)

* design: QA * refactor: font-yoon, font-noto 제거 * refactor: nvmrc 추가 * refactor: 메인 화면 제거 * refactor: NavbarContext 리팩터링 * refactor: SegmentNode의 children에서 null 제거 * refactor: MarginedMain 구현 * refactor: SessionContextProvider 제거 * feat: SessionContext 재구현 * fix: .internal 관련 빌드 에러 임시 수정 * feat: 주석 처리한 LoginVisible 주석 해제
wafflestudio · Mar 8, 2024 · e6abe3b · e6abe3b
1 parent f9fa92c
commit e6abe3b
Show file tree

Hide file tree

Showing 118 changed files with 615 additions and 679 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.11.1
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["messages"]
+}
diff --git a/actions/newsServer.ts b/actions/newsServer.ts
@@ -1,7 +1,7 @@
 import { News, NewsPreviewList } from '@/types/news';
 import { PostSearchQueryParams } from '@/types/post';
 
-import { deleteRequest, getRequest } from '../apis/serverIndex';
+import { deleteRequest, getRequest } from '../apis/common/server';
 
 const newsPath = '/news';
 

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

diff --git a/actions/reservation.ts b/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 '../apis';
+import { deleteRequest, getRequest, postRequest } from '../apis/common/client';
 
 const reservationPath = '/reservation';
 

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

diff --git a/actions/sessionActions.ts b/actions/sessionActions.ts
@@ -0,0 +1,38 @@
+'use server';
+
+import { cookies } from 'next/headers';
+
+import { UserState } from '@/contexts/SessionContext';
+
+import { getRequest } from '@/apis/common/server';
+
+import { COOKIE_SESSION_ID } from '@/constants/network';
+
+export const getMockAuth = async () => {
+  // TODO: getRequest 함수로 구현
+  // 지금은 /v1이 segment에 없어서 임시로 fetch를 사용해 직접 구현
+  const resp = await fetch(`https://cse-dev-waffle.bacchus.io/api/mock-login`, {
+    method: 'GET',
+  });
+
+  const cookie = resp.headers.getSetCookie()[0];
+  const value = cookie.split(/=|;/)[1];
+
+  cookies().set(COOKIE_SESSION_ID, value, { httpOnly: true, secure: true });
+};
+
+export const removeAuth = () => {
+  cookies().delete(COOKIE_SESSION_ID);
+};
+
+export const getIsStaff = async (): Promise<UserState> => {
+  if (cookies().get(COOKIE_SESSION_ID) === undefined) return 'logout';
+
+  try {
+    const resp = await getRequest<{ isStaff: boolean }>('/user/is-staff');
+    return resp.isStaff ? 'staff' : 'non-staff';
+  } catch {
+    // removeAuth();
+    return 'logout';
+  }
+};
diff --git a/apis/academics.ts b/apis/academics.ts
@@ -1,23 +1,9 @@
 import { getMockAcademicsGuide, getMockCourseChanges, getMockCourses } from '@/data/academics';
 
-import { Course, CourseChange, Guide } from '@/types/academics';
-
-import { getRequest } from '.';
-
-type StudentType = 'undergraduate' | 'graduate';
-
 export const getAcademicsGuide = getMockAcademicsGuide;
 
 export const getCourses = getMockCourses;
 
 export const getEngCourses = getMockCourses;
 
 export const getCourseChanges = getMockCourseChanges;
-
-// export const getAcademicsGuide = (type: StudentType) =>
-//   getRequest(`/academics/${type}/guide`) as Promise<Guide>;
-
-// export const getCourses = (type: StudentType) =>
-//   getRequest(`/academics/${type}/courses`) as Promise<Course[]>;
-
-// export const getCourseChanges = (): Promise<CourseChange[]> => courseChangesData;
diff --git a/apis/admin.ts b/apis/admin.ts
@@ -1,6 +1,6 @@
 import { ImportantPreview, SlidePreview } from '@/types/admin';
 
-import { getRequest } from '.';
+import { getRequest } from './common/client';
 
 export const getSlides = (pageNum: number) =>
   getRequest(

diff --git a/apis/adminServer.ts b/apis/adminServer.ts
@@ -1,41 +1,16 @@
 import { ImportantPreview, SlidePreview } from '@/types/admin';
 
-import { getRequest, patchRequest } from './serverIndex';
+import { patchRequest } from './common/server';
 
-// export const getSlides = (pageNum: number) =>
-//   getRequest(
-//     '/admin/slide',
-//     { pageNum },
-//     {
-//       next: { tags: ['slide'] },
-//     },
-//   ) as Promise<{
-//     slides: SlidePreview[];
-//     total: number;
-//   }>;
-
-// export const getImportants = (pageNum: number) =>
-//   getRequest(
-//     '/admin/important',
-//     { pageNum },
-//     {
-//       next: { tags: ['important'] },
-//     },
-//   ) as Promise<{
-//     importants: ImportantPreview[];
-//     total: number;
-//   }>;
-
-export const getSlides = async (
-  page: number,
-): Promise<{ slides: SlidePreview[]; total: number }> => ({
+export const getSlides = async (): Promise<{ slides: SlidePreview[]; total: number }> => ({
   slides: [],
   total: 0,
 });
 
-export const getImportants = async (
-  page: number,
-): Promise<{ importants: ImportantPreview[]; total: number }> => ({
+export const getImportants = async (): Promise<{
+  importants: ImportantPreview[];
+  total: number;
+}> => ({
   importants: [],
   total: 0,
 });

diff --git a/apis/index.ts → apis/common/client.ts b/apis/index.ts → apis/common/client.ts
@@ -57,7 +57,7 @@ export const checkError = (response: Response) => {
 export class NetworkError extends Error {
   statusCode: number;
   constructor(statusCode: number) {
-    super(`네트워크 에러\nstatus: ${statusCode}`);
+    super(`${statusCode} 에러`);
     this.statusCode = statusCode;
   }
 }
diff --git a/apis/serverIndex.ts → apis/common/server.ts b/apis/serverIndex.ts → apis/common/server.ts
@@ -1,6 +1,6 @@
 import { cookies } from 'next/headers';
 
-import { BASE_URL, checkError } from '@/apis';
+import { BASE_URL, checkError } from '@/apis/common/client';
 
 import { objToQueryString } from '@/utils/convertParams';
 

diff --git a/apis/main.ts b/apis/main.ts
@@ -1,9 +1,5 @@
-import { getMockMainContents } from '@/data/main';
-
 import { MainContents } from '@/types/main';
 
-import { getRequest } from '.';
+import { getRequest } from './common/client';
 
 export const getMainContents = () => getRequest('') as Promise<MainContents>;
-
-// export const getMainContents = getMockMainContents;
diff --git a/apis/news.ts b/apis/news.ts
@@ -1,6 +1,6 @@
 import { PATCHNewsBody, POSTNewsBody } from '@/types/news';
 
-import { patchRequest, postRequest } from '.';
+import { patchRequest, postRequest } from './common/client';
 
 const newsPath = '/news';
 

diff --git a/apis/notice.ts b/apis/notice.ts
@@ -1,6 +1,6 @@
 import { POSTNoticeBody, PatchNoticeBody } from '@/types/notice';
 
-import { patchRequest, postRequest } from '.';
+import { patchRequest, postRequest } from './common/client';
 
 const noticePath = '/notice';
 

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

diff --git a/apis/seminar.ts b/apis/seminar.ts
@@ -1,6 +1,6 @@
 import { PATCHSeminarBody, POSTSeminarBody } from '@/types/seminar';
 
-import { patchRequest, postRequest } from '.';
+import { patchRequest, postRequest } from './common/client';
 
 const seminarPath = '/seminar';
 

diff --git a/app/.internal/layout.tsx b/app/.internal/layout.tsx
@@ -1,5 +1,17 @@
-import RootLayout from '../[locale]/layout';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <RootLayout params={{ locale: 'ko' }}>{children}</RootLayout>;
+// TODO: 디자인 적용
+export default async function RootLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  return (
+    <html
+      lang={params.locale}
+      className="bg-neutral-900 font-normal text-neutral-800 sm:min-w-[1000px]"
+    >
+      <body>{children}</body>
+    </html>
+  );
 }
diff --git a/app/[locale]/MarginedMain.tsx b/app/[locale]/MarginedMain.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import {
+  NAVBAR_CLOSED_WIDTH_REM,
+  NAVBAR_EXPANDED_WIDTH_REM,
+} from '@/components/layout/navbar/NavbarRoot';
+
+import useCurrentSegmentNode from '@/utils/hooks/useCurrentSegmentNode';
+import useResponsive from '@/utils/hooks/useResponsive';
+import { main as mainNode } from '@/utils/segmentNode';
+
+export default function MarginedMain({ children }: { children: ReactNode }) {
+  const node = useCurrentSegmentNode();
+  const { screenType } = useResponsive();
+
+  let marginLeft = '';
+  if (screenType === 'desktop') {
+    marginLeft =
+      node === mainNode ? `${NAVBAR_EXPANDED_WIDTH_REM}rem` : `${NAVBAR_CLOSED_WIDTH_REM}rem`;
+  }
+
+  return (
+    <main className="flex h-full flex-col overflow-scroll" style={{ marginLeft }}>
+      {children}
+    </main>
+  );
+}
diff --git a/app/[locale]/about/facilities/FacilitiesList.tsx b/app/[locale]/about/facilities/FacilitiesList.tsx
@@ -39,9 +39,7 @@ function FacilitiesRow({ name, description, location, imageURL, border }: Facili
       }`}
     >
       <div className="flex w-[35.5rem] flex-col">
-        <h3 className="font-noto mb-[.69rem] text-base font-bold leading-5 text-neutral-800">
-          {name}
-        </h3>
+        <h3 className=" mb-[.69rem] text-base font-bold leading-5 text-neutral-800">{name}</h3>
         <HTMLViewer htmlContent={description} />
         <div className="flex items-center gap-[0.12rem]">
           <Distance />

diff --git a/app/[locale]/about/future-careers/CareerStat.tsx b/app/[locale]/about/future-careers/CareerStat.tsx
@@ -14,7 +14,7 @@ export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
   return (
     <div className="flex flex-col gap-3">
       <div className="mb-[0.8rem] flex items-center gap-2">
-        <h3 className="font-noto text-base font-bold leading-[1.625rem]">졸업생 진로 현황</h3>
+        <h3 className=" text-base font-bold leading-[1.625rem]">졸업생 진로 현황</h3>
         <Dropdown
           contents={Object.keys(stat).reverse()}
           selectedIndex={selectedCareerStatIndex}

diff --git a/app/[locale]/about/future-careers/page.tsx b/app/[locale]/about/future-careers/page.tsx
@@ -22,9 +22,7 @@ export default async function GreetingsPage() {
 function CareerCompanies({ companies }: { companies: FutureCareers['companies'] }) {
   return (
     <div>
-      <h3 className="font-noto mb-[0.8rem] text-base font-bold leading-[1.625rem]">
-        졸업생 창업 기업
-      </h3>
+      <h3 className=" mb-[0.8rem] text-base font-bold leading-[1.625rem]">졸업생 창업 기업</h3>
       <div className="inline-block border-y-[1px] border-neutral-200 text-sm font-normal">
         <CompanyTableHeader />
         <ol>

diff --git a/app/[locale]/academics/graduate/scholarship/page.tsx b/app/[locale]/academics/graduate/scholarship/page.tsx
@@ -12,7 +12,7 @@ export default async function GraduateScholarshipListPage() {
   return (
     <PageLayout titleType="big">
       <HTMLViewer htmlContent={description} className="mt-7" />
-      <div className="font-noto mt-10 flex flex-col">
+      <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>

diff --git a/app/[locale]/academics/page.tsx b/app/[locale]/academics/page.tsx
@@ -1,5 +1,5 @@
 import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
 
 export default async function AcademicsPage() {
-  return <MajorCategoryPageLayout subtitle="Learning CSE" twoDimensional />;
+  return <MajorCategoryPageLayout subtitle="Learning CSE" />;
 }
diff --git a/app/[locale]/academics/undergraduate/course-changes/page.tsx b/app/[locale]/academics/undergraduate/course-changes/page.tsx
@@ -31,8 +31,6 @@ const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
 ];
 
 const getSelectedChanges = (selectedYear: number, data: CourseChange[]) => {
-  console.log('선택 연도', selectedYear);
-  console.log(data);
   if (selectedYear <= YEAR_LIMIT) return data.filter((d) => d.year <= YEAR_LIMIT);
 
   const change = data.find((d) => d.year === selectedYear);

diff --git a/app/[locale]/academics/undergraduate/curriculum/page.tsx b/app/[locale]/academics/undergraduate/curriculum/page.tsx
@@ -24,7 +24,7 @@ export default async function UndergradutecurriculumPage({
             href={`/${params.locale}/academics/undergraduate/courses`}
             className={`peer absolute flex h-10 flex-row items-center p-4 text-center text-sm text-main-orange duration-300 hover:text-[#141212]`}
           >
-            <span className="font-yoon mr-2 font-medium tracking-[-0.019em]">
+            <span className="mr-2 font-medium tracking-[-0.019em]">
               교과목 정보, 선수 교과목 로드맵
             </span>
             <span className="material-symbols-outlined text-[20px] font-light">navigate_next</span>

diff --git a/app/[locale]/academics/undergraduate/scholarship/page.tsx b/app/[locale]/academics/undergraduate/scholarship/page.tsx
@@ -12,7 +12,7 @@ export default async function UndergraduateScholarshipListPage() {
   return (
     <PageLayout titleType="big">
       <HTMLViewer htmlContent={description} className="mt-7" />
-      <div className="font-noto mt-10 flex flex-col">
+      <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>

diff --git a/app/[locale]/admin/page.tsx b/app/[locale]/admin/page.tsx
@@ -7,7 +7,7 @@ import { getImportants, getSlides } from '@/apis/admin';
 
 import ImportantManagement from '@/components/admin/important/ImportantManagement';
 import SlideManagement from '@/components/admin/slide/SlideManagement';
-import LoginStaffVisible from '@/components/common/auth/LoginStaffVisible';
+import LoginVisible from '@/components/common/LoginVisible';
 import SelectionList from '@/components/common/selection/SelectionList';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
@@ -72,15 +72,15 @@ interface AdminPageLayoutProps {
 function AdminPageLayout({ selectedMenu, children }: AdminPageLayoutProps) {
   return (
     <PageLayout title="관리자 메뉴" titleType="big" titleMargin="mb-9">
-      <LoginStaffVisible fallback={<p>관리자만 사용할 수 있는 페이지입니다.</p>}>
+      <LoginVisible staff fallback={<p>관리자만 사용할 수 있는 페이지입니다.</p>}>
         <SelectionList
           names={Object.values(ADMIN_MENU)}
           selectedItemName={selectedMenu}
           path={adminPath}
           listGridColumnClass="grid-cols-[200px_220px]"
         />
         {children}
-      </LoginStaffVisible>
+      </LoginVisible>
     </PageLayout>
   );
 }
diff --git a/app/[locale]/admissions/page.tsx b/app/[locale]/admissions/page.tsx
@@ -1,5 +1,5 @@
 import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
 
 export default async function AdmissionsPage() {
-  return <MajorCategoryPageLayout subtitle="Enroll CSE" twoDimensional />;
+  return <MajorCategoryPageLayout subtitle="Enroll CSE" />;
 }
diff --git a/app/[locale]/community/faculty-recruitment/page.tsx b/app/[locale]/community/faculty-recruitment/page.tsx
@@ -32,7 +32,7 @@ function LatestRecruitmentBanner({
 }: GETFacultyRecruitmentResponse) {
   return (
     <a
-      className="font-yoon relative block h-[4.5rem] w-[25rem] cursor-pointer"
+      className="relative block h-[4.5rem] w-[25rem] cursor-pointer"
       href={latestRecruitmentPostHref}
     >
       <p className="absolute left-6 top-5 text-base font-bold tracking-[.025rem]">