feat: 조회수 Top 5 섹션 구조 개선 및 검색 상태 UI 분기 처리

components/features/home/search/HomeSearchOverlay.tsx

@@ -9,7 +9,6 @@ import { searchMockResults } from "@/lib/mock/home-search-results";
 import { useAuthStore } from "@/store/auth.store";
 import { HomeRangeTabs } from "./HomeRangeTabs";
 import { HomeTopPostsSection } from "./HomeTopPostsSection";
-import { HomeTopPostsSummarySection } from "./HomeTopPostsSummarySection";
 import { HomeCollectionSummarySection } from "./HomeCollectionSummarySection";
 import { HomeTrendingKeywordsSection } from "./HomeTrendingKeywordsSection";
 import { HomeSearchResultsSection } from "./HomeSearchResultsSection";
@@ -136,7 +135,7 @@ export function HomeSearchOverlay({ isOpen, onClose }: HomeSearchOverlayProps) {
 
       {/* 검색 헤더 — max-w-5xl 중앙 정렬 */}
       <div className="mx-auto w-full max-w-5xl shrink-0 px-6 pb-0 pt-10 md:px-8 md:pt-14">
-        <div className="border-b-2 border-foreground pb-3 pr-10">
+        <div className="border-b-2 border-foreground pb-3">
           <div className="flex items-center gap-3">
             <Search className="h-5 w-5 shrink-0 text-muted-foreground" />
             <input
@@ -163,13 +162,15 @@ export function HomeSearchOverlay({ isOpen, onClose }: HomeSearchOverlayProps) {
         </div>
       </div>
 
-      {/* 기간 탭 — max-w-5xl 중앙 정렬 */}
-      <HomeRangeTabs
-        range={range}
-        onChange={handleRangeChange}
-        dateLabel={data?.dateLabel ?? ""}
-        className="mx-auto w-full max-w-5xl px-6 md:px-8"
-      />
+      {/* 기간 탭 — 검색 중에는 숨김 */}
+      {!isSearching && (
+        <HomeRangeTabs
+          range={range}
+          onChange={handleRangeChange}
+          dateLabel={data?.dateLabel ?? ""}
+          className="mx-auto w-full max-w-5xl px-6 md:px-8"
+        />
+      )}
 
       {/* 스크롤 영역 — 전체 너비로 확장해 여백 포함 스크롤 가능 */}
       <div className="flex-1 overflow-x-hidden overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
@@ -188,12 +189,7 @@ export function HomeSearchOverlay({ isOpen, onClose }: HomeSearchOverlayProps) {
                 posts={data?.topPosts ?? []}
                 isLoading={isLoading}
                 rangeLabel={rangeLabel}
-              />
-
-              <HomeTopPostsSummarySection
-                summary={data?.topPostsSummary ?? ""}
-                isLoading={isLoading}
-                rangeLabel={rangeLabel}
+                summary={data?.topPostsSummary}
               />
 
               {showCollectionSummary && (

components/features/home/search/HomeTopPostsSection.tsx

@@ -82,18 +82,34 @@ interface HomeTopPostsSectionProps {
   posts: TrendTopPost[];
   isLoading: boolean;
   rangeLabel: string;
+  summary?: string;
 }
 
 export function HomeTopPostsSection({
   posts,
   isLoading,
   rangeLabel,
+  summary,
 }: HomeTopPostsSectionProps) {
   return (
     <section>
       <h2 className="mb-3 text-md font-semibold text-foreground">
         {rangeLabel} 조회수 Top 5
       </h2>
+      {/* 동향 요약 */}
+      <div className="mb-3">
+        {isLoading ? (
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-3.5 w-full rounded" />
+            <Skeleton className="h-3.5 w-11/12 rounded" />
+            <Skeleton className="h-3.5 w-4/5 rounded" />
+          </div>
+        ) : (
+          summary && (
+            <p className="text-sm leading-relaxed text-foreground">{summary}</p>
+          )
+        )}
+      </div>
       {/* 스크롤 컨테이너와 flex 행 분리 — 동일 요소에 flex+overflow-x-auto를 쓰면
           브라우저가 flex 내재 너비(max-content)로 컨테이너 크기를 계산해 스크롤이 발동하지 않음 */}
       <div className="w-full overflow-x-auto pb-1 [scrollbar-gutter:stable] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/30 [&::-webkit-scrollbar-track]:bg-transparent">