💄 헤더 페이지 레이아웃에 통합 (#135)

* design: 메인 헤더 레이아웃 변경 * design: 대분류 페이지 헤더 포함 * design: 페이지 레이아웃 헤더 포함 * fix: 교과과정 빈 배열 렌더링 제외 * design: 연구 그룹 패딩 조정
wafflestudio · Feb 17, 2024 · bea13c1 · bea13c1
1 parent ea76db5
commit bea13c1
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 76 deletions.
diff --git a/app/[locale]/academics/graduate/courses/page.tsx b/app/[locale]/academics/graduate/courses/page.tsx
@@ -12,7 +12,7 @@ export default async function GraduateCoursePage() {
   return (
     <PageLayout titleType="big" titleMargin="mb-[44px]">
       {chunckedCourses.length > 0 && (
-        <div className="flex flex-col gap-8 w-[840px]">
+        <div className="flex flex-col gap-8 w-[970px]">
           {chunckedCourses.map((courses, i) => (
             <CourseRow courses={courses} selectedOption="학년" key={i} />
           ))}

diff --git a/app/[locale]/content.tsx b/app/[locale]/content.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { PropsWithChildren, Suspense } from 'react';
+import { PropsWithChildren } from 'react';
 
 import Footer from '@/components/layout/footer/Footer';
-import Header from '@/components/layout/header/Header';
 
 import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
 
@@ -14,10 +13,7 @@ export default function Content({ children }: PropsWithChildren) {
   const ml = node === main ? `ml-[11rem]` : 'ml-[6.25rem]';
 
   return (
-    <div className={`flex flex-col flex-1 font-noto-demi ${ml}`}>
-      <Suspense>
-        <Header />
-      </Suspense>
+    <div className={`flex flex-col flex-1 ${ml}`}>
       <main className="flex flex-col flex-1 overflow-scroll overflow-x-hidden">
         <div className="flex-1">{children}</div>
         <Footer />

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -1,56 +1,56 @@
 export const dynamic = 'force-dynamic';
 
-import MainNode1 from '@/public/image/main_1.svg';
-import MainNode2 from '@/public/image/main_2.svg';
-import MainNode3 from '@/public/image/main_3.svg';
-import MainNode4 from '@/public/image/main_4.svg';
-import MainNode5 from '@/public/image/main_5.svg';
-import MainNode6 from '@/public/image/main_6.svg';
-import MainNode7 from '@/public/image/main_7.svg';
+// import MainNode1 from '@/public/image/main_1.svg';
+// import MainNode2 from '@/public/image/main_2.svg';
+// import MainNode3 from '@/public/image/main_3.svg';
+// import MainNode4 from '@/public/image/main_4.svg';
+// import MainNode5 from '@/public/image/main_5.svg';
+// import MainNode6 from '@/public/image/main_6.svg';
+// import MainNode7 from '@/public/image/main_7.svg';
 
 import { getMainContents } from '@/apis/main';
 
-import BgVideo from '@/components/main/BgVideo';
+// import BgVideo from '@/components/main/BgVideo';
 import MainPageContent from '@/components/main/MainPageContent';
-import ShortCuts from '@/components/main/ShortCuts';
+// import ShortCuts from '@/components/main/ShortCuts';
 
-import { facultyRecruitment, notice, topConferenceList } from '@/types/page';
+// import { facultyRecruitment, notice, topConferenceList } from '@/types/page';
 
-import { getPath } from '@/utils/page';
+// import { getPath } from '@/utils/page';
 
-const tclPath = getPath(topConferenceList);
-const facultyRecruitmentPath = getPath(facultyRecruitment);
-const undergraduateNoticePath = getPath(notice);
+// const tclPath = getPath(topConferenceList);
+// const facultyRecruitmentPath = getPath(facultyRecruitment);
+// const undergraduateNoticePath = getPath(notice);
 
-const shortCuts = [
-  { title: facultyRecruitment.name, href: facultyRecruitmentPath },
-  { title: topConferenceList.name, href: tclPath },
-  { title: '학부 ' + notice.name, href: `${undergraduateNoticePath}?tag=학사(학부)` },
-];
+// const shortCuts = [
+//   { title: facultyRecruitment.name, href: facultyRecruitmentPath },
+//   { title: topConferenceList.name, href: tclPath },
+//   { title: '학부 ' + notice.name, href: `${undergraduateNoticePath}?tag=학사(학부)` },
+// ];
 
 export default async function MainPage() {
   const data = await getMainContents();
 
   return (
-    <div className={`w-[1264px] h-[1270px] relative mx-auto overflow-hidden`}>
-      <BgVideo />
-      <BackgroundNode />
-      <ShortCuts shortCuts={shortCuts} />
+    <div className={`relative mx-auto overflow-hidden bg-[#18191b]`}>
+      {/* <BgVideo /> */}
+      {/* <BackgroundNode /> */}
+      {/* <ShortCuts shortCuts={shortCuts} /> */}
       {data && <MainPageContent data={data} />}
     </div>
   );
 }
 
-function BackgroundNode() {
-  return (
-    <div className="absolute w-full">
-      <MainNode1 className="absolute top-0 left-[-10px]" />
-      <MainNode2 className="absolute top-0 right-0" />
-      <MainNode3 className="absolute top-[490px] left-0" />
-      <MainNode4 className="absolute top-[300px] right-[188.5px]" />
-      <MainNode5 className="absolute top-[865px] left-[186px]" />
-      <MainNode6 className="absolute top-[1070px] left-0" />
-      <MainNode7 className="absolute top-[1176px] right-1" />
-    </div>
-  );
-}
+// function BackgroundNode() {
+//   return (
+//     <div className="absolute w-full">
+//       <MainNode1 className="absolute top-0 left-[-10px]" />
+//       <MainNode2 className="absolute top-0 right-0" />
+//       <MainNode3 className="absolute top-[490px] left-0" />
+//       <MainNode4 className="absolute top-[300px] right-[188.5px]" />
+//       <MainNode5 className="absolute top-[865px] left-[186px]" />
+//       <MainNode6 className="absolute top-[1070px] left-0" />
+//       <MainNode7 className="absolute top-[1176px] right-1" />
+//     </div>
+//   );
+// }
diff --git a/components/academics/CourseCards.tsx b/components/academics/CourseCards.tsx
@@ -13,9 +13,10 @@ export default function CourseCards({ courses, selectedOption }: CourseCardProps
   return (
     courses.length > 0 && (
       <div className="mt-6 flex flex-col gap-8">
-        {sortedCourses.map((courses, i) => (
-          <CourseRow courses={courses} selectedOption={selectedOption} key={i} />
-        ))}
+        {sortedCourses.map((courses, i) => {
+          if (courses.length == 0) return;
+          return <CourseRow courses={courses} selectedOption={selectedOption} key={i} />;
+        })}
       </div>
     )
   );

diff --git a/components/academics/CourseDetailModal.tsx b/components/academics/CourseDetailModal.tsx
@@ -24,8 +24,8 @@ function CourseHeader({ course }: { course: Course }) {
   return (
     <h4 className="flex items-center gap-2">
       <BookmarkIcon />
-      <span className="font-noto font-bold">{course.name}</span>
-      <div className="flex items-center text-neutral-600 text-xs divide-x divide-neutral-200 [&_span]:px-2">
+      <span className="font-bold">{course.name}</span>
+      <div className="flex items-center pt-1 text-neutral-600 text-sm divide-x divide-neutral-200 [&_span]:px-2">
         <span>{course.code}</span>
         <span>{course.classification}</span>
         <span>{course.credit}학점</span>
@@ -36,5 +36,5 @@ function CourseHeader({ course }: { course: Course }) {
 }
 
 function CourseBody({ content }: { content: string }) {
-  return <p className="text-sm leading-loose">{content}</p>;
+  return <p className="text-md leading-loose">{content}</p>;
 }
diff --git a/components/academics/CourseList.tsx b/components/academics/CourseList.tsx
@@ -14,7 +14,7 @@ export default function CourseList({ courses, selectedOption }: CourseListProps)
   return (
     <div className="border-b border-neutral-200 px-5">
       <CourseListHeader />
-      <ul className="divide-y divide-neutral-200 divide-dashed font-noto ">
+      <ul className="divide-y divide-neutral-200 divide-dashed">
         {sortedCourses.map((course) => (
           <CourseListRow course={course} key={course.code} />
         ))}

diff --git a/components/academics/CourseListHeader.tsx b/components/academics/CourseListHeader.tsx
@@ -4,7 +4,7 @@ import { COURSE_ROW_ITEM_WIDTH } from './CourseListRow';
 
 export default function CourseListHeader() {
   return (
-    <h5 className="flex font-yoon items-center h-10 text-xs border-y border-neutral-100 bg-neutral-100 [&>span]:px-3">
+    <h5 className="flex items-center h-11 text-md border-y border-neutral-100 bg-neutral-100 [&>span]:px-4">
       <span className={COURSE_ROW_ITEM_WIDTH.name}>교과목명</span>
       <span className={COURSE_ROW_ITEM_WIDTH.classification}>교과목 구분</span>
       <span className={COURSE_ROW_ITEM_WIDTH.code}>교과목 번호</span>

diff --git a/components/academics/CourseListRow.tsx b/components/academics/CourseListRow.tsx
@@ -16,7 +16,7 @@ export const COURSE_ROW_ITEM_WIDTH = {
 
 export default function CourseListRow({ course }: { course: Course }) {
   return (
-    <li className="flex items-center h-14 text-xs [&>span]:px-3">
+    <li className="flex items-center h-14 text-md [&>span]:px-4">
       <NameCell name={course.name} course={course} />
       <ClassificationCell classification={course.classification} />
       <CodeCell code={course.code} />

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

diff --git a/components/academics/CourseRow.tsx b/components/academics/CourseRow.tsx
@@ -1,9 +1,10 @@
 'use client';
 
+import { useRef } from 'react';
+
 import { Course, SortOption } from '@/types/academics';
 
 import CourseCard from './CourseCard';
-import { useRef } from 'react';
 
 interface CourseRowProps {
   courses: Course[];
@@ -26,15 +27,15 @@ export default function CourseRow({ courses, selectedOption }: CourseRowProps) {
 
   return (
     <div className="flex items-center group">
-      <ArrowButton iconName=" navigate_before" onClick={() => scrollHorizontally('left')} />
+      <ArrowButton iconName="navigate_before" onClick={() => scrollHorizontally('left')} />
       <div className="styled-scrollbar overflow-y-hidden overflow-x-auto py-3" ref={carouselRef}>
         <div className="flex gap-5">
           {courses.map((course) => (
             <CourseCard course={course} selectedOption={selectedOption} key={course.code} />
           ))}
         </div>
       </div>
-      <ArrowButton iconName=" navigate_next" onClick={() => scrollHorizontally('right')} />
+      <ArrowButton iconName="navigate_next" onClick={() => scrollHorizontally('right')} />
     </div>
   );
 }

diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
@@ -18,7 +18,7 @@ export default function Header() {
   const goToMainPage = () => (window.location.href = '/');
 
   return (
-    <header className={`bg-[#1f2021] px-[3.75rem] pt-12 pb-[2.44rem] flex justify-between`}>
+    <header className={`bg-transparent px-[3.75rem] h-[148px] flex items-center justify-between`}>
       <div onClick={goToMainPage} className="cursor-pointer">
         <HeaderLogo />
       </div>

diff --git a/components/layout/pageLayout/MajorCategoryPageLayout.tsx b/components/layout/pageLayout/MajorCategoryPageLayout.tsx
@@ -10,6 +10,8 @@ import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
 
 import { getPath } from '@/utils/page';
 
+import Header from '../header/Header';
+
 interface GuidePageLayoutProps {
   title?: string;
   subtitle?: string;
@@ -27,12 +29,13 @@ export default function MajorCategoryPageLayout({
 
   return (
     <div className="bg-neutral-850">
+      <Header />
       <div className="max-w-[80rem] pt-12 pb-[4.5rem] px-[6.25rem]">
         <div className="text-neutral-500 text-[20px] font-light">{subtitle}</div>
         <div className="text-white text-[64px] font-semibold tracking-wide mb-8">{title}</div>
         <HTMLViewer htmlContent={description} style={{ color: '#f5f5f5' }} />
       </div>
-      <div className="bg-neutral-900 pt-10 pb-[12.5rem] px-[6.25rem]">
+      <div className="bg-neutral-900 pt-20 pb-[13.75rem] px-[6.25rem]">
         <div className="grid gap-10 grid-cols-[repeat(auto-fill,_300px)]">
           {currentPage.children!.map((subpage, index) => (
             <DetailItem

diff --git a/components/layout/pageLayout/PageLayout.tsx b/components/layout/pageLayout/PageLayout.tsx
@@ -8,6 +8,7 @@ import SubNavbar from '@/components/layout/pageLayout/SubNavbar';
 import useCurrentSegmentNode from '@/hooks/useCurrentSegmentNode';
 
 import PageTitle from './PageTitle';
+import Header from '../header/Header';
 
 interface PageLayoutProps {
   title?: string | JSX.Element;
@@ -39,16 +40,20 @@ export default function PageLayout({
 
   return (
     <div className="relative bg-neutral-900">
+      <Header />
       <PageTitle
         title={title}
         currentPage={currentPage}
         titleType={titleType}
         margin={titleMargin ?? ''}
       />
-      <div className={'bg-white pl-[100px] pr-[350px] pt-[44px] pb-[150px]'} style={bodyStyle}>
+      <div
+        className={'bg-white pl-[100px] pr-[350px] pt-[44px] pb-[150px] relative'}
+        style={bodyStyle}
+      >
         {children}
+        <SubNavbar currentTab={currentPage} />
       </div>
-      <SubNavbar currentTab={currentPage} />
     </div>
   );
 }
diff --git a/components/layout/pageLayout/PageTitle.tsx b/components/layout/pageLayout/PageTitle.tsx
@@ -25,10 +25,10 @@ export default function PageTitle({ title, currentPage, titleType, margin }: Pag
 
   return (
     <div
-      className={`bg-neutral-900 pt-[54px]`}
+      className="pt-[54px]"
       style={{
-        paddingLeft: PAGE_TITLE_LEFT_MARGIN_PX + 'px',
-        paddingRight: PAGE_TITLE_LEFT_MARGIN_PX + 'px',
+        paddingLeft: PAGE_TITLE_LEFT_MARGIN_PX,
+        paddingRight: PAGE_TITLE_LEFT_MARGIN_PX,
       }}
     >
       <div

diff --git a/components/layout/pageLayout/SubNavbar.tsx b/components/layout/pageLayout/SubNavbar.tsx
@@ -22,14 +22,15 @@ export default function SubNavbar({ currentTab }: SubNavbarProps) {
   const height = `${(subTabs.length + 1) * ITEM_HEIGHT}px`;
 
   return (
-    <div className="absolute top-[172px] right-[60px] h-[80%]">
-      <div className="flex row-span-full col-start-2 mt-[3.25rem] sticky top-16" style={{ height }}>
+    <div className="absolute top-0 right-[60px] h-full">
+      <div
+        className="flex row-span-full col-start-2 mt-[3.25rem] mb-8 sticky top-20"
+        style={{ height }}
+      >
         <CurvedVerticalNode grow={false} />
         <div className="pt-[0.6875rem] pl-1.5">
           <Link href={getPath(rootTab)} className="text-neutral-800 hover:text-main-orange">
-            <h3 className="inline font-semibold text-[16px] whitespace-nowrap">
-              {t(rootTab.name)}
-            </h3>
+            <h3 className="inline font-semibold text-base whitespace-nowrap">{t(rootTab.name)}</h3>
           </Link>
           <ul className="mt-4">
             {subTabs.map((tab) => (
@@ -52,7 +53,7 @@ function SubTab({ tab, isCurrent }: { tab: SegmentNode; isCurrent: boolean }) {
 
   return (
     <li
-      className={`w-fit text-[13px] mb-3.5 ${
+      className={`w-fit text-sm mb-3.5 ${
         isCurrent ? 'font-bold text-main-orange tracking-wider' : 'text-neutral-700'
       }`}
       style={{ marginLeft }}

diff --git a/components/main/MainPageContent.tsx b/components/main/MainPageContent.tsx
@@ -9,6 +9,7 @@ import { MainContents } from '@/types/main';
 import ImportantPosts from './ImportantPosts';
 import Notices from './Notices';
 import SlideScreen from './SlideScreen';
+import Header from '../layout/header/Header';
 
 interface MainPageContentProps {
   data: MainContents;
@@ -20,6 +21,7 @@ export default function MainPageContent({ data }: MainPageContentProps) {
   return (
     <>
       <div ref={ref}>
+        <Header />
         <SlideScreen slides={data.slides} />
         <div className="flex justify-between mt-[60px]">
           <ImportantPosts posts={data.importants} />

diff --git a/components/research/groups/ResearchGroupDetails.tsx b/components/research/groups/ResearchGroupDetails.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image';
 
-import SelectionTitle from '@/components/common/selection/SelectionTitle';
 import HTMLViewer from '@/components/editor/HTMLViewer';
 
 import { ResearchGroup } from '@/types/research';
@@ -16,9 +15,9 @@ export default function ResearchGroupDetails({ group }: ResearchGroupDetailProps
     <div className="bg-[#fafafa] pl-[100px] pr-[350px] pt-[50px] pb-[100px]">
       <h2 className="font-bold text-[24px] leading-loose mb-[18px]">{group.name} 연구 그룹</h2>
       <div className="bg-white p-[40px] w-[780px]">
-        <HTMLViewer htmlContent={group.description} margin="mb-9 ml-2.5" />
+        <HTMLViewer htmlContent={group.description} />
       </div>
-      <div className="relative h-[200px] mt-[24px]">
+      <div className="relative h-[200px] mt-6">
         <Image
           src={group.imageURL}
           alt={`${group.name}_연구그룹_사진`}

diff --git a/components/research/groups/ResearchGroupsPageContent.tsx b/components/research/groups/ResearchGroupsPageContent.tsx
@@ -50,7 +50,3 @@ export default function ResearchGroupsPageContent({ groups }: ResearchGroupsPage
     </PageLayout>
   );
 }
-
-function ResearchDescription({ description }: { description: string }) {
-  return <p className="mb-[3.25rem] text-sm tracking-wide leading-[1.625rem]">{description}</p>;
-}