Change location.href to router

taedonn · Nov 27, 2023 · 08712e2 · 08712e2 · vercel · Nov 27, 2023
1 parent 96a7de3
commit 08712e2
Show file tree

Hide file tree

Showing 35 changed files with 145 additions and 56 deletions.
diff --git a/src/components/fontbox.tsx b/src/components/fontbox.tsx
@@ -133,7 +133,7 @@ export default function FontBox ({license, lang, type, sort, user, like, filter,
     return (
         <>
             <div className='w-[100%] flex flex-col justify-start items-end'>
-                <div className="main-menu w-[100%] relative flex flex-wrap flex-row justify-between items-stretch pt-[16px] pb-[20px]">
+                <div className="main-menu w-[100%] relative flex flex-wrap flex-row justify-between items-stretch pt-[16px]">
 
                     {/* 로그인 중이 아닐 때 좋아요 alert창 팝업 */}
                     {
@@ -231,7 +231,7 @@ export default function FontBox ({license, lang, type, sort, user, like, filter,
                     <span className="w-[100%]" ref={ref}></span>
 
                     {/* 로딩 바 */}
-                    {hasNextPage ? <div className="w-[100%] pt-[20px] flex flex-row justify-center items-center"><span className="loader w-[36px] h-[36px]"></span></div> : null}
+                    {hasNextPage ? <div className="w-[100%] py-[20px] absolute left-0 bottom-[-76px] flex flex-row justify-center items-center"><span className="loader w-[36px] h-[36px]"></span></div> : null}
                 </div>
             </div>
         </>

diff --git a/src/components/fontsearch.tsx b/src/components/fontsearch.tsx
@@ -5,6 +5,7 @@ import { debounce } from "lodash";
 
 // next hooks
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 // hooks
 import axios from "axios";
@@ -23,6 +24,8 @@ export default function FontSearch(
         showBtn: any
     }
 ) {
+    const router = useRouter();
+
     // 검색 키워드 디폴트: 빈 문자열
     const [keyword, setKeyword] = useState<string>("");
 
@@ -74,7 +77,7 @@ export default function FontSearch(
             }
 
             // 엔터키 눌렀을 때 해당 페이지로 이동s
-            if (keys["Enter"] && activeRef.current) { location.href = activeRef.current.href; }
+            if (keys["Enter"] && activeRef.current) { router.push(activeRef.current.href); }
         }
         const handleKeyup = (e: KeyboardEvent) => {
             keys[e.key] = false;
@@ -152,6 +155,15 @@ export default function FontSearch(
         }
     }, [activeEl]);
 
+    // 라우팅 끝날 때 검색창 닫기
+    useEffect(() => {
+        const end = () => { closeBtn(); }
+        router.events.on("routeChangeComplete", end);
+        return () => {
+            router.events.off("routeChangeComplete", end);
+        }
+    }, [router, closeBtn]);
+
     return (
         <>
             {

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,10 +1,10 @@
 // next hooks
-import Link from "next/link"
+import Link from "next/link";
 
 export default function Footer () {
     return (
         <>
-            <footer className="w-[100%] h-[88px] tlg:h-[76px] tlg:px-[16px] absolute z-10 left-0 bottom-0 flex justify-center tlg:justify-start items-center border-t border-theme-7 dark:border-theme-4">
+            <footer className="w-[100%] h-[76px] tlg:px-[16px] absolute left-0 bottom-0 flex justify-center tlg:justify-start items-center border-t border-theme-7 dark:border-theme-4">
                 <div className="flex items-center text-theme-3 dark:text-theme-8">
                     <div className="flex items-center">
                         <Link href="/" aria-label="logo" className="w-[32px] tlg:w-[30px] h-[32px] tlg:h-[30px] mr-[12px] tlg:mr-[10px] flex flex-row justify-center items-center rounded-full bg-theme-3 dark:bg-theme-1/80">

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -284,9 +284,7 @@ export default function Header (
     }
 
     /** 로고 클릭 시 searchword, filter 초기화 */
-    const reset = () => {
-        handleSearch("");
-    }
+    const reset = () => { handleSearch(""); }
 
     return (
         <>
@@ -639,11 +637,11 @@ export default function Header (
                                                 </Link>
                                                 <Link href="/admin/user/list" className="flex flex-row justify-start items-center text-theme-8/80 hover:text-theme-10/80 tlg:hover:text-theme-8/80 dark:text-theme-7/80 hover:dark:text-theme-9/80 tlg:hover:dark:text-theme-7/80 mt-[2px] ml-px group">
                                                     <svg className="w-[14px] mr-[4px] fill-theme-8/80 group-hover:fill-theme-10/80 tlg:group-hover:fill-theme-8/80 dark:fill-theme-7/80 group-hover:dark:fill-theme-9/80 tlg:group-hover:dark:fill-theme-7/80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"/></svg>
-                                                    유저 관리
+                                                    유저 목록
                                                 </Link>
                                                 <Link href="/admin/comment/list" className="flex flex-row justify-start items-center text-theme-8/80 hover:text-theme-10/80 tlg:hover:text-theme-8/80 dark:text-theme-7/80 hover:dark:text-theme-9/80 tlg:hover:dark:text-theme-7/80 mt-[2px] ml-[2px] group">
                                                     <svg className="w-[13px] mr-[4px] mb-px fill-theme-8/80 group-hover:fill-theme-10/80 tlg:group-hover:fill-theme-8/80 dark:fill-theme-7/80 group-hover:dark:fill-theme-9/80 tlg:group-hover:dark:fill-theme-7/80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/><path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/></svg>
-                                                    댓글 관리
+                                                    댓글 목록
                                                 </Link>
                                                 <Link href="/admin/issue/list" className="flex flex-row justify-start items-center text-theme-8/80 hover:text-theme-10/80 tlg:hover:text-theme-8/80 dark:text-theme-7/80 hover:dark:text-theme-9/80 tlg:hover:dark:text-theme-7/80 mt-[2px] ml-[2px] group">
                                                     <svg className="w-[12px] mr-[6px] mb-px fill-theme-8/80 group-hover:fill-theme-10/80 tlg:group-hover:fill-theme-8/80 dark:fill-theme-7/80 group-hover:dark:fill-theme-9/80 tlg:group-hover:dark:fill-theme-7/80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"/></svg>
@@ -659,7 +657,7 @@ export default function Header (
                                                 </Link>
                                                 <Link href="/admin/notices/list" className="flex flex-row justify-start items-center text-theme-8/80 hover:text-theme-10/80 tlg:hover:text-theme-8/80 dark:text-theme-7/80 hover:dark:text-theme-9/80 tlg:hover:dark:text-theme-7/80 mt-[2px] ml-[2px] group">
                                                     <svg className="w-[11px] mr-[6px] ml-px mb-px fill-theme-8/80 group-hover:fill-theme-10/80 tlg:group-hover:fill-theme-8/80 dark:fill-theme-7/80 group-hover:dark:fill-theme-9/80 tlg:group-hover:dark:fill-theme-7/80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V64 350.5 400v88c0 13.3 10.7 24 24 24s24-10.7 24-24V388l80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52V24zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8V334.7l-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5v-237z"/></svg>
-                                                    공지 관리
+                                                    공지 목록
                                                 </Link>
                                             </> : <></>
                                         }

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -5,20 +5,15 @@ import { useEffect } from "react";
 import Link from "next/link";
 
 export default function Custom404() {
-    // 로딩 시 body 패딩 제거 & 풋터 제거
+    // 로딩 시 폰트 다운로드
     useEffect(() => {
-        const head = document.head as HTMLHeadElement;
-        const body = document.body as HTMLBodyElement;
-        const footer = document.getElementsByTagName("footer")[0] as HTMLElement;
-
+        const head = document.head as HTMLHeadElement;     
         head.innerHTML += '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/IntelOneMono/IntelOneMono.css" type="text/css"/>'
-        body.style.paddingBottom = "0";
-        footer.style.display = "none";
     }, []);
 
     return (
         <>
-            <div className="w-[100%] h-[100vh] flex flex-col justify-center items-center text-center text-theme-3 dark:text-theme-9">
+            <div className="w-[100%] h-[100%] absolute left-0 top-0 flex flex-col justify-center items-center text-center text-theme-3 dark:text-theme-9">
                 <div className="text-[28px] font-medium">
                     권한이 없거나 <br/>
                     존재하지 않는 페이지입니다.

diff --git a/src/pages/500.tsx b/src/pages/500.tsx
@@ -5,20 +5,15 @@ import { useEffect } from "react";
 import Link from "next/link";
 
 export default function Custom500() {
-    // 로딩 시 body 패딩 제거 & 풋터 제거
+    // 로딩 시 폰트 다운로드
     useEffect(() => {
         const head = document.head as HTMLHeadElement;
-        const body = document.body as HTMLBodyElement;
-        const footer = document.getElementsByTagName("footer")[0] as HTMLElement;
-
         head.innerHTML += '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/IntelOneMono/IntelOneMono.css" type="text/css"/>'
-        body.style.paddingBottom = "0";
-        footer.style.display = "none";
     }, []);
 
     return (
         <>
-            <div className="w-[100%] h-[100vh] flex flex-col justify-center items-center text-center text-theme-3 dark:text-theme-9">
+            <div className="w-[100%] h-[100%] absolute left-0 top-0 flex flex-col justify-center items-center text-center text-theme-3 dark:text-theme-9">
                 <div className="text-[28px] font-medium">
                     권한이 없거나 <br/>
                     존재하지 않는 페이지입니다.

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -19,16 +19,16 @@ import '../styles/mailanimation.css';
 
 export default function App({ Component, pageProps }: AppProps) {
     const [theme, setTheme] = useState<string>("dark");
-    const Router = useRouter();
+    const router = useRouter();
 
     useEffect(() => {
         const start = () => {
             const thisHTML = document.getElementsByTagName("html")[0];
             if (thisHTML.classList.contains("dark")) setTheme("dark");
             else setTheme("light");
         }
-        Router.events.on("routeChangeStart", start);
-    }, [Router]);
+        router.events.on("routeChangeStart", start);
+    }, [router]);
 
     return (
         <>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,9 +3,6 @@
 // next hooks
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
-// components
-import Footer from "@/components/footer";
-
 const themeInitializerScript = `
     (function () {
         function getCookie(cookieName){
@@ -40,10 +37,9 @@ class MyDocument extends Document {
                     {/* <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7819549426971576" crossOrigin="anonymous"></script> */}
                 </Head>
                 <script dangerouslySetInnerHTML={{ __html: themeInitializerScript }}/>
-                <body style={{fontFamily: "Spoqa Han Sans Neo, Noto Sans KR"}} className="relative min-h-[calc(100vh-60px)] tlg:min-h-[calc(100vh-52px)] px-[32px] tlg:px-[16px] pb-[88px] tlg:pb-[76px]">
+                <body style={{fontFamily: "Spoqa Han Sans Neo, Noto Sans KR"}} className="relative min-h-[calc(100vh-60px)] tlg:min-h-[calc(100vh-52px)] px-[32px] tlg:px-[16px] pb-[76px]">
                     <Main/>
                     <NextScript/>
-                    <Footer/>
                 </body>
             </Html>
         );

diff --git a/src/pages/admin/bug/[bugId].tsx b/src/pages/admin/bug/[bugId].tsx
@@ -13,6 +13,7 @@ import axios from "axios";
 
 // components
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 import { Switch } from "@mui/material";
 
 // common
@@ -281,6 +282,9 @@ const BugPage = ({params}: any) => {
                     </div>
                 </div>
             }
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     )
 }

diff --git a/src/pages/admin/bug/list.tsx b/src/pages/admin/bug/list.tsx
@@ -13,6 +13,7 @@ import { FetchBugsLength } from '@/pages/api/admin/bug';
 
 // components
 import Header from "@/components/header";
+import Footer from '@/components/footer';
 import { Pagination } from '@mui/material';
 
 // common
@@ -168,6 +169,9 @@ const BugList = ({params}: any) => {
                     </div>
                 </div>
             </form>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/comment/list.tsx b/src/pages/admin/comment/list.tsx
@@ -14,6 +14,7 @@ import { FetchComments } from '@/pages/api/admin/comment';
 
 // components
 import Header from "@/components/header";
+import Footer from '@/components/footer';
 import AdminDeleteCommentModal from '@/components/admindeletecommentmodal';
 import { Pagination } from '@mui/material';
 
@@ -214,6 +215,9 @@ const CommentList = ({params}: any) => {
                     </div>
                 </div>
             </form>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/font/add.tsx b/src/pages/admin/font/add.tsx
@@ -9,6 +9,7 @@ import { Auth } from "@/pages/api/user/auth";
 
 // components
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 import axios from "axios";
 
 const Add = ({params}: any) => {
@@ -444,6 +445,9 @@ const Add = ({params}: any) => {
                     </div>
                 </div>
             </div>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/font/edit.tsx b/src/pages/admin/font/edit.tsx
@@ -13,6 +13,7 @@ import { FetchFont } from "@/pages/api/admin/font";
 
 // components
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 import axios from "axios";
 
 const Edit = ({params}: any) => {
@@ -608,6 +609,9 @@ const Edit = ({params}: any) => {
                     </div>
                 </div>
             </div>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/font/list.tsx b/src/pages/admin/font/list.tsx
@@ -13,6 +13,7 @@ import { FetchFonts } from '@/pages/api/admin/font';
 
 // components
 import Header from "@/components/header";
+import Footer from '@/components/footer';
 import { Pagination } from '@mui/material';
 
 // common
@@ -206,6 +207,9 @@ const FontsList = ({params}: any) => {
                     </div>
                 </div>
             </form>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/issue/[issueId].tsx b/src/pages/admin/issue/[issueId].tsx
@@ -13,6 +13,7 @@ import axios from "axios";
 
 // components
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 import { Switch } from "@mui/material";
 
 // common
@@ -331,6 +332,9 @@ const IssuePage = ({params}: any) => {
                     </div>
                 </div>
             }
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     )
 }

diff --git a/src/pages/admin/issue/list.tsx b/src/pages/admin/issue/list.tsx
@@ -13,6 +13,7 @@ import { FetchIssuesLength } from '@/pages/api/admin/issue';
 
 // components
 import Header from "@/components/header";
+import Footer from '@/components/footer';
 import { Pagination } from '@mui/material';
 
 // common
@@ -172,6 +173,9 @@ const IssueList = ({params}: any) => {
                     </div>
                 </div>
             </form>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/notices/[noticeId].tsx b/src/pages/admin/notices/[noticeId].tsx
@@ -13,6 +13,7 @@ import axios from "axios";
 
 // components
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 import { Switch } from "@mui/material";
 
 // common
@@ -215,6 +216,9 @@ const NoticePage = ({params}: any) => {
                     </div>
                 </div>
             </div>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     )
 }

diff --git a/src/pages/admin/notices/add.tsx b/src/pages/admin/notices/add.tsx
@@ -10,6 +10,7 @@ import axios from "axios";
 
 // components
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 
 const NoticesAdd = ({params}: any) => {
     // 디바이스 체크
@@ -189,6 +190,9 @@ const NoticesAdd = ({params}: any) => {
                     </div>
                 </div>
             </div>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }

diff --git a/src/pages/admin/notices/list.tsx b/src/pages/admin/notices/list.tsx
@@ -13,6 +13,7 @@ import { FetchNotices } from '@/pages/api/admin/notices';
 
 // components
 import Header from "@/components/header";
+import Footer from '@/components/footer';
 import { Pagination } from '@mui/material';
 
 // common
@@ -171,6 +172,9 @@ const NoticeList = ({params}: any) => {
                     </div>
                 </div>
             </form>
+
+            {/* 풋터 */}
+            <Footer/>
         </>
     );
 }