🧩 14. 대규모 앱 Jotai 아키텍처 설계

// features/auth/atoms/index.ts
import { atom } from 'jotai'
import type { User, Session } from '../types'
 
// 🦁 영호: "debugLabel 은 필수예요. DevTools 에서 어떤 atom 인지 바로 알아야 해요."
 
export const userAtom = atom<User | null>(null)
userAtom.debugLabel = 'auth/userAtom'
 
export const sessionAtom = atom<Session | null>(null)
sessionAtom.debugLabel = 'auth/sessionAtom'
 
// derived atom — user 가 있으면 로그인 상태
export const isLoggedInAtom = atom((get) => get(userAtom) !== null)
isLoggedInAtom.debugLabel = 'auth/isLoggedInAtom'
 
// derived atom — 역할 확인
export const isAdminAtom = atom((get) => get(userAtom)?.role === 'admin')
isAdminAtom.debugLabel = 'auth/isAdminAtom'

// features/study/atoms/index.ts
import { atom } from 'jotai'
import type { Study, StudyFilters } from '../types'
 
export const studyListAtom = atom<Study[]>([])
studyListAtom.debugLabel = 'study/studyListAtom'
 
export const selectedStudyIdAtom = atom<string | null>(null)
selectedStudyIdAtom.debugLabel = 'study/selectedStudyIdAtom'
 
export const studyFiltersAtom = atom<StudyFilters>({
  category: 'all',
  sortBy: 'latest',
  tags: [],
})
studyFiltersAtom.debugLabel = 'study/studyFiltersAtom'
 
// derived — 선택된 스터디 객체
export const selectedStudyAtom = atom((get) => {
  const list = get(studyListAtom)
  const id = get(selectedStudyIdAtom)
  return list.find((s) => s.id === id) ?? null
})
selectedStudyAtom.debugLabel = 'study/selectedStudyAtom'

// features/study/hooks/useStudySearch.ts
'use client'
 
import { useAtom, useAtomValue } from 'jotai'
import { studyFiltersAtom, studyListAtom } from '../atoms'
 
// 🦁 영호: "컴포넌트가 atom 을 직접 import 하지 말고, 훅을 통해서 사용하면
//          나중에 atom 구조가 바뀌어도 훅만 수정하면 돼요."
export function useStudySearch() {
  const studies = useAtomValue(studyListAtom)
  const [filters, setFilters] = useAtom(studyFiltersAtom)
 
  const filteredStudies = studies.filter((s) => {
    if (filters.category !== 'all' && s.category !== filters.category) return false
    if (filters.tags.length > 0 && !filters.tags.some((t) => s.tags.includes(t))) return false
    return true
  })
 
  return {
    studies: filteredStudies,
    filters,
    setCategory: (category: string) =>
      setFilters((prev) => ({ ...prev, category })),
    setSortBy: (sortBy: typeof filters.sortBy) =>
      setFilters((prev) => ({ ...prev, sortBy })),
    resetFilters: () =>
      setFilters({ category: 'all', sortBy: 'latest', tags: [] }),
  }
}

// ✅ 올바른 패턴 — study atom 에서 auth atom 을 import (단방향)
// features/study/atoms/index.ts
import { atom } from 'jotai'
import { userAtom } from '@/features/auth/atoms' // auth → study 방향 ✅
 
// 현재 유저가 스터디 멤버인지 확인하는 파생 atom
export const isMemberOfSelectedStudyAtom = atom((get) => {
  const user = get(userAtom)       // auth atom 참조 ✅
  const study = get(selectedStudyAtom)
  if (!user || !study) return false
  return study.memberIds.includes(user.id)
})

// ❌ 위험한 패턴 — 순환 의존성
// features/auth/atoms/index.ts
import { studyListAtom } from '@/features/study/atoms' // study → auth ❌
// auth 가 study 에 의존하는 순간 순환 참조 위험!
 
// ✅ 해결책 — shared atom 을 중간에 두기
// shared/atoms/index.ts
export const currentUserStudiesAtom = atom((get) => {
  // auth 와 study 양쪽을 참조하지만, shared 레이어에서 조합
  const user = get(userAtom)
  const studies = get(studyListAtom)
  return studies.filter((s) => s.memberIds.includes(user?.id ?? ''))
})

npm install jotai-effect

// 🦁 영호: "atomEffect 는 컴포넌트 없이 atom 변화에 반응할 수 있어요.
//          useEffect 는 컴포넌트가 mount 되어야 실행되지만,
//          atomEffect 는 atom 이 처음 구독될 때부터 실행돼요."
import { atomEffect } from 'jotai-effect'
import { userAtom } from '@/features/auth/atoms'
 
// 유저 로그인/로그아웃 시 분석 이벤트 전송
const userAnalyticsEffect = atomEffect((get, set) => {
  const user = get(userAtom)
 
  if (user) {
    // 로그인 시
    analytics.identify(user.id, { name: user.name, role: user.role })
    analytics.track('user_login')
  } else {
    // 로그아웃 시
    analytics.reset()
  }
 
  // cleanup 함수 반환 가능 (WebSocket close 등)
  return () => {
    // user atom 구독이 끝날 때 실행
  }
})
 
// 다크모드 변경 시 document 클래스 동기화
import { atomWithStorage } from 'jotai/utils'
 
const isDarkModeAtom = atomWithStorage('darkMode', false)
 
const darkModeEffect = atomEffect((get) => {
  const isDark = get(isDarkModeAtom)
  // 🐣 영철: "이러면 컴포넌트에서 useEffect 로 document 를 바꿀 필요가 없네요!"
  document.documentElement.classList.toggle('dark', isDark)
})

// atomEffect 는 Provider 하위에서 useAtom 으로 활성화해야 함
function EffectActivator() {
  // 효과를 활성화하기 위해 atom 을 구독
  useAtomValue(userAnalyticsEffect)
  useAtomValue(darkModeEffect)
  return null
}
 
// Provider 하위 어딘가에 배치
function App() {
  return (
    <Provider>
      <EffectActivator />
      <MainContent />
    </Provider>
  )
}

// ❌ 컴포넌트에 분산된 side effect
const Header = () => {
  const user = useAtomValue(userAtom)
 
  // 이 사이드 이펙트는 Header 가 mount 되어야만 실행됨
  // Header 가 없으면? 분석 이벤트 안 감
  useEffect(() => {
    if (user) analytics.identify(user.id, { name: user.name })
  }, [user])
 
  return <div>...</div>
}
 
// ✅ atomEffect — atom 레벨에서 중앙 집중 관리
// Header 컴포넌트 존재 여부와 무관하게 userAtom 이 구독될 때부터 실행
const userAnalyticsEffect = atomEffect((get) => {
  const user = get(userAtom)
  if (user) analytics.identify(user.id, { name: user.name })
})

// 🦁 영호: "action atom 은 읽기 값이 null 이고, write 함수에 비즈니스 로직을 담아요.
//          컴포넌트에 API 호출 로직이 있으면 테스트가 어려워지거든요."
 
// features/study/atoms/actions.ts
import { atom } from 'jotai'
import { userAtom } from '@/features/auth/atoms'
import { studyListAtom, selectedStudyIdAtom } from './index'
 
// 스터디 신청 action atom
export const submitStudyApplicationAtom = atom(
  null, // 읽기 값 없음 (write-only)
  async (get, set, studyId: string) => {
    // 1. 전제 조건 확인 — auth atom 에서 유저 확인
    const user = get(userAtom)
    if (!user) throw new Error('로그인이 필요합니다')
 
    const studies = get(studyListAtom)
    const study = studies.find((s) => s.id === studyId)
    if (!study) throw new Error('스터디를 찾을 수 없습니다')
    if (study.memberCount >= study.maxMembers) throw new Error('정원이 초과되었습니다')
 
    // 2. 낙관적 업데이트 — UI 먼저 반영
    set(studyListAtom, (prev) =>
      prev.map((s) =>
        s.id === studyId
          ? { ...s, memberCount: s.memberCount + 1, isApplied: true }
          : s
      )
    )
 
    // 3. 서버 API 호출
    try {
      await fetch(`/api/studies/${studyId}/apply`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${user.token}` },
        body: JSON.stringify({ userId: user.id }),
      })
    } catch (error) {
      // 4. 실패 시 롤백
      set(studyListAtom, (prev) =>
        prev.map((s) =>
          s.id === studyId
            ? { ...s, memberCount: s.memberCount - 1, isApplied: false }
            : s
        )
      )
      throw error
    }
  }
)
 
// 스터디 좋아요 토글 action atom
export const toggleStudyLikeAtom = atom(
  null,
  async (get, set, studyId: string) => {
    const user = get(userAtom)
    if (!user) throw new Error('로그인이 필요합니다')
 
    // 현재 좋아요 상태 확인
    const studies = get(studyListAtom)
    const study = studies.find((s) => s.id === studyId)
    if (!study) return
 
    const isLiked = study.likedBy?.includes(user.id) ?? false
 
    // 낙관적 업데이트
    set(studyListAtom, (prev) =>
      prev.map((s) =>
        s.id === studyId
          ? {
              ...s,
              likeCount: isLiked ? s.likeCount - 1 : s.likeCount + 1,
              likedBy: isLiked
                ? s.likedBy?.filter((id) => id !== user.id)
                : [...(s.likedBy ?? []), user.id],
            }
          : s
      )
    )
 
    // 서버 동기화
    await fetch(`/api/studies/${studyId}/like`, {
      method: isLiked ? 'DELETE' : 'POST',
    })
  }
)

// 컴포넌트는 action atom 을 호출하기만 하면 됨 — 비즈니스 로직 없음
'use client'
 
import { useSetAtom, useAtomValue } from 'jotai'
import { submitStudyApplicationAtom, toggleStudyLikeAtom } from '@/features/study/atoms/actions'
 
export function StudyCard({ study }: { study: Study }) {
  // 🐣 영철: "컴포넌트가 진짜 단순해졌어요! 로직이 전부 atom 에 있으니까요"
  const submitApplication = useSetAtom(submitStudyApplicationAtom)
  const toggleLike = useSetAtom(toggleStudyLikeAtom)
 
  const handleApply = async () => {
    try {
      await submitApplication(study.id)
      // 성공 toast 등
    } catch (e) {
      // 에러 처리
      alert((e as Error).message)
    }
  }
 
  return (
    <div>
      <h3>{study.title}</h3>
      <button onClick={() => toggleLike(study.id)}>
        ❤️ {study.likeCount}
      </button>
      <button onClick={handleApply} disabled={study.isApplied}>
        {study.isApplied ? '신청 완료' : '신청하기'}
      </button>
    </div>
  )
}

// 🦁 영호: "두 라이브러리를 같이 써도 돼요. 각자 잘하는 영역이 있으니까요."
 
// Jotai — SSR 이 필요한 UI 상태 (Provider 스코프로 격리)
const userAtom = atom<User | null>(null) // SSR 에서 안전
const studyFiltersAtom = atom<StudyFilters>({ ... }) // UI 상태
 
// Zustand — React 외부에서 접근해야 하는 경우 (e.g., WebSocket 핸들러)
const useNotificationStore = create<NotificationStore>((set) => ({
  notifications: [],
  addNotification: (n) => set((state) => ({
    notifications: [...state.notifications, n],
  })),
}))
 
// WebSocket 핸들러 (React 바깥)에서 Zustand store 접근
ws.onmessage = (event) => {
  const notification = JSON.parse(event.data)
  // Zustand: React 없이도 store 에 직접 접근
  useNotificationStore.getState().addNotification(notification)
}

// ❌ Before — atoms/index.ts (800줄 혼재)
// 🐣 영철: "모든 게 여기 있어요. 뭐가 뭔지 모르겠어요."
 
export const userAtom = atom<User | null>(null)
export const sessionAtom = atom<Session | null>(null)
export const studyListAtom = atom<Study[]>([])
export const selectedStudyAtom = atom<Study | null>(null)
export const studyFiltersAtom = atom({ category: 'all', sortBy: 'latest' })
export const messagesAtom = atom<Message[]>([])
export const roomAtom = atom<Room | null>(null)
export const isModalOpenAtom = atom(false)
export const notificationsAtom = atom<Notification[]>([])
// ... 300줄 더

// ✅ After — Feature 단위로 분리
// 🦁 영호: "이렇게 나누면 각 파일이 하나의 도메인에만 집중해요."
 
// features/auth/atoms/index.ts (30줄)
export { userAtom, sessionAtom, isLoggedInAtom, isAdminAtom }
 
// features/study/atoms/index.ts (50줄)
export { studyListAtom, selectedStudyIdAtom, studyFiltersAtom, selectedStudyAtom }
 
// features/study/atoms/actions.ts (80줄)
export { submitStudyApplicationAtom, toggleStudyLikeAtom }
 
// features/chat/atoms/index.ts (30줄)
export { messagesAtom, roomAtom, isConnectedAtom }
 
// features/notification/atoms/index.ts (20줄)
export { notificationsAtom, unreadCountAtom }
 
// shared/atoms/index.ts (20줄)
export { isModalOpenAtom, themeAtom, drawerOpenAtom }
 
// → 각 파일이 자기 도메인에만 집중, 평균 30~80줄
// → git blame 이 의미 있어짐
// → 팀원이 "스터디 atom 어디?" 하면 바로 features/study/atoms 로 안내

// 공통 의존 항목을 shared/atoms 로 이동
// 또는 의존성 방향을 단방향으로 재설계

// EffectActivator 컴포넌트를 Provider 하위에 추가
function EffectActivator() {
  useAtomValue(myAtomEffect) // 구독 활성화 필수
  return null
}

// write-only atom 올바른 타입 선언
const myActionAtom = atom<
  null,           // 읽기 값 타입
  [string],       // 인자 타입 (튜플)
  Promise<void>   // 반환 타입
>(
  null, // 초기 읽기 값
  async (get, set, studyId: string) => {
    // ...
  }
)