💡 05. TypeScript 로 만드는 타입 안전한 atom

// ❌ 🐣 영철: "any 쓰면 일단 에러 없으니까 편해요!"
const studyAtom = atom\<any\>(null)
 
// 어떤 타입이든 넣을 수 있어 — TypeScript 가 검사를 포기
const Component = () => {
  const [study, setStudy] = useAtom(studyAtom)
  // study 가 null 인데도 프로퍼티 접근 — 컴파일 에러 없음!
  console.log(study.title)  // 💣 런타임 에러: Cannot read properties of null
  // 🐣 영철: "왜 에러가 나지? TypeScript 가 잡아줘야 하는 거 아닌가요?"
}

// ✅ 🦁 영호: "제네릭으로 타입을 명시하면 컴파일 타임에 잡아줘요"
const studyAtom = atom<Study | null>(null)
 
const Component = () => {
  const [study, setStudy] = useAtom(studyAtom)
  // study 가 Study | null 이므로 null 체크 없이 프로퍼티 접근 불가
  console.log(study.title)  // ✅ 컴파일 에러: 'study' is possibly 'null'
  // 에디터에서 빨간 줄 → 배포 전에 잡힘!
  if (study) {
    console.log(study.title) // 안전하게 접근
  }
}

import type { PrimitiveAtom } from 'jotai'
 
// PrimitiveAtom<T> 의 실제 정의 (Jotai 내부)
// type PrimitiveAtom<T> = WritableAtom<T, [SetStateAction<T>], void>
 
// 🦁 영호: "atom() 로 만든 기본 atom 이 바로 PrimitiveAtom 이에요"
const searchKeywordAtom: PrimitiveAtom<string> = atom('')
const isModalOpenAtom: PrimitiveAtom<boolean> = atom(false)
const userAtom: PrimitiveAtom<User | null> = atom<User | null>(null)
 
// PrimitiveAtom 은 읽기와 쓰기 모두 가능
const Component = () => {
  const [keyword, setKeyword] = useAtom(searchKeywordAtom) // ✅ 읽기 + 쓰기 모두
}

import type { Atom } from 'jotai'
 
// 🦁 영호: "read 함수만 있는 derived atom 은 Atom<T> 타입이에요. 쓸 수 없어요."
const filteredStudyListAtom: Atom<Study[]> = atom((get) => {
  const keyword = get(searchKeywordAtom)
  return get(studyListAtom).filter((s) => s.title.includes(keyword))
})
 
// ❌ Atom<T> 는 읽기 전용 — setFilteredStudyList 가 없어
const Component = () => {
  const [studies, setStudies] = useAtom(filteredStudyListAtom)
  // TypeScript 에러: Atom<Study[]> 는 WritableAtom 이 아니에요
  setStudies([]) // ❌ 컴파일 에러
}
 
// ✅ 읽기만 필요하면 useAtomValue
const Component = () => {
  const studies = useAtomValue(filteredStudyListAtom) // ✅ 읽기 전용
}

import type { WritableAtom } from 'jotai'
 
// WritableAtom<Value, Args, Result>
//   Value: atom 이 반환하는 값의 타입
//   Args: write 함수가 받는 인자 타입 (배열 형태)
//   Result: write 함수의 반환 타입
 
// 🦁 영호: "write-only atom 이나 커스텀 write 로직을 가진 atom 에 이 타입을 써요"
const asyncSubmitAtom: WritableAtom<null, [StudyFormData], Promise<void>> = atom(
  null, // read 값 없음 (write-only)
  async (_get, set, formData: StudyFormData) => {
    await fetch('/api/studies', {
      method: 'POST',
      body: JSON.stringify(formData),
    })
    set(studyListAtom, (prev) => [...prev, formData])
  }
)

import { atom } from 'jotai'
import type { Study, User, FilterType } from '@/types'
 
// 🟢 원시값 — TypeScript 가 자동 추론 (명시 생략 가능)
const likeCountAtom = atom(0)           // PrimitiveAtom<number>
const searchKeywordAtom = atom('')      // PrimitiveAtom<string>
const isModalOpenAtom = atom(false)     // PrimitiveAtom<boolean>
 
// 🟡 nullable 값 — 반드시 명시! null 초기값만으로는 타입 추론 불가
const userAtom = atom<User | null>(null)
// 🐣 영철: "atom(null) 하면 안 돼요?"
// 🦁 영호: "atom(null) 은 PrimitiveAtom<null> 이 돼요. User 를 넣을 수가 없어요."
 
// 🟡 배열 — 반드시 명시! [] 초기값만으로는 원소 타입 추론 불가
const studyListAtom = atom<Study[]>([])
// 🐣 영철: "atom([]) 하면 PrimitiveAtom<never[]> 가 된다고요?"
// 🦁 영호: "맞아요. never[] 에는 아무것도 못 넣어요."
 
// 🟡 유니언 타입
const activeFilterAtom = atom<FilterType>('all') // FilterType = 'all' | 'active' | 'closed'
 
// 🔴 복잡한 객체 — 명시 강력 권장
interface StudyFilter {
  keyword: string
  tags: string[]
  category: string | null
  sortBy: 'latest' | 'popular'
}
 
const studyFilterAtom = atom<StudyFilter>({
  keyword: '',
  tags: [],
  category: null,
  sortBy: 'latest',
})

// ❌ Before — 영철의 any 남발
// 🐣 영철: "일단 any 로 다 뚫고 나중에 타입 넣겠습니다"
const userAtom = atom\<any\>(null)        // any 지옥 시작
const studyListAtom = atom\<any\>([])     // any 전염
const filterAtom = atom\<any\>({})        // any 확산
 
// 컴포넌트에서 자동완성 없음, 오타 잡기 불가, 런타임 폭탄 내재
const Component = () => {
  const [user] = useAtom(userAtom)
  return <div>{user.name}</div>         // null 일 때 런타임 터짐
}

// ✅ After — 영호가 리팩토링한 버전
// 🦁 영호: "타입을 명시하면 IDE 가 자동완성 + 에러 감지를 해줘요"
const userAtom = atom<User | null>(null)
const studyListAtom = atom<Study[]>([])
const filterAtom = atom<StudyFilter>({
  keyword: '',
  tags: [],
  category: null,
  sortBy: 'latest',
})
 
// 컴포넌트에서 자동완성 완벽 작동, 컴파일 타임에 에러 감지
const Component = () => {
  const user = useAtomValue(userAtom)
  if (!user) return <LoginPrompt />       // null 가드 강제
  return <div>{user.name}</div>           // 자동완성으로 .name 추천
}

import { atom } from 'jotai'
import type { PrimitiveAtom } from 'jotai'
import type { Study } from '@/types'
 
// 🦁 영호: "반환 타입을 PrimitiveAtom<T> 로 명시하는 게 실무 관례예요"
function createStudyDetailAtom(initialStudy: Study): PrimitiveAtom<Study> {
  return atom(initialStudy)
}
 
// 사용 시 — 타입이 자동으로 Study 로 좁혀짐
const reactStudyAtom = createStudyDetailAtom({
  id: '001',
  title: 'React 심화',
  members: [],
  isActive: true,
})
 
// 🐣 영철: "오, 자동완성이 Study 필드를 다 보여줘요!"
const Component = () => {
  const [study, setStudy] = useAtom(reactStudyAtom)
  return (
    <div>
      {study.title}  {/* ✅ 자동완성 완벽 작동 */}
      <button onClick={() => setStudy((prev) => ({ ...prev, isActive: false }))}>
        스터디 종료
      </button>
    </div>
  )
}

// 🦁 영호: "제네릭 factory 를 만들면 타입별로 재사용할 수 있어요"
function createOptionalAtom<T>(initialValue: T | null = null): PrimitiveAtom<T | null> {
  return atom<T | null>(initialValue)
}
 
// 타입별 atom 생성
const selectedStudyAtom = createOptionalAtom<Study>()
// → PrimitiveAtom<Study | null>
 
const hoveredCommentAtom = createOptionalAtom<Comment>()
// → PrimitiveAtom<Comment | null>
 
// 🦁 영호: "이 패턴으로 '선택된 항목' atom 을 일관되게 만들 수 있어요"

// ✅ 모듈 레벨에서 미리 생성 — 렌더링과 무관
const studyAtoms = {
  react: createStudyDetailAtom(reactStudy),
  typescript: createStudyDetailAtom(typescriptStudy),
  nextjs: createStudyDetailAtom(nextjsStudy),
}
 
// 컴포넌트에서는 꺼내 쓰기만
const ReactStudyCard = () => {
  const [study] = useAtom(studyAtoms.react)
  return <StudyCard study={study} />
}

// ❌ 🐣 영철의 방식 — 3개의 독립 atom
const isLoadingAtom = atom(false)
const isErrorAtom = atom(false)
const dataAtom = atom<Study[] | null>(null)
 
// 🐣 영철: "뭐가 문제죠? 각각 관리하면 되잖아요."
// 🦁 영호: "isLoading=true, isError=true, data=[...] 가 동시에 가능해요.
//          논리적으로 불가능한 상태 조합이 타입 레벨에서 허용되는 거예요."
 
// 실제로 이런 코드가 생겨:
const setBothTrueByMistake = () => {
  setIsLoading(true)   // 로딩 시작
  setIsError(true)     // 🤔 로딩 중인데 에러?
  setData([])          // 🤔 에러인데 데이터?
}
// TypeScript 는 이걸 에러로 보지 않아!

// ✅ 🦁 영호: "discriminated union 으로 '가능한 상태' 만 타입으로 허용해요"
type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error }
 
// 'idle' 일 때는 data 와 error 프로퍼티가 없음
// 'loading' 일 때는 data 와 error 프로퍼티가 없음
// 'success' 일 때는 반드시 data 가 있음
// 'error' 일 때는 반드시 error 가 있음
 
const studyFetchStateAtom = atom<FetchState<Study[]>>({ status: 'idle' })
 
// 사용할 때 — TypeScript 가 status 에 따른 타입을 자동으로 좁혀줌
const StudyList = () => {
  const [fetchState, setFetchState] = useAtom(studyFetchStateAtom)
 
  const loadStudies = async () => {
    setFetchState({ status: 'loading' })
    // 🐣 영철: "loading 상태에서 data 를 같이 넣을 수 없어요?"
    // setFetchState({ status: 'loading', data: [] }) // ❌ 컴파일 에러!
 
    try {
      const data = await fetchStudies()
      setFetchState({ status: 'success', data })
      // success 상태엔 반드시 data 가 있어야 함 — 타입이 강제
    } catch (error) {
      setFetchState({ status: 'error', error: error as Error })
    }
  }
 
  // status 로 좁히면 TypeScript 가 data/error 존재를 보장해줌
  if (fetchState.status === 'idle') {
    return <button onClick={loadStudies}>스터디 불러오기</button>
  }
  if (fetchState.status === 'loading') {
    return <Spinner />
  }
  if (fetchState.status === 'error') {
    return <ErrorMessage error={fetchState.error} />
    // fetchState.error ← TypeScript 가 여기서 error 가 있다고 보장
  }
  // status === 'success' 이면 data 가 반드시 있음
  return <ul>{fetchState.data.map((s) => <StudyCard key={s.id} study={s} />)}</ul>
  //                          ↑ 자동완성 완벽
}

// atoms/utils.ts — 팀 전체가 공유하는 FetchState 타입 유틸
export type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error }
 
// FetchState 를 쉽게 만드는 헬퍼 (타입 안전)
export const FetchStates = {
  idle: (): FetchState<never> => ({ status: 'idle' }),
  loading: (): FetchState<never> => ({ status: 'loading' }),
  success: <T>(data: T): FetchState<T> => ({ status: 'success', data }),
  error: (error: Error): FetchState<never> => ({ status: 'error', error }),
}
 
// 사용:
// setFetchState(FetchStates.success(data)) — 타입 안전하게 상태 전환

import type { WritableAtom } from 'jotai'
 
// 🦁 영호: "write-only atom 은 read 값이 null 이고, Args 와 Result 를 명시해요"
// WritableAtom<null, [인자타입], 반환타입>
 
// 스터디 좋아요 토글 action atom
const toggleStudyLikeAtom: WritableAtom<null, [studyId: string], void> = atom(
  null, // read 는 null — 이 atom 의 값을 읽을 필요 없음
  (_get, set, studyId: string) => {
    set(studyLikeMapAtom, (prev) => {
      const next = new Map(prev)
      next.set(studyId, !prev.get(studyId))
      return next
    })
  }
)
 
// 비동기 write-only atom
const submitStudyApplicationAtom: WritableAtom<null, [StudyFormData], Promise<void>> = atom(
  null,
  async (_get, set, formData: StudyFormData) => {
    await fetch('/api/applications', {
      method: 'POST',
      body: JSON.stringify(formData),
    })
    // 성공 후 목록 갱신 atom 트리거
    set(studyListRefreshAtom, (prev) => prev + 1)
  }
)
 
// 사용 — useSetAtom 으로 setter 만 가져옴
const ApplyButton = ({ studyId }: { studyId: string }) => {
  const toggleLike = useSetAtom(toggleStudyLikeAtom)
  return (
    <button onClick={() => toggleLike(studyId)}>
      좋아요
    </button>
  )
}

// 🦁 영호: "Args 는 배열이에요. 여러 인자를 넘길 때 이렇게 해요"
const updateStudyMemberAtom: WritableAtom<null, [studyId: string, userId: string, role: 'member' | 'leader'], void> = atom(
  null,
  (_get, set, studyId, userId, role) => {
    set(studyMembersAtom, (prev) => ({
      ...prev,
      [studyId]: prev[studyId].map((m) =>
        m.id === userId ? { ...m, role } : m
      ),
    }))
  }
)
 
// 사용
const MemberActions = ({ studyId, userId }: { studyId: string; userId: string }) => {
  const updateRole = useSetAtom(updateStudyMemberAtom)
  return (
    <button onClick={() => updateRole(studyId, userId, 'leader')}>
      리더 임명
    </button>
  )
}

// ✅ TypeScript 가 자동 추론하는 경우 (대부분의 경우)
const countAtom = atom(0)
const [count, setCount] = useAtom(countAtom)
// count: number, setCount: SetAtom<[SetStateAction<number>], void>
// → 명시 불필요
 
const userAtom = atom<User | null>(null)
const user = useAtomValue(userAtom)
// user: User | null → 명시 불필요
 
// 🔴 명시가 필요한 경우 — 타입 가드 없이 좁히고 싶을 때
const [user] = useAtom(userAtom)
// user 타입이 User | null 인데, 특정 컨텍스트에서 User 임이 확실할 때
const assertedUser = user as User // 타입 단언 (주의: null 가드 후에만)

import type { ExtractAtomValue } from 'jotai'
 
// 🦁 영호: "atom 의 값 타입을 추출해야 할 때 ExtractAtomValue 를 써요"
const userAtom = atom<User | null>(null)
 
type UserAtomValue = ExtractAtomValue<typeof userAtom>
// → User | null
 
// 함수 인자 타입으로 활용
function processUser(user: ExtractAtomValue<typeof userAtom>) {
  if (!user) return null
  return user.name.toUpperCase()
}

// 🦁 영호: "실무에서 자주 쓰는 패턴이에요"
import type { ExtractAtomValue, useAtomValue } from 'jotai'
import { userAtom } from '@/atoms/auth'
import { useQuery } from '@tanstack/react-query'
 
// atom 의 타입을 직접 import 하지 않고 ExtractAtomValue 로 추출
function useUserProfile(user: ExtractAtomValue<typeof userAtom>) {
  return useQuery({
    queryKey: ['user', user?.id],
    queryFn: () => fetch(`/api/users/${user?.id}`).then((r) => r.json()),
    enabled: !!user,
  })
}

const studyAtom = atom<Study>(null) // ❌ null 은 Study 가 아님

const studyAtom = atom<Study | null>(null) // ✅ nullable 명시

const studyListAtom = atom([]) // PrimitiveAtom<never[]>
const [studies] = useAtom(studyListAtom)
studies.push({ id: '1' }) // ❌ Type '{ id: string }' is not assignable to type 'never'

const studyListAtom = atom<Study[]>([]) // ✅ 원소 타입 명시

// ❌ Args 는 반드시 배열(tuple) 형태여야 해
const badAtom: WritableAtom<null, string, void> = atom(null, (_g, _s, id: string) => {})
//                                  ↑ 배열이 아님!

// ✅ Args 를 배열(tuple) 로 감싸야 함
const goodAtom: WritableAtom<null, [string], void> = atom(null, (_g, _s, id: string) => {})
//                                  ↑ [string] — 1개 인자를 배열로

const selectedStudyAtom = atom<any>(null)
 
const ApplyPage = () => {
  const [study] = useAtom(selectedStudyAtom)
  return <h1>{study.title}</h1>  // 에러 발생 지점
}