[공지사항] 코인 공지사항 구현

.yarnrc.yml

@@ -1,2 +1,10 @@
 yarnPath: .yarn/releases/yarn-3.8.0.cjs
-nodeLinker: "pnp"
+nodeLinker: "pnp"
+
+packageExtensions:
+  '@toast-ui/editor@*':
+    dependencies:
+      prosemirror-transform: '*'
+  '@toast-ui/react-editor@*':
+    dependencies:
+      prosemirror-transform: '*'

package.json

@@ -9,6 +9,8 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@toast-ui/editor": "^3.2.2",
+    "@toast-ui/react-editor": "^3.2.3",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",

src/App.tsx

@@ -23,6 +23,9 @@ import ABTest from 'pages/ABTest';
 import ABTestDetail from 'pages/ABTest/components/ABTestDetail';
 import ReviewList from 'pages/Services/Review/ReviewList';
 import BenefitPage from 'pages/Services/Benefit';
+import NoticeList from 'pages/Services/Notice/NoticeList';
+import NoticeDetail from 'pages/Services/Notice/NoticeDetail';
+import NoticeWrite from 'pages/Services/Notice/NoticeWrite';
 
 function RequireAuth() {
   const location = useLocation();
@@ -64,6 +67,9 @@ function App() {
         <Route path="/abtest/:id" element={<ABTestDetail />} />
         <Route path="/review" element={<ReviewList />} />
         <Route path="/benefit" element={<BenefitPage />} />
+        <Route path="/notice" element={<NoticeList />} />
+        <Route path="/notice/:id" element={<NoticeDetail />} />
+        <Route path="/notice/write" element={<NoticeWrite />} />
         <Route path="*" element={<h1>404</h1>} />
       </Route>
     </Routes>

src/components/common/CustomForm/CustomForm.style.tsx

@@ -53,6 +53,50 @@ export const FormItem = styled(Form.Item)`
   }
 `;
 
+export const FormTextItem = styled(Form.Item)`
+  margin-bottom: 0;
+  .ant-form-item-label > label {
+    width: 120px;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #2c3e50;
+    background-color: rgb(243, 243, 243);
+    border: rgb(217, 217, 217) solid;
+    border-width: 1px;
+    border-radius: 0;
+    &:after {
+      display: none;
+      flex-basis: auto;
+    }
+  }
+  // 기본 설정된 반응형에 의한 디자인 깨짐 방지용
+  ${mobile}{
+    .ant-row .ant-form-item-label {
+      flex: 0 1 auto;
+      padding: 0;
+    }
+    .ant-row .ant-form-item-control {
+      flex: 1 1 auto;
+      padding: 0;
+    }
+  }
+
+  .ant-form-item-explain-error {
+    position: absolute;
+    right: 12px;
+    z-index: 10;
+    top: 5px;
+  }
+
+  .ant-input-number-input-wrap {
+    width: 100%;
+  }
+`;
+
 export const FormItemCheckbox = styled(Form.Item)`
   margin-bottom: 0;
 
@@ -117,3 +161,8 @@ export const UploadWrap = styled(Form.Item)`
     right: 10vw;
   }
 `;
+
+export const TextWrap = styled.div`
+  display: flex;
+  height: 100%;
+`;

src/components/common/CustomForm/index.tsx

@@ -4,10 +4,11 @@ import {
   Input, InputNumberProps, InputProps,
   Modal, ModalProps, Select, Switch, SwitchProps,
 } from 'antd';
-import { ReactNode } from 'react';
+import { ReactNode, forwardRef } from 'react';
 import { Rule } from 'antd/lib/form';
 import useValidate from 'utils/hooks/useValidate';
 import { NamePath } from 'antd/lib/form/interface';
+import { Editor, EditorProps, Viewer } from '@toast-ui/react-editor';
 import * as S from './CustomForm.style';
 import CustomMultipleUpload from './CustomMultipleUpload';
 import CustomSingleUpload from './CustomSingleUpload';
@@ -186,6 +187,40 @@ function CustomModal({
   );
 }
 
+export const CustomEditor = forwardRef<Editor, CustomFormItemProps & EditorProps>((
+  {
+    label, name, rules, ...props
+  },
+  ref,
+) => {
+  return (
+    <S.TextWrap>
+      <S.FormTextItem label={label} name={name} rules={rules}>
+        <Editor {...props} ref={ref} />
+      </S.FormTextItem>
+    </S.TextWrap>
+
+  );
+});
+
+export const CustomViewer = forwardRef<Viewer, CustomFormItemProps & EditorProps>((
+  {
+    label, name, rules, ...props
+  },
+  ref,
+) => {
+  return (
+    <S.TextWrap>
+      <S.FormTextItem label={label} name={name} rules={rules}>
+        <Viewer {...props} ref={ref} />
+      </S.FormTextItem>
+    </S.TextWrap>
+
+  );
+});
+
+CustomEditor.displayName = 'CustomEditor';
+
 const CustomForm = Object.assign(Form, {
   GridRow,
   Button: CustomButton,
@@ -199,6 +234,8 @@ const CustomForm = Object.assign(Form, {
   Switch: CustomSwitch,
   Modal: CustomModal,
   useValidate,
+  Editor: CustomEditor,
+  Viewer: CustomViewer,
 });
 
 export default CustomForm;