a

src/app/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { useEffect, useState, forwardRef, Ref } from "react";
-import { useSearchParams } from "next/navigation";
+import { useEffect, useState, forwardRef, Ref, Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import Tippy from "@tippyjs/react";
@@ -59,36 +58,13 @@ TippyWrapper.displayName = 'TippyWrapper';
 
 export default function Home() {
   const [userInfo, setUserInfo] = useState({ public_repos: 0, followers: 0 });
-
-  useEffect(() => {
-    async function fetchUserInfo() {
-      try {
-        const response = await fetch("https://api.github.com/users/imnyang");
-        const data = await response.json();
-        setUserInfo({ public_repos: data.public_repos, followers: data.followers });
-      } catch (error) {
-        console.error("Error fetching user info:", error);
-      }
-    }
-
-    fetchUserInfo();
-  }, []);
-
-  const searchParams = useSearchParams();
   const [imageSrc, setImageSrc] = useState("https://f.imnyang.xyz/profile/imnyang.webp");
   const [gotoHref, setGotoHref] = useState("/");
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 768);
-    };
-    handleResize(); // 초기화 시점에 호출
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+    const searchParams = new URLSearchParams(window.location.search);
 
-  useEffect(() => {
     const updateImageSrc = () => {
       if (searchParams.has("kawaii")) {
         setImageSrc("https://f.imnyang.xyz/profile/hatchu_imnyang.webp");
@@ -116,7 +92,30 @@ export default function Home() {
     };
 
     updateImageSrc();
-  }, [searchParams]);
+  }, []);
+
+  useEffect(() => {
+    async function fetchUserInfo() {
+      try {
+        const response = await fetch("https://api.github.com/users/imnyang");
+        const data = await response.json();
+        setUserInfo({ public_repos: data.public_repos, followers: data.followers });
+      } catch (error) {
+        console.error("Error fetching user info:", error);
+      }
+    }
+
+    fetchUserInfo();
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    handleResize(); // 초기화 시점에 호출
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   interface SocialLinkProps {
     href: string;
@@ -142,6 +141,7 @@ export default function Home() {
   );
 
   return (
+    <Suspense fallback={<div>Loading...</div>}>
       <div className="main">
         <div className="profile flex flex-col items-center gap-4 mt-10 mb-10">
           <Image src={imageSrc} width={128} height={128} className="rounded-full avatar" alt="Profile" priority />
@@ -173,5 +173,6 @@ export default function Home() {
           ))}
         </div>
       </div>
+    </Suspense>
   );
 }