설치

@tissue-ui/* 패키지는 사내 npm 레지스트리에 올라가 있습니다. @tissue-ui 스코프를 그 레지스트리로 연결하고 토큰을 넣은 뒤 설치하면 됩니다.

1. 레지스트리 연결 (.npmrc)

프로젝트 맨 위 .npmrc@tissue-ui 스코프를 사내 레지스트리로 연결하고, 그 경로에 토큰을 붙입니다.

.npmrc
@tissue-ui:registry=https://forge.tissue.works/npm/
//forge.tissue.works/npm/:_authToken=${TISSUE_NPM_TOKEN}

TISSUE_NPM_TOKEN 은 패키지를 내려받을 수 있는 토큰입니다. 환경변수로 넣으면 저장소에 토큰을 커밋하지 않아도 됩니다.

2. 설치

필요한 패키지를 설치합니다. 쓰는 패키지 매니저를 고르세요.

bash
npm install @tissue-ui/layout-core @tissue-ui/layout-react @tissue-ui/layout-themes

토큰을 환경변수로 넣어 설치하는 예: TISSUE_NPM_TOKEN=$GITEA_TOKEN npm install

3. 함께 필요한 것

  • @tissue-ui/layout-react 는 React 17 이상이 필요합니다.
  • layout-core · layout-themes 는 따로 필요한 게 없습니다.

4. 테마 CSS 불러오기

컴포넌트가 색과 모양을 갖추려면 base.css 를 앱에서 한 번 불러오고, 컴포넌트는 .tissue-layout 으로 감싼 안쪽에 두어야 합니다. 색 바꾸는 법은 디자인 커스터마이징 을 보세요.

tsx
// app/layout.tsx (Next.js App Router)
import "@tissue-ui/layout-themes/base.css";
참고. tissue.css 같은 스킨 파일은 특정 앱의 색에 맞춰 둔 것이라, 보통은 base.css 만 쓰고 필요한 변수만 바꿔 씁니다.