한국어

API 레퍼런스

`LynxConsole` props

Prop	타입	기본값	설명
`theme`	`"light" \| "dark"`	`"light"`	콘솔 UI 테마예요.
`safeAreaInsetBottom`	`string`	`"50px"`	패널 하단 세이프 에어리어 값이에요.
`safeAreaInsetTop`	`string`	`"24px"`	상단 세이프 에어리어 값이에요. 사이드 패널로 열릴 때만 써요(아래 참고).
`customTabs`	`CustomTab[]`	`undefined`	콘솔에 추가로 표시할 탭이에요.
`initialPosition`	`{ top?: number; left?: number; right?: number; bottom?: number }`	`{ right: 16, bottom: 84 }`	플로팅 버튼의 초기 위치(px)예요. 각 변이 독립적이라 원하는 모서리에 붙일 수 있어요(예: `{ top: 50, left: 16 }`). `top`과 `bottom` (또는 `left`와 `right`)을 함께 주면 `top` / `left`가 이겨요. 사용자가 버튼을 드래그한 뒤에는 저장된 위치가 우선해요.
`renderFloatingButton`	`false \| ((props: FloatingButtonRenderProps) => ReactNode)`	`undefined`	기본 버튼과 리로드 버튼을 교체해요. `open`과 `isOpen`을 받아요. `null`을 반환하면 숨겨요. 훅이 `LynxConsole.initialPosition`을 자동으로 읽어서 `useFloatingButtonDrag({ onTap: open })`만 쓰면 돼요. 훅에 `initialPosition`을 직접 넘기면 그 값이 우선해요. 둘 다 생략하면 `{ right: 16, bottom: 84 }`를 사용해요. `false`를 전달하거나 prop을 생략하면 기본 버튼을 사용해요. `enabled && renderer`로 조건에 따라 전환할 수 있어요. 콜백에서 `null`을 반환하면 버튼을 숨겨요.

`CustomTab`

콘텐츠 탭과 로그 필터 탭, 둘 중 하나예요. 필터 탭은 기본 Log / Network / Perf 탭 옆에 나란히 놓여요. 콘텐츠 탭은 구분선 뒤에 놓이고 본문을 통째로 바꿔요. 탭은 한 번에 하나만 켜져요.

속성	타입	설명
`key`	`string`	탭의 고유 식별자예요.
`label`	`string`	탭에 표시할 텍스트예요.
`renderContent`	`() => ReactNode`	콘텐츠 탭: 탭 콘텐츠를 렌더하는 함수예요.
`filter`	`string \| RegExp \| (entry: LogEntry) => boolean`	필터 탭: 조건에 맞는 콘솔 로그만 보여줘요. 문자열은 찍힌 텍스트(`%c` · `%s` 서식 적용 후)에 포함되면, 정규식은 그 텍스트가 통과하면 매칭돼요.
`renderEntry`	`(entry: LogEntry) => ReactNode`	필터 탭 선택 항목: 그 탭만 단독으로 켰을 때 매칭된 로그 한 줄을 그려요. 기본은 평소 로그 한 줄과 같은 모양이에요.

`LynxConsoleHandle`

LynxConsole에 ref를 달면 쓸 수 있어요.

메서드	설명
`open()`	콘솔을 열어요.
`close()`	콘솔을 닫아요.
`isOpen()`	콘솔이 열려 있는지 반환해요.

모니터 초기화 함수

lynx-console/setup에서 가져와, 앱 진입점에서 호출해요.

함수	설명
`initLogMonitor()`	`console.log`, `console.error` 등을 캡처해요.
`initMainThreadConsole()`	메인 스레드의 콘솔 출력을 캡처해요. `initLogMonitor()`가 먼저 필요해요.
`initNetworkMonitor(options?)`	`fetch` 요청을 가로채서 기록해요.
`initPerformanceMonitor(options?)`	성능 지표를 수집해요.

초기화한 모니터의 탭만 렌더돼요. 켠 탭이 하나도 없으면 전부 보여줘요.

options.console(기본값 true)을 켜두면 수집한 엔트리를 %c로 꾸민 요약 한 줄과 엔트리 객체로 콘솔에도 찍어서, Lynx DevTool 에서 볼 수 있어요. "plain"은 스타일 없는 텍스트로 찍고, false는 안 찍어요. Lynx DevTool을 참고해요.

`isNetworkLog(entry)` / `isPerformanceLog(entry)`

LogEntry가 네트워크 모니터 또는 성능 모니터가 찍은 줄인지 돌려줘요. 필터 탭에 filter: isNetworkLog로 쓰려고 있어요.

`useFloatingButtonDrag`

커스텀 버튼에 드래그를 붙이는 공개 훅이에요. UseFloatingButtonDragOptions, InitialPosition 타입과 함께 lynx-console에서 import해요.

const drag = useFloatingButtonDrag({ onTap: open });

Option	Type	Description
`onTap`	`() => void`	드래그 없이 탭했을 때 호출해요.
`initialPosition`	`InitialPosition`	훅이 `LynxConsole.initialPosition`을 자동으로 읽어서 `useFloatingButtonDrag({ onTap: open })`만 쓰면 돼요. 훅에 `initialPosition`을 직접 넘기면 그 값이 우선해요. 둘 다 생략하면 `{ right: 16, bottom: 84 }`를 사용해요.

Return	Description
`positionStyle`	fixed 래퍼의 style에 펼쳐 넣어요.
`dragHandlers`	드래그 영역에 펼쳐 넣어요. 탭도 처리해요.
`stopDragHandlers`	독립적인 자식 버튼에 펼쳐 넣고 해당 버튼의 `bindtap`을 연결해요.
`dragOverlayHandlers`	null이 아닐 때 전체 화면의 투명 오버레이에 펼쳐 넣어요(웹).
`phase`	`idle`, `dragging`, `releasing` 중 하나예요. 드래그 효과에 사용할 수 있어요.

API 레퍼런스#

LynxConsole props#

CustomTab#

LynxConsoleHandle#

모니터 초기화 함수#

isNetworkLog(entry) / isPerformanceLog(entry)#