whole-library reference

전체 구조와 API 파이프라인

이 문서는 라이브러리의 24개 소스 파일이 서로를 어떻게 참조하는지, 그리고 소비자가 내보내진 각 API를 호출했을 때 데이터가 어떤 파일들을 거쳐 처리되는지를 한곳에 정리합니다.

React 19.2의 <Activity mode="visible|hidden">를 사용해, 구조가 완전히 다른 모바일/데스크톱 트리를 브레이크포인트가 바뀌어도 마운트된 채로(상태 보존) 유지합니다. 전환 시 스크롤·입력·열림 상태가 사라지지 않습니다. Activity가 없는 런타임에서는 자동으로 swap으로 폴백합니다.

React 19.2 · <Activity> 7 public APIs 24 source files · 4 layers 정수 px breakpoints SSR-safe · useSyncExternalStore

layered architecture

4개 레이어

import은 항상 위 레이어 → 아래 레이어로만 흐릅니다(순환 없음). 아래로 갈수록 순수하고 React에 덜 의존합니다. 칩을 누르면 아래 그래프에서 해당 파일이 선택됩니다.

file reference graph

모든 파일 간 참조 관계

노드를 클릭하면 그 파일이 import 하는 파일(주황)과 그 파일을 import 하는 파일(파랑)이 강조됩니다. 점선은 타입 전용 import입니다.

← 왼쪽일수록 순수/리프 · 오른쪽일수록 상위(배럴 index.ts). 실선=값 import, 점선=타입 import, 굵은 재내보내기 화살표는 index.ts에서 나옵니다.

consumer api → data pipeline

API별 사용 예시와 처리 파이프라인

내보내진 7개 API 각각에 대해, 소비자 코드(패턴)와 그 호출이 거치는 파일 파이프라인을 단계로 보여줍니다. 각 단계의 파일 칩을 누르면 위 그래프에서 그 파일이 선택됩니다.

file-by-file

파일별 내용과 역할

테스트를 제외한 24개 소스 파일 전부의 역할과 실제 코드입니다. 헤더를 누르면 펼쳐지고, 위 그래프·파이프라인의 파일 칩이나 상세 패널의 "소스 보기"에서도 해당 카드로 이동합니다.