[Improve] write page validation error message

fixtures/write-form.js

@@ -1,6 +1,6 @@
 const writeForm = {
   title: '스터디를 소개합니다.1',
-  contents: '우리는 이것저것 합니다.1',
+  contents: '<p> 우리는 이것저것 합니다.1 </p>',
   moderatorId: 'user1',
   applyEndDate: '2020-12-24 11:00',
   participants: [],

package.json

@@ -47,7 +47,8 @@
     "react-use": "^15.3.4",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "sanitize-html": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",

src/components/write/WriteButtons.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import sanitizeHtml from 'sanitize-html';
 
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 import palette from '../../styles/palette';
+import { ERROR_MESSAGE } from '../../util/messages';
 
 import Button from '../../styles/Button';
 
@@ -42,30 +45,82 @@ const SubmitButton = styled(Button)`
   padding: 0.45rem 5rem;
 `;
 
-const WriteButtons = ({ error, onSubmit, onCancel }) => (
-  <>
-    {error && (
-      <ErrorWrapper>{error}</ErrorWrapper>
-    )}
-    <WriteButtonsWrapper error={error}>
-      <ButtonWrapper>
-        <SubmitButton
-          success
-          type="button"
-          onClick={onSubmit}
-        >
-          등록하기
-        </SubmitButton>
-        <CancelButton
-          warn
-          type="button"
-          onClick={onCancel}
-        >
-          취소
-        </CancelButton>
-      </ButtonWrapper>
-    </WriteButtonsWrapper>
-  </>
-);
+const {
+  NO_TAG, FAST_APPLY_DEADLINE, NO_CONTENTS, NO_TITLE, NO_APPLY_DATE, ERROR_PERSONNEL,
+} = ERROR_MESSAGE;
+
+const isCheckApplyEndDate = (applyDate) => Date.now() - applyDate >= 0;
+const removeHtml = (body) => sanitizeHtml(body, { allowedTags: [] }).trim();
+const isCheckPersonnel = (personnel) => !Number.isInteger(personnel) || personnel < 1;
+
+const WriteButtons = ({ fields, onSubmit, onCancel }) => {
+  const [error, setError] = useState(null);
+
+  const {
+    title, applyEndDate, personnel, contents, tags,
+  } = fields;
+
+  const applyEndTime = new Date(applyEndDate).getTime();
+
+  const handleSubmit = () => {
+    if (!title.trim()) {
+      setError(NO_TITLE);
+      return;
+    }
+
+    if (!applyEndDate.trim()) {
+      setError(NO_APPLY_DATE);
+      return;
+    }
+
+    if (isCheckApplyEndDate(applyEndTime)) {
+      setError(FAST_APPLY_DEADLINE);
+      return;
+    }
+
+    if (isCheckPersonnel(parseInt(personnel, 10))) {
+      setError(ERROR_PERSONNEL);
+      return;
+    }
+
+    if (!removeHtml(contents)) {
+      setError(NO_CONTENTS);
+      return;
+    }
+
+    if (!tags.length) {
+      setError(NO_TAG);
+      return;
+    }
+
+    onSubmit();
+  };
+
+  return (
+    <>
+      {error && (
+        <ErrorWrapper>{error}</ErrorWrapper>
+      )}
+      <WriteButtonsWrapper error={error}>
+        <ButtonWrapper>
+          <SubmitButton
+            success
+            type="button"
+            onClick={handleSubmit}
+          >
+            등록하기
+          </SubmitButton>
+          <CancelButton
+            warn
+            type="button"
+            onClick={onCancel}
+          >
+            취소
+          </CancelButton>
+        </ButtonWrapper>
+      </WriteButtonsWrapper>
+    </>
+  );
+};
 
 export default WriteButtons;