From 16f7983921735dae9eb1e508417932e9b9260153 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Fri, 20 Feb 2026 00:38:22 +0900
Subject: [PATCH] =?UTF-8?q?hotfix=20:=20useInView=EC=97=90=20rootMargin=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/search/HomePage.tsx      | 10 ++++++++--
 apps/web/src/app/search/JpnArtistList.tsx |  1 -
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/search/HomePage.tsx b/apps/web/src/app/search/HomePage.tsx
index 61783a7..b1fb896 100644
--- a/apps/web/src/app/search/HomePage.tsx
+++ b/apps/web/src/app/search/HomePage.tsx
@@ -56,7 +56,13 @@ export default function SearchPage() {
   const [isJpnArtistModalOpen, setIsJpnArtistModalOpen] = useState(false);
   const [isFocusAuto, setIsFocusAuto] = useState(false);
 
-  const { ref, inView } = useInView();
+  const [scrollRef, setScrollRef] = useState<HTMLDivElement | null>(null);
+  const { ref, inView } = useInView({
+    root: scrollRef,
+    rootMargin: '0px 0px 800px 0px', // 스크롤 하단 600px 이전에 미리 로딩
+  });
+
+  console.log('inView', inView);
 
   const { guestToSingSongs } = useGuestToSingStore();
 
@@ -178,7 +184,7 @@ export default function SearchPage() {
         {/* 검색 기록 */}
         <SearchHistory onHistoryClick={handleHistoryClick} />
       </div>
-      <div className="h-[calc(100vh-24rem)] overflow-x-hidden overflow-y-auto">
+      <div ref={setScrollRef} className="h-[calc(100vh-24rem)] overflow-x-hidden overflow-y-auto">
         {searchSongs.length > 0 && (
           <div className="flex w-full max-w-md flex-col gap-4 p-4">
             {searchSongs.map((song, index) => (
diff --git a/apps/web/src/app/search/JpnArtistList.tsx b/apps/web/src/app/search/JpnArtistList.tsx
index 10a91bd..e35a8de 100644
--- a/apps/web/src/app/search/JpnArtistList.tsx
+++ b/apps/web/src/app/search/JpnArtistList.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { UserRoundSearch } from 'lucide-react';
-import { useState } from 'react';
 
 import { Button } from '@/components/ui/button';
 import {