chore(deps): next15 & react 19 마이그레이션 (#341)

.yarnrc.yml

@@ -3,3 +3,11 @@ compressionLevel: mixed
 enableGlobalCache: false
 
 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"

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -33,21 +33,21 @@
   "homepage": "https://github.com/mbti-nf-team/unnamed-k-place-frontend#readme",
   "dependencies": {
     "@nf-team/core": "^3.0.1",
-    "@nf-team/react": "^2.6.0",
+    "@nf-team/react": "^2.7.3",
     "@nf-team/storage": "^1.0.1",
-    "@react-google-maps/api": "^2.19.3",
+    "@react-google-maps/api": "^2.20.3",
     "@tanstack/react-query": "^5.35.1",
     "clsx": "^2.1.1",
     "inko": "^1.1.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "motion": "^11.15.0",
-    "next": "^14.2.21",
+    "next": "^15.1.2",
     "qs": "^6.13.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-ga4": "^2.1.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-intersection-observer": "^9.14.0",
     "react-spring-bottom-sheet": "3.5.0-alpha.0",
     "sharp": "^0.33.5",
     "use-sync-external-store": "^1.4.0",
@@ -57,16 +57,16 @@
     "@chromatic-com/storybook": "^2.0.2",
     "@commitlint/cli": "^17.4.3",
     "@commitlint/config-conventional": "^17.4.3",
-    "@next/eslint-plugin-next": "^14.2.21",
+    "@next/eslint-plugin-next": "^15.1.2",
     "@nf-team/eslint-config": "^3.3.0",
     "@nf-team/stylelint-config": "^1.1.1",
-    "@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": "6.5.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
@@ -77,9 +77,9 @@
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.12.10",
     "@types/qs": "^6.9.16",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "cypress": "^12.1.0",
@@ -102,10 +102,10 @@
     "jest-plugin-context": "^2.9.0",
     "jest-transformer-svg": "^2.0.1",
     "lint-staged": "^13.1.2",
-    "react-test-renderer": "^18.3.1",
-    "sass": "^1.69.3",
+    "react-test-renderer": "^19.0.0",
+    "sass": "1.69.6",
     "start-server-and-test": "^1.14.0",
-    "storybook": "^8.3.3",
+    "storybook": "^8.4.7",
     "stylelint": "^15.10.0",
     "typescript": "^5.2.2",
     "webpack": "^5.95.0"

src/actions/logout.ts

@@ -7,7 +7,7 @@ import { postAuthTokenRevoke } from '@/lib/apis/auth';
 import CookieNames from '@/lib/constants/cookies';
 
 const logoutAction = async () => {
-  const cookiesStore = cookies();
+  const cookiesStore = await cookies();
 
   const refreshToken = cookiesStore.get(CookieNames.REFRESH_TOKEN);
   const accessToken = cookiesStore.get(CookieNames.ACCESS_TOKEN);

src/app/login/page.tsx

@@ -1,12 +1,14 @@
 import LoginPage from '@/components/auth/LoginPage';
 
 type Props = {
-  searchParams: { [key: string]: string | undefined; };
+  searchParams: Promise<{ [key: string]: string | undefined; }>;
 };
 
 async function Page({ searchParams }: Props) {
+  const params = await searchParams;
+
   return (
-    <LoginPage code={searchParams?.code} state={searchParams?.state} />
+    <LoginPage code={params?.code} state={params?.state} />
   );
 }
 

src/app/maps/@modal/(..)login/page.tsx

@@ -3,13 +3,15 @@ import LoginPage from '@/components/auth/LoginPage';
 import BottomSheet from './BottomSheet';
 
 type Props = {
-  searchParams: { [key: string]: string | undefined; };
+  searchParams: Promise<{ [key: string]: string | undefined; }>;
 };
 
-function Page({ searchParams }: Props) {
+async function Page({ searchParams }: Props) {
+  const params = await searchParams;
+
   return (
     <BottomSheet>
-      <LoginPage code={searchParams?.code} state={searchParams?.state} />
+      <LoginPage code={params?.code} state={params?.state} />
     </BottomSheet>
   );
 }

src/app/maps/@modal/(..)place/[id]/page.tsx

@@ -6,19 +6,20 @@ import CookieNames from '@/lib/constants/cookies';
 import PlacePage from './_components/PlacePage';
 
 type Props = {
-  params: {
+  params: Promise<{
     id?: string;
-  };
+  }>;
 };
 
 async function Page({ params }: Props) {
-  const cookiesStore = cookies();
+  const cookiesStore = await cookies();
+  const resolvedParams = await params;
   const accessToken = cookiesStore.get(CookieNames.ACCESS_TOKEN);
 
   const user = await getUser({ accessToken: accessToken?.value });
 
   return (
-    <PlacePage placeId={params?.id} user={user} />
+    <PlacePage placeId={resolvedParams?.id} user={user} />
   );
 }
 

src/app/maps/page.tsx

@@ -9,7 +9,7 @@ import CookieNames from '@/lib/constants/cookies';
 import { metadata as defaultMetadata } from '../page';
 
 type Props = {
-  searchParams: { [key: string]: string | undefined; };
+  searchParams: Promise<{ [key: string]: string | undefined; }>;
 };
 
 export const metadata: Metadata = {
@@ -21,7 +21,8 @@ export const metadata: Metadata = {
 };
 
 async function Page({ searchParams }: Props) {
-  const cookiesStore = cookies();
+  const cookiesStore = await cookies();
+  const resolvedParams = await searchParams;
   const accessToken = cookiesStore.get(CookieNames.ACCESS_TOKEN);
 
   const user = await getUser({ accessToken: accessToken?.value });
@@ -30,10 +31,10 @@ async function Page({ searchParams }: Props) {
     <MapLayout>
       <MapContainer
         user={user}
-        defaultCountryCode={searchParams?.country}
+        defaultCountryCode={resolvedParams?.country}
         defaultLocation={{
-          lat: searchParams?.lat,
-          lng: searchParams?.lng,
+          lat: resolvedParams?.lat,
+          lng: resolvedParams?.lng,
         }}
       />
     </MapLayout>

src/app/my/favorite-places/page.tsx

@@ -4,8 +4,8 @@ import { redirect } from 'next/navigation';
 import FavoritePlacesPage from '@/components/my/FavoritePlacesPage';
 import CookieNames from '@/lib/constants/cookies';
 
-function Page() {
-  const cookiesStore = cookies();
+async function Page() {
+  const cookiesStore = await cookies();
   const accessToken = cookiesStore.get(CookieNames.ACCESS_TOKEN);
 
   if (!accessToken?.value) {

src/app/place/[id]/page.tsx

@@ -10,15 +10,16 @@ import { getUser } from '@/lib/apis/auth';
 import CookieNames from '@/lib/constants/cookies';
 
 type Props = {
-  params: {
+  params: Promise<{
     id?: string;
-  };
+  }>;
 };
 
 export async function generateMetadata(
-  { params }: Props,
+  props: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const params = await props.params;
   const description = '이 장소는 ✌️진짜✌️ 로컬 여행지일까? 확인해보세요!';
   const defaultUrl = `${process.env.NEXT_PUBLIC_ORIGIN}/place/${params.id}`;
 
@@ -83,9 +84,10 @@ export async function generateMetadata(
   }
 }
 
-async function Page({ params }: Props) {
-  const cookiesStore = cookies();
+async function Page(props: Props) {
+  const cookiesStore = await cookies();
   const accessToken = cookiesStore.get(CookieNames.ACCESS_TOKEN);
+  const params = await props?.params;
 
   const user = await getUser({ accessToken: accessToken?.value });
 

src/components/map/SearchInput/index.tsx

@@ -1,4 +1,6 @@
-import { useCallback, useRef, useState } from 'react';
+import {
+  RefObject, useCallback, useRef, useState,
+} from 'react';
 
 import { useActionKeyEvent, useBoolean, useDebounce } from '@nf-team/react';
 
@@ -19,7 +21,7 @@ function SearchInput({
   const [searchInput, setSearchInput] = useState<string>('');
   const debouncedValue = useDebounce(searchInput, 200);
   const [isFocused, setIsFocused] = useState<boolean>(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const [isArrowDownEvent, onArrowDownEvent, blurArrowDownEvent] = useBoolean(false);
 
   const onKeyDown = useActionKeyEvent<HTMLInputElement>(['Enter', 'NumpadEnter', 'ArrowDown'], (e) => {
@@ -82,7 +84,7 @@ function SearchInput({
       />
       {isFocused && (
         <SearchTermsBox
-          inputRef={inputRef}
+          inputRef={inputRef as RefObject<HTMLInputElement>}
           resetArrowDownEvent={blurArrowDownEvent}
           isArrowDownEvent={isArrowDownEvent}
           keyword={debouncedValue}

src/hooks/useIntersectionObserver.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 import { IntersectionOptions, useInView } from 'react-intersection-observer';
 
 import { InfiniteRefState } from '@/lib/types';
@@ -32,7 +32,7 @@ function useIntersectionObserver<T = Element>({
 
   return {
     lastItemRef: ref,
-    wrapperRef: checkRoot(wrapperRef),
+    wrapperRef: checkRoot(wrapperRef) as unknown as RefObject<T>,
   };
 }