✨ 모바일 네비바 구현

.github/workflows/deploy.yaml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - feat/mobileNav
 
 jobs:
   build:

actions/admin.ts

@@ -14,7 +14,7 @@ import {
 
 import { ImportantPostIdentifier } from '@/types/admin';
 
-export const batchUnslideAction = async (ids: Set<number>) => {
+export const batchUnslideAction = async (ids: number[]) => {
   try {
     await patchMultipleSlides(Array.from(ids));
   } catch (e) {

apis/academics.ts

@@ -1,8 +1,13 @@
-import { getMockCourseChanges, getMockCourses } from '@/data/academics';
-
 import { Attachment } from '@/components/common/Attachments';
 
-import { Curriculum, Scholarship, ScholarshipList } from '@/types/academics';
+import {
+  Course,
+  CourseChange,
+  Curriculum,
+  DegreeRequirements,
+  Scholarship,
+  ScholarshipList,
+} from '@/types/academics';
 
 import { getRequest } from '.';
 
@@ -12,17 +17,20 @@ export const getAcademicsGuide = (type: 'undergraduate' | 'graduate') =>
     attachments: Attachment[];
   }>;
 
-export const getCourses = getMockCourses;
-
-export const getEngCourses = getMockCourses;
+export const getCourses = (type: 'undergraduate' | 'graduate') =>
+  getRequest(`/academics/${type}/courses`) as Promise<Course[]>;
 
 export const getCurriculum = () =>
   getRequest('/academics/undergraduate/curriculum') as Promise<Curriculum[]>;
 
-export const getCourseChanges = getMockCourseChanges;
+export const getCourseChanges = (type: 'undergraduate' | 'graduate') =>
+  getRequest(`/academics/${type}/curriculum`) as Promise<CourseChange[]>;
 
 export const getScholarshipList = (type: string) =>
   getRequest<ScholarshipList>(`/academics/${type}/scholarship`);
 
-export const getScholarship = (type: string, id: number) =>
-  getRequest<Scholarship>(`/academics/${type}/scholarship/${id}`);
+export const getScholarship = (id: number) =>
+  getRequest<Scholarship>(`/academics/scholarship/${id}`);
+
+export const getDegreeRequirements = () =>
+  getRequest<DegreeRequirements>(`/academics/undergraduate/degree-requirements`);

apis/academicsServer.ts

@@ -1,8 +1,5 @@
 // TODO: 서버에서 제공되면 파일 삭제
 
-import { getMockDegreeRequirements } from '@/data/objects';
 import { getMockGeneralStudiesRequirements } from '@/data/serverObjects';
 
-export const getDegreeRequirements = getMockDegreeRequirements;
-
 export const getGeneralStudiesRequirements = getMockGeneralStudiesRequirements;

apis/index.ts

@@ -46,7 +46,7 @@ const fetchWithRetry = async (
   url: string,
   method: string,
   init?: CredentialRequestInit,
-  remain: number = 10,
+  remain: number = 5,
 ): Promise<Response> => {
   if (method !== 'GET') return _fetch(url, method, init);
 
@@ -57,7 +57,7 @@ const fetchWithRetry = async (
     if (remain === 0) throw e;
 
     console.error(`fetchWithRetry: ${e} ${url} ${method} ${init}`);
-    await delay(100 * 1.5 ** (10 - remain));
+    await delay(100 * 1.5 ** (5 - remain));
     return await fetchWithRetry(url, method, init, remain - 1);
   }
 };

apis/news.ts

@@ -12,10 +12,16 @@ const newsPath = '/news';
 // GET
 
 export const getNewsPosts = (params: PostSearchQueryParams) =>
-  getRequest(newsPath, params, { next: { tags: [FETCH_TAG_NEWS] } }) as Promise<NewsPreviewList>;
+  getRequest(newsPath, params, {
+    next: { tags: [FETCH_TAG_NEWS] },
+    jsessionID: true,
+  }) as Promise<NewsPreviewList>;
 
 export const getNewsDetail = (id: number, params?: PostSearchQueryParams) =>
-  getRequest(`${newsPath}/${id}`, params, { next: { tags: [FETCH_TAG_NEWS] } }) as Promise<News>;
+  getRequest(`${newsPath}/${id}`, params, {
+    next: { tags: [FETCH_TAG_NEWS] },
+    jsessionID: true,
+  }) as Promise<News>;
 
 // POST
 

apis/notice.ts

@@ -14,11 +14,13 @@ const noticePath = '/notice';
 export const getNoticePosts = (params: PostSearchQueryParams) =>
   getRequest(noticePath, params, {
     next: { tags: [FETCH_TAG_NOTICE] },
+    jsessionID: true,
   }) as Promise<NoticePreviewList>;
 
 export const getNoticePostDetail = (id: number, params: PostSearchQueryParams) =>
   getRequest(`${noticePath}/${id}`, params, {
     next: { tags: [FETCH_TAG_NOTICE] },
+    jsessionID: true,
   }) as Promise<Notice>;
 
 // POST

apis/seminar.ts

@@ -14,12 +14,14 @@ const seminarPath = '/seminar';
 export const getSeminarPosts = async (params: PostSearchQueryParams) => {
   return getRequest(seminarPath, params, {
     next: { tags: [FETCH_TAG_SEMINAR] },
+    jsessionID: true,
   }) as Promise<SeminarList>;
 };
 
 export const getSeminarPost = async (id: number, params: PostSearchQueryParams) => {
   return getRequest(`${seminarPath}/${id}`, params, {
     next: { tags: [FETCH_TAG_SEMINAR] },
+    jsessionID: true,
   }) as Promise<Seminar>;
 };
 

app/.internal/layout.tsx

@@ -9,7 +9,7 @@ export default async function RootLayout({
   return (
     <html
       lang={params.locale}
-      className="bg-neutral-900 font-normal text-neutral-800 sm:min-w-[1000px]"
+      className="bg-neutral-900 font-normal text-neutral-950 sm:min-w-[1000px]"
     >
       <body>{children}</body>
     </html>

app/[locale]/MarginedMain.tsx

@@ -22,7 +22,7 @@ export default function MarginedMain({ children }: { children: ReactNode }) {
   }
 
   return (
-    <main className="flex h-full flex-col overflow-scroll" style={{ marginLeft }}>
+    <main className="flex flex-col overflow-scroll" style={{ marginLeft }}>
       {children}
     </main>
   );

app/[locale]/about/greetings/page.tsx

@@ -18,7 +18,7 @@ export default async function GreetingsPage() {
       <div className="flex flex-col items-start gap-12 bg-neutral-100 px-5 pb-12 pt-7 sm:flex-row sm:py-11 sm:pl-[6.25rem] sm:pr-[360px]">
         <HTMLViewer htmlContent={description} />
         {/* TODO: 레이아웃이 바뀌어 사진은 백엔드에서 가져오지 않는데 어떻게 처리할지 고민 필요 */}
-        <Image src={greetings.src} alt="학부장" width={212} height={280} />
+        <Image src={greetings.src} alt="학부장" width={212} height={280} className="shrink-0" />
       </div>
     </PageLayout>
   );

app/[locale]/about/overview/page.tsx

@@ -23,11 +23,12 @@ export default async function OverviewPage() {
           alt="학교 전경"
           width={320}
           height={213}
+          className="shrink-0 object-cover"
         />
       </div>
       <div className="px-5 pb-16 pt-10 sm:pb-[7.88rem] sm:pl-[6.25rem] sm:pr-[360px]">
         <h2 className="mb-6 text-base font-semibold">학부 소개 책자</h2>
-        <div className="mb-10 flex gap-6">
+        <div className="mb-10 flex flex-col gap-6 sm:flex-row">
           <Image src={brochure1.src} width={227} height={320} alt="소개 책자" />
           <Image src={brochure2.src} width={227} height={320} alt="소개 책자" />
         </div>

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

@@ -13,7 +13,7 @@ export default async function GraduateCoursePage() {
   return (
     <PageLayout titleType="big">
       {chunckedCourses.length > 0 && (
-        <div className="flex w-[970px] flex-col gap-8">
+        <div className="flex max-w-[880px] flex-col gap-8">
           {chunckedCourses.map((courses, i) => (
             <CourseRow courses={courses} selectedOption="학년" key={i} />
           ))}

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

@@ -3,7 +3,7 @@ import { getScholarship } from '@/apis/academics';
 import ScholarshipDetail from '../../../helper/ScholarshipDetail';
 
 export default async function GraduateScholarshipPage({ params }: { params: { id: string } }) {
-  const scholarship = await getScholarship('graduate', parseInt(params.id));
+  const scholarship = await getScholarship(parseInt(params.id));
 
   return <ScholarshipDetail scholarship={scholarship} />;
 }

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

@@ -27,7 +27,7 @@ export default async function ScholarshipPreview({
         <h3 className="border-b-[1px] border-b-neutral-200 pb-2 text-[20px] font-bold leading-10">
           장학금 종류
         </h3>
-        <ul className="mt-2">
+        <ul className="mt-4">
           {scholarshipList.map((item) => (
             <ScholarshipRow id={item.id} name={item.name} key={item.id} type={type} />
           ))}
@@ -53,7 +53,7 @@ export function ScholarshipRow({ id, name, type }: ScholarshipRowProps) {
         className="group flex items-center gap-2.5 px-3"
       >
         <div className="h-2.5 w-2.5 shrink-0 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">
+        <span className="text-md font-medium duration-300 group-hover:text-main-orange">
           {name}
         </span>
       </Link>

app/[locale]/academics/helper/courses/CourseListRow.tsx

@@ -7,10 +7,10 @@ import useModal from '@/utils/hooks/useModal';
 import CourseDetailModal from './CourseDetailModal';
 
 export const COURSE_ROW_ITEM_WIDTH = {
-  name: 'w-56',
-  classification: 'w-[6.75rem]',
-  code: 'w-[11.75rem]',
-  credit: 'w-[3.75rem]',
+  name: 'w-[16rem]',
+  classification: 'w-[10rem]',
+  code: 'w-[13rem]',
+  credit: 'w-[6rem]',
   grade: 'w-[5.25rem]',
 } as const;
 

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

@@ -16,7 +16,7 @@ const TIME_SPOTS: { year: number; margin?: string; isLast?: boolean }[] = [
 ];
 
 export default async function UndergraduateCourseChangesPage() {
-  const changes = await getCourseChanges('graduate');
+  const changes = await getCourseChanges('undergraduate');
 
   return <CourseChanges changes={changes} yearLimit={2011} timeSpots={TIME_SPOTS} />;
 }

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

@@ -33,7 +33,7 @@ export default function CoursePageContent({ courses }: CoursePageContentProps) {
   }
 
   return (
-    <div className={selectedOption.view === '카드형' ? 'w-[970px]' : 'w-[720px]'}>
+    <div className="max-w-[880px]">
       <h4 className="mb-8 mt-14 pl-5 text-[17px] font-bold">교과목 정보</h4>
       <CourseToolbar
         viewOption={selectedOption.view}

app/[locale]/academics/undergraduate/degree-requirements/PdfPicker.tsx

@@ -7,7 +7,7 @@ import Dropdown from '@/components/common/form/Dropdown';
 
 import { DegreeRequirements } from '@/types/academics';
 
-export default function PdfPicker({ data }: { data: DegreeRequirements[] }) {
+export default function PdfPicker({ data }: { data: DegreeRequirements['yearList'] }) {
   const [index, setIndex] = useState(0);
 
   return (

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

@@ -3,7 +3,7 @@ import { getScholarship } from '@/apis/academics';
 import ScholarshipDetail from '../../../helper/ScholarshipDetail';
 
 export default async function UndergraduateScholarshipPage({ params }: { params: { id: string } }) {
-  const scholarship = await getScholarship('undergraduate', parseInt(params.id));
+  const scholarship = await getScholarship(parseInt(params.id));
 
   return <ScholarshipDetail scholarship={scholarship} />;
 }

app/[locale]/admin/helper/BatchAction.tsx

@@ -10,7 +10,7 @@ export default function BatchAction({
   onClickButton,
 }: BatchActionProps) {
   return (
-    <div className="mt-[3.25rem] flex items-center">
+    <div className="ml-[25px] mt-[3.25rem] flex items-center">
       <SelectedPostsCount count={selectedCount} />
       <BatchButton disabled={selectedCount === 0} onClick={onClickButton}>
         {buttonText}
@@ -25,7 +25,7 @@ function SelectedPostsCount({ count }: { count: number }) {
       <span className="material-symbols-rounded text-lg font-extralight text-neutral-500">
         check_box
       </span>
-      <span className="text-xs tracking-wide text-neutral-500">{count}개 게시물 선택</span>
+      <span className="text-md tracking-wide text-neutral-500">{count}개 게시물 선택</span>
     </div>
   );
 }

app/[locale]/admin/helper/TotalPostsCount.tsx

@@ -1,6 +1,6 @@
 export default function TotalPostsCount({ count }: { count: number }) {
   return (
-    <span className="mb-3 ml-[1.5625rem] mt-[2.375rem] block text-xs tracking-wide text-neutral-500">
+    <span className="mb-5 ml-[1.5625rem] mt-[2.375rem] block text-md tracking-wide text-neutral-500">
       총 {count}개의 게시물
     </span>
   );

app/[locale]/admin/helper/important/ImportantList.tsx

@@ -37,7 +37,7 @@ export default function ImportantList({
   return (
     <div className="mx-2.5 mb-8">
       <ImportantListHeader />
-      <ul className={`divide-y divide-dashed divide-neutral-200 border-b border-neutral-300`}>
+      <ul className={`divide-y divide-dashed divide-neutral-200 border-b border-neutral-200`}>
         {posts.map((post, i) => (
           <ImportantListRow
             key={i}

app/[locale]/admin/helper/important/ImportantListHeader.tsx

@@ -2,7 +2,7 @@ import { IMPORTANT_ROW_CELL_WIDTH } from './ImportantListRow';
 
 export default function ImportantListHeader() {
   return (
-    <h5 className="flex h-10 items-center border-b border-neutral-300 pl-[3.125rem] pr-[4.375rem] text-xs tracking-wide text-neutral-700">
+    <h5 className="flex h-10 items-center border-b border-t border-neutral-200 pl-[3.125rem] pr-[4.375rem] text-md tracking-wide text-neutral-700">
       <span className={`${IMPORTANT_ROW_CELL_WIDTH.index} text-center tracking-wide`}>연번</span>
       <span className={`${IMPORTANT_ROW_CELL_WIDTH.category} text-center tracking-wide`}>종류</span>
       <span className={`${IMPORTANT_ROW_CELL_WIDTH.title} pl-3 tracking-wide`}>제목</span>

app/[locale]/admin/helper/important/ImportantListRow.tsx

@@ -38,7 +38,7 @@ export default function ImportantListRow({
 
   return (
     <li
-      className={`flex h-10 items-center py-2.5 text-xs tracking-wide ${
+      className={`flex items-center py-[12px] text-md tracking-wide ${
         isSelected && 'bg-neutral-100'
       }`}
     >
@@ -66,10 +66,7 @@ function CheckboxCell({ isChecked = true, toggleCheck }: CheckboxCellProps) {
       {isChecked ? (
         <CheckboxOrange className="cursor-pointer" onClick={toggleCheck} />
       ) : (
-        <span
-          className="material-symbols-rounded cursor-pointer text-[1.25rem] font-light"
-          onClick={toggleCheck}
-        >
+        <span className="material-symbols-rounded cursor-pointer font-light" onClick={toggleCheck}>
           check_box_outline_blank
         </span>
       )}
@@ -107,7 +104,7 @@ function DateCell({ date }: { date: string }) {
 function EditCell({ href }: { href: string }) {
   return (
     <span className={`${IMPORTANT_ROW_CELL_WIDTH.edit} pl-3`}>
-      <Link href={href} className="cursor-pointer hover:underline">
+      <Link href={href} className="cursor-pointer font-medium text-main-orange hover:underline">
         편집
       </Link>
     </span>

app/[locale]/admin/helper/important/ImportantManagement.tsx

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 
 import { batchUnimportantAction } from '@/actions/admin';
 
-import { StraightNode } from '@/components/common/Nodes';
 import Pagination from '@/components/common/Pagination';
 import AlertModal from '@/components/modal/AlertModal';
 
@@ -51,7 +50,6 @@ export default function ImportantManagement({ posts, page, total }: ImportantMan
   return (
     <div>
       <ImportantDescription />
-      <StraightNode double />
       <TotalPostsCount count={total} />
       <ImportantList
         posts={posts}
@@ -83,7 +81,7 @@ export default function ImportantManagement({ posts, page, total }: ImportantMan
 
 function ImportantDescription() {
   return (
-    <p className="mb-7 text-sm tracking-wide">
+    <p className="mb-10 bg-neutral-100 px-6 py-5 text-md leading-loose">
       메인페이지의 중요 안내에는 <strong>{`소식 > 공지사항, 새 소식, 세미나`}</strong> 중{' '}
       <strong>{`'중요 안내에 표시'`}</strong> 체크박스가 선택된 글들이 올라갑니다.
       <br />이 목록에 2개 이상의 글이 포함되면 자동으로 최신글 2개만 표시되지만, 원활한 유지보수를

app/[locale]/admin/helper/slide/SlideLIstHeader.tsx

@@ -2,7 +2,7 @@ import { SLIDE_ROW_CELL_WIDTH } from './SlideListRow';
 
 export default function SlideListHeader() {
   return (
-    <h5 className="flex h-10 items-center border-b border-neutral-300 pl-[3.125rem] pr-[4.375rem] text-xs tracking-wide text-neutral-700">
+    <h5 className="flex h-10 items-center border-b border-t border-neutral-200 pl-[3.125rem] pr-[4.375rem] text-md tracking-wide text-neutral-700">
       <span className={`${SLIDE_ROW_CELL_WIDTH.index} text-center tracking-wide`}>연번</span>
       <span className={`${SLIDE_ROW_CELL_WIDTH.title} pl-3 tracking-wide`}>제목</span>
       <span className={`${SLIDE_ROW_CELL_WIDTH.date} pl-8 tracking-wide`}>날짜</span>