From 165cad0710fe83ada2894f74ac9a529e75eca4a7 Mon Sep 17 00:00:00 2001
From: Devicii <62472550+asroq1@users.noreply.github.com>
Date: Mon, 15 Jan 2024 15:45:20 +0900
Subject: [PATCH] refact : Add Dynamic Importing to FormEditor

---
 src/app/showcase/edit/panel/ShowcaseEditor.tsx         | 10 ++++++----
 src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/showcase/edit/panel/ShowcaseEditor.tsx b/src/app/showcase/edit/panel/ShowcaseEditor.tsx
index 2fdf413a2..aefaceddb 100644
--- a/src/app/showcase/edit/panel/ShowcaseEditor.tsx
+++ b/src/app/showcase/edit/panel/ShowcaseEditor.tsx
@@ -6,7 +6,7 @@ import ImageInput from './formPanel/ImageInput'
 import TeamName from './formPanel/TeamName'
 import SkillInput from './formPanel/SkillInput'
 import LinkForm from './formPanel/LinkForm'
-import FormUIEditor from '../panel/formPanel/FormUIEditor'
+// import FormUIEditor from '../panel/formPanel/FormUIEditor'
 import useShowCaseState from '@/states/useShowCaseState'
 import useToast from '@/hook/useToast'
 import { redirect } from 'next/navigation'
@@ -15,6 +15,10 @@ import CuTextModal from '@/components/CuTextModal'
 import useAxiosWithAuth from '@/api/config'
 import StartEndDateViewer from './formPanel/StartEndDateViewer'
 import TeamMembers from './formPanel/TeamMembers'
+import dynamic from 'next/dynamic'
+const DynamicEditor = dynamic(() => import('../panel/formPanel/FormUIEditor'), {
+  ssr: false,
+})
 
 interface IShowcaseEditorProps {
   data: IShowcaseEditorFields // IShowcase 타입을 import 해야 합니다.
@@ -22,8 +26,6 @@ interface IShowcaseEditorProps {
 
 const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
   const axiosWithAuth = useAxiosWithAuth()
-  console.log('넘어온 데이터', data)
-
   const [image, setImage] = useState<File[]>([])
   const [previewImage, setPreviewImage] = useState<string>('')
   const [text, setText] = useState<string>('')
@@ -116,7 +118,7 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
         <StartEndDateViewer start={data.start} end={data.end} />
         <TeamMembers members={data?.memberList} />
         <LinkForm links={data.links} />
-        <FormUIEditor initialValue={text} setText={setText} />
+        <DynamicEditor initialValue={text} setText={setText} />
         <Button onClick={openModal}>저장</Button>
         <CuToast
           open={isOpen}
diff --git a/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx b/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx
index 5789c8128..4750103ff 100644
--- a/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx
+++ b/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx
@@ -11,7 +11,7 @@ import useShowCaseState from '@/states/useShowCaseState'
  * WARNING: SSR 환경에서 사용할 경우 충돌이 나기 때문에 실제 사용하기 위해서는 dynamic import로 불러오는 DynamicToastEditor를 사용해야 합니다.
  */
 
-const ToastEditor = ({
+const FormUIEditor = ({
   initialValue,
   initialEditType = 'wysiwyg',
   previewStyle = 'vertical',
@@ -76,4 +76,4 @@ const ToastEditor = ({
   )
 }
 
-export default ToastEditor
+export default FormUIEditor