[25.02.19 / TASK-98] Refactor - 페이지 로딩 효과 추가 (#25)

* modify: 페이지 이동 시 로딩 바 표시 기능 추가

* modify: 호버 관련 오류 수정

* modify: 오탈자 수정

* refactor: 코드 정리

* refactor: useCallback 적용

* fix: 패키지 정리

* feature: husky 추가

* modify: 코드래빗 의견 반영

* modify: 코드래빗 의견 반영

* modify: ReadME 최신화

Author: six-standard

.eslintignore

@@ -0,0 +1,10 @@
+.next
+next-env.d.ts
+pnpm-lock.yaml
+public
+next.config.js
+readme.md
+Dockerfile
+.vscode
+.swc
+.github

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.prettierrc

@@ -4,7 +4,7 @@
   "trailingComma": "all",
   "useTabs": false,
   "tabWidth": 2,
-  "printWidth": 80,
+  "printWidth": 100,
   "arrowParens": "always",
   "bracketSpacing": true,
   "proseWrap": "preserve"

eslint.config.mjs

@@ -1,4 +1,3 @@
-import globals from 'globals';
 import pluginJs from '@eslint/js';
 import { configs as tseslint } from 'typescript-eslint';
 import pluginReact from 'eslint-plugin-react';
@@ -34,10 +33,8 @@ export default [
   pluginImport.flatConfigs.recommended,
   {
     rules: {
-      'import/order': [
-        'error',
-        { groups: ['builtin', 'external', 'internal'] },
-      ],
+      'prettier/prettier': ['error', { printWidth: 100 }],
+      'import/order': ['error', { groups: ['builtin', 'external', 'internal'] }],
       'testing-library/no-container': 'warn',
       'testing-library/no-node-access': 'warn',
       'react/react-in-jsx-scope': 'off',

package.json

@@ -2,6 +2,12 @@
   "name": "velog-dashboard-v2-fe",
   "version": "0.1.0",
   "private": true,
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "next lint",
+      "prettier --check"
+    ]
+  },
   "scripts": {
     "dev": "next dev --port 3000",
     "build": "next build",
@@ -10,20 +16,19 @@
     "lint": "next lint",
     "lintTest": "eslint ./src/__test__",
     "format": "prettier --check --ignore-path .gitignore --ignore-path pnpm-lock.yaml .",
-    "test": "jest"
+    "test": "jest",
+    "prepare": "husky"
   },
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@next/third-parties": "^15.1.7",
     "@sentry/core": "^8.47.0",
     "@sentry/nextjs": "^8.47.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/react-query": "^5.61.3",
-    "@tanstack/react-query-devtools": "^5.62.11",
+    "@tanstack/react-query": "^5.69.0",
+    "@tanstack/react-query-devtools": "^5.69.0",
     "chart.js": "^4.4.7",
-    "jest-fixed-jsdom": "^0.0.9",
     "js-cookie": "^3.0.5",
-    "msw": "^2.7.0",
     "next": "14.2.18",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
@@ -58,9 +63,13 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-testing-library": "^6.5.0",
     "globals": "^15.12.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
+    "jest-fixed-jsdom": "^0.0.9",
+    "lint-staged": "^15.5.0",
+    "msw": "^2.7.3",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1",

pnpm-lock.yaml

@@ -7,7 +7,7 @@
 - `git clone https://github.com/Check-Data-Out/velog-dashboard-v2-fe.git`
 - `cd velog-dashboard-v2-fe`
 - `pnpm install`
-- `NODE_ENV=development pnpm install`
+- `pnpm prepare` (husky 설정)
 - `pnpm dev`
 
 ## 린팅

readme.md

@@ -1,7 +1,7 @@
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Icon, NameType } from '@/components';
 import { COLORS } from '@/constants';
+import { useCustomNavigation } from '@/hooks';
 
 export const defaultStyle =
   'w-[180px] h-[65px] px-9 transition-all duration-300 shrink-0 max-MBI:w-[65px] max-MBI:px-0 ';
@@ -40,13 +40,13 @@ export const Section = <T extends clickType>({
   icon,
 }: PropType<T>) => {
   const currentPath = usePathname();
+  const { push } = useCustomNavigation();
 
   if (clickType === 'link') {
     return (
-      <Link
-        href={action}
+      <div
+        onClick={() => push(action)}
         className={defaultStyle + navigateStyle}
-        id="navigation"
       >
         <Icon
           size={25}
@@ -64,7 +64,7 @@ export const Section = <T extends clickType>({
         >
           {children}
         </span>
-      </Link>
+      </div>
     );
   }
 

src/app/(auth-required)/components/header/Section.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { revalidate } from '@/utils/revalidateUtil';
 import { PATHS, SCREENS } from '@/constants';
 import { NameType } from '@/components';
-import { useResponsive } from '@/hooks';
+import { useCustomNavigation, useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
 import { useModal } from '@/hooks/useModal';
 import { defaultStyle, Section, textStyle } from './Section';
@@ -33,7 +33,7 @@ export const Header = () => {
   const { open: ModalOpen } = useModal();
   const menu = useRef<HTMLDivElement | null>(null);
   const path = usePathname();
-  const router = useRouter();
+  const { replace } = useCustomNavigation();
   const width = useResponsive();
   const barWidth = width < SCREENS.MBI ? 65 : 180;
   const client = useQueryClient();
@@ -43,7 +43,7 @@ export const Header = () => {
     onSuccess: async () => {
       await revalidate();
       client.clear();
-      router.replace('/');
+      replace('/');
     },
   });
 
@@ -71,7 +71,7 @@ export const Header = () => {
       <div className="flex w-fit">
         <Section
           clickType="function"
-          action={() => router.replace(`/main${PARAMS.MAIN}`)}
+          action={() => replace(`/main${PARAMS.MAIN}`)}
         >
           <Image
             width={35}
@@ -121,7 +121,7 @@ export const Header = () => {
               <div className="w-0 h-0 border-[15px] ml-3 mr-3 border-TRANSPARENT border-b-BG-SUB" />
               <div className="cursor-pointer h-fit flex-col rounded-[4px] bg-BG-SUB shadow-BORDER-MAIN shadow-md">
                 <button
-                  className="text-DESTRUCTIVE-SUB text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-auto"
+                  className="text-DESTRUCTIVE-SUB text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-auto hover:bg-BG-ALT"
                   onClick={() => out()}
                 >
                   로그아웃

src/app/(auth-required)/components/header/index.tsx

@@ -3,12 +3,12 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { useSearchParam } from '@/hooks/useSearchParam';
 import { Button, Dropdown, Check } from '@/components';
-import { Section, Summary } from './components';
 import { postList, postSummary } from '@/apis';
 import { PATHS, SORT_TYPE } from '@/constants';
-import { useSearchParam } from '@/hooks/useSearchParam';
 import { SortKey, SortValue } from '@/types';
+import { Section, Summary } from './components';
 
 const sorts: Array<[SortKey, SortValue]> = Object.entries(SORT_TYPE) as Array<
   [SortKey, SortValue]

src/app/(auth-required)/main/Content.tsx

@@ -1,18 +1,18 @@
 'use client';
 
 import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import Image from 'next/image';
 import { Input, Button } from '@/components';
 import { login, sampleLogin } from '@/apis';
 import { LoginVo } from '@/types';
+import { useCustomNavigation } from '@/hooks';
 
 const responsiveStyle =
   "flex items-center gap-5 max-MBI:before:inline-block max-MBI:before:bg-[url('/favicon.png')] max-MBI:before:[background-size:_100%_100%] max-MBI:before:w-16 max-MBI:before:h-16";
 
 export const Content = () => {
-  const { replace } = useRouter();
+  const { replace, start, complete } = useCustomNavigation();
 
   const {
     register,
@@ -27,17 +27,22 @@ export const Content = () => {
   const { mutate } = useMutation({
     mutationFn: login,
     onSuccess,
+    onError: complete,
   });
 
   const { mutate: sampleMutate } = useMutation({
     mutationFn: sampleLogin,
     onSuccess,
+    onError: complete,
   });
 
   return (
     <main className="w-full h-full flex justify-center MBI:items-center max-MBI:p-[30px_25px]">
       <form
-        onSubmit={handleSubmit((data: LoginVo) => mutate(data))}
+        onSubmit={handleSubmit((data: LoginVo) => {
+          start();
+          mutate(data);
+        })}
         className="h-[480px] flex bg-BG-SUB rounded-[4px] max-MBI:bg-BG-MAIN max-MBI:h-fit max-MBI:w-full"
       >
         <div className="w-[220px] h-full bg-BG-ALT flex items-center justify-center max-MBI:hidden ">
@@ -77,7 +82,10 @@ export const Content = () => {
           </Button>
           <span
             className="text-TEXT-ALT text-I2 max-MBI:text-ST5 after:cursor-pointer after:hover:underline after:ml-2 after:content-['체험_계정으로_로그인'] after:text-PRIMARY-MAIN after:inline-block"
-            onClick={() => sampleMutate()}
+            onClick={() => {
+              start();
+              sampleMutate();
+            }}
           >
             서비스를 체험해보고 싶다면?
           </span>

src/app/(login)/Content.tsx

@@ -12,6 +12,7 @@ import {
   ModalProvider,
 } from '@/components';
 import { env } from '@/constants';
+import { TopBarProvider } from '@/components/Providers/TopBarProvider';
 
 export const BASE = 'https://velog-dashboard.kro.kr/';
 
@@ -44,6 +45,7 @@ export default function RootLayout({
             <ChannelTalkProvider>
               <ToastContainer autoClose={2000} />
               <ModalProvider />
+              <TopBarProvider />
               <Suspense>{children}</Suspense>
             </ChannelTalkProvider>
           </QueryProvider>

src/app/layout.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCustomNavigation } from '@/hooks';
+import { COLORS } from '@/constants';
+
+const START_TIME_MS = 150;
+const REMOVE_BAR_TIME_MS = 400;
+const INCREASE_INTERVAL_MS = 300;
+const INCREASE_LEVEL = [0.6, 0.3, 0.1];
+
+export const TopBarProvider = () => {
+  const { isNavigating } = useCustomNavigation();
+
+  const [width, setWidth] = useState(0);
+  const initialLoadDone = useRef(false);
+  const intervalRef = useRef<null | NodeJS.Timeout>(null);
+
+  const startLoading = useCallback(() => {
+    setWidth(20);
+    initialLoadDone.current = true;
+
+    intervalRef.current = setInterval(() => {
+      setWidth((prev) => prev + Math.random() * INCREASE_LEVEL[Math.floor(prev / 30)]);
+    }, INCREASE_INTERVAL_MS);
+  }, []);
+
+  useEffect(() => {
+    if (isNavigating) {
+      initialLoadDone.current = false;
+      setWidth(0);
+
+      const initialTimer = setTimeout(startLoading, START_TIME_MS);
+
+      return () => {
+        clearTimeout(initialTimer);
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    } else if (initialLoadDone.current) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+
+      setWidth(100);
+      const hideTimer = setTimeout(() => setWidth(0), REMOVE_BAR_TIME_MS);
+
+      return () => clearTimeout(hideTimer);
+    }
+  }, [isNavigating]);
+
+  return (
+    <div className="fixed top-0 left-0 z-50 w-full h-1">
+      <div
+        className={`h-full transition-all bg-PRIMARY-MAIN shadow-[0_0_3px_${COLORS.PRIMARY.SUB}] duration-300 ease-out`}
+        style={{ width: `${width}%` }}
+      />
+    </div>
+  );
+};

src/components/Providers/TopBarProvider.tsx

@@ -1,3 +1,4 @@
 export * from './ChannelTalkProvider';
+export * from './TopBarProvider';
 export * from './QueryProvider';
 export * from './ModalProvider';

src/components/Providers/index.ts

@@ -1,2 +1,4 @@
+export * from './useCustomNavigation';
 export * from './useSearchParam';
 export * from './useResponsive';
+export * from './useModal';

src/hooks/index.ts

@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+import { usePathname, useRouter } from 'next/navigation';
+import { useCallback, useEffect, useRef } from 'react';
+
+type NavStatusStore = {
+  isNavigating: boolean;
+  flip: () => void;
+  start: () => void;
+  complete: () => void;
+};
+
+const useNavStatus = create<NavStatusStore>((set) => ({
+  isNavigating: false,
+  flip: () => set(({ isNavigating }) => ({ isNavigating: !isNavigating })),
+  start: () => set({ isNavigating: true }),
+  complete: () => set({ isNavigating: false }),
+}));
+
+export const useCustomNavigation = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const prevPathRef = useRef(pathname);
+  const { isNavigating, start, complete } = useNavStatus();
+
+  const replace = useCallback(
+    (target: string) => {
+      router.replace(target);
+      start();
+    },
+    [router],
+  );
+
+  const push = useCallback(
+    (target: string) => {
+      router.push(target);
+      start();
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    // 페이지 이동 완료 감지
+    if (prevPathRef.current !== pathname) {
+      prevPathRef.current = pathname;
+      complete();
+    }
+  }, [pathname]);
+
+  return { isNavigating, start, push, complete, replace };
+};