webkit 패키지

이벤트 추적 — 타입이 있는 이벤트 목록, 동의(Consent Mode v2), 로그인·로그아웃에 맞춘 식별자 수명, 벤더 스크립트 전 대기열, 전환 중복 제거, 화면을 숨길 때 sendBeacon, data-track 클릭. 벤더 SDK 를 싣지 않고 어댑터(GTM·GA4·Kakao·Naver)로 잇는다. 추적 오류가 화면을 죽이지 않는다

HTTP API 클라이언트 — 서버마다 인스턴스를 만들고 플러그인(미들웨어)으로 요청 ID·로케일·추적 헤더·인증을 끼운다. Next 서버 연동은 @plott/webkit-api/next

Next.js App Router 인증 코어 — BFF 세션, proxy 토큰 갱신, 인증 라우트, @plott/webkit-api 클라이언트에 끼우는 인증 플러그인, 브라우저 로그인(리다이렉트·팝업·네이티브 브릿지)

@plott/webkit-auth 발급자 연동 — OAuth 2.0/OIDC 클라이언트(PKCE)와 Authorization Server 토큰 교환(RFC 8693)·인증 코드 그랜트·갱신·폐기

@plott/webkit-auth-oauth 제공자 — Sign in with Apple(form_post, ES256 client_secret 자동 생성·교체)

@plott/webkit-auth-oauth 제공자 — Google 로그인(OIDC). 앱 WebView 에서는 네이티브 SDK + 브릿지

@plott/webkit-auth-oauth 제공자 — 카카오 로그인(OIDC)

@plott/webkit-auth-oauth 제공자 — Keycloak(OIDC SSO)과 realm 롤·그룹 클레임 매퍼

@plott/webkit-auth-oauth 제공자 — Meta(Facebook 로그인, OAuth 2.0). 앱 WebView 에서는 네이티브 SDK + 브릿지

@plott/webkit-auth 세션 저장소 — 세션을 JWE(dir + A256GCM)로 봉인해 쿠키에 담는다(stateless, 비밀 교체 지원)

브라우저·앱 WebView 공통 — 한글 입력(IME) 중 Enter 거르기, 화면 키보드가 가린 영역 CSS 변수, presigned 업로드(진행률·상태 검사·필드 순서), 파일 검사(형식·크기·실제 바이트), 파일 저장, 던지지 않는 저장소, 외부 결제·본인 확인 뒤 돌아올 기록 위치

앱 공통 설정 — ESLint flat config(TypeScript·React Hooks·접근성·Next·webkit 규칙), tsconfig 프리셋, Playwright E2E 프리셋

UI 라이브러리가 딛는 디자인 기초 — 움직임 토큰(길이·곡선, 움직임 줄이기), View Transition 대체 경로, 언어별 글꼴 스택(:lang 한자 글꼴), 자체 호스팅 글꼴 선언·대체 글꼴 지표, Google Fonts 주소, WCAG 대비 검사, OKLCH 팔레트. 컴포넌트는 두지 않는다

화면에 값을 쓰는 규칙 — 로케일(BCP 47)과 시간대를 명시하는 Intl 포매터(숫자·통화·면적·퍼센트·날짜·기간·시각·길이·목록·따옴표), 금액 최소 단위 변환, 글자 수·정렬·카드 번호 가림, 한국 형식(전화번호·사업자·법인·주민등록번호·조사·초성·금융기관 코드·번호판), React 공급자(/react)

다국어 — 로케일 집합 하나(코드·BCP 47 태그·hreflang)에서 협상(Accept-Language·쿠키·?lang)·경로 접두·hreflang 대체 주소를 파생하고, 자리표시자·복수형(CLDR)·메시지 트리 검사·글자 방향(dirOf)을 준다. ICU 메시지(select·서수·통화·날짜·태그)는 /icu, Next proxy·서버 액션·화면 연동은 /next, 클라이언트는 /react

마크다운을 안전하게 그린다 — GFM, 원문 HTML 은 지우거나 글자로(통과 없음), 링크·이미지 스킴/호스트 규칙, 한글이 살아 있는 제목 id·목차, 길이·깊이 한도. 서버 컴포넌트에서 React 요소로, 또는 HTML 문자열로

앱 WebView 안의 웹이 쓰는 네이티브 기능 — 한 이름의 전송(iOS WKScriptMessageHandler·Android WebMessageListener/JavascriptInterface), 요청·응답(id·제한 시간·미지원 동작), 네이티브 이벤트(리스너가 붙기 전 이벤트 보관·중복 제거), UA 표식으로 앱·버전·기능 판정(서버와 브라우저가 같은 판정). 검증기는 Standard Schema(zod 등)로 받는다. 의존성 없음

Next.js App Router 공통 — 서버 액션 결과(값으로 돌려주는 실패·가려진 오류 문구·Next 제어 흐름 통과), 배포 뒤 사라진 서버 액션 복구, Activity 로 숨겨진 화면 정리, proxy 의 진짜 404·라우트 표, 헬스 체크·robots·Sentry 옵션, 사라진 청크 복구, 오류 화면(error.tsx) 팩토리, JSON-LD·OG 주소, 보안 헤더·CSP, 타입 있는 환경 변수, 목록 상태(page/size/sort/filter)를 주소에

클라이언트 React 훅 — 제어/비제어 상태, 미디어 쿼리·움직임 줄이기, 디바운스·스로틀, ref 합치기·이벤트 합치기, 바깥 클릭, 인터벌·타임아웃, StrictMode 에서 한 번만, 하이드레이션 안전한 클라이언트 판정, 저장소·가시성·온라인 상태. 서버 진입점에서 닿지 않는다(client-only)

사용자·편집기가 만든 HTML 을 화면에 그려도 되게 거른다(허용 목록, iframe 호스트 허용 목록, 링크 rel 강제) — 서버·브라우저 어디서나. 그리고 파일을 내려줄 때의 안전한 응답 헤더, XML(RSS)·메일 헤더에 값을 끼울 때의 escapeXml·headerSafe

Node 서버 쪽 안전 도구 — 시간 일정 비교(safeEqual), 사설망·메타데이터 주소를 막는 외부 호출(SSRF: 주소 검사·DNS 확인·리다이렉트 재검사·크기·시간 한도), 서명 검증, 개발용 인증 우회의 삼중 잠금. Node 전용

표 데이터 내보내기·가져오기 — 열 정의 하나로 CSV 쓰기(수식 주입 차단·BOM)·CSV 읽기·엑셀 셀 값 정리(UTC 날짜·앞자리 0 보존)·행별 오류 보고. 의존성 없음(exceljs 는 구조 타입으로만 맞춘다)

실제로 깨졌던 일을 테스트에서 일부러 일으키는 도구 — 시간대·시계, 막히거나 가득 찬 저장소, 한글 조합 중 Enter, 키보드가 가린 화면, 배포 뒤 사라진 서버 액션, 브라우저 자동 번역, GTM dataLayer, 느리거나 끊기거나 밑줄 헤더를 버리는 업스트림, 순서가 뒤바뀐 응답, 하이드레이션 경고

날짜·시각 계산 — 시간대를 명시하는 달력 날짜(YYYY-MM-DD)·순간(epoch ms)·하루 범위. 실행 환경의 시간대에 기대지 않는다. 의존성 없음(Intl). 한국 공휴일·영업일은 /kr, Temporal 어댑터는 /temporal

프레임워크 없는 공통 도구 — 옵션 병합(프로토타입 오염 방어), 결과 값(Result), invariant, 디바운스·스로틀, 동시성 제한·재시도(AbortSignal), single-flight·latest-only, 안전한 JSON 읽기, id, cn(clsx + tailwind-merge)