-
{errorCode} Error
-
페이지 로드 중 에러가 발생하였습니다.
-
개발팀으로 연락 바랍니다!
- {/* only at development env */}
+ {/* 오류 박스 */}
+
+
+ {/* 오류 아이콘 */}
+
+
+ {/* 오류 내용 */}
+
+
{errorCode}
+
{errorTitle}
+
+
+
+
+
페이지 로드 중 에러가 발생하였습니다.
+
Tech팀으로 연락 바랍니다!
+
+
+ {/* 개발 환경에서만 표시 */}
{process.env.NODE_ENV === 'development' && (
-
-
{errorMessage}
+
)}
+
+ {/* 버튼 */}
+
+ {/* 작은 로고 */}
+
+
+
diff --git a/src/app/forbidden.js b/src/app/forbidden.js
new file mode 100644
index 0000000..ae7e29f
--- /dev/null
+++ b/src/app/forbidden.js
@@ -0,0 +1,83 @@
+// this is experimental page for nextjs
+'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 Forbidden() {
+ const router = useRouter();
+
+ const handleClick = () => {
+ const sameOrigin = document.referrer.startsWith(window.location.origin);
+ if (sameOrigin) {
+ router.back();
+ } else {
+ router.push("/");
+ }
+ };
+
+ return (
+
+ {/* 아이콘 배경 */}
+
+
+ {/* 403 에러 박스 */}
+
+
+ {/* 403 아이콘 */}
+
+
+ {/* 403 내용 */}
+
+ 403 Forbidden
+
+
+
+
+
접근 권한이 없는 페이지입니다.
+
이전 페이지로 이동해주세요.
+
+
+ {/* 버튼 */}
+
+
+ {/* 작은 로고 */}
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index 0c5a8ce..c5069e1 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,19 +1,32 @@
import * as React from "react";
-import "./globals.css";
-import { NextUIProvider } from "@nextui-org/react";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
import localFont from "next/font/local";
+import Script from 'next/script';
+import { NextUIProvider } from "@nextui-org/react";
+
+// components
+import Loading from "@/app/loading";
+import Error from "@/app/error";
import { AuthProvider } from '@/app/context/AuthProvider';
+// css
+import "./globals.css";
+
const pretendard = localFont({
src: "../../public/fonts/PretendardVariable.woff2",
display: "swap",
- variable: "--font-pretendard"
+ variable: "--font-pretendard",
+ preload: true,
+ fallback: ["system-ui", "arial"]
});
const ocra = localFont({
src: "../../public/fonts/OCRAExtended.woff2",
display: "swap",
- variable: "--font-ocra"
+ variable: "--font-ocra",
+ preload: true,
+ fallback: ["monospace"]
});
export const viewport = {
@@ -21,28 +34,58 @@ export const viewport = {
initialScale: 1.0,
maximumScale: 1.0,
minimumScale: 1.0,
- themeColor: "#4285F4",
+ userScalable: true,
+ themeColor: "#000000",
+ colorScheme: "light dark"
};
export const metadata = {
- title: "GDGoC INHA",
- description: "Google Developer Student Clubs Gochang - 구글 개발자 학생 클럽 고창",
+ metadataBase: new URL('https://gdgocinha.com'),
+ title: {
+ template: '%s | GDGoC INHA',
+ default: 'GDGoC INHA'
+ },
+ description: "Google Developer Group on Campus at Inha University",
manifest: "/manifest.json",
+ applicationName: "GDGoC INHA",
+ keywords: [
+ "google", "education", "technology", "developer", "gdg", "gdsc", "gdgoc",
+ "google developer group", "google for developers", "google developer groups on campus",
+ "inha", "university", "inha university", "구글", "개발자", "동아리", "인하대",
+ "인하대학교", "학생", "프로그래밍", "코딩", "개발", "IT", "테크", "테크동아리",
+ "웹개발", "앱개발", "클라우드", "AI", "머신러닝", "안드로이드", "iOS",
+ "프론트엔드", "백엔드", "풀스택"
+ ],
+ authors: [{ name: "GDGoC INHA Tech Team" }],
+ creator: "GDGoC INHA Tech Team",
+ publisher: "GDGoC INHA Tech Team",
+ formatDetection: {
+ telephone: true,
+ date: true,
+ address: true,
+ email: true,
+ url: true
+ },
icons: {
- icon: "/favicon.ico",
- apple: "/icons/icon-192x192.png",
+ icon: [
+ { url: "/favicon.ico", sizes: "any", type: "image/x-icon" }
+ ],
+ apple: [
+ { url: "/icons/apple-icon-180x180.png", sizes: "180x180", type: "image/png" }
+ ],
+ shortcut: ["/favicon.ico"]
},
openGraph: {
- title: "GDGoC INHA",
- description: "Google Developer Student Clubs Gochang - 구글 개발자 학생 클럽 고창",
+ title: "GDGoC INHA Univ.",
+ description: "Google Developer Group on Campus at Inha University",
url: "https://gdgocinha.com",
siteName: "GDGoC INHA",
images: [
{
- url: "https://gdgocinha.com/logo.png",
- width: 1200,
- height: 630,
- alt: "GDGoC INHA Logo"
+ url: "https://gdgocinha.com/screenshots/home.png",
+ width: 1280,
+ height: 720,
+ alt: "GDGoC INHA Home"
}
],
type: "website",
@@ -50,26 +93,51 @@ export const metadata = {
},
twitter: {
card: "summary_large_image",
- title: "GDGoC INHA",
- description: "Google Developer Student Clubs Gochang - 구글 개발자 학생 클럽 고창",
- images: ["https://gdgocinha.com/logo.png"],
+ title: "GDGoC INHA Univ.",
+ description: "Google Developer Group on Campus at Inha University",
+ images: ["https://gdgocinha.com/screenshots/home.png"],
+ creator: "GDGoC INHA Tech Team",
+ },
+ verification: {
+ // Google Search Console 등에 사용되는 확인 코드가 있다면 추가
+ // google: "VERIFICATION_CODE",
+ },
+ alternates: {
+ canonical: 'https://gdgocinha.com',
+ languages: {
+ 'ko-KR': 'https://gdgocinha.com',
+ },
},
};
export default function RootLayout({ children }) {
return (
-
+
+
-
+ {/* PWA 관련 메타 태그 */}
+
+
+
+
+ {/* 외부 스크립트 */}
+
-
+
-
- {children}
-
+ }>
+
+ } >
+ {children}
+
+
+
);
-}
+}
\ No newline at end of file
diff --git a/src/app/loading.js b/src/app/loading.js
new file mode 100644
index 0000000..1b6ccd4
--- /dev/null
+++ b/src/app/loading.js
@@ -0,0 +1,171 @@
+'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 ? (
+
setImageError(true)}
+ />
+ ) : (
+
+ GDGoC
+
+ )}
+
+
+ {/* 회전하는 로딩 원 */}
+
+
+
+
+
+ {/* 로딩 텍스트 */}
+
+ Loading
+
+
+
+
+
+ {loadingText}{loadingDots}
+
+
+
+ {/* 로딩 프로그레스 바 */}
+
+
+ {/* 작은 로고 */}
+
+
+
+
+
+
+ {/* CSS for animations */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/not-found.js b/src/app/not-found.js
new file mode 100644
index 0000000..c1683c8
--- /dev/null
+++ b/src/app/not-found.js
@@ -0,0 +1,82 @@
+'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 = () => {
+ const sameOrigin = document.referrer.startsWith(window.location.origin);
+ if (sameOrigin) {
+ router.back();
+ } else {
+ router.push("/");
+ }
+ };
+
+ return (
+
+ {/* 아이콘 배경 */}
+
+
+ {/* 404 에러 박스 */}
+
+
+ {/* 404 아이콘 */}
+
+
+ {/* 404 내용 */}
+
+ 404 Not Found
+
+
+
+
+
찾으시려는 페이지가 없는거 같아요...
+
이전 페이지로 돌아가시거나 홈으로 이동해주세요.
+
+
+ {/* 버튼 */}
+
+
+ {/* 작은 로고 */}
+
+
+
+
+
+
+ );
+}
\ 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 (
-
-
-
-
-
-
-
-
404 - Page Not Found
-
찾으시려는 페이지가 없는거 같아요...
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/src/app/study/(dashboard)/admin/[id]/page.jsx b/src/app/study/(dashboard)/admin/[id]/page.jsx
index 692678d..e4850b7 100644
--- a/src/app/study/(dashboard)/admin/[id]/page.jsx
+++ b/src/app/study/(dashboard)/admin/[id]/page.jsx
@@ -1,8 +1,7 @@
'use client';
-import React, { useState } from "react";
+import { useState } from "react";
import { useParams } from 'next/navigation';
-import { Spinner } from "@nextui-org/react";
// components
import StudyHeader from '@/components/study/StudyHeader';
@@ -10,39 +9,32 @@ import StudyDashboardNav from "@/components/study/ui/nav/StudyDashboardNav";
import InfoArea from "@/components/study/dashboard/InfoArea";
export default function AdminDetailDashboard() {
- const [isLoading, setIsLoading] = useState(false);
- const [activeMenu, setActiveMenu] = useState('reviewApplication');
const pathParams = useParams();
const studyId = decodeURIComponent(pathParams.id);
+ const [activeMenu, setActiveMenu] = useState('reviewApplication');
+
+ // menu click handler
const handleMenuClick = (menuId) => {
setActiveMenu(menuId);
};
return (
<>
- {isLoading ? (
-
-
+
+ {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
+ {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
+
+
+
+
- ) : (
- <>
-
- {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
- {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
-
-
- )}
+
);
};
\ No newline at end of file
diff --git a/src/app/study/(dashboard)/admin/page.jsx b/src/app/study/(dashboard)/admin/page.jsx
index 434b97c..abe3ba9 100644
--- a/src/app/study/(dashboard)/admin/page.jsx
+++ b/src/app/study/(dashboard)/admin/page.jsx
@@ -1,7 +1,6 @@
'use client';
-import React, { useState } from "react";
-import { Spinner } from "@nextui-org/react";
+import { useState } from "react";
// components
import StudyHeader from '@/components/study/StudyHeader';
@@ -9,36 +8,28 @@ import StudyDashboardNav from "@/components/study/ui/nav/StudyDashboardNav";
import InfoArea from "@/components/study/dashboard/InfoArea";
export default function AdminDashboard() {
- const [isLoading, setIsLoading] = useState(false);
const [activeMenu, setActiveMenu] = useState('createdStudies');
+ // menu click handler
const handleMenuClick = (menuId) => {
setActiveMenu(menuId);
};
return (
<>
- {isLoading ? (
-
-
+
+ {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
+ {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
+
+
+
+
- ) : (
- <>
-
- {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
- {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
-
-
- )}
+
);
};
\ No newline at end of file
diff --git a/src/app/study/(dashboard)/my/[id]/page.jsx b/src/app/study/(dashboard)/my/[id]/page.jsx
index 0fb7b9f..19571d0 100644
--- a/src/app/study/(dashboard)/my/[id]/page.jsx
+++ b/src/app/study/(dashboard)/my/[id]/page.jsx
@@ -1,8 +1,7 @@
'use client';
-import React, { useState } from "react";
+import { useState } from "react";
import { useParams } from 'next/navigation';
-import { Spinner } from "@nextui-org/react";
// components
import StudyHeader from '@/components/study/StudyHeader';
@@ -10,39 +9,32 @@ import StudyDashboardNav from "@/components/study/ui/nav/StudyDashboardNav";
import InfoArea from "@/components/study/dashboard/InfoArea";
export default function MyDetailDashboard() {
- const [isLoading, setIsLoading] = useState(false);
- const [activeMenu, setActiveMenu] = useState('studyDetail');
const pathParams = useParams();
const studyId = decodeURIComponent(pathParams.id);
+ const [activeMenu, setActiveMenu] = useState('studyDetail');
+
+ // menu click handler
const handleMenuClick = (menuId) => {
setActiveMenu(menuId);
};
return (
<>
- {isLoading ? (
-
-
+
+ {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
+ {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
+
+
+
+
- ) : (
- <>
-
- {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
- {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
-
-
- )}
+
);
};
\ No newline at end of file
diff --git a/src/app/study/(dashboard)/my/page.jsx b/src/app/study/(dashboard)/my/page.jsx
index 06bd716..5d38d0d 100644
--- a/src/app/study/(dashboard)/my/page.jsx
+++ b/src/app/study/(dashboard)/my/page.jsx
@@ -1,7 +1,6 @@
'use client';
-import React, { useState, createContext } from "react";
-import { Spinner } from "@nextui-org/react";
+import { useState } from "react";
// components
import StudyHeader from '@/components/study/StudyHeader';
@@ -9,36 +8,28 @@ import StudyDashboardNav from "@/components/study/ui/nav/StudyDashboardNav";
import InfoArea from "@/components/study/dashboard/InfoArea";
export default function MyDashboard() {
- const [isLoading, setIsLoading] = useState(false);
const [activeMenu, setActiveMenu] = useState('appliedStudies');
+ // menu click handler
const handleMenuClick = (menuId) => {
setActiveMenu(menuId);
};
return (
<>
- {isLoading ? (
-
-
+
+ {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
+ {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
+
+
+
+
- ) : (
- <>
-
- {/* 추후 StudyDashboardNav는 고정, InfoArea는 스크롤되도록 변경 */}
- {/* 또한 모바일 버전에는 dropDown으로 StudyDashboardNav 표기하는게 나을듯? */}
-
-
- )}
+
);
};
\ No newline at end of file
diff --git a/src/app/study/apply/[id]/page.jsx b/src/app/study/apply/[id]/page.jsx
index 42e1a95..2d90ba1 100644
--- a/src/app/study/apply/[id]/page.jsx
+++ b/src/app/study/apply/[id]/page.jsx
@@ -1,30 +1,30 @@
'use client';
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
import { useRouter, useParams } from 'next/navigation';
-import { Spinner } from '@nextui-org/react';
import Image from 'next/image';
// hooks
import { useAuthenticatedApi } from '@/hooks/useAuthenticatedApi';
-import { useStudyDetail } from "@/hooks/study/useStudyDetail";
+
+// API Services
+import { useStudyDetail } from "@/services/study/useStudyDetail";
// components
import Header from '@/components/study/StudyHeader';
import SubmitButton from "@/components/ui/button/SubmitButton";
-import MarginBottom from "@/components/MarginBottom";
-// images
+// Resources
import gdgocIcon from '@public/src/images/GDGoC_icon.png';
export default function Apply() {
- const router = useRouter();
const { apiClient } = useAuthenticatedApi();
+ const router = useRouter();
const pathParams = useParams();
const studyId = decodeURIComponent(pathParams.id);
// API: useStudyDetail
- const { studyDetail, isRecruiting, isApplied, isLoading, error } = useStudyDetail(apiClient, studyId);
+ const { studyDetail, isRecruiting, isApplied, error } = useStudyDetail(apiClient, studyId);
useEffect(() => {
if (studyDetail) {
@@ -71,91 +71,89 @@ export default function Apply() {
return (
<>
- {isLoading ? (
-
-
+ {/* StudyHeader */}
+
+