diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx index 5b26b3a..dc12de5 100644 --- a/src/components/editor/Editor.tsx +++ b/src/components/editor/Editor.tsx @@ -52,12 +52,12 @@ const Editor = ({ content }: { content: JSONContent[] | null }) => { const [articleData, setArticleData] = useState({ title: '', authorName: '모아가이드', - categoryName: 'none', - type: 'all', - isPremium: false, - imageLink: '테스트', + categoryName: '', + type: '', paywallUp: '', paywallDown: '', + imageLink: '테스트', + isPremium: false, }); const [showPreview, setShowPreview] = useState(false); @@ -138,8 +138,8 @@ const Editor = ({ content }: { content: JSONContent[] | null }) => { CustomFile, CustomPaywall, ], - content: `
-
+ content: `
+

`, @@ -204,6 +204,7 @@ const Editor = ({ content }: { content: JSONContent[] | null }) => { }); useEffect(() => { + console.log('content', editor?.getHTML()); if (content && editor?.commands) { editor?.commands.setContent(content); } @@ -212,9 +213,52 @@ const Editor = ({ content }: { content: JSONContent[] | null }) => { const handleSavePreview = () => { if (!editor) return; - const { isPremium, paywallUp, paywallDown, imageLink } = + const { categoryName, authorName, type, title } = articleData; + const validations = [ + { + condition: categoryName === 'none', + message: '카테고리를 선택해주세요.', + }, + { condition: authorName === 'none', message: '작성자를 선택해주세요.' }, + { condition: type === 'none', message: '콘텐츠를 선택해주세요.' }, + { condition: !title.trim(), message: '제목을 입력해주세요.' }, + ]; + + for (const { condition, message } of validations) { + if (condition) { + alert(message); + return; + } + } + + if ( + editor.getHTML() === + '

' + ) { + alert('내용을 입력해주세요.'); + return; + } + + const { paywallUp, paywallDown, isPremium, imageLink } = extractPaywallData(editor); + if (!paywallUp) { + alert('내용을 입력해주세요.'); + return; + } + + if (!isPremium) { + alert('페이월을 삽입해주세요.'); + return; + } + + if (!paywallDown) { + alert( + '페이월은 콘텐츠 최하단에\n 노출할 수 없습니다.\n 페이월 이후 내용을 입력해주세요.', + ); + return; + } + setArticleData((prev) => ({ ...prev, isPremium, diff --git a/src/components/editor/common/extractPaywallData.ts b/src/components/editor/common/extractPaywallData.ts index 92a2ed8..4f1c28d 100644 --- a/src/components/editor/common/extractPaywallData.ts +++ b/src/components/editor/common/extractPaywallData.ts @@ -5,10 +5,10 @@ import { createFileNodeHTML, FileAttributes } from './File'; import { createLinkNodeHTML, LinkAttributes } from './link'; interface PaywallData { - isPremium: boolean; paywallUp: string; paywallDown: string; imageLink: string; + isPremium: boolean; } const extractPaywallData = (editor: Editor): PaywallData => {