From 22918ffec77215ff1a3cac71a7bf34f78d85d46b Mon Sep 17 00:00:00 2001 From: Ruthgyeul Date: Thu, 8 May 2025 11:35:46 +0900 Subject: [PATCH 01/18] Enhance: update error.js design #116 --- src/app/error.js | 95 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 72 insertions(+), 23 deletions(-) diff --git a/src/app/error.js b/src/app/error.js index 27aa484..98b417e 100644 --- a/src/app/error.js +++ b/src/app/error.js @@ -1,49 +1,98 @@ 'use client'; -import React from 'react'; -import {Button} from "@nextui-org/react"; -import {useRouter} from "next/navigation"; +import { useState, useEffect } from 'react'; +import { Button } from "@nextui-org/react"; import Image from 'next/image'; + +// resource import gdgocIcon from "@public/src/images/GDGoC_icon.png"; -export default function Error({error, reset}) { - const router = useRouter(); +/** + * @typedef {Object} ErrorProps + * @property {Error} error - The error object + * @property {() => void} reset - Function to reset the error state + */ +export default function Error({ error, reset }) { + const [countdown, setCountdown] = useState(3); const errorCode = error?.statusCode || error?.status || 'Internal Server'; const errorMessage = error?.message || 'Unknown Error has occurred'; + useEffect(() => { + if (countdown > 0) { + const timer = setTimeout(() => setCountdown(countdown - 1), 1000); + return () => clearTimeout(timer); + } + }, [countdown]); + const handleClick = () => { reset(); window.location.reload(); }; return ( -
-
- GDGoC Icon +
+ {/* 물결 효과 배경 */} + + + {/* 아이콘 배경 */} + -
-
-

{errorCode} Error

-

페이지 로드 중 에러가 발생하였습니다.

-

개발팀으로 연락 바랍니다!

- {/* only at development env */} + {/* 오류 박스 */} +
+
+ {/* 오류 아이콘 */} +
+ + + +
+ + {/* 오류 내용 */} +

+ {errorCode} Error +

+ + +

페이지 로드 중 에러가 발생하였습니다.

+

Tech팀으로 연락 바랍니다!

+ + {/* 개발 환경에서만 표시 */} {process.env.NODE_ENV === 'development' && ( -
-

{errorMessage}

+
+

{errorMessage}

)} + + {/* 버튼 */} + + {/* 작은 로고 */} +
+ GDGoC Small Icon +
From 18cd39764c9fc751b17730021f076dec104b2833 Mon Sep 17 00:00:00 2001 From: Ruthgyeul Date: Thu, 8 May 2025 11:36:58 +0900 Subject: [PATCH 02/18] Enhance: update loading.js design #116 --- src/app/loading.js | 144 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 src/app/loading.js diff --git a/src/app/loading.js b/src/app/loading.js new file mode 100644 index 0000000..3308699 --- /dev/null +++ b/src/app/loading.js @@ -0,0 +1,144 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import Image from 'next/image'; + +// resource +import gdgocIcon from "@public/src/images/GDGoC_icon.png"; + +const LOADING_TEXTS = [ + '페이지를 불러오는 중', + '데이터를 준비하는 중', + '잠시만 기다려주세요', + '거의 다 왔습니다' +]; + +export default function Loading() { + const [loadingDots, setLoadingDots] = useState('.'); + const [loadingText, setLoadingText] = useState(LOADING_TEXTS[0]); + const [imageError, setImageError] = useState(false); + + // 로딩 점(...)의 애니메이션 + useEffect(() => { + const dotsInterval = setInterval(() => { + setLoadingDots(dots => dots.length >= 3 ? '.' : dots + '.'); + }, 500); + + return () => clearInterval(dotsInterval); + }, []); + + // 로딩 텍스트를 주기적으로 변경 + useEffect(() => { + const textInterval = setInterval(() => { + setLoadingText(current => { + const currentIndex = LOADING_TEXTS.indexOf(current); + const nextIndex = (currentIndex + 1) % LOADING_TEXTS.length; + return LOADING_TEXTS[nextIndex]; + }); + }, 3000); + + return () => clearInterval(textInterval); + }, []); + + return ( +
+ {/* 물결 효과 배경 */} +
+ +
+ {/* 로딩 아이콘 애니메이션 */} +
+
+
+ {!imageError ? ( + GDGoC Icon setImageError(true)} + /> + ) : ( +
+ GDGoC +
+ )} +
+ + {/* 회전하는 로딩 원 */} +
+ + + +
+
+ + {/* 로딩 텍스트 */} +
+

+ {loadingText}{loadingDots} +

+
+ + {/* 로딩 프로그레스 바 */} +
+
+
+
+ + {/* CSS for animations */} + +
+ ); +} \ No newline at end of file From 7aa1cd7b04a9dfa7fcf0804e91006ee16de5b3d7 Mon Sep 17 00:00:00 2001 From: Ruthgyeul Date: Thu, 8 May 2025 12:18:15 +0900 Subject: [PATCH 03/18] Enhance: update not-found.js design #116 --- src/app/not-found.js | 88 +++++++++++++++++++++++++++++++++++++++++++ src/app/not-found.jsx | 52 ------------------------- 2 files changed, 88 insertions(+), 52 deletions(-) create mode 100644 src/app/not-found.js delete mode 100644 src/app/not-found.jsx diff --git a/src/app/not-found.js b/src/app/not-found.js new file mode 100644 index 0000000..f1a162f --- /dev/null +++ b/src/app/not-found.js @@ -0,0 +1,88 @@ +'use client'; + +import { useRouter } from "next/navigation"; +import { Button } from "@nextui-org/react"; +import Image from 'next/image'; + +// resource +import gdgocIcon from "@public/src/images/GDGoC_icon.png"; + +export default function NotFound() { + const router = useRouter(); + + const handleClick = () => { + if (window.history.length > 1) { + const referrer = document.referrer; + const currentHost = window.location.host; + + if (referrer.includes(currentHost)) { + router.back(); + } else { + router.push("/"); + } + } else { + router.push("/"); + } + }; + + return ( +
+ {/* 아이콘 배경 */} + + + {/* 404 에러 박스 */} +
+
+ {/* 404 아이콘 */} +
+ + + +
+ + {/* 404 내용 */} +

+ 404 Not Found +

+ + +
+

찾으시려는 페이지가 없는거 같아요...

+

이전 페이지로 돌아가시거나 홈으로 이동해주세요.

+
+ + {/* 버튼 */} + + + {/* 작은 로고 */} +
+ GDGoC Small Icon +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/app/not-found.jsx b/src/app/not-found.jsx deleted file mode 100644 index dc9724f..0000000 --- a/src/app/not-found.jsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client'; - -import React from 'react'; -import {Button} from "@nextui-org/react"; -import {useRouter} from "next/navigation"; -import Image from 'next/image'; -import gdgocIcon from "@public/src/images/GDGoC_icon.png"; - -export default function NotFound() { - const router = useRouter(); - - const handleClick = () => { - if (window.history.length > 1) { - const referrer = document.referrer; - const currentHost = window.location.host; - - if (referrer.includes(currentHost)) { - router.back(); - } else { - router.push("/"); - } - } else { - router.push("/"); - } - }; - - return ( -
-
- GDGoC Icon -
- -
-
-

404 - Page Not Found

-

찾으시려는 페이지가 없는거 같아요...

- -
-
-
- ); -} \ No newline at end of file From 27a1106ded3b3fbe910ba9561fc0e5b7c351cef9 Mon Sep 17 00:00:00 2001 From: Ruthgyeul Date: Thu, 8 May 2025 12:18:23 +0900 Subject: [PATCH 04/18] Enhance: update error.js design #116 --- src/app/error.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/error.js b/src/app/error.js index 98b417e..7d68cc6 100644 --- a/src/app/error.js +++ b/src/app/error.js @@ -17,6 +17,12 @@ export default function Error({ error, reset }) { const errorCode = error?.statusCode || error?.status || 'Internal Server'; const errorMessage = error?.message || 'Unknown Error has occurred'; + useEffect(() => { + if (process.env.NODE_ENV === 'development') { + console.error(error); + } + }, []); + useEffect(() => { if (countdown > 0) { const timer = setTimeout(() => setCountdown(countdown - 1), 1000); @@ -31,9 +37,6 @@ export default function Error({ error, reset }) { return (
- {/* 물결 효과 배경 */} - - {/* 아이콘 배경 */}