🧩 03. 파생 atom — 상태를 조립하는 기술

// ❌ 🐣 영철의 코드 — 컴포넌트가 너무 똑똑해
const StudyListPage = () => {
  const studyList = useAtomValue(studyListAtom)
  const keyword = useAtomValue(searchKeywordAtom)
  const filter = useAtomValue(studyFiltersAtom)
 
  // 계산 로직이 컴포넌트 안에 있음
  const filtered = studyList
    .filter((s) => s.category === filter.category || filter.category === 'all')
    .filter((s) => s.title.includes(keyword))
    .sort((a, b) => filter.sortBy === 'popular' ? b.likeCount - a.likeCount : 0)
 
  return <div>{filtered.map((s) => <StudyCard key={s.id} study={s} />)}</div>
}

// ✅ 🦁 영호의 코드 — 계산 로직을 파생 atom 으로 분리
const filteredStudyListAtom = atom((get) => {
  const studyList = get(studyListAtom)
  const keyword = get(searchKeywordAtom)
  const filter = get(studyFiltersAtom)
 
  return studyList
    .filter((s) => filter.category === 'all' || s.category === filter.category)
    .filter((s) => s.title.toLowerCase().includes(keyword.toLowerCase()))
    .sort((a, b) => filter.sortBy === 'popular' ? b.likeCount - a.likeCount : 0)
})
 
// 컴포넌트는 단순해짐
const StudyListPage = () => {
  const filtered = useAtomValue(filteredStudyListAtom) // 계산 결과만 구독
  return <div>{filtered.map((s) => <StudyCard key={s.id} study={s} />)}</div>
}

// 1. Read-only — 읽기만 가능한 계산 결과
const fullNameAtom = atom((get) =>
  `${get(firstNameAtom)} ${get(lastNameAtom)}`
)
 
// 2. Write-only — 쓰기만 가능한 액션
const resetFiltersAtom = atom(null, (get, set) => {
  set(searchKeywordAtom, '')
  set(studyFiltersAtom, { category: 'all', tags: [], sortBy: 'latest' })
})
 
// 3. Read-Write — 읽기 + 쓰기 양방향
const celsiusAtom = atom(
  (get) => (get(fahrenheitAtom) - 32) * 5 / 9,   // 읽기: 화씨 → 섭씨
  (get, set, celsius: number) => {                 // 쓰기: 섭씨 → 화씨
    set(fahrenheitAtom, celsius * 9 / 5 + 32)
  }
)

// read 함수(첫 번째 인수)만 있으면 read-only atom
const derivedAtom = atom((get) => {
  const value = get(anotherAtom) // 다른 atom 의 값을 읽기
  return value * 2               // 새로운 값 반환
})

// atoms/study.ts
 
// 원본 atom
export const allStudyListAtom = atom<Study[]>([])
export const searchKeywordAtom = atom('')
export const studyFiltersAtom = atom<StudyFilter>({
  category: 'all',
  tags: [],
  sortBy: 'latest',
})
 
// 파생 atom — 필터 + 검색 + 정렬 조합
export const filteredStudyListAtom = atom((get) => {
  const all = get(allStudyListAtom)
  const keyword = get(searchKeywordAtom)
  const { category, tags, sortBy } = get(studyFiltersAtom)
 
  return all
    .filter((s) => category === 'all' || s.category === category)
    .filter((s) => tags.length === 0 || tags.every((t) => s.tags.includes(t)))
    .filter((s) => s.title.toLowerCase().includes(keyword.toLowerCase()))
    .sort((a, b) => {
      if (sortBy === 'popular') return b.likeCount - a.likeCount
      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
    })
})
 
// 파생 atom — 카테고리별 개수
export const studyCountByCategoryAtom = atom((get) => {
  const all = get(allStudyListAtom)
  return all.reduce<Record<string, number>>((acc, study) => {
    acc[study.category] = (acc[study.category] ?? 0) + 1
    return acc
  }, {})
})

// 로그인한 유저가 좋아요한 스터디만 필터링
export const myLikedStudiesAtom = atom((get) => {
  const allStudies = get(allStudyListAtom)
  const user = get(userAtom)
  if (!user) return []
  return allStudies.filter((s) => user.likedStudyIds.includes(s.id))
})
 
// 컴포넌트에서 사용 — 딱 한 줄
const MyLikedStudies = () => {
  const myStudies = useAtomValue(myLikedStudiesAtom)
  return <StudyList studies={myStudies} />
}

// read 자리에 null, write 함수만 있으면 write-only atom
const actionAtom = atom(
  null,                                    // read: null (값 없음)
  (get, set, payload: SomeType) => {       // write: 실제 액션 로직
    set(atomA, payload.a)
    set(atomB, (prev) => prev + payload.b)
  }
)

// 🦁 영호: "여러 atom 을 한 번에 초기화해야 할 때 write-only atom 이 딱이에요"
export const resetAllFiltersAtom = atom(
  null,
  (_get, set) => {
    set(searchKeywordAtom, '')
    set(studyFiltersAtom, { category: 'all', tags: [], sortBy: 'latest' })
  }
)
 
// 컴포넌트에서 사용
const FilterResetButton = () => {
  const resetFilters = useSetAtom(resetAllFiltersAtom)
  return <button onClick={() => resetFilters()}>필터 초기화</button>
}

// API 호출 + 상태 업데이트를 하나의 액션으로
export const toggleLikeAtom = atom(
  null,
  async (_get, set, studyId: string) => {
    // 낙관적 업데이트 (API 응답 전에 UI 먼저 변경)
    set(allStudyListAtom, (prev) =>
      prev.map((s) =>
        s.id === studyId
          ? { ...s, likeCount: s.likeCount + 1, isLiked: true }
          : s
      )
    )
 
    try {
      await api.toggleLike(studyId)
    } catch {
      // 실패 시 롤백
      set(allStudyListAtom, (prev) =>
        prev.map((s) =>
          s.id === studyId
            ? { ...s, likeCount: s.likeCount - 1, isLiked: false }
            : s
        )
      )
    }
  }
)
 
const LikeButton = ({ studyId }: { studyId: string }) => {
  const toggleLike = useSetAtom(toggleLikeAtom)
  return (
    <button onClick={() => toggleLike(studyId)}>❤️</button>
  )
}

const derivedAtom = atom(
  (get) => transformRead(get(sourceAtom)),           // 읽기: 변환 후 반환
  (get, set, newValue: OutputType) => {              // 쓰기: 역변환 후 원본 업데이트
    set(sourceAtom, transformWrite(newValue))
  }
)

// URL 쿼리스트링 ↔ 필터 atom 양방향 동기화
export const urlSyncedCategoryAtom = atom(
  (get) => get(studyFiltersAtom).category,             // 읽기: 필터에서 카테고리 추출
  (get, set, newCategory: string) => {                 // 쓰기: 필터 업데이트
    set(studyFiltersAtom, (prev) => ({
      ...prev,
      category: newCategory,
    }))
    // URL 도 동시 업데이트 (Next.js router)
    const params = new URLSearchParams(window.location.search)
    params.set('category', newCategory)
    window.history.replaceState(null, '', `?${params.toString()}`)
  }
)
 
// 사용 — 마치 일반 atom 처럼
const CategoryFilter = () => {
  const [category, setCategory] = useAtom(urlSyncedCategoryAtom)
  return (
    <select value={category} onChange={(e) => setCategory(e.target.value)}>
      <option value="all">전체</option>
      <option value="frontend">프론트엔드</option>
      <option value="backend">백엔드</option>
    </select>
  )
}

// 특정 태그가 선택된 상태 ↔ 전체 태그 목록
const makeTagSelectedAtom = (tag: string) =>
  atom(
    (get) => get(studyFiltersAtom).tags.includes(tag),  // 읽기: 포함 여부
    (get, set, isSelected: boolean) => {                 // 쓰기: 추가/제거
      set(studyFiltersAtom, (prev) => ({
        ...prev,
        tags: isSelected
          ? [...prev.tags, tag]
          : prev.tags.filter((t) => t !== tag),
      }))
    }
  )
 
// 체크박스 컴포넌트
const TagCheckbox = ({ tag }: { tag: string }) => {
  const tagAtom = useMemo(() => makeTagSelectedAtom(tag), [tag])
  const [isSelected, setIsSelected] = useAtom(tagAtom)
  return (
    <label>
      <input
        type="checkbox"
        checked={isSelected}
        onChange={(e) => setIsSelected(e.target.checked)}
      />
      {tag}
    </label>
  )
}

// 의존성이 매 실행마다 달라지는 경우
const dynamicAtom = atom((get) => {
  const isLoggedIn = get(isLoggedInAtom)
 
  if (isLoggedIn) {
    // 로그인 상태일 때만 userAtom 을 구독
    return get(userAtom)?.name ?? '로그인 유저'
  }
 
  // 비로그인 상태일 때는 userAtom 을 구독하지 않음
  return '게스트'
})
 
// 동작:
// - isLoggedIn = false → userAtom 비구독, isLoggedInAtom 만 구독
// - isLoggedIn = true  → userAtom + isLoggedInAtom 둘 다 구독

// ❌ 문제: get 없이 직접 모듈 변수를 참조하면 반응성 없음
let externalValue = 0
const brokenAtom = atom(() => externalValue * 2)
// externalValue 가 바뀌어도 brokenAtom 은 재계산 안 됨!
 
// ✅ 반드시 get 으로 읽어야 의존성 등록
const correctAtom = atom((get) => get(sourceAtom) * 2)

// ❌ 잘못된 예
const baseAtom = atom(0)
let externalRef = 0
 
const derivedAtom = atom(() => externalRef * 2) // get 없음 → 의존성 없음!
 
// ✅ 올바른 예
const derivedAtom = atom((get) => get(baseAtom) * 2) // get 으로 의존성 등록

// ❌ 타입 오류
const actionAtom = atom(null, (get, set) => { ... })
 
// ✅ 타입 명시
const actionAtom = atom<null, [payload: string], void>(
  null,
  (_get, set, payload) => {
    set(someAtom, payload)
  }
)

const unlikeStudyAtom = atom(
  ______,                                          // (1)
  (_get, set, studyId: string) => {
    set(allStudyListAtom, (prev) =>
      prev.______(                                 // (2)
        (s) => s.id === studyId
          ? { ...s, likeCount: s.likeCount - 1, isLiked: false }
          : s
      )
    )
  }
)