A-wawa Visualizer Client

terraform visualizer using d3.

• build with vite
• package manager : yarn berry(pnp)

다른 프로젝트에서 사용하기

yalc

npm 레포지토리에 해당 패키지를 업로드하지 않아 클론 후 직접 yalc를 이용해 로컬 레포지토리를 이용하기 바랍니다.

cd visualizer-client

npm i -g yalc
yalc publish --private

cd <path-to-project>
yalc add visualizer-client
yarn
# or
npm i

VisualizerContextProvider

visualizer-client에서 제공하는 컴포넌트를 사용하기 위해서 상위 컴포넌트를 VisualizerContextProvider로 감싸야 합니다.

예)

"use client";
import { VisualizerContextProvider } from "visualizer-client";

export function Providers({ children }: { children: React.ReactNode }) {
  return <VisualizerContextProvider>{children}</VisualizerContextProvider>;
}

tailwindcss

이 패키지를 사용하는 프로젝트는 tailwindcss를 사용하여야 하며, tailwind.config.ts에 다음 설정을 추가해야 합니다.

import type { Config } from 'tailwindcss'
import path from 'path'

const config: Config = {
  content: [
    (...),
    path.join(path.dirname(require.resolve('visualizer-client')), '**/*.js'),
  ],
  (...)
}
export default config

직접 패키지 수정

yarn start 명령어로 띄워놓고 하시면 됩니다.

직접 패키지 수정을 할 경우 React.js 서버를 띄우고 작업하는데, 이때 환경변수 파일이 필요합니다.

## FOR DEV
VITE_ICON_BASE_PATH=
VITE_PORT=
VITE_BASE_PATH=