🧩 12. TanStack Query + Jotai 조합 아키텍처

// ✅ TanStack Query 가 담당하는 것들
const { data: studies, isLoading, refetch } = useQuery({
  queryKey: ['studies', filters],          // 캐시 키
  queryFn: () => fetchStudies(filters),    // 데이터 fetching
  staleTime: 1000 * 60 * 5,               // 5분간 신선한 데이터로 취급
  refetchOnWindowFocus: true,              // 탭 포커스 시 자동 재요청
  retry: 3,                               // 실패 시 3번 재시도
})
// → 영철이가 3일 동안 직접 구현하려 했던 모든 것들

// ✅ Jotai 가 담당하는 것들
const studyFiltersAtom = atom({
  category: 'all',
  sortBy: 'latest' as const,
  tags: [] as string[],
})
 
const isFilterDrawerOpenAtom = atom(false)
const selectedStudyIdAtom = atom<string | null>(null)
// → 서버와 무관한 순수 UI 상태들

// ❌ Jotai 로 서버 상태를 관리하려 했을 때 (영철이의 흑역사)
const studiesAtom = atom<Study[]>([])
const isLoadingAtom = atom(false)
const errorAtom = atom<Error | null>(null)
 
// fetchStudyListAtom — 비동기 write atom
const fetchStudyListAtom = atom(null, async (get, set) => {
  set(isLoadingAtom, true)
  try {
    const data = await fetchStudies()
    set(studiesAtom, data)
  } catch (e) {
    set(errorAtom, e as Error)
  } finally {
    set(isLoadingAtom, false)
  }
})
 
// 문제들:
// 1. 캐싱 없음 → 매 렌더마다 새로 fetch
// 2. 재시도 로직 없음 → 한 번 실패하면 에러 상태로 고착
// 3. 백그라운드 갱신 없음 → 탭 전환 후 데이터가 오래된 상태
// 4. 다른 컴포넌트에서 같은 데이터 필요하면 → 중복 fetch
// 5. invalidation 로직 없음 → mutation 후 목록이 안 갱신됨
// 🐣 영철: "이거 다 제가 직접 구현해야 했던 거예요..."

// atoms/studyFilters.ts — 필터 상태 atom
import { atom } from 'jotai'
 
export interface StudyFilters {
  category: string
  sortBy: 'latest' | 'popular' | 'deadline'
  tags: string[]
  searchKeyword: string
}
 
export const studyFiltersAtom = atom<StudyFilters>({
  category: 'all',
  sortBy: 'latest',
  tags: [],
  searchKeyword: '',
})

// components/StudyListContainer.tsx
'use client'
 
import { useAtomValue } from 'jotai'
import { useQuery } from '@tanstack/react-query'
import { studyFiltersAtom } from '@/atoms/studyFilters'
 
async function fetchStudies(filters: StudyFilters): Promise<Study[]> {
  const params = new URLSearchParams({
    category: filters.category,
    sortBy: filters.sortBy,
    keyword: filters.searchKeyword,
    tags: filters.tags.join(','),
  })
  const res = await fetch(`/api/studies?${params}`)
  return res.json()
}
 
export function StudyListContainer() {
  // 🦁 영호: "Jotai atom 에서 필터를 읽어서 Query 에 넘겨요.
  //          필터가 바뀌면 queryKey 가 바뀌고, TanStack Query 가 자동으로 새 데이터를 가져와요."
  const filters = useAtomValue(studyFiltersAtom)
 
  const { data: studies, isLoading, isError } = useQuery({
    // queryKey 에 filters 포함 — 필터 변경 시 새 쿼리 실행
    queryKey: ['studies', filters],
    queryFn: () => fetchStudies(filters),
    staleTime: 1000 * 60 * 3, // 3분
  })
 
  if (isLoading) return <StudyListSkeleton />
  if (isError) return <ErrorMessage />
 
  return <StudyList studies={studies ?? []} />
}

// components/StudyFilterBar.tsx
'use client'
 
import { useAtom } from 'jotai'
import { studyFiltersAtom } from '@/atoms/studyFilters'
 
export function StudyFilterBar() {
  // 🐣 영철: "필터 컴포넌트에서 atom 을 바꾸면, StudyListContainer 가 자동으로 새 데이터를 가져오네요!"
  const [filters, setFilters] = useAtom(studyFiltersAtom)
 
  return (
    <div>
      <select
        value={filters.category}
        onChange={(e) => setFilters((prev) => ({ ...prev, category: e.target.value }))}
      >
        <option value="all">전체</option>
        <option value="frontend">프론트엔드</option>
        <option value="backend">백엔드</option>
        <option value="devops">DevOps</option>
      </select>
 
      <select
        value={filters.sortBy}
        onChange={(e) =>
          setFilters((prev) => ({
            ...prev,
            sortBy: e.target.value as StudyFilters['sortBy'],
          }))
        }
      >
        <option value="latest">최신순</option>
        <option value="popular">인기순</option>
        <option value="deadline">마감 임박순</option>
      </select>
 
      <input
        value={filters.searchKeyword}
        onChange={(e) => setFilters((prev) => ({ ...prev, searchKeyword: e.target.value }))}
        placeholder="스터디 검색..."
      />
    </div>
  )
}

// 스터디 좋아요 뮤테이션 — TanStack Query + Jotai 협업
'use client'
 
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useAtomValue } from 'jotai'
import { studyFiltersAtom } from '@/atoms/studyFilters'
 
async function likeStudy(studyId: string): Promise<void> {
  await fetch(`/api/studies/${studyId}/like`, { method: 'POST' })
}
 
export function StudyCard({ study }: { study: Study }) {
  const queryClient = useQueryClient()
  // 🦁 영호: "현재 필터를 알아야 올바른 쿼리를 invalidate 할 수 있어요"
  const filters = useAtomValue(studyFiltersAtom)
 
  const likeMutation = useMutation({
    mutationFn: likeStudy,
    // 낙관적 업데이트 — 서버 응답 전에 UI 먼저 업데이트
    onMutate: async (studyId) => {
      // 진행 중인 리페치 취소 (낙관적 업데이트와 충돌 방지)
      await queryClient.cancelQueries({ queryKey: ['studies', filters] })
 
      // 현재 캐시 스냅샷 저장
      const previousStudies = queryClient.getQueryData<Study[]>(['studies', filters])
 
      // 낙관적으로 UI 업데이트
      queryClient.setQueryData<Study[]>(['studies', filters], (old) =>
        old?.map((s) =>
          s.id === studyId ? { ...s, likeCount: s.likeCount + 1 } : s
        )
      )
 
      return { previousStudies }
    },
    // 에러 시 롤백
    onError: (err, studyId, context) => {
      queryClient.setQueryData(['studies', filters], context?.previousStudies)
    },
    // 성공 또는 실패 후 항상 서버에서 최신 데이터 재요청
    onSettled: () => {
      // 🐣 영철: "onSettled 에서 invalidate 하면 성공이든 실패든 최신 데이터를 가져오네요!"
      queryClient.invalidateQueries({ queryKey: ['studies'] })
    },
  })
 
  return (
    <div>
      <h3>{study.title}</h3>
      <button
        onClick={() => likeMutation.mutate(study.id)}
        disabled={likeMutation.isPending}
      >
        {likeMutation.isPending ? '처리 중...' : `❤️ ${study.likeCount}`}
      </button>
    </div>
  )
}

// 스터디 신청 — Jotai 로 폼 상태, Query 로 mutation
'use client'
 
import { atom, useAtom } from 'jotai'
import { useMutation, useQueryClient } from '@tanstack/react-query'
 
// 신청 폼 상태는 Jotai (클라이언트 상태)
const applicationFormAtom = atom({
  motivation: '',
  availableTime: '',
  experience: '',
})
 
export function StudyApplicationForm({ studyId }: { studyId: string }) {
  const [form, setForm] = useAtom(applicationFormAtom)
  const queryClient = useQueryClient()
 
  const applyMutation = useMutation({
    mutationFn: (formData: typeof form) =>
      fetch(`/api/studies/${studyId}/apply`, {
        method: 'POST',
        body: JSON.stringify(formData),
      }).then((r) => r.json()),
    onSuccess: () => {
      // 신청 성공 → 내 신청 목록 갱신 + 스터디 멤버 수 갱신
      queryClient.invalidateQueries({ queryKey: ['my-applications'] })
      queryClient.invalidateQueries({ queryKey: ['studies', studyId] })
      // 폼 초기화
      setForm({ motivation: '', availableTime: '', experience: '' })
    },
  })
 
  return (
    <form onSubmit={(e) => { e.preventDefault(); applyMutation.mutate(form) }}>
      <textarea
        value={form.motivation}
        onChange={(e) => setForm((prev) => ({ ...prev, motivation: e.target.value }))}
        placeholder="지원 동기를 입력하세요"
      />
      <textarea
        value={form.availableTime}
        onChange={(e) => setForm((prev) => ({ ...prev, availableTime: e.target.value }))}
        placeholder="참여 가능 시간을 입력하세요"
      />
      <button type="submit" disabled={applyMutation.isPending}>
        {applyMutation.isPending ? '신청 중...' : '스터디 신청하기'}
      </button>
      {applyMutation.isError && (
        <p className="error">신청에 실패했습니다. 다시 시도해주세요.</p>
      )}
    </form>
  )
}

// ❌ Before — 영철이의 흑역사 코드 (모든 걸 Jotai 로)
 
// 🐣 영철: "다 atom 으로 관리하면 되겠지!"
const studiesAtom = atom<Study[]>([])         // 서버 데이터
const isLoadingAtom = atom(false)             // 로딩 상태
const errorAtom = atom<Error | null>(null)    // 에러 상태
const filtersAtom = atom({ category: 'all' }) // 필터 (이건 맞는데 위의 것들과 섞임)
const lastFetchedAtom = atom<Date | null>(null) // 수동 캐싱 시도
 
// 직접 구현한 fetch 로직 (TanStack Query 가 해주는 걸 직접 하는 중)
const fetchStudiesAtom = atom(null, async (get, set) => {
  const lastFetched = get(lastFetchedAtom)
  const now = new Date()
 
  // 직접 구현한 staleTime 체크 (5분)
  if (lastFetched && now.getTime() - lastFetched.getTime() < 5 * 60 * 1000) {
    return // 캐시 사용
  }
 
  set(isLoadingAtom, true)
  set(errorAtom, null)
  try {
    const filters = get(filtersAtom)
    const data = await fetchStudiesAPI(filters)
    set(studiesAtom, data)
    set(lastFetchedAtom, now)
  } catch (e) {
    set(errorAtom, e as Error)
    // 재시도 로직? 직접 구현해야 함...
  } finally {
    set(isLoadingAtom, false)
  }
})
// 백그라운드 refetch 없음
// 탭 포커스 시 refetch 없음
// 다른 컴포넌트에서 같은 데이터 쓸 때 중복 fetch 위험
// 등등... TanStack Query 가 해결하는 문제들이 산더미

// ✅ After — 역할 분리 후 깔끔한 코드
 
// Jotai: 순수 클라이언트 UI 상태만
const studyFiltersAtom = atom({ category: 'all', sortBy: 'latest' as const })
const selectedStudyIdAtom = atom<string | null>(null)
const isFilterDrawerOpenAtom = atom(false)
 
// TanStack Query: 서버 상태 관리
function useStudies() {
  const filters = useAtomValue(studyFiltersAtom) // Jotai 에서 필터 읽기
 
  return useQuery({
    queryKey: ['studies', filters],           // 필터가 queryKey 의 일부
    queryFn: () => fetchStudiesAPI(filters),
    staleTime: 1000 * 60 * 5,               // 5분 stale
    retry: 3,                               // 실패 시 3번 재시도
    refetchOnWindowFocus: true,             // 탭 포커스 시 자동 갱신
    // → 위 3가지가 영철이가 3일 동안 직접 짜려 했던 것들
  })
}
 
// 컴포넌트가 훨씬 깔끔해짐
export function StudyListContainer() {
  const { data: studies, isLoading } = useStudies()
 
  if (isLoading) return <Skeleton />
  return <StudyList studies={studies ?? []} />
}

const { data } = useQuery({
  queryKey: ['studies', filters], // ✅ filters 를 반드시 포함
  queryFn: () => fetchStudies(filters),
})

const mutation = useMutation({
  mutationFn: submitStudy,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['studies'] }) // ✅ invalidate
  },
})

// app/providers.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const queryClient = new QueryClient()
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <JotaiProvider>
        {children}
      </JotaiProvider>
    </QueryClientProvider>
  )
}