lawform_autodoc docs

배포시 주의사항!

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

setting

0. submodule 추가

• ref: [Notion-Git Submodule]

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

// 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 적용.

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

3. root file에 provider 적용.

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

4. cfs, bindData init

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

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

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

usage

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

InputSection

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

OutputSection

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

// 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

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,
    }
)