Merge pull request #178 from GulSam00/feat/175-searchHistoryUiImprove

[Feat] : 검색어 히스토리 컴포넌트 UI 개선 (#175)

Author: GulSam00

apps/web/src/app/search/PopularSearchHistory.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChartNoAxesCombined } from 'lucide-react';
+import { ChartNoAxesCombined, Loader2 } from 'lucide-react';
 
 import { useSearchLogQuery } from '@/queries/searchLogQuery';
 
@@ -9,33 +9,36 @@ interface PopularSearchHistoryProps {
 }
 
 export default function PopularSearchHistory({ onHistoryClick }: PopularSearchHistoryProps) {
-  const { data: searchLogs } = useSearchLogQuery();
-
-  if (!searchLogs || searchLogs.length === 0) return null;
+  const { data: searchLogs, isPending } = useSearchLogQuery();
 
   return (
-    <div>
+    <div className="h-30 overflow-hidden">
       <div className="flex items-center gap-2">
         <ChartNoAxesCombined className="h-4 w-4" />
         <p className="m-2">인기 검색어</p>
       </div>
-      <div className="flex flex-wrap gap-2 pb-4">
-        {searchLogs.slice(0, 10).map((log, index) => (
-          <div
-            key={`${log.text}-${index}`}
-            className="bg-background flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm"
-          >
-            <span className="text-xs">{index + 1}</span>
-            <span
-              className="hover:text-primary max-w-30 cursor-pointer truncate text-left"
-              onClick={() => onHistoryClick(log.text)}
+      {isPending ? (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 className="h-5 w-5 animate-spin" />
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-2 pb-4">
+          {searchLogs?.slice(0, 10).map((log, index) => (
+            <div
+              key={`${log.text}-${index}`}
+              className="bg-background flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm"
             >
-              {log.text}
-            </span>
-            <span className="text-muted-foreground text-xs">{log.count}</span>
-          </div>
-        ))}
-      </div>
+              <span
+                className="hover:text-primary max-w-30 cursor-pointer truncate text-left"
+                onClick={() => onHistoryClick(log.text)}
+              >
+                {log.text}
+              </span>
+              <span className="text-muted-foreground text-xs">{log.count}</span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

apps/web/src/app/search/SearchHistory.tsx

@@ -1,4 +1,5 @@
-import { Clock, X } from 'lucide-react';
+import { Clock, Loader2, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 import useSearchHistoryStore from '@/stores/useSearchHistoryStore';
 
@@ -8,37 +9,48 @@ interface SearchHistoryProps {
 
 export default function SearchHistory({ onHistoryClick }: SearchHistoryProps) {
   const { searchHistory, removeFromHistory } = useSearchHistoryStore();
+  const [isHydrated, setIsHydrated] = useState(false);
 
-  if (searchHistory.length === 0) return null;
+  useEffect(() => {
+    if (searchHistory.length > 0) {
+      setIsHydrated(true);
+    }
+  }, [searchHistory]);
 
   return (
-    <div>
+    <div className="h-30 overflow-hidden">
       <div className="flex items-center gap-2">
         <Clock className="h-4 w-4" />
         <p className="m-2">최근 검색어</p>
       </div>
-      <div className="flex flex-wrap gap-2 pb-4">
-        {searchHistory.slice(10).map((term, index) => (
-          <div
-            key={`${term}-${index}`}
-            className="bg-background flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm"
-          >
-            <span
-              className="hover:text-primary max-w-30 cursor-pointer truncate text-left"
-              onClick={() => onHistoryClick(term)}
+      {!isHydrated ? (
+        <div className="flex items-center justify-center py-4">
+          <Loader2 className="h-5 w-5 animate-spin" />
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-2 pb-4">
+          {searchHistory.slice(0, 10).map((term, index) => (
+            <div
+              key={`${term}-${index}`}
+              className="bg-background flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm"
             >
-              {term}
-            </span>
-            <span
-              className="hover:text-destructive cursor-pointer"
-              onClick={() => removeFromHistory(term)}
-              title="검색 기록 삭제"
-            >
-              <X className="h-4 w-4" />
-            </span>
-          </div>
-        ))}
-      </div>
+              <span
+                className="hover:text-primary max-w-30 cursor-pointer truncate text-left"
+                onClick={() => onHistoryClick(term)}
+              >
+                {term}
+              </span>
+              <span
+                className="hover:text-destructive cursor-pointer"
+                onClick={() => removeFromHistory(term)}
+                title="검색 기록 삭제"
+              >
+                <X className="h-4 w-4" />
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }