chore: WIP next 15 & react 19

apps/admin/package.json

@@ -6,7 +6,7 @@
   "author": "dnd-academy",
   "scripts": {
     "open-browser": "open http://localhost:3001",
-    "dev": "next dev -H localhost -p 3001 & yarn open-browser",
+    "dev": "next dev --turbopack -H localhost -p 3001 & yarn open-browser",
     "build": "next build",
     "start": "next start",
     "lint": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
@@ -33,24 +33,24 @@
     "google-auth-library": "9.15.0",
     "google-spreadsheet": "4.1.4",
     "motion": "11.11.17",
-    "next": "14.2.15",
+    "next": "15.0.4",
     "next-auth": "5.0.0-beta.19",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-perfect-scrollbar": "1.5.8"
   },
   "devDependencies": {
     "@dnd-academy/eslint-config": "workspace:*",
-    "@next/eslint-plugin-next": "14.2.15",
+    "@next/eslint-plugin-next": "15.0.4",
     "@testing-library/dom": "10.3.1",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.0.0",
     "@types/identity-obj-proxy": "^3",
     "@types/jest": "29.5.9",
     "@types/jest-plugin-context": "2.9.7",
     "@types/node": "20",
-    "@types/react": "18.3.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "@typescript-eslint/eslint-plugin": "7.9.0",
     "@typescript-eslint/parser": "7.9.0",
     "eslint": "8.56.0",
@@ -73,5 +73,9 @@
     "sass": "1.69.6",
     "typescript": "5.2.2",
     "webpack": "5.95.0"
+  },
+  "resolutions": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }

apps/admin/src/app/api/blob/latest/[name]/route.ts

@@ -4,7 +4,9 @@ import { api, ApiError, getLatestItemReduce } from '@dnd-academy/core';
 import { list } from '@vercel/blob';
 
 // eslint-disable-next-line import/prefer-default-export
-export async function GET(_: NextRequest, { params }: { params: { name: string } }) {
+export async function GET(_: NextRequest, props: { params: Promise<{ name: string }> }) {
+  const params = await props.params;
+
   if (!params?.name) {
     return NextResponse.json(null, {
       status: 400,

apps/admin/src/app/current-applicant-count/page.tsx

@@ -8,7 +8,7 @@ import CurrentApplicantCountAction from '@/components/CurrentApplicantCountActio
 import styles from './page.module.scss';
 
 async function Page() {
-  const headersList = headers();
+  const headersList = await headers();
   const host = headersList.get('host');
 
   const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';

apps/admin/src/app/login/page.tsx

@@ -1,14 +1,15 @@
 import SignIn from '@/components/auth/SignIn';
 
 type Props = {
-  searchParams: { [key: string]: string | undefined; };
+  searchParams: Promise<{ [key: string]: string | undefined; }>;
 };
 
 async function LoginPage({ searchParams }: Props) {
+  const params = await searchParams;
   return (
     <>
       <div>login</div>
-      {searchParams?.error === 'unauthorized_email' && (
+      {params?.error === 'unauthorized_email' && (
         <div>
           접근이 불가능한 이메일 입니다.
         </div>

apps/admin/src/app/total-count-status/page.tsx

@@ -8,7 +8,7 @@ import TotalCountStatusForm from '@/components/TotalCountStatusForm';
 import styles from './page.module.scss';
 
 async function Page() {
-  const headersList = headers();
+  const headersList = await headers();
   const host = headersList.get('host');
 
   const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';

apps/admin/src/components/TotalCountStatusForm/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useFormState } from 'react-dom';
+import { useActionState } from 'react';
 
 import { type TotalCountStatus } from '@dnd-academy/core';
 import clsx from 'clsx';
@@ -15,7 +15,7 @@ type Props = {
 };
 
 function TotalCountStatusForm({ initialTotalCountStatus }: Props) {
-  const [state, formAction] = useFormState(totalCountStatusAction, null);
+  const [state, formAction] = useActionState(totalCountStatusAction, null);
 
   const {
     cumulativeApplicants, dropouts, totalParticipants, totalProjects,

apps/web/package.json

@@ -36,15 +36,15 @@
     "@channel.io/channel-web-sdk-loader": "1.1.7",
     "@dnd-academy/core": "workspace:*",
     "@dnd-academy/ui": "workspace:*",
-    "@next/third-parties": "14.2.15",
+    "@next/third-parties": "15.0.4",
     "@vercel/blob": "0.23.4",
     "clsx": "2.1.1",
     "dayjs": "1.11.11",
     "motion": "11.11.17",
-    "next": "14.2.15",
-    "react": "18.3.1",
+    "next": "15.0.4",
+    "react": "19.0.0",
     "react-countup": "6.5.3",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "react-fast-marquee": "1.6.4",
     "react-pdf": "9.1.1",
     "react-perfect-scrollbar": "1.5.8",
@@ -59,8 +59,8 @@
     "@chromatic-com/storybook": "2.0.2",
     "@codecov/nextjs-webpack-plugin": "1.2.0",
     "@dnd-academy/eslint-config": "workspace:*",
-    "@next/env": "14.2.15",
-    "@next/eslint-plugin-next": "14.2.15",
+    "@next/env": "15.0.4",
+    "@next/eslint-plugin-next": "15.0.4",
     "@storybook/addon-essentials": "8.3.3",
     "@storybook/addon-interactions": "8.3.3",
     "@storybook/addon-links": "8.3.3",
@@ -77,8 +77,8 @@
     "@types/jest-plugin-context": "2.9.7",
     "@types/node": "20",
     "@types/prop-types": "^15",
-    "@types/react": "18.3.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "@types/react-responsive-masonry": "^2",
     "@typescript-eslint/eslint-plugin": "7.9.0",
     "@typescript-eslint/parser": "7.9.0",
@@ -111,5 +111,9 @@
     "storybook": "8.3.3",
     "typescript": "5.2.2",
     "webpack": "5.95.0"
+  },
+  "resolutions": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }

apps/web/src/app/api/blob/latest/[name]/route.ts

@@ -4,7 +4,9 @@ import { api, ApiError, getLatestItemReduce } from '@dnd-academy/core';
 import { list } from '@vercel/blob';
 
 // eslint-disable-next-line import/prefer-default-export
-export async function GET(_: NextRequest, { params }: { params: { name: string } }) {
+export async function GET(_: NextRequest, props: { params: Promise<{ name: string }> }) {
+  const params = await props.params;
+
   if (!params?.name) {
     return NextResponse.json(null, {
       status: 400,

apps/web/src/app/jobs/page.tsx

@@ -5,8 +5,10 @@ type SearchParams = {
   flag: string | undefined;
 };
 
-function Page({ searchParams }: { searchParams?: SearchParams; }) {
-  const jobs = getJobs({ flag: searchParams?.flag });
+async function Page({ searchParams }: { searchParams?: Promise<SearchParams>; }) {
+  const params = await searchParams;
+
+  const jobs = getJobs({ flag: params?.flag });
 
   return (
     <JobsPage jobs={jobs} />

apps/web/src/app/organizers/[id]/page.tsx

@@ -1,4 +1,3 @@
-import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import OrganizerPage from '@/components/pages/OrganizerPage';
@@ -8,12 +7,13 @@ import METADATA, { DEFAULT_METADATA } from '@/lib/constants/metadata';
 export const dynamicParams = false;
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 };
 
-export function generateMetadata({ params }: Props): Metadata {
+export async function generateMetadata(props: Props) {
+  const params = await props.params;
   const organizer = getOrganizer({ id: Number(params.id) });
 
   if (!organizer) {
@@ -53,8 +53,9 @@ export function generateStaticParams() {
   }));
 }
 
-function Page({ params }: Props) {
-  const organizer = getOrganizer({ id: Number(params.id) });
+async function Page({ params }: Props) {
+  const resolvedParams = await params;
+  const organizer = getOrganizer({ id: Number(resolvedParams.id) });
 
   if (!organizer) {
     notFound();

apps/web/src/app/organizers/page.tsx

@@ -25,8 +25,10 @@ type SearchParams = {
   position: string | undefined;
 };
 
-function Page({ searchParams }: { searchParams?: SearchParams; }) {
-  const organizers = getOrganizers({ position: searchParams?.position, isArchived: false });
+async function Page({ searchParams }: { searchParams?: Promise<SearchParams>; }) {
+  const params = await searchParams;
+
+  const organizers = getOrganizers({ position: params?.position, isArchived: false });
 
   return (
     <>

apps/web/src/app/page.tsx

@@ -9,10 +9,12 @@ export const metadata = DEFAULT_METADATA;
 type ParamsKey = 'tab';
 
 type Props = {
-  searchParams: Record<ParamsKey, string | undefined>;
+  searchParams: Promise<Record<ParamsKey, string | undefined>>;
 };
 
 async function Home({ searchParams }: Props) {
+  const params = await searchParams;
+
   const faqData = await api<FAQ[]>({
     url: '/faq.json',
     type: 'blob',
@@ -23,7 +25,7 @@ async function Home({ searchParams }: Props) {
 
   return (
     <HomePage
-      tab={searchParams.tab}
+      tab={params.tab}
       eventStatus={eventStatus}
       faqItems={faqData}
       applicantTotalCount={applicantCount.total}

apps/web/src/app/projects/[id]/page.tsx

@@ -1,4 +1,3 @@
-import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import ProjectPage from '@/components/pages/ProjectPage';
@@ -8,12 +7,13 @@ import METADATA, { DEFAULT_METADATA } from '@/lib/constants/metadata';
 export const dynamicParams = false;
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 };
 
-export function generateMetadata({ params }: Props): Metadata {
+export async function generateMetadata(props: Props) {
+  const params = await props.params;
   const project = getProject({ id: Number(params.id) });
 
   if (!project) {
@@ -52,8 +52,9 @@ export function generateStaticParams() {
   }));
 }
 
-function Page({ params }: Props) {
-  const project = getProject({ id: Number(params.id) });
+async function Page({ params }: Props) {
+  const resolvedParams = await params;
+  const project = getProject({ id: Number(resolvedParams.id) });
 
   if (!project) {
     notFound();

apps/web/src/app/projects/page.tsx

@@ -25,8 +25,9 @@ type SearchParams = {
   ordinal: string | undefined;
 };
 
-function Page({ searchParams }: { searchParams?: SearchParams; }) {
-  const projects = getProjects({ ordinal: searchParams?.ordinal });
+async function Page({ searchParams }: { searchParams?: Promise<SearchParams>; }) {
+  const params = await searchParams;
+  const projects = getProjects({ ordinal: params?.ordinal });
 
   return (
     <>

apps/web/src/app/reviews/page.tsx

@@ -22,8 +22,9 @@ type SearchParams = {
   position: string | undefined;
 };
 
-function Page({ searchParams }: { searchParams?: SearchParams; }) {
-  const reviews = getReviews({ position: searchParams?.position });
+async function Page({ searchParams }: { searchParams?: Promise<SearchParams>; }) {
+  const params = await searchParams;
+  const reviews = getReviews({ position: params?.position });
 
   return (
     <ReviewsPage reviews={reviews} />

apps/web/src/components/atoms/SectionTitle/index.tsx

@@ -6,7 +6,7 @@ import styles from './index.module.scss';
 
 type Props = {
   title: ReactNode;
-  subTitle?: ReactElement | ReactNode;
+  subTitle?: ReactElement<any> | ReactNode;
   fullWidth?: boolean;
 };
 

apps/web/src/components/global/GlobalPortal/index.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import ReactDOM from 'react-dom';
+import { PropsWithChildren, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 import { useIsMounted } from 'usehooks-ts';
 
@@ -20,7 +20,7 @@ function GlobalPortal({ elementId = 'portal-container', children }: PropsWithChi
     return null;
   }
 
-  return ReactDOM.createPortal(children, portalRoot);
+  return createPortal((children as ReactNode), portalRoot);
 }
 
 export default GlobalPortal;

apps/web/src/components/molecules/Modal/components/ModalContentsBase/index.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useRef } from 'react';
+import { PropsWithChildren, useRef } from 'react';
 
 import { Button } from '@dnd-academy/ui';
 import clsx from 'clsx';
@@ -14,14 +14,13 @@ import styles from './index.module.scss';
 type Props = {
   title: string;
   size?: 'small' | 'medium' | 'large';
-  children: ReactElement;
 };
 
-function ModalContentsBase({ children: child, title, size = 'medium' } : Props) {
+function ModalContentsBase({ children: child, title, size = 'medium' } : PropsWithChildren<Props>) {
   const modalContentsRef = useRef<HTMLDivElement>(null);
   const { open, toggle } = useModalContext();
 
-  useOnClickOutside(modalContentsRef, () => toggle(false));
+  useOnClickOutside(modalContentsRef as any, () => toggle(false));
   useScrollLock({ autoLock: open });
 
   return (

apps/web/src/lib/constants/metadata.ts

@@ -1,11 +1,9 @@
-import { Metadata } from 'next';
-
 const title = 'DND - 프로젝트에 즐거움을 모두에게 기회를';
 const description = 'DND는 개발자와 디자이너라면 누구나 참여할 수 있는 IT비영리단체입니다.';
 const images = ['/assets/logos/og-thumbnail.png'];
 const metadataBase = new URL(process.env.NEXT_PUBLIC_ORIGIN);
 
-export const DEFAULT_METADATA: Metadata = {
+export const DEFAULT_METADATA = {
   metadataBase,
   title,
   description,