📱 헤더/푸터/대분류 페이지 반응형 추가 (#141)

* feat: 헤더 반응형 * feat: 푸터 탑 반응형 * feat: 푸터 바텀 반응형 * feat: 대분류 페이지 반응형 일부 * feat: 대분류 페이지 반응형 * fix: 2차원 분류 초깃값과 간격 조정 * fix: 푸터 글씨크기 변경 * feat: 헤더에 내비 버튼 추가 * fix: 버튼 모바일뷰에서만 보이도록 수정
wafflestudio · Mar 1, 2024 · 5e55315 · 5e55315
1 parent c0bd4b5
commit 5e55315
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 38 deletions.
diff --git a/app/[locale]/community/page.tsx b/app/[locale]/community/page.tsx
@@ -1,9 +1,5 @@
-import { getCommunityDescription } from '@/apis/community';
-
 import MajorCategoryPageLayout from '@/components/layout/pageLayout/MajorCategoryPageLayout';
 
 export default async function CommunityPage() {
-  const description = await getCommunityDescription();
-
-  return <MajorCategoryPageLayout subtitle="Communicate with CSE" description={description} />;
+  return <MajorCategoryPageLayout subtitle="Communicate with CSE" />;
 }
diff --git a/app/[locale]/content.tsx b/app/[locale]/content.tsx
@@ -10,7 +10,7 @@ import { main } from '@/types/page';
 
 export default function Content({ children }: PropsWithChildren) {
   const node = useCurrentSegmentNode();
-  const ml = node === main ? `ml-[11rem]` : 'ml-[6.25rem]';
+  const ml = node === main ? `sm:ml-[11rem]` : 'sm:ml-[6.25rem]';
 
   return (
     <div className={`flex flex-col flex-1 ${ml}`}>

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -38,7 +38,7 @@ export default async function RootLayout({
   return (
     <html lang={params.locale}>
       <body className="text-neutral-800 font-normal bg-white min-w-fit flex">
-        <div className="flex flex-1 flex-col min-w-[1000px]">
+        <div className="flex flex-1 flex-col sm:min-w-[1000px]">
           <div className="flex grow h-[calc(100vh-5rem)]">
             <ContextProviders locale={params.locale}>
               <Navbar />

diff --git a/components/common/ImageWithFallback.tsx b/components/common/ImageWithFallback.tsx
@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import SnuLogo from '@/public/image/SNU_Logo.svg';
 
 export default function ImageWithFallback(props: ImageWithFallbackProps) {
-  const { src, ...rest } = props;
+  const { ...rest } = props;
   const [error, setError] = useState(false);
 
   if (error || !props.src) {
@@ -17,7 +17,7 @@ export default function ImageWithFallback(props: ImageWithFallbackProps) {
         }`}
         style={{ width: props.width, height: props.height }}
       >
-        <SnuLogo className="fill-neutral-300" />
+        <SnuLogo className="fill-neutral-300" width="45" height="47" />
       </div>
     );
   }

diff --git a/components/layout/footer/Footer.tsx b/components/layout/footer/Footer.tsx
@@ -30,19 +30,23 @@ import useFooterDesignMode, { FooterMode } from './useFooterDesignMode';
 export default function Footer() {
   const mode = useFooterDesignMode();
 
-  const topBg = mode === 'light' ? 'bg-neutral-50' : 'bg-neutral-900';
+  const topBg = mode === 'light' ? 'bg-neutral-50' : 'bg-[#262728] sm:bg-neutral-900';
   const bottomBg = mode === 'light' ? 'bg-neutral-100' : 'bg-[rgb(30,30,30)]';
   const borderTop = mode === 'light' ? 'border-neutral-100' : 'border-neutral-800';
 
   return (
     <footer className={`border-t-2 ${borderTop}`}>
-      <div className={`${topBg} px-[3.75rem] py-10 flex`}>
+      <div
+        className={`${topBg} px-6 py-9 sm:px-[3.75rem] sm:py-10 grid gap-y-8 grid-cols-[repeat(auto-fill,_minmax(110px,_auto))] sm:flex`}
+      >
         <LinkGroup groupName="About" links={aboutLinks} width="w-[7.5rem]" mode={mode} />
         <LinkGroup groupName="Resources" links={resourcesLinks} width="w-[8.25rem]" mode={mode} />
         <LinkGroup groupName="Research" links={researchLinks} width="w-[9rem]" mode={mode} />
         <LinkGroup groupName="More" links={moreLinks} width="w-[8rem]" mode={mode} />
       </div>
-      <div className={`${bottomBg} px-[3.75rem] py-8 flex justify-between items-center`}>
+      <div
+        className={`${bottomBg} py-[30px] px-5 sm:px-[3.75rem] sm:py-8 flex flex-col sm:flex-row justify-between sm:items-center`}
+      >
         <FooterBottomLeft />
         <FooterBottomRight />
       </div>
@@ -60,15 +64,17 @@ type LinkGroupProps = {
 function LinkGroup({ groupName, links, width, mode }: LinkGroupProps) {
   const t = useTranslations('Footer');
 
-  const titleColor = mode === 'light' ? 'text-neutral-600' : 'text-white';
+  const titleColor = mode === 'light' ? 'text-neutral-600' : 'text-neutral-200 sm:text-white';
 
   return (
     <section className={width}>
-      <h3 className={`${titleColor} text-[0.9375rem] font-medium mb-[.44rem] tracking-[0.025rem]`}>
+      <h3
+        className={`${titleColor} text-sm sm:text-[0.9375rem] font-medium mb-[.44rem] tracking-[0.025rem]`}
+      >
         {t(groupName)}
       </h3>
 
-      <ul className="text-neutral-500 text-sm font-normal flex flex-col gap-[0.63rem]">
+      <ul className="text-neutral-300 font-light sm:text-neutral-500 text-sm sm:font-normal flex flex-col gap-[0.63rem]">
         {links.map((link, i) => (
           <li key={i}>
             <Link href={link.href}>{t(link.title)}</Link>
@@ -84,8 +90,8 @@ function FooterBottomLeft() {
   const t = useTranslations('Footer');
 
   return (
-    <div className="text-neutral-500 text-sm">
-      <div className="flex [&>a]:font-bold gap-[1ch]">
+    <div className="text-neutral-500 text-xs sm:text-sm">
+      <div className="flex [&>a]:font-bold gap-[1ch] mb-2.5 sm:mb-0 ">
         <Link href={privacyPath}>{t('개인정보처리방침')}</Link>
         <span>|</span>
         <Link href={contactPath}>{t('학부 연락처')}</Link>
@@ -104,15 +110,16 @@ function FooterBottomLeft() {
           CSEREAL
         </span>
         <br />
-        Copyright © Department of CSE, SNU. All Rights Reserved.
+        <span className="whitespace-nowrap">© Department of CSE, SNU.</span>
+        <span className="whitespace-nowrap"> All Rights Reserved.</span>
       </p>
     </div>
   );
 }
 
 function FooterBottomRight() {
   return (
-    <div className="flex items-center gap-7">
+    <div className="flex items-center gap-7 mt-7 sm:mt-0">
       <Link href={snucomLink}>
         <SnucomIcon />
       </Link>

diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
@@ -1,11 +1,16 @@
 'use-client';
 
 import { useTranslations } from 'next-intl';
+import { useReducer } from 'react';
 
 import { BASE_URL } from '@/apis';
 import { useSessionContext } from '@/contexts/SessionContext';
 import { Link } from '@/navigation';
 import HeaderLogo from '@/public/image/header/header_logo.svg';
+import HeaderSubText from '@/public/image/header/header_sub_text.svg';
+import HeaderText from '@/public/image/header/header_text.svg';
+import Menu from '@/public/image/header/menu.svg';
+import SNULogo from '@/public/image/SNU_Logo.svg';
 
 import useLanguage from '@/hooks/useLanguage';
 
@@ -16,13 +21,30 @@ const LOGOUT_URL = BASE_URL + '/logout';
 
 export default function Header() {
   const goToMainPage = () => (window.location.href = '/');
+  const [isNavOpen, toggleNav] = useReducer((x) => !x, false);
 
   return (
-    <header className={`px-[3.75rem] pt-12 pb-[2.44rem] flex justify-between`}>
+    <header
+      className={`h-[68px] px-5 sm:h-auto sm:px-[3.75rem] sm:pt-12 sm:pb-[2.44rem] items-center flex justify-between`}
+    >
       <div onClick={goToMainPage} className="cursor-pointer">
-        <HeaderLogo />
+        <HeaderLogo className="hidden sm:block" />
+        <div className="sm:hidden flex gap-4 items-center">
+          <SNULogo className="fill-white" width="34" height="35" />
+          <div className="flex flex-col gap-1">
+            <HeaderText />
+            <HeaderSubText />
+          </div>
+        </div>
       </div>
       <HeaderRight />
+      <button onClick={toggleNav} className="sm:hidden flex justify-center items-center">
+        {isNavOpen ? (
+          <span className="material-symbols-outlined text-white font-light">close</span>
+        ) : (
+          <Menu className="cursor-pointer" />
+        )}
+      </button>
     </header>
   );
 }
@@ -36,7 +58,7 @@ function HeaderRight() {
   const langButtonText = isEnglish ? '한국어' : 'ENG';
 
   return (
-    <div className="flex flex-col justify-between gap-[0.94rem] items-end">
+    <div className="hidden sm:flex flex-col justify-between gap-[0.94rem] items-end">
       <div className="font-yoon text-xs font-normal flex items-center gap-3 text-white">
         {user?.isStaff && (
           <>

diff --git a/components/layout/navbar/Navbar.tsx b/components/layout/navbar/Navbar.tsx
@@ -19,7 +19,7 @@ export default function Navbar() {
   };
 
   return (
-    <div className={`absolute top-0 bottom-0 flex z-50`} onMouseLeave={handleMouseLeave}>
+    <div className={`hidden absolute top-0 bottom-0 sm:flex z-50`} onMouseLeave={handleMouseLeave}>
       <NavbarRoot state={navbarState} setState={setNavbarState} />
       {navbarState.type === 'hovered' && <NavbarDetail segmentNode={navbarState.segmentNode} />}
     </div>

diff --git a/components/layout/pageLayout/MajorCategoryPageLayout.tsx b/components/layout/pageLayout/MajorCategoryPageLayout.tsx
@@ -29,23 +29,34 @@ export default function MajorCategoryPageLayout({
   const t = useTranslations('Nav');
   const currentPage = useCurrentSegmentNode();
   title ||= t(currentPage.name);
-  const [selectedCategory, setSelectedCategory] = useState(
-    twoDimensional ? currentPage.children?.[0] ?? null : null,
-  );
+  const initSelectedCategory = twoDimensional
+    ? currentPage.children!.find((seg) => !seg.isPage)
+    : null;
+  const [selectedCategory, setSelectedCategory] = useState(initSelectedCategory);
   const router = useRouter();
 
   return (
     <div className="bg-neutral-850">
       <Header />
-      <div className="max-w-[80rem] py-12 px-[6.25rem]">
-        <div className="text-neutral-500 text-[20px] font-light">{subtitle}</div>
-        <div className="text-white text-[64px] font-semibold tracking-wide">{title}</div>
+      <div className="max-w-[80rem] px-5 py-8 sm:pt-12 sm:pb-[4.5rem] sm:px-[6.25rem]">
+        <div className="text-neutral-500 text:sm sm:text-[20px] font-light mb-2">{subtitle}</div>
+        <div className="text-white text-[32px] sm:text-[64px] font-semibold tracking-wide">
+          {title}
+        </div>
         {description && (
-          <HTMLViewer htmlContent={description} style={{ color: '#f5f5f5' }} margin="mt-8 mb-6" />
+          <HTMLViewer
+            htmlContent={description}
+            style={{ color: '#f5f5f5' }}
+            margin="mt-8 mb-6 hidden sm:block"
+          />
         )}
       </div>
-      <div className="bg-neutral-900 pt-20  pb-[11.25rem] px-[6.25rem]">
-        <div className="grid gap-10 grid-cols-[repeat(auto-fill,_300px)] mb-10">
+      <div
+        className={`bg-neutral-900 px-5 pt-7 ${
+          !description && 'pb-16'
+        } sm:pt-20 sm:pb-[11.25rem] sm:px-[6.25rem]`}
+      >
+        <div className="grid gap-5 sm:gap-10 grid-cols-[repeat(2,_1fr)] sm:grid-cols-[repeat(auto-fill,_300px)] mb-5 sm:mb-10">
           {currentPage.children!.map((subpage, index) => (
             <RootItem
               key={index}
@@ -60,7 +71,7 @@ export default function MajorCategoryPageLayout({
           ))}
         </div>
         {selectedCategory && !selectedCategory.isPage && (
-          <div className="grid gap-10 grid-cols-[repeat(auto-fill,_300px)] mb-10">
+          <div className="grid gap-5 sm:gap-10 grid-cols-[repeat(2,_1fr)] sm:grid-cols-[repeat(auto-fill,_300px)] sm:mb-10">
             {selectedCategory.children!.map((subpage, index) => (
               <LeafItem
                 key={index}
@@ -72,6 +83,14 @@ export default function MajorCategoryPageLayout({
           </div>
         )}
       </div>
+      {description && (
+        <div className="sm:hidden px-5 pt-6 pb-24">
+          <HTMLViewer
+            htmlContent={description}
+            style={{ color: '#a3a3a3', fontWeight: 300, fontSize: 13 }}
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -89,18 +108,20 @@ function DetailItem({ title, hasArrow, bgColor, hoverColor, onClick }: DetailIte
   const hoverBgColor = hoverColor ? `hover:${hoverColor}` : 'hover:bg-main-orange-dark';
   return (
     <div
-      className={`w-[300px] h-[160px] ${bgColor} px-7 py-6 ${hoverBgColor} flex flex-col justify-between cursor-pointer`}
+      className={`h-[96px] sm:h-[160px] ${bgColor} px-[14px] py-[13px] sm:px-7 sm:py-6 ${hoverBgColor} flex flex-col justify-between cursor-pointer`}
       onClick={onClick}
     >
       <div>
-        <h3 className="text-neutral-800 text-[20px] font-medium mb-2.5">{title}</h3>
-        <p className="text-neutral-800">
+        <h3 className="text-neutral-800 text-md sm:text-[20px] font-medium mb-[2.5px] sm:mb-2.5">
+          {title}
+        </h3>
+        <p className="text-neutral-800 text-[11px] sm:text-base">
           {ENG_NAMES.Nav[title as keyof typeof ENG_NAMES.Nav] ?? ''}
         </p>
       </div>
       {hasArrow && (
         <div className="text-end">
-          <span className="material-symbols-outlined font-extralight text-[32px] text-neutral-800">
+          <span className="material-symbols-outlined font-extralight text-[18px] sm:text-[32px] text-neutral-800">
             arrow_forward
           </span>
         </div>

diff --git a/public/image/SNU_Logo.svg b/public/image/SNU_Logo.svg