안재관

// Before — 공통 prefix 하나로 전체 무효화
['queries']
invalidateQueries(['queries'])   // 댓글 하나 수정에도 전 화면 refetch

// After — 도메인 / 맥락 / 식별자 / 연관 데이터로 계층화
['queries', 'board', 'detail', id, 'comment']

// mutation 이후, onSuccess에서 실제 변경된 범위만 무효화
onSuccess: () => {
  queryClient.invalidateQueries(
    ['queries', 'board', 'detail', id, 'comment']
  )
}

export const getServerSideProps = async () => {
  const queryClient = new QueryClient()

  // 여러 설정 API를 병렬로 prefetch하는 내부 유틸
  await prefetchAll(queryClient, {
    '/api/happycall/self/config/global': ['selfConfigGlobal'],
    '/api/happycall/self/center/status': ['getCenterStatus'],
  })

  return { props: { dehydratedState: dehydrate(queryClient) } }
}

// 초기 진입: URL 쿼리를 payload에 병합해 검색 상태 복원
const [payload, setPayload] = useState<IInquiryPayload>({
  startDate: oneMonthAgo,
  endDate: today,
  ...router.query,
  assignedToSrl: Number(router.query.assignedToSrl) || undefined,
})

// 필터 변경: SSR 재호출 없이 URL만 갱신 → 같은 URL이면 같은 결과
useEffect(() => {
  router.replace({ query: { ...payload } }, undefined, { shallow: true })
}, [payload])

// 역할별 노출 정책은 훅 안에서 일괄 결정 — UI는 결과값만 참조
const isRegist = ['SELLERS', 'COMPANY_A'].includes(companyType)
const isHowser = companyType === 'HOWSER'

// ComponentPropsWithoutRef<C>로 전달된 요소의 네이티브 props를 확장하고,
// 이름이 겹치면 커스텀 props(TButtonProps)가 우선하도록 Omit으로 충돌 제거
type PolymorphicProps<C extends React.ElementType> = {
  as?: C
} & TButtonProps
  & Omit<React.ComponentPropsWithoutRef<C>, keyof TButtonProps>

type ButtonProps<C extends React.ElementType> = PolymorphicProps<C>

// 사용처 — as에 따라 네이티브 props가 정확히 추론된다
<Button as="a" href="/docs" target="_blank">가이드</Button>
<Button as="label" htmlFor="file-input">파일 선택</Button>

## 2026-07-29 04:01 · 5 runs · mobile/simulated · vs 2026-07-28 10:17

데이터: 태스크 9,029 (완료 6,287) · 공고 200 · 템플릿 30 · 퀴즈기록 29

| Page  | Perf     | LCP           | TBT            | SI            |
|-------|----------|---------------|----------------|---------------|
| /jobs | 95 🟢+14 | 2.57s 🟢-0.11s | 171ms 🟢-439ms | 1.33s 🟢-0.19s |

// 한 번에 그리는 카드 수. 공고 카드는 아이콘 svg까지 포함해 1장당 약 30 DOM 노드라,
// 전체를 한 번에 그리면 노드 수가 그대로 Style & Layout 비용이 된다
// (공고 200개 = 5,995 노드 → styleLayout 1,257ms → TBT 681ms, 2026-07-29 측정).
const PAGE_SIZE = 20

// 목록은 마감일 오름차순이라 방금 추가한 공고가 잘린 뒤쪽에 놓일 수 있다. 그러면
// "저장했는데 화면에 안 나타난다"가 된다 — 노출 범위를 그 항목까지 늘려서 막는다.
const visiblePostings = useMemo(() => {
  const createdIndex = createdId ? postings.findIndex((p) => p.id === createdId) : -1
  const count = createdIndex >= visibleCount ? createdIndex + 1 : visibleCount
  return postings.slice(0, count)
}, [postings, visibleCount, createdId])

const TOGGLE_TASK_MUTATION_KEY = ['toggle-task'] as const

// 같은 태스크에 대해 진행 중인 토글이 자기 자신뿐인지 (= 내가 최신 토글인지).
// 콜백 시점에는 자기 뮤테이션도 pending으로 집계되므로 1이면 마지막이다.
const isLatestToggleFor = (id: string) =>
  queryClient.isMutating({
    mutationKey: TOGGLE_TASK_MUTATION_KEY,
    predicate: (m) =>
      (m.state.variables as { id?: string } | undefined)?.id === id,
  }) === 1

// ...
onSuccess: (updated) => {
  // 같은 태스크의 더 새로운 토글이 진행 중이면 이 응답은 이미 낡은
  // 값이므로 버린다. (완료→취소를 연타하면 먼저 온 "완료" 응답이 취소의
  // 낙관적 상태를 덮어써 체크박스가 완료로 깜빡였다가 돌아오는 문제)
  if (!isLatestToggleFor(updated.id)) return
  queryClient.setQueryData<Task[]>(
    taskKeys.byScope(scope, targetDate),
    (old) =>
      (old ?? []).map((task) => (task.id === updated.id ? updated : task))
  )
},
onError: (_err, vars, context) => {
  // 더 새로운 토글이 진행 중이면 그쪽의 낙관적 상태가 최신 의도이므로
  // 이 스냅샷으로 되돌리지 않는다 (되돌리면 최신 의도를 덮어쓴다).
  if (context?.previous && isLatestToggleFor(vars.id)) {
    queryClient.setQueryData(taskKeys.byScope(scope, targetDate), context.previous)
  }
},

// cancelQueries가 먼저인 이유 — invalidateQueries만 호출하면 재요청이
// 진행 중인 요청으로 dedupe되어, 그 낡은 응답이 신선한 데이터로 캐시에 안착한다.
// 결과: 방금 추가한 템플릿의 태스크가 staleTime(5분) 동안 화면에 안 나타난다.
// 진행 중인 요청을 먼저 취소해야 새 요청이 실제로 나간다.
const invalidateToday = useCallback(async () => {
  await queryClient.cancelQueries({ queryKey: taskKeys.scope('daily') })
  await queryClient.invalidateQueries({ queryKey: taskKeys.scope('daily') })
}, [queryClient])

// 시드 기반 PRNG(mulberry32). Math.random()으로 셔플하면 서버와 클라이언트의
// 결과가 달라 hydration 불일치로 카드 트리가 재생성되고 그 사이 클릭이
// 유실된다. 서버 컴포넌트가 내려준 시드로 양쪽이 같은 순서를 만들게 한다.
function mulberry32(seed: number) {
  let a = seed
  return () => {
    a |= 0
    a = (a + 0x6d2b79f5) | 0
    let t = Math.imul(a ^ (a >>> 15), 1 | a)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

export function useQuiz(questions: QuizQuestion[], seed: number) {
  const [shuffled] = useState(() => shuffle(questions, mulberry32(seed)))
  // ...
}

/**
 * 타이머 상태 모델 — "몇 초 남았다/지났다"를 매 초 증감하는 대신
 * 시작 시각(startedAt)과 그 시점의 기준값(base)만 저장하고 표시값은 현재
 * 시각에서 파생 계산한다. 탭 스로틀로 setInterval이 늦게 돌아도 드리프트가
 * 없고, localStorage에 저장하면 페이지 이탈/새로고침 후에도 이어서 돈다.
 */
interface TimerState {
  mode: TimerMode
  /** 실행 중이면 시작(재개) 시각 epoch ms, 정지 상태면 null */
  startedAt: number | null
  /** stopwatch: 마지막 정지 시점까지의 누적 경과 초 */
  elapsedBase: number
  /** timer: 시작(재개) 시점 기준 남은 초 */
  remainingBase: number
  configured: number
}

// 표시값은 항상 현재 시각에서 파생 — 인터벌은 now만 갱신한다
const runningDelta = isRunning
  ? Math.max(0, Math.floor((now - state.startedAt) / 1000))
  : 0
const elapsed = state.elapsedBase + (state.mode === 'stopwatch' ? runningDelta : 0)
const remaining = Math.max(0, state.remainingBase - (state.mode === 'timer' ? runningDelta : 0))