open-index/open-npm huggingface dataset:
npm package: @lawform/autodoc
Description: ## 배포시 주의사항!
Latest version: 0.1.25

# lawform_autodoc docs

## 배포시 주의사항!

-   submodule이 아닌 module만 따로 clone해서 빌드 & export된 코드 host에서 구동 후 deploy.

## setting

### 0. submodule 추가

-   ref: [[Notion-Git Submodule]](https://www.notion.so/lawform/Git-Submodule-8c4ad6af662344599063646f1aee3025)

### 1. host next의 eslintrc.json & tsconfig.json & tailwind.config.js 설정 추가.

```json
// eslintrc.json
{
    // ...
    // module은 host의 lint에 영향을 받지 않도록 autodoc module의 path 추가.
    "ignorePatterns": [..., "lib/autodoc"],
    // ...
}

// tailwind.config.js
{
    // ...
    content: [
        // ...
        '../../node_modules/@lawform/autodoc/**/*.{js,jsx,ts,tsx}',
    ]
    // ...
}
```

### 2. root file에 next(\_app.tsx), react(App.tsx) tinymce css 적용.

```js
import '@lawform/autodoc/dist/styles/TinymceEditor.scss'
```

### 3. root file에 provider 적용.

```js
// _app.tsx
<>
    <AutodocProvider>
        ...
        <Component {...pageProps} />
        <LawLHashSwitchRouterManager />
        ...
    </AutodocProvider>
</>
```

### 4. cfs, bindData init

-   cfs, bindData를 load | update 하는 로직에서 useBindData의 useCfsState, useBindDataState를 통해 cfs, bindData를 set

```js
const { useBindDataState, useCfsState } = useBindData()
const [cfs, setCfs] = useCfsState()
const [bindData, setBindData] = useBindDataState()

useEffect(() => {
    ...
    setCfs(cfs);
    setBindDta(bindData);
}, [...])
```

## usage

-   props type, callback 설명등은 jsDoc 참고.

### InputSection

```js
<InputSection
    className={!showMobileInput ? 'hidden' : ''}
    lastBindData={lastBindData}
    setLastBindData={setLastBindData}
    socketCallBackData={socketCallBackData}
/>
```

### OutputSection

-   useRenderHtml을 통해 renderHtml string 추출 후 props로 전달.
-   generateCallback: mobile 화면에서 노출되는 문서의 pdf download fetch callback.

```js
// 1. renderHtml 추출
const { renderHtml } = useRenderHtml({
    cfs,
    bindData,
    lastBindData,
    socketCallBackData,
    htmlData,
})

return (
    ...
    // 2. renderHtml, participants, generateCallback props로 전달.
    <OutputSection
        participants={participants?.map((user) => user.user_name) ?? []}
        renderHtml={renderHtml}
        generateCallback={generateThirdpartyPdfFromHtml}
    />
    ...
)
```

### CustomEditor

-   tinymce dynamic import를 위해 autodoc_branch가 아닌 사용하는 file에서 직접 dynamic import

```js
const CustomEditor = dynamic(
    () =>
        process.env.NODE_ENV === 'development'
            ? import('@/lib/autodoc/src/lib/components/CustomEditor') // submodule 설치 path
            : import('@lawform/autodoc/dist/components/CustomEditor'),
    {
        ssr: false,
    }
)
```