Feat/markup/landing-page/DEVING-78 랜딩페이지

next.config.mjs

@@ -26,14 +26,23 @@ const nextConfig = {
       },
     ];
   },
-
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
     });
+
+    // 추가된 부분
+    config.resolve.fallback = {
+      fs: false,
+      net: false,
+      tls: false,
+    };
+
     return config;
   },
+  reactStrictMode: false, // 추가
+  transpilePackages: ['@fullpage/react-fullpage'], // 추가
 };
 
 export default nextConfig;

package.json

@@ -15,6 +15,7 @@
     "test": "jest --coverage"
   },
   "dependencies": {
+    "@fullpage/react-fullpage": "^0.1.48",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
@@ -25,6 +26,7 @@
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.5.0",
     "lucide-react": "^0.475.0",
     "next": "14.1.0",
     "react": "^18.2.0",

src/app/(user-page)/mypage/MyPageClient.tsx

@@ -33,6 +33,9 @@ const MyPageClient = () => {
   const searchParams = useSearchParams();
   const queryClient = useQueryClient();
 
+  // 데이터가 이미 있는지 확인
+  const hasData = queryClient.getQueryData(QUERY_KEYS.profile());
+
   // URL에서 탭 값만 가져오기
   const tabFromUrl = searchParams.get('tab') || TAB_TYPES.BASIC;
 
@@ -51,10 +54,12 @@ const MyPageClient = () => {
     [TAB_TYPES.PASSWORD]: null,
   });
 
-  // 컴포넌트 마운트 시 프로필 데이터 prefetch
+  // 데이터가 없을 때만 prefetch (서버에서 가져오지 못한 경우의 백업)
   useEffect(() => {
-    prefetchProfileData(queryClient);
-  }, [queryClient]);
+    if (!hasData) {
+      prefetchProfileData(queryClient);
+    }
+  }, [queryClient, hasData]);
 
   // URL 변경 감지 및 상태 업데이트 (중요: 뒤로가기/앞으로가기 처리)
   useEffect(() => {

src/app/(user-page)/mypage/page.tsx

@@ -16,7 +16,7 @@ export default async function MyPage() {
   await prefetchProfileData(queryClient);
 
   return (
-    <div className="flex flex-col px-[24px] pb-[100px]">
+    <div className="flex flex-col px-[24px] pb-[100px] pt-[80px]">
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="md:mb-8">
           <ProfileImage />

src/app/meeting/_features/skeletons/SkeletonUserInfo.tsx

@@ -1,17 +1,17 @@
 const SkeletonUserInfo = () => {
   return (
     <div className="flex flex-col gap-[16px]">
-      <div className="flex h-[80px] w-[200px] animate-pulse flex-col gap-[16px] rounded-[8px] bg-Cgray200 sm:w-[400px]" />
+      <div className="animate-pulse flex h-[80px] w-[200px] flex-col gap-[16px] rounded-[8px] bg-Cgray200 sm:w-[400px]" />
       <div className="flex flex-col gap-[8px] px-[8px]">
-        <div className="flex h-[20px] w-[200px] animate-pulse gap-[8px] rounded-[8px] bg-Cgray200" />
-        <div className="flex h-[20px] w-[200px] animate-pulse gap-[8px] rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[20px] w-[200px] gap-[8px] rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[20px] w-[200px] gap-[8px] rounded-[8px] bg-Cgray200" />
       </div>
       <div className="ml-[8px] flex gap-[6px] text-Cgray500">
-        <div className="flex h-[24px] w-[82px] animate-pulse rounded-[8px] bg-Cgray200" />
-        <div className="flex h-[24px] w-[82px] animate-pulse rounded-[8px] bg-Cgray200" />
-        <div className="flex h-[24px] w-[82px] animate-pulse rounded-[8px] bg-Cgray200" />
-        <div className="flex h-[24px] w-[82px] animate-pulse rounded-[8px] bg-Cgray200" />
-        <div className="flex h-[24px] w-[82px] animate-pulse rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[24px] w-[82px] rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[24px] w-[82px] rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[24px] w-[82px] rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[24px] w-[82px] rounded-[8px] bg-Cgray200" />
+        <div className="animate-pulse flex h-[24px] w-[82px] rounded-[8px] bg-Cgray200" />
       </div>
     </div>
   );