diff --git a/package-lock.json b/package-lock.json index 0c6b66b5..4bf12ed7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "lodash": "^4.17.21", "next": "13.4.1", "next-seo": "^6.0.0", + "nextjs-progressbar": "^0.0.16", "nodemailer": "^6.9.3", "postcss": "8.4.23", "react": "18.2.0", @@ -1810,7 +1811,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.3.0.tgz", "integrity": "sha512-3U3u/pa+QYfrV2z2rU6cBmzOZYPVEh1cXvg35PbaYFBQipFep54tp+mD9KJhlouT57pMKPERgjcPFR+UZ/BWjg==", - "dev": true, + "devOptional": true, "hasInstallScript": true }, "node_modules/@prisma/engines-version": { @@ -2464,6 +2465,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.1.0.tgz", "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==" }, + "node_modules/@types/nprogress": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz", + "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==" + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -5306,6 +5312,20 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/nextjs-progressbar": { + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz", + "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==", + "dependencies": { + "@types/nprogress": "^0.2.0", + "nprogress": "^0.2.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "next": ">= 6.0.0", + "react": ">= 16.0.0" + } + }, "node_modules/node-releases": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz", @@ -5360,6 +5380,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -5802,7 +5827,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.3.0.tgz", "integrity": "sha512-eLUR2gyKk8iRLAfy1H3Jel4SZQmjauTPTYX4UFFmwrMTrPnQzipspt48s6e45H5PKYq9zT5MQ9qWbkq9Ru4EAg==", - "dev": true, + "devOptional": true, "hasInstallScript": true, "dependencies": { "@prisma/engines": "5.3.0" @@ -7918,7 +7943,8 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==" + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "requires": {} }, "@emotion/utils": { "version": "1.2.1", @@ -8117,7 +8143,8 @@ "@mui/types": { "version": "7.2.8", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.8.tgz", - "integrity": "sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==" + "integrity": "sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==", + "requires": {} }, "@mui/utils": { "version": "5.14.16", @@ -8257,7 +8284,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.3.0.tgz", "integrity": "sha512-3U3u/pa+QYfrV2z2rU6cBmzOZYPVEh1cXvg35PbaYFBQipFep54tp+mD9KJhlouT57pMKPERgjcPFR+UZ/BWjg==", - "dev": true + "devOptional": true }, "@prisma/engines-version": { "version": "5.3.0-36.e90b936d84779543cbe0e494bc8b9d7337fad8e4", @@ -8793,6 +8820,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.1.0.tgz", "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==" }, + "@types/nprogress": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz", + "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==" + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -8890,7 +8922,8 @@ "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "requires": {} }, "ajv": { "version": "6.12.6", @@ -9853,7 +9886,8 @@ "eslint-plugin-react-hooks": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==" + "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", + "requires": {} }, "eslint-scope": { "version": "7.2.0", @@ -10772,7 +10806,18 @@ "next-seo": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-6.0.0.tgz", - "integrity": "sha512-jKKt1p1z4otMA28AyeoAONixVjdYmgFCWwpEFtu+DwRHQDllVX3RjtyXbuCQiUZEfQ9rFPBpAI90vDeLZlMBdg==" + "integrity": "sha512-jKKt1p1z4otMA28AyeoAONixVjdYmgFCWwpEFtu+DwRHQDllVX3RjtyXbuCQiUZEfQ9rFPBpAI90vDeLZlMBdg==", + "requires": {} + }, + "nextjs-progressbar": { + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz", + "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==", + "requires": { + "@types/nprogress": "^0.2.0", + "nprogress": "^0.2.0", + "prop-types": "^15.8.1" + } }, "node-releases": { "version": "2.0.10", @@ -10809,6 +10854,11 @@ } } }, + "nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -11081,7 +11131,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.3.0.tgz", "integrity": "sha512-eLUR2gyKk8iRLAfy1H3Jel4SZQmjauTPTYX4UFFmwrMTrPnQzipspt48s6e45H5PKYq9zT5MQ9qWbkq9Ru4EAg==", - "dev": true, + "devOptional": true, "requires": { "@prisma/engines": "5.3.0" } @@ -11122,7 +11172,8 @@ "react-color-palette": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/react-color-palette/-/react-color-palette-7.1.0.tgz", - "integrity": "sha512-F5jMWOWh7FMkgm7aJfwNr5+TatvGKvQatuaDtw8trSU4yKk0bzcxOC7HFYVRs/9qEJ8kvatjWaUUrcQATYSXhw==" + "integrity": "sha512-F5jMWOWh7FMkgm7aJfwNr5+TatvGKvQatuaDtw8trSU4yKk0bzcxOC7HFYVRs/9qEJ8kvatjWaUUrcQATYSXhw==", + "requires": {} }, "react-cookie": { "version": "4.1.1", @@ -11146,7 +11197,8 @@ "react-intersection-observer": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz", - "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==" + "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==", + "requires": {} }, "react-is": { "version": "16.13.1", diff --git a/package.json b/package.json index 93b639c1..96cfe830 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "lodash": "^4.17.21", "next": "13.4.1", "next-seo": "^6.0.0", + "nextjs-progressbar": "^0.0.16", "nodemailer": "^6.9.3", "postcss": "8.4.23", "react": "18.2.0", diff --git a/src/components/fontbox.tsx b/src/components/fontbox.tsx index cf73bb5a..6df3b126 100644 --- a/src/components/fontbox.tsx +++ b/src/components/fontbox.tsx @@ -50,7 +50,7 @@ export default function FontBox ({license, lang, type, sort, user, like, filter, remove(); refetch(); window.scrollTo(0, 0); - }, [license, lang, type, sort, searchword, remove, refetch]); + }, [license, lang, type, sort, searchword, filter, remove, refetch]); // 좋아요 state const [alertDisplay, setAlertDisplay] = useState(false); diff --git a/src/components/header.tsx b/src/components/header.tsx index 4a34460f..2945be4d 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -283,12 +283,17 @@ export default function Header ( sessionStorage.setItem('login_history', location.href); } + /** 로고 클릭 시 searchword, filter 초기화 */ + const reset = () => { + handleSearch(""); + } + return ( <>
- + { @@ -607,7 +612,7 @@ export default function Header ( 프로필 정보 - + 좋아요 목록 diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 8664d1b3..07a65e75 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,8 +1,13 @@ // 서버로 요청이 들어왔을 때 가장 먼저 실행되는 component +// react hooks +import { useEffect, useState } from "react"; + // next hooks import type { AppProps } from "next/app"; +import { useRouter } from "next/router"; import { DefaultSeo } from 'next-seo'; +import NextNProgress from 'nextjs-progressbar'; // react-query hooks import { QueryClientProvider, QueryClient } from "react-query"; @@ -13,6 +18,18 @@ import '../styles/globals.css'; import '../styles/mailanimation.css'; export default function App({ Component, pageProps }: AppProps) { + const [theme, setTheme] = useState("dark"); + 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]); + return ( <> @@ -46,6 +63,9 @@ export default function App({ Component, pageProps }: AppProps) { }} />
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c0a05440..4495bf66 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -85,7 +85,10 @@ const Index = ({params}: any) => { // 폰트 검색 기능 const [searchword, setSearchword] = useState(params.source); - const debouncedSearch = debounce((e) => { setSearchword(e.target.value); }, 500); + const debouncedSearch = debounce((e) => { + if (e.target) setSearchword(e.target.value); + else setSearchword(""); + }, 500); const handleSearch = (e: React.ChangeEvent) => { debouncedSearch(e); } // 로딩 시 body 패딩 제거 & 풋터 제거 diff --git a/src/pages/issue/bug.tsx b/src/pages/issue/bug.tsx index 208c1c93..4ad6822d 100644 --- a/src/pages/issue/bug.tsx +++ b/src/pages/issue/bug.tsx @@ -423,7 +423,7 @@ const IssueBug = ({params}: any) => { /> {/* Progress Bar */} -
+
{/* 메인 */}
diff --git a/src/pages/issue/font.tsx b/src/pages/issue/font.tsx index 7f0e7d17..7bb7c05d 100644 --- a/src/pages/issue/font.tsx +++ b/src/pages/issue/font.tsx @@ -423,7 +423,7 @@ const IssueFont = ({params}: any) => { /> {/* Progress Bar */} -
+
{/* 메인 */}