✨ 미반영된 api 적용

.github/workflows/deploy.yaml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - feat/search
+      - feat/mainPagination
 
 jobs:
   build:

actions/session.ts

@@ -16,8 +16,10 @@ export const getMockAuth = async () => {
   const cookie = resp.headers.getSetCookie()[0];
   const value = cookie.split(/=|;/)[1];
 
-  // TODO: 실 배포시 secure 옵션 주기
-  cookies().set(COOKIE_SESSION_ID, value, { httpOnly: true });
+  cookies().set(COOKIE_SESSION_ID, value, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+  });
 };
 
 export const removeAuth = () => {

apis/academics.ts

@@ -5,6 +5,7 @@ import {
   CourseChange,
   Curriculum,
   DegreeRequirements,
+  GeneralStudiesRequirements,
   Scholarship,
   ScholarshipList,
 } from '@/types/academics';
@@ -34,3 +35,6 @@ export const getScholarship = (id: number) =>
 
 export const getDegreeRequirements = () =>
   getRequest<DegreeRequirements>(`/academics/undergraduate/degree-requirements`);
+
+export const getGeneralStudiesRequirements = (type: 'undergraduate' | 'graduate') =>
+  getRequest<GeneralStudiesRequirements>(`/academics/${type}/general-studies-requirements`);

app/.internal/layout.tsx

@@ -1,4 +1,3 @@
-// TODO: 디자인 적용
 export default async function RootLayout({
   children,
   params,

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-irregular-whitespace */
 import Image from 'next/image';
 
 import greetings from '@/public/image/about/greetings.jpg';

app/[locale]/about/privacy-policy/page.tsx

@@ -1,4 +1,4 @@
-import Attachment from '@/components/common/Attachments';
+import Attachments from '@/components/common/Attachments';
 import HTMLViewer from '@/components/editor/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
@@ -8,7 +8,7 @@ export default async function PrivacyPolicyPage() {
       {/* TODO: PR 합친 후 매직 넘버 없애기 */}
       <div className="mr-[300px]" style={{ marginLeft: '100px' }}>
         <HTMLViewer htmlContent={htmlContent} />
-        <Attachment files={[file]} />
+        <Attachments files={[file]} />
       </div>
     </PageLayout>
   );

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

@@ -20,7 +20,7 @@ export default function PdfPicker({ data }: { data: DegreeRequirements['yearList
           onClick={setIndex}
         />
       </div>
-      <Attachments files={[data[index].attachment]} />
+      <Attachments files={[data[index].attachments[0]]} />
     </div>
   );
 }

app/[locale]/academics/undergraduate/general-studies-requirements/page.tsx

@@ -1,13 +1,14 @@
-import { getGeneralStudiesRequirements } from '@/apis/academicsServer';
+import { getGeneralStudiesRequirements } from '@/apis/academics';
 
 import Accordion from '@/app/[locale]/academics/undergraduate/general-studies-requirements/Accordion';
 
+import HTMLViewer from '@/components/editor/HTMLViewer';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
-import SubjectChanges from './SubjectChanges';
-
 export default async function UndergraduateGeneralStudiesRequirements() {
-  const { overview, subjectChanges, generalStudies } = await getGeneralStudiesRequirements();
+  const { overview, subjectChanges, generalStudies } = await getGeneralStudiesRequirements(
+    'undergraduate',
+  );
 
   return (
     <PageLayout titleType="big">
@@ -16,7 +17,7 @@ export default async function UndergraduateGeneralStudiesRequirements() {
 
         <ContentTitle title={'교양 교과과정 변경 내역'} />
         <div className="mb-5 mt-2.5">
-          {subjectChanges?.map((change, idx) => <SubjectChanges key={idx} {...change} />)}
+          <HTMLViewer htmlContent={subjectChanges} />
         </div>
 
         <ContentTitle title={'[학번별] 영역별 교양과목 학점 배분 구조표'} />

app/[locale]/page.tsx

@@ -4,11 +4,11 @@ import { ReactNode } from 'react';
 
 import DownArrow from '@/public/image/main/down_arrow.svg';
 import RightArrow from '@/public/image/main/right_arrow.svg';
-import SmallRightArrow from '@/public/image/main/small_right_arrow.svg';
 
 import { getMain } from '@/apis/main';
 
 import Header from '@/components/layout/header/Header';
+import NewsSection from '@/components/main/NewsSection';
 import NoticeSection from '@/components/main/NoticeSection';
 
 import { MainImportant, MainNews } from '@/types/main';
@@ -19,21 +19,26 @@ import {
   faculty,
   facultyRecruitment,
   graduateScholarship,
-  news,
   topConferenceList,
   undergraduateScholarship,
 } from '@/utils/segmentNode';
 
+const NEWS_CARD_WIDTH_REM = 13.8;
+
 export default async function MainPage() {
   const data = await getMain();
 
   return (
     <>
       <Header />
       <MainSection />
-      <NewsSection newsList={data.slides} />
+      <NewsSection>
+        {data.slides.map((news) => (
+          <NewsCard news={news} key={news.id} />
+        ))}
+      </NewsSection>
       <ImportantSection importantList={data.importants} />
-      <NoticeSection notice={data.notices} />
+      <NoticeSection allMainNotice={data.notices} />
       <LinkSection />
     </>
   );
@@ -46,31 +51,11 @@ const MainSection = () => (
   </div>
 );
 
-const NewsSection = ({ newsList }: { newsList: MainNews[] }) => {
-  return (
-    <div className="relative bg-neutral-100 pb-[5.5rem] pt-[5rem]">
-      <div className="absolute left-[3.81rem] top-[5rem] flex flex-col gap-2">
-        <h3 className="text-[1.75rem] font-medium text-neutral-950">새 소식</h3>
-        <Link
-          className="flex items-center gap-1 text-base font-normal text-[#E65615]"
-          href={getPath(news)}
-        >
-          더보기 <SmallRightArrow />
-        </Link>
-      </div>
-      <div className="no-scrollbar flex justify-center gap-8">
-        {newsList.slice(0, 4).map((news) => (
-          <NewsCard news={news} key={news.id} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
 const NewsCard = ({ news }: { news: MainNews }) => (
   <Link
     href={`/community/news/${news.id}`}
-    className="flex h-[19rem] w-[13.8rem] flex-col bg-neutral-50 shadow-[0_0_31.9px_0_rgba(0,0,0,0.07)] "
+    style={{ width: `${NEWS_CARD_WIDTH_REM}rem` }}
+    className="flex h-[19rem] shrink-0 flex-col bg-neutral-50 shadow-[0_0_31.9px_0_rgba(0,0,0,0.07)]"
   >
     <div className="relative h-[6.25rem] w-full">
       <Image src={news.imageURL} fill alt="" className="object-cover" />

app/[locale]/people/helper/Profile.tsx

@@ -13,9 +13,10 @@ interface ProfileProps {
 
 export default function Profile({ office, phone, fax, email, website, imageURL }: ProfileProps) {
   return (
-    <div className="relative float-right flex flex-col gap-5">
+    <div className="relative float-right">
       <ProfileImage imageURL={imageURL} />
-      <div className=" flex flex-col gap-[9px] bg-white text-sm font-medium text-neutral-600">
+
+      <div className="mt-5 flex flex-col gap-[9px] bg-white text-sm font-medium text-neutral-600">
         <FacultyInfoWithSymbols symbol="distance" label={office} />
         <FacultyInfoWithSymbols symbol="phone_in_talk" label={phone} />
         <FacultyInfoWithSymbols symbol="print" label={fax} />

app/[locale]/people/helper/ProfileImage.tsx

@@ -1,11 +1,8 @@
-import Image from 'next/image';
+import ImageWithFallback from '@/components/common/ImageWithFallback';
 
-// TODO: Image -> ImageFallback으로 수정
 export default function ProfileImage({ imageURL }: { imageURL: string | null }) {
-  if (imageURL === null) return <></>;
-
   return (
-    <Image
+    <ImageWithFallback
       alt="대표 이미지"
       src={imageURL}
       width={200}

app/[locale]/people/staff/[id]/page.tsx

@@ -3,12 +3,12 @@ import { Link } from '@/navigation';
 import { getStaff } from '@/apis/people';
 
 import HeaderAndList from '@/app/[locale]/people/helper/HeaderAndList';
-import ProfileImage from '@/app/[locale]/people/helper/ProfileImage';
 
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import BulletRow from '../../helper/BulletRow';
 import PageTitle from '../../helper/PageTitle';
+import ProfileImage from '../../helper/ProfileImage';
 
 export default async function StaffMemberPage({ params }: { params: { id: number } }) {
   const staff = await getStaff(params.id);

components/layout/header/HeaderRight.tsx

@@ -48,7 +48,7 @@ const AuthButton = () => {
 
   return (
     <button onClick={state === 'logout' ? login : logout} className="hover:text-main-orange">
-      {t(state === 'logout' ? '로그인' : '로그아웃') + '(test)'}
+      {t(state === 'logout' ? '로그인' : '로그아웃')}
     </button>
   );
 };

components/main/NewsSection.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import Link from 'next/link';
+import { ReactNode } from 'react';
+
+import SmallRightArrow from '@/public/image/main/small_right_arrow.svg';
+
+import { getPath } from '@/utils/page';
+import { news } from '@/utils/segmentNode';
+
+export default function NewsSection({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative bg-neutral-100">
+      <div className="absolute left-[3.81rem] top-[5rem] z-10 flex flex-col gap-2">
+        <h3 className="text-[1.75rem] font-medium text-neutral-950">새 소식</h3>
+        <Link
+          className="flex items-center gap-1 text-base font-normal text-[#E65615]"
+          href={getPath(news)}
+        >
+          더보기 <SmallRightArrow />
+        </Link>
+      </div>
+
+      <div className="ml-[12.56rem] flex gap-8 overflow-x-scroll pb-[5.5rem] pr-[7.5rem] pt-[5rem]">
+        {children}
+      </div>
+    </div>
+  );
+}

components/main/NoticeSection.tsx

@@ -8,8 +8,10 @@ import Plus from '@/public/image/main/plus.svg';
 import { AllMainNotice } from '@/types/main';
 
 import { formatMainNoticeDateStr } from '@/utils/date';
+import { getPath } from '@/utils/page';
+import { notice } from '@/utils/segmentNode';
 
-export default function NoticeSection({ notice }: { notice: AllMainNotice }) {
+export default function NoticeSection({ allMainNotice }: { allMainNotice: AllMainNotice }) {
   const [tag, setTag] = useState<keyof AllMainNotice>('all');
 
   return (
@@ -37,13 +39,13 @@ export default function NoticeSection({ notice }: { notice: AllMainNotice }) {
               대학원
             </NoticeSectionButton>
           </div>
-          <Link className="flex text-base font-normal text-[#E65817]" href="/notice">
+          <Link className="flex text-base font-normal text-[#E65817]" href={getPath(notice)}>
             <Plus /> 더보기
           </Link>
         </div>
 
         <div className="mt-6 flex flex-col gap-4">
-          {notice[tag].map((notice) => (
+          {allMainNotice[tag].map((notice) => (
             <Link
               key={notice.id}
               className="line-clamp-1 flex justify-between text-base font-normal text-white"

contexts/SessionContext.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import React, {
   createContext,
   useContext,
@@ -11,6 +12,8 @@ import React, {
 
 import { getIsStaff, getMockAuth, removeAuth } from '@/actions/session';
 
+import { LOGIN_URL, LOGOUT_URL } from '@/constants/network';
+
 export type UserState = 'logout' | 'non-staff' | 'staff';
 
 type SessionContextData = {
@@ -29,6 +32,7 @@ export const useSessionContext = () => useContext(SessionContext);
 
 export default function SessionContextProvider({ children }: PropsWithChildren) {
   const [state, setState] = useState<UserState>('logout');
+  const router = useRouter();
 
   const refresh = useCallback(async () => {
     const resp = await getIsStaff();
@@ -40,16 +44,24 @@ export default function SessionContextProvider({ children }: PropsWithChildren)
   }, [refresh]);
 
   const login = useCallback(async () => {
-    // TODO: 실제 배포시 LOGIN_URL, LOGOUT_URL 사용
-    await getMockAuth();
+    if (process.env.NODE_ENV === 'development') {
+      await getMockAuth();
+    } else {
+      router.push(LOGIN_URL);
+    }
+
     await refresh();
-  }, [refresh]);
+  }, [refresh, router]);
 
   const logout = useCallback(async () => {
-    // TODO: 실제 배포시 LOGIN_URL, LOGOUT_URL 사용
-    removeAuth();
+    if (process.env.NODE_ENV === 'development') {
+      removeAuth();
+    } else {
+      router.push(LOGOUT_URL);
+    }
+
     await refresh();
-  }, [refresh]);
+  }, [refresh, router]);
 
   return (
     <SessionContext.Provider value={{ state, login, logout }}>{children}</SessionContext.Provider>