Merge pull request #267 from DNDACADEMY/develop

chore(deps): next.js v15 & react 19 마이그레이션

.yarnrc.yml

@@ -7,3 +7,11 @@ enableGlobalCache: false
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-4.5.3.cjs
+
+packageExtensions:
+  "react@*":
+    dependencies:
+      "@types/react": "19.0.1"
+  "react-dom@*":
+    dependencies:
+      "@types/react-dom": "19.0.2"

apps/admin/next.config.js

@@ -27,7 +27,6 @@ const nextConfig = {
       },
     ],
   },
-  swcMinify: true,
   experimental: {
     typedRoutes: true,
   },

apps/admin/package.json

@@ -27,30 +27,30 @@
   "dependencies": {
     "@dnd-academy/core": "workspace:*",
     "@dnd-academy/ui": "workspace:*",
-    "@tanstack/react-query": "5.52.0",
+    "@tanstack/react-query": "5.62.7",
     "@vercel/blob": "0.23.4",
     "clsx": "2.1.1",
     "google-auth-library": "9.15.0",
     "google-spreadsheet": "4.1.4",
-    "motion": "11.11.17",
-    "next": "14.2.15",
-    "next-auth": "5.0.0-beta.19",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "motion": "11.14.4",
+    "next": "15.0.4",
+    "next-auth": "5.0.0-beta.25",
+    "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",
+    "@testing-library/react": "16.1.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.2",
     "@typescript-eslint/eslint-plugin": "7.9.0",
     "@typescript-eslint/parser": "7.9.0",
     "eslint": "8.56.0",

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/admin/src/middleware.ts

@@ -3,7 +3,7 @@ import { NextResponse } from 'next/server';
 import { auth as middleware } from '@/auth';
 import { isEmailAllowed } from '@/utils';
 
-export default middleware((req) => {
+export default middleware((req: any) => {
   if (req.nextUrl.pathname === '/login' || process.env.NODE_ENV === 'development') {
     return NextResponse.next({
       request: req,

apps/web/@types/svg.d.ts

@@ -1,5 +1,5 @@
 declare module '*.svg' {
-  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
   export default content;
 }

apps/web/next.config.js

@@ -40,7 +40,6 @@ const nextConfig = {
       },
     ],
   },
-  swcMinify: true,
   experimental: {
     typedRoutes: true,
   },

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",
+    "motion": "11.14.4",
+    "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,26 +59,26 @@
     "@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",
-    "@storybook/addon-essentials": "8.3.3",
-    "@storybook/addon-interactions": "8.3.3",
-    "@storybook/addon-links": "8.3.3",
-    "@storybook/blocks": "8.3.3",
-    "@storybook/nextjs": "8.3.3",
-    "@storybook/react": "8.3.3",
-    "@storybook/test": "8.3.3",
+    "@next/env": "15.0.4",
+    "@next/eslint-plugin-next": "15.0.4",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/nextjs": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/test": "8.4.7",
     "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "10.3.1",
     "@testing-library/jest-dom": "6.4.6",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/react": "16.1.0",
     "@types/identity-obj-proxy": "^3",
     "@types/jest": "29.5.9",
     "@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.2",
     "@types/react-responsive-masonry": "^2",
     "@typescript-eslint/eslint-plugin": "7.9.0",
     "@typescript-eslint/parser": "7.9.0",
@@ -108,7 +108,7 @@
     "sass": "1.69.6",
     "sass-loader": "12.6.0",
     "start-server-and-test": "1.14.0",
-    "storybook": "8.3.3",
+    "storybook": "8.4.7",
     "typescript": "5.2.2",
     "webpack": "5.95.0"
   }

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/dnd/about/page.tsx

@@ -1,9 +1,11 @@
+import { Metadata } from 'next';
+
 import AboutPage from '@/components/pages/AboutPage';
 import METADATA from '@/lib/constants/metadata';
 
 const title = '소개 - DND';
 
-export const metadata = {
+export const metadata: Metadata = {
   metadataBase: METADATA.metadataBase,
   title,
   openGraph: {

apps/web/src/app/dnd/culture/page.tsx

@@ -1,9 +1,11 @@
+import { Metadata } from 'next';
+
 import CulturePage from '@/components/pages/CulturePage';
 import METADATA from '@/lib/constants/metadata';
 
 const title = '문화 - DND';
 
-export const metadata = {
+export const metadata: Metadata = {
   metadataBase: METADATA.metadataBase,
   title,
   openGraph: {

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

@@ -8,12 +8,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): Promise<Metadata> {
+  const params = await props.params;
   const organizer = getOrganizer({ id: Number(params.id) });
 
   if (!organizer) {
@@ -53,8 +54,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

@@ -1,3 +1,5 @@
+import { Metadata } from 'next';
+
 import { PageTitle } from '@dnd-academy/ui';
 
 import ShareAlarmSection from '@/components/organisms/ShareAlarmSection';
@@ -7,7 +9,7 @@ import METADATA from '@/lib/constants/metadata';
 
 const title = '운영진 - DND';
 
-export const metadata = {
+export const metadata: Metadata = {
   metadataBase: METADATA.metadataBase,
   title,
   openGraph: {
@@ -25,8 +27,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

@@ -8,12 +8,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): Promise<Metadata> {
+  const params = await props.params;
   const project = getProject({ id: Number(params.id) });
 
   if (!project) {
@@ -52,8 +53,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();