검색 + 필터 + 정렬 + 페이지네이션

// src/app/(app)/history/page.tsx
export default async function HistoryPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; sort?: string; filter?: string; cursor?: string }>
}) {
  const params = await searchParams
  const supabase = await createClient()

  let q = supabase.from('generations').select('*')

  // 검색
  if (params.q) q = q.ilike('prompt', `%${params.q}%`)

  // 필터
  if (params.filter === 'today') {
    const today = new Date().toISOString().split('T')[0]
    q = q.gte('created_at', today)
  }

  // 정렬
  const sortBy = params.sort === 'oldest' ? { ascending: true } : { ascending: false }
  q = q.order('created_at', sortBy)

  // 페이지네이션
  if (params.cursor) q = q.lt('created_at', params.cursor)
  q = q.limit(20)

  const { data: gens } = await q
  return <HistoryClient gens={gens} params={params} />
}

// src/components/search-input.tsx
'use client'
import { useEffect, useState } from 'react'
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
import { Search } from 'lucide-react'

export function SearchInput() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [value, setValue] = useState(searchParams.get('q') ?? '')

  useEffect(() => {
    const t = setTimeout(() => {
      const params = new URLSearchParams(searchParams)
      if (value) params.set('q', value)
      else params.delete('q')
      router.replace(`${pathname}?${params.toString()}`)
    }, 300)
    return () => clearTimeout(t)
  }, [value])

  return (
    <div className="relative max-w-md">
      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="검색..."
        className="w-full pl-9 pr-3 py-2 border rounded-md"
      />
    </div>
  )
}

'use client'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
import { ChevronDown } from 'lucide-react'

export function SortDropdown() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const current = searchParams.get('sort') ?? 'newest'

  const setSort = (sort: string) => {
    const params = new URLSearchParams(searchParams)
    params.set('sort', sort)
    router.replace(`${pathname}?${params.toString()}`)
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="border px-3 py-1.5 rounded text-sm flex items-center gap-1">
        {current === 'newest' ? '최신순' : '오래된순'} <ChevronDown className="h-3 w-3" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem onClick={() => setSort('newest')}>최신순</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setSort('oldest')}>오래된순</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

-- 마이그레이션
alter table generations add column search_vec tsvector
  generated always as (to_tsvector('simple', coalesce(prompt,'') || ' ' || coalesce(result,''))) stored;

create index idx_gens_fts on generations using gin(search_vec);

// 검색 사용
const { data } = await supabase
  .from('generations')
  .select()
  .textSearch('search_vec', `${query}:*`)

'use client'
import { useEffect, useRef } from 'react'

export function LoadMoreSentinel({ onLoad }: { onLoad: () => void }) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const io = new IntersectionObserver(
      entries => {
        if (entries[0].isIntersecting) onLoad()
      },
      { rootMargin: '100px' }
    )
    if (ref.current) io.observe(ref.current)
    return () => io.disconnect()
  }, [onLoad])

  return <div ref={ref} className="h-10" />
}

{gens && gens.length === 0 && (
  <div className="text-center py-12">
    <p className="text-muted-foreground">검색 결과가 없습니다.</p>
    <button onClick={resetFilters} className="text-primary hover:underline mt-2">
      필터 초기화
    </button>
  </div>
)}