@remember-web/tailwind-gnb

@remember-web/gnb의 SSR 대응 변형입니다. styled-components 런타임 스타일 주입 대신 Tailwind CSS v4 기반 정적 CSS를 사용해, 서버사이드렌더링 환경에서도 스타일 깨짐 없이 동작합니다. 공개 API는 gnb와 동등합니다.

사용법 (Tailwind v4 호스트)

tailwind-primitive와 동일한 raw preset 소비 모델입니다. 유틸리티는 사전 컴파일해 배포하지 않고 호스트 앱의 Tailwind 빌드가 생성합니다 — 사전 컴파일 CSS의 unlayered 유틸리티가 호스트의 layered 유틸리티를 덮어쓰는 캐스케이드 충돌(#596)이 원천적으로 없습니다.

import { CommonGnb, makeGnbService } from '@remember-web/tailwind-gnb';

/* 호스트 entry CSS */
@import 'tailwindcss';
@import '@remember-web/mixin/preset.css';              /* RUI 디자인 토큰 (단일 정본) */
@import '@remember-web/tailwind-primitive/preset.css'; /* RUI 컴포넌트 CSS + 자동 @source */
@import '@remember-web/tailwind-gnb/preset.css';       /* gnb 오케스트레이션 CSS + 자동 @source */

• gnb 자신의 클래스는 preset 내부 @source './'가 자동 등록합니다 (패키지가 src를 함께 배포).
• gnb가 소비하는 tailwind-primitive 클래스도 tailwind-primitive preset 내부 @source './'가 자동 등록합니다 — 호스트가 별도 @source를 추가할 필요 없습니다 (두 preset import만으로 완결).
• styled-components peer 의존성이 없습니다.

비-Tailwind 호스트

Tailwind 빌드가 없는 호스트는 자기완결(self-contained) 컴파일 산출물을 사용합니다.

• 독립 빌드: independent_dist/style.css를 <link>로 로드 (아래 build:independent)
• MFE: 리모트 로드 시 CSS 자동 주입 (아래 build:mfe)
• 리멤버 디자인 토큰(--rui-*)이 주입된 환경(RUIProvider 등)에서는 해당 값에 반응하고, 없으면 정적 폴백 값으로 동작합니다.
• ⚠️ 자기완결 CSS는 유틸리티를 unlayered로 포함하므로 Tailwind 호스트에서 함께 로드하면 안 됩니다 — Tailwind 호스트는 반드시 위의 preset 모델을 쓰세요.

빌드

해당 패키지는 세 가지 형태의 빌드를 할 수 있습니다.

1. 일반 빌드 (build)

일반적으로 NPM에 배포하기 위해 외부 의존성을 갖고 트리셰이킹의 대상이 될 수 있도록 번들링되는 빌드입니다. 스타일은 raw preset.css(src 배포)로 제공되며 별도 CSS 컴파일 산출물이 없습니다.

2. 독립 빌드 (build:independent)

외부 서비스에서 import해서 사용해야 하는 경우 사용합니다. 모든 의존성을 포함해서 번들링되며, 트리셰이킹의 대상이 될 수 없으며 별도의 d.ts파일을 제공하지 않습니다. independent_dist/style.css(자기완결 컴파일 CSS, src/style.css 입력)를 호스트가 <link>로 함께 로드해야 합니다. 별도로 빌드한 뒤 S3에 업로드해서 사용합니다.

1. tailwind-gnb 패키지 내에서 yarn build:independent 명령 실행
2. 위 명령의 결과로 생성된 /packages/tailwind-gnb/independent_dist/ 산출물(index.mjs, style.css) 확인
3. S3 버킷에 산출물 업로드
4. rwp github action에서 cache purge 실행

3. MFE 빌드 (build:mfe)

Module Federation 리모트 번들입니다. CSS(자기완결 컴파일)는 리모트 로드 시 자동 주입됩니다. Tailwind 호스트에서의 MFE 사용은 위 unlayered 주의사항이 동일하게 적용됩니다.