fix: yarn packageExtensions로 변경 & event status hydration 에러 수정 (#266)

.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/package.json

@@ -6,7 +6,7 @@
   "author": "dnd-academy",
   "scripts": {
     "open-browser": "open http://localhost:3001",
-    "dev": "next dev --turbopack -H localhost -p 3001 & yarn open-browser",
+    "dev": "next dev -H localhost -p 3001 & yarn open-browser",
     "build": "next build",
     "start": "next start",
     "lint": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
@@ -73,9 +73,5 @@
     "sass": "1.69.6",
     "typescript": "5.2.2",
     "webpack": "5.95.0"
-  },
-  "resolutions": {
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2"
   }
 }

apps/web/package.json

@@ -111,9 +111,5 @@
     "storybook": "8.4.7",
     "typescript": "5.2.2",
     "webpack": "5.95.0"
-  },
-  "resolutions": {
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2"
   }
 }

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

@@ -1,14 +1,18 @@
 'use client';
 
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 
 import { useIsMounted } from '@dnd-academy/ui/client';
 
-function ClientOnly({ children }: PropsWithChildren) {
+type Props = {
+  loading?: ReactNode;
+};
+
+function ClientOnly({ children, loading }: PropsWithChildren<Props>) {
   const isMounted = useIsMounted();
 
   if (!isMounted) {
-    return null;
+    return loading || null;
   }
 
   return children;

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

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { type EventStatus as Event, type FAQ } from '@dnd-academy/core';
 import { Button, Counter } from '@dnd-academy/ui';
 
+import ClientOnly from '@/components/atoms/ClientOnly';
 import ScrollElement from '@/components/atoms/ScrollElement';
 import SectionTitle from '@/components/atoms/SectionTitle';
 import ImageCard from '@/components/molecules/ImageCard';
@@ -35,7 +36,9 @@ function HomePage({
       <section className={styles.homeSection}>
         <div className={styles.contentsWrapper}>
           <div className={styles.description}>
-            <EventStatus eventStatus={eventStatus} />
+            <ClientOnly>
+              <EventStatus eventStatus={eventStatus} />
+            </ClientOnly>
             <h1 className={styles.title}>
               {`프로젝트에 즐거움을
                 모두에게 기회를`}

packages/ui/package.json

@@ -118,10 +118,6 @@
     "react-dom": "^19",
     "sass": "^1.69.0"
   },
-  "resolutions": {
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2"
-  },
   "publishConfig": {
     "access": "public"
   },