feat: next 15 & react 19 마이그레이션

apps/admin/next.config.js

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

apps/admin/package.json

@@ -27,14 +27,14 @@
   "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",
+    "motion": "11.14.4",
     "next": "15.0.4",
-    "next-auth": "5.0.0-beta.19",
+    "next-auth": "5.0.0-beta.25",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-perfect-scrollbar": "1.5.8"
@@ -44,13 +44,13 @@
     "@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": "19.0.1",
-    "@types/react-dom": "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",
@@ -76,6 +76,6 @@
   },
   "resolutions": {
     "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1"
+    "@types/react-dom": "19.0.2"
   }
 }

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

@@ -40,7 +40,7 @@
     "@vercel/blob": "0.23.4",
     "clsx": "2.1.1",
     "dayjs": "1.11.11",
-    "motion": "11.11.17",
+    "motion": "11.14.4",
     "next": "15.0.4",
     "react": "19.0.0",
     "react-countup": "6.5.3",
@@ -61,24 +61,24 @@
     "@dnd-academy/eslint-config": "workspace:*",
     "@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",
-    "@storybook/blocks": "8.3.3",
-    "@storybook/nextjs": "8.3.3",
-    "@storybook/react": "8.3.3",
-    "@storybook/test": "8.3.3",
+    "@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": "19.0.1",
-    "@types/react-dom": "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,12 +108,12 @@
     "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"
   },
   "resolutions": {
     "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1"
+    "@types/react-dom": "19.0.2"
   }
 }

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

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

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useRef } from 'react';
+import { PropsWithChildren, RefObject, useRef } from 'react';
 
 import { Button } from '@dnd-academy/ui';
 import clsx from 'clsx';
@@ -20,7 +20,8 @@ function ModalContentsBase({ children: child, title, size = 'medium' } : PropsWi
   const modalContentsRef = useRef<HTMLDivElement>(null);
   const { open, toggle } = useModalContext();
 
-  useOnClickOutside(modalContentsRef as any, () => toggle(false));
+  // FIX - https://github.com/juliencrn/usehooks-ts/issues/602
+  useOnClickOutside(modalContentsRef as RefObject<HTMLDivElement>, () => toggle(false));
   useScrollLock({ autoLock: open });
 
   return (

apps/web/src/components/molecules/PDFViewer/index.tsx

@@ -3,7 +3,7 @@
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
 
-import { useRef, useState } from 'react';
+import { RefObject, useRef, useState } from 'react';
 import {
   Document, DocumentProps, Page, pdfjs,
 } from 'react-pdf';
@@ -35,7 +35,8 @@ function PDFViewer({ url }: Props) {
   useResizeObserver<HTMLDivElement>({
     box: 'border-box',
     onResize: (size) => onResizeWidth(size.width),
-    ref: containerRef,
+    // FIX - https://github.com/juliencrn/usehooks-ts/issues/602
+    ref: containerRef as RefObject<HTMLDivElement>,
   });
 
   const onDocumentLoadSuccess: DocumentProps['onLoadSuccess'] = (data) => {

apps/web/src/components/molecules/ProjectPDFViewer/index.module.scss

@@ -0,0 +1,5 @@
+@include xs {
+  .pdfWrapper {
+    margin: -12px -12px 0;
+  }
+}

apps/web/src/components/molecules/ProjectPDFViewer/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import styles from './index.module.scss';
+
+const PDFViewer = dynamic(() => import('../PDFViewer'), {
+  ssr: false,
+});
+
+type Props = {
+  url: string;
+};
+
+function ProjectPDFViewer({ url }: Props) {
+  return (
+    <div className={styles.pdfWrapper}>
+      <PDFViewer url={url} />
+    </div>
+  );
+}
+
+export default ProjectPDFViewer;

apps/web/src/components/pages/ProjectPage/index.tsx

@@ -1,10 +1,10 @@
-import dynamic from 'next/dynamic';
 import Image from 'next/image';
 
 import { type Project } from '@dnd-academy/core';
 import { Badge, Button, SkillTag } from '@dnd-academy/ui';
 
 import DetailNavigation from '@/components/molecules/DetailNavigation';
+import PDFViewer from '@/components/molecules/PDFViewer';
 import ShareClipBoardCTA from '@/components/molecules/ShareClipBoardCTA';
 import SocialIconLink from '@/components/molecules/SocialIconLink';
 import ProjectCards from '@/components/organisms/ProjectCards';
@@ -16,10 +16,6 @@ import { getEntries } from '@/utils';
 
 import styles from './index.module.scss';
 
-const PDFViewer = dynamic(() => import('@/components/molecules/PDFViewer'), {
-  ssr: false,
-});
-
 type Props = {
   project: Project;
 };

packages/ui/package.json

@@ -57,18 +57,18 @@
   },
   "devDependencies": {
     "@dnd-academy/eslint-config": "workspace:*",
-    "@storybook/blocks": "8.3.3",
-    "@storybook/react": "8.3.3",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/react": "8.4.7",
     "@swc/core": "1.6.13",
     "@swc/jest": "0.2.36",
     "@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/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",
     "@vitejs/plugin-react": "4.3.1",
@@ -90,10 +90,10 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-plugin-context": "2.9.0",
-    "rollup": "4.24.3",
-    "rollup-preserve-directives": "1.1.2",
+    "rollup": "4.28.1",
+    "rollup-preserve-directives": "1.1.3",
     "sass": "1.69.6",
-    "storybook": "8.3.3",
+    "storybook": "8.4.7",
     "typescript": "5.2.2",
     "vite": "5.4.10",
     "vite-plugin-dts": "4.3.0",
@@ -102,7 +102,7 @@
   "dependencies": {
     "@dnd-academy/core": "workspace:*",
     "clsx": "2.1.1",
-    "motion": "11.11.17",
+    "motion": "11.14.4",
     "next": "15.0.4",
     "react": "19.0.0",
     "react-countup": "6.5.3",
@@ -111,13 +111,17 @@
   },
   "peerDependencies": {
     "clsx": "2.1.1",
-    "motion": "11.11.17",
+    "motion": "11.14.4",
     "next": "15.0.4",
     "react": "^19",
     "react-countup": "6.5.3",
     "react-dom": "^19",
     "sass": "^1.69.0"
   },
+  "resolutions": {
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2"
+  },
   "publishConfig": {
     "access": "public"
   },

packages/ui/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg?react' {
+  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default content;
+}

packages/ui/tsconfig.json

@@ -22,7 +22,8 @@
     "vite.config.mts",
     "../../jest.setup.ts",
     "__mocks__",
-    "@types"
+    "@types",
+    "svg.d.ts",
   ],
   "exclude": ["dist", "build", "node_modules",  "**/*.test.(ts|tsx)", "**/*.stories.(ts|tsx)"]
 }