// ✅ app/board/[id]/page.tsx (Server Component)
import { DetailViewer } from './components/detail-viewer'

export default async function BoardDetailPage({ 
    params 
}: { 
    params: Promise<{ id: string }> 
}) {
    // 서버 컴포넌트에서는 params 구조분해 할당 전 반드시 await 처리
    const { id } = await params
    
    // Server 측 처리를 끝낸 값을 Client Component에 주입
    return (
        <main className="container mx-auto p-4">
            <DetailViewer id={id} />
        </main>
    )
}

// ✅ app/board/[id]/components/detail-viewer.tsx (Client Component)
'use client'

import { useQuery } from '@tanstack/react-query'
import { queries } from '@/(api)/board'

export function DetailViewer({ id }: { id: string }) {
    // CSR에 필요한 상태 관리 및 훅 사용
    const { data, isLoading } = useQuery(queries.detail(id))

    if (isLoading) return <LoadingSpinner size="xl" />

    return (
        <article className="prose">
            <h1>{data.title}</h1>
            <p>{data.content}</p>
        </article>
    )
}

'use client'

import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useCallback } from 'react'

export function SearchFilter() {
    const router = useRouter()
    const pathname = usePathname()
    const searchParams = useSearchParams()

    // Query String 업데이트 로직
    const handleFilterChange = useCallback((key: string, value: string) => {
        const params = new URLSearchParams(searchParams.toString())
        
        if (value) {
            params.set(key, value)
        } else {
            params.delete(key)
        }

        // history stack을 쌓지 않으려면 router.replace 활용
        router.push(`${pathname}?${params.toString()}`)
    }, [pathname, searchParams, router])

    return (
        <div className="flex gap-4 mb-6">
            <select 
                onChange={(e) => handleFilterChange('category', e.target.value)}
                defaultValue={searchParams.get('category') ?? ''}
                className="select-box"
            >
                <option value="">전체 카테고리</option>
                <option value="react">React</option>
                <option value="nextjs">Next.js</option>
            </select>
        </div>
    )
}

// ✅ @/(api)/user/index.ts
// 목적: user 모듈 내의 코드를 외부로 간결하게 노출
export * from "./user.service"
export * from "./user.queries"
export * from "./user.mutations"
export * from "./user.types"

// ✅ 외부 모듈에서 호출 시 (정상 구현 코드)
import { queries, UserService, UserType } from "@/(api)/user"

// ❌ 나쁜 안티 패턴 (직접 개별 파일 import 금지)
import { queries } from "@/(api)/user/user.queries"

// ❌ 교차 참고 재노출 금지
// export { adminUtil } from "@/(api)/admin" 

// actions/post-actions.ts
'use server'

import { verifySession } from '@/lib/auth'
import { db } from '@/lib/db'
import { revalidateTag } from 'next/cache'

export async function createPostAction(formData: FormData) {
    try {
        // 1. 보안 및 인가 처리 중앙화
        const session = await verifySession()
        if (!session?.user) {
            throw new Error('Unauthorized access')
        }

        const title = formData.get('title')
        
        // 2. 비즈니스 서비스 호출 (Route Handler 내 비즈니스 로직은 금지)
        const newPost = await db.post.create({
            data: { title: title as string, authorId: session.user.id }
        })

        // 3. 서버 응답 이후의 데이터 무효화 (캐시 최신화)
        revalidateTag('posts')

        // 4. DTO 변환을 통해 클라이언트엔 필요한 응답만 전송
        return { 
            success: true, 
            data: { id: newPost.id, title: newPost.title } 
        }

    } catch (error) {
        // 민감한 에러 스택은 가리고 추상화된 메시지만 클라이언트에 전달
        const message = error instanceof Error ? error.message : '예기치 못한 오류가 발생했습니다.'
        return { success: false, error: message }
    }
}

// ❌ 안티 패턴: Waterfall 발생
const userData = await fetchUser(id)
const preferences = await fetchPreferences(id)

// ✅ 모범 패턴: 병렬 처리 (요청 즉시 실행 후 한 번에 대기)
const [userData, preferences] = await Promise.all([
    fetchUser(id),
    fetchPreferences(id)
])

// @/(api)/post/post.mutations.ts
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { queries } from './post.queries'

// 무효화 공통 패턴 분리
const invalidatePostQueries = {
    all: (queryClient: ReturnType<typeof useQueryClient>) => ({
        predicate: (query: { queryKey: readonly unknown[] }) => 
            query.queryKey.includes(queries.baseConfig()[0]), // 기본 베이스 키 포함 유무 검사
    }),
}

export function useCreatePostMutation() {
    const queryClient = useQueryClient()

    return useMutation({
        mutationFn: (data: PostPayload) => api.post('/posts', data),
        onSuccess: () => {
             // 깔끔하고 실수 없는 캐시 클리어 방식
            queryClient.invalidateQueries(invalidatePostQueries.all(queryClient))
        }
    })
}