Merge pull request #62 from LIKELION-SOGANG/feature/imporved-header#61

헤더 사용선 개선 및 페이지 이동 시 전환 효과 추가

Author: rmdnps10

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @rmdnps10 @shu07002 @chlqhgus @Kimbyul88 @minwoooya @seoooa

package-lock.json

@@ -41,6 +41,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "framer-motion": "^11.11.8",
     "husky": "^8.0.0",
     "postcss": "^8",
     "prettier": "^3.3.3",

package.json

@@ -1,51 +1,51 @@
 'use client'
-import { HEADER, MOBILE_MENU_LIST } from '@/style/zIndex'
-import Image from 'next/image'
 import Link from 'next/link'
-import React, { useState, useEffect } from 'react'
-import { useLockBodyScroll } from 'react-use'
-
+import Image from 'next/image'
+import { HEADER, MOBILE_MENU_LIST } from '@/style/zIndex'
+import useScrollDirection from '@/hooks/useScrollDirection'
+import useMobileMenu from '@/hooks/useMobileMenu'
+import { usePathname } from 'next/navigation'
+import { AnimatePresence } from 'framer-motion'
+import Loading from './Loading'
+import useLoadingProgress from '@/hooks/useLoadingProgress'
 //
 //
 //
-
 export default function Header() {
-  const [isShowHeader, setIsShowHeader] = useState(true)
-  const [lastScrollY, setLastScrollY] = useState(0)
-  const [isShowMobileMenu, setIsShowMobileMenu] = useState(false)
-  useLockBodyScroll(isShowMobileMenu)
+  const pathname = usePathname()
+  const isShowHeader = useScrollDirection()
+  const { isShowMobileMenu, showMobileMenu, hideMobileMenu } = useMobileMenu()
+  const { isLoading, loadingProgress, startLoading, setLoadingSpeed } =
+    useLoadingProgress(pathname)
 
-  const handleMobileHamburgerClick = () => {
-    setIsShowMobileMenu(true)
+  const handleMobileLinkClick = () => {
+    hideMobileMenu()
+    startLoading()
+    setLoadingSpeed(5)
   }
 
-  const handleMobileCloseMenuClick = () => {
-    setIsShowMobileMenu(false)
+  const handleLinkClick = () => {
+    startLoading()
+    setLoadingSpeed(5)
   }
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (typeof window !== 'undefined') {
-        const currentScrollY = window.scrollY
-        if (currentScrollY > lastScrollY) {
-          setIsShowHeader(false)
-        } else {
-          setIsShowHeader(true)
-        }
-        setLastScrollY(currentScrollY)
-      }
-    }
+  const getLinkClass = (path: string) => {
+    return pathname === path
+      ? 'font-pp italic text-HeaderPC px-[0.3rem] relative after:content-[""] after:absolute after:left-0 after:bottom-0 after:h-[2px] after:bg-white after:w-full'
+      : 'font-pp font-light italic text-HeaderPC px-[0.3rem] relative after:content-[""] after:absolute after:left-1/2 after:bottom-0 after:h-[2px] after:bg-white after:w-0 hover:after:w-full hover:after:left-0 after:transition-all after:duration-300'
+  }
 
-    if (typeof window !== 'undefined') {
-      window.addEventListener('scroll', handleScroll)
-      return () => {
-        window.removeEventListener('scroll', handleScroll)
-      }
-    }
-  }, [lastScrollY])
+  const getMobileLinkClass = (path: string) => {
+    return pathname === path
+      ? 'px-[3rem] py-[1.1rem] block border-b border-white underline'
+      : 'px-[3rem] py-[1.1rem] block border-b border-white'
+  }
 
   return (
     <>
+      <AnimatePresence>
+        {isLoading && <Loading loadingProgress={loadingProgress} />}
+      </AnimatePresence>
       <header
         className={`text-white mix-blend-difference w-full flex fixed top-0 p-[2.5rem] transition-transform duration-500 ${
           isShowHeader ? 'translate-y-0' : '-translate-y-full'
@@ -60,35 +60,40 @@ export default function Header() {
         <nav className="ml-auto hidden tablet:flex gap-[1.5rem]">
           <Link
             href={'/about'}
-            className="font-pp italic text-HeaderPC p-[0.5rem]">
+            onClick={handleLinkClick}
+            className={getLinkClass('/about')}>
             About
           </Link>
           <Link
             href={'/project'}
-            className="font-pp italic text-HeaderPC p-[0.5rem]">
+            onClick={handleLinkClick}
+            className={getLinkClass('/project')}>
             Project
           </Link>
           <Link
             href={'/people'}
-            className="font-pp italic text-HeaderPC p-[0.5rem]">
+            onClick={handleLinkClick}
+            className={getLinkClass('/people')}>
             People
           </Link>
           <Link
             href={'/recruit'}
-            className="font-pp italic text-HeaderPC p-[0.5rem]">
+            onClick={handleLinkClick}
+            className={getLinkClass('/recruit')}>
             Recruit
           </Link>
           <Link
             href={'/contact'}
-            className="font-pp italic text-HeaderPC p-[0.5rem]">
+            onClick={handleLinkClick}
+            className={getLinkClass('/contact')}>
             Contact
           </Link>
         </nav>
         {/* 모바일 */}
         {/* 햄버거 버튼 */}
         <button
           className="block ml-auto tablet:hidden py-[1rem] pl-[1rem] "
-          onClick={handleMobileHamburgerClick}>
+          onClick={showMobileMenu}>
           <Image
             src={'/icon/button/hamburger-white.svg'}
             width={20}
@@ -104,7 +109,7 @@ export default function Header() {
         }`}
         style={{ zIndex: MOBILE_MENU_LIST }}>
         <button
-          onClick={handleMobileCloseMenuClick}
+          onClick={hideMobileMenu}
           className="absolute top-[2rem] right-[1.5rem] p-[1rem]">
           <Image
             src={'/icon/button/closeX-white.svg'}
@@ -114,45 +119,35 @@ export default function Header() {
           />
         </button>
         <nav>
-          <ul className="font-pp text-[3.2rem] font-[300]">
+          <ul className="font-pp text-[3.2rem] font-[300] text-white">
             <Link
               href="/about"
-              onClick={() => {
-                setIsShowMobileMenu(false)
-              }}
-              className="px-[3rem] py-[1.1rem] block border-b border-white">
+              onClick={handleMobileLinkClick}
+              className={getMobileLinkClass('/about')}>
               About
             </Link>
             <Link
               href="/people"
-              onClick={() => {
-                setIsShowMobileMenu(false)
-              }}
-              className="px-[3rem] py-[1.1rem] block border-b border-white">
+              onClick={handleMobileLinkClick}
+              className={getMobileLinkClass('/people')}>
               People
             </Link>
             <Link
-              href="/project "
-              onClick={() => {
-                setIsShowMobileMenu(false)
-              }}
-              className="px-[3rem] py-[1.1rem] block border-b border-white">
+              href="/project"
+              onClick={handleMobileLinkClick}
+              className={getMobileLinkClass('/project')}>
               Project
             </Link>
             <Link
               href="/recruit"
-              onClick={() => {
-                setIsShowMobileMenu(false)
-              }}
-              className="px-[3rem] py-[1.1rem] block border-b border-white">
+              onClick={handleMobileLinkClick}
+              className={getMobileLinkClass('/recruit')}>
               Recruit
             </Link>
             <Link
               href="/contact"
-              onClick={() => {
-                setIsShowMobileMenu(false)
-              }}
-              className="px-[3rem] py-[1.1rem] block border-b border-white">
+              onClick={handleMobileLinkClick}
+              className={getMobileLinkClass('/contact')}>
               Contact
             </Link>
           </ul>

src/app/component/Header.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+export default function Loading({
+  loadingProgress
+}: {
+  loadingProgress: number
+}) {
+  const progressNormalized = loadingProgress / 100
+  const backgroundColor = `rgb(${255 * progressNormalized}, ${255 * progressNormalized}, ${255 * progressNormalized})`
+
+  return (
+    <motion.div
+      animate={{ y: '0vh' }}
+      exit={{ y: '100vh' }}
+      transition={{ duration: 0.5 }}
+      style={{ backgroundColor }}
+      className="fixed top-0 left-0 w-screen h-screen flex justify-end items-center pr-[10vw] text-white font-pp font-light text-[8vw] z-[9000]">
+      <h1 className="mix-blend-difference">{loadingProgress}%</h1>
+    </motion.div>
+  )
+}

src/app/component/Loading.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+//
+//
+//
+const useLoadingProgress = (pathname: string) => {
+  const [isLoading, setIsLoading] = useState(true)
+  const [loadingSpeed, setLoadingSpeed] = useState(10)
+  const [loadingProgress, setLoadingProgress] = useState(0)
+
+  const startLoading = () => {
+    setIsLoading(true)
+  }
+
+  useEffect(() => {
+    if (isLoading && loadingProgress < 100) {
+      const timer = setTimeout(() => {
+        setLoadingProgress(prev => Math.min(prev + 1, 100))
+      }, loadingSpeed)
+      return () => clearTimeout(timer)
+    } else if (loadingProgress === 100) {
+      setTimeout(() => {
+        setIsLoading(false)
+        setLoadingProgress(0)
+      }, 400)
+    }
+  }, [isLoading, loadingProgress, loadingSpeed])
+
+  return {
+    isLoading,
+    loadingProgress,
+    setLoadingSpeed,
+    startLoading
+  }
+}
+
+export default useLoadingProgress

src/hooks/.gitkeep

@@ -0,0 +1,26 @@
+'use client'
+import { useState } from 'react'
+import { useLockBodyScroll } from 'react-use'
+//
+//
+//
+const useMobileMenu = () => {
+  const [isShowMobileMenu, setIsShowMobileMenu] = useState(false)
+  useLockBodyScroll(isShowMobileMenu)
+
+  const showMobileMenu = () => {
+    setIsShowMobileMenu(true)
+  }
+
+  const hideMobileMenu = () => {
+    setIsShowMobileMenu(false)
+  }
+
+  return {
+    isShowMobileMenu,
+    showMobileMenu,
+    hideMobileMenu
+  }
+}
+
+export default useMobileMenu

src/hooks/useLoadingProgress.ts

@@ -0,0 +1,29 @@
+'use client'
+import { useState, useEffect } from 'react'
+//
+//
+//
+const useScrollDirection = () => {
+  const [isShowHeader, setIsShowHeader] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      if (currentScrollY > lastScrollY) {
+        setIsShowHeader(false)
+      } else {
+        setIsShowHeader(true)
+      }
+      setLastScrollY(currentScrollY)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [lastScrollY])
+
+  return isShowHeader
+}
+
+export default useScrollDirection

src/hooks/useMobileMenu.ts

@@ -1,4 +1,3 @@
-import { HEADER, MOBILE_MENU_LIST } from '@/style/zIndex'
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
@@ -72,6 +71,7 @@ const config: Config = {
       }
     }
   },
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   plugins: [require('tailwind-scrollbar-hide')]
 }