feat : write, read Viewer 컴포넌트 및 css 추가

techeer-sv · Oct 15, 2023 · c01c829 · c01c829
1 parent e5e5823
commit c01c829
Show file tree

Hide file tree

Showing 7 changed files with 506 additions and 9 deletions.
diff --git a/Mindspace_front/src/pages/NodeMap/components/WriteModal/WriteModal.module.scss b/Mindspace_front/src/pages/NodeMap/components/WriteModal/WriteModal.module.scss
@@ -145,9 +145,3 @@
     }
   }
 }
-
-:global {
-  .toastui-editor-mode-switch {
-    display: none !important;
-  }
-}
diff --git a/Mindspace_front_next/app/map/components/Modal/index.tsx b/Mindspace_front_next/app/map/components/Modal/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styles from "./Modal.module.scss";
 import CustomModal from "@/components/CustomModal";
-//import WriteModal from '@/pages/NodeMap/components/WriteModal';
+import WriteModal from "../WriteModal";
 import { ModalProps } from "@/constants/types";
 //import ListModal from '../ListModal';
 import { useRecoilValue } from "recoil";
@@ -49,11 +49,11 @@ function NodeModal({ isOpen, onRequestClose, updateNodeInfo }: ModalProps) {
           </div>
         </div>
       </CustomModal>
-      {/* <WriteModal
+      <WriteModal
         isOpen={writeModalIsOpen}
         updateNodeInfo={updateNodeInfo}
         onRequestClose={() => setWriteModalIsOpen(false)}
-      /> */}
+      />
       {/* 글 목록 리스트 모달 */}
       {/* <ListModal
         listModalOpen={listModalIsOpen}

diff --git a/Mindspace_front_next/app/map/components/WriteModal/WriteModal.module.scss b/Mindspace_front_next/app/map/components/WriteModal/WriteModal.module.scss
@@ -0,0 +1,147 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &__button {
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    font-size: 1.3rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    transition: all 0.3s ease-in-out;
+    color: white;
+
+    &:hover {
+      background-color: #333;
+      color: white;
+    }
+  }
+
+  &__span {
+    color: white;
+    font-size: 1.5rem;
+  }
+  &__left {
+    display: flex;
+    align-items: center;
+  }
+  &__left > button {
+    margin-left: 0.5rem;
+  }
+}
+
+.content {
+  padding: 0 1rem 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 90%;
+
+  &__title {
+    display: flex;
+    flex-direction: row;
+    font-size: 2rem;
+    color: white;
+
+    width: 100%;
+    height: 2.5rem;
+    border: none;
+    background-color: white;
+    padding: 5px 0 5px 0;
+    border-radius: 10px 10px 0 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    input {
+      width: 90%;
+      height: 100%;
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      margin-left: 5px;
+      color: black;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  &__dateTime {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__date {
+    color: black;
+    font-size: 1rem;
+    width: 5.5rem;
+  }
+
+  &__time {
+    color: black;
+    font-size: 1rem;
+  }
+
+  &__viewer {
+    border-top: 1px #ebedf2 solid;
+    padding-left: 10px;
+    overflow-y: auto;
+    background: white;
+  }
+
+  &__editor {
+    width: 100%;
+    height: calc(100% - 4.5rem);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: white;
+    border-radius: 0 0 10px 10px;
+  }
+
+  .editor__header {
+    display: flex;
+    justify-content: flex-end;
+    margin: 0.5rem;
+  }
+
+  .editor__button {
+    border: none;
+    background-color: #a6a6c8;
+    color: white;
+    font-size: 1.5rem;
+    border-radius: 1rem;
+    width: 8rem;
+    height: 3rem;
+    cursor: pointer;
+  }
+
+  .editor__content {
+    flex: 1;
+    height: 100%;
+    position: relative;
+
+    &.preview {
+      .toastui-editor-defaultUI {
+        display: none;
+      }
+
+      .preview__content {
+        display: block;
+      }
+    }
+
+    .preview__content {
+      display: none;
+    }
+  }
+}
diff --git a/Mindspace_front_next/app/map/components/WriteModal/components/ReadViewer/index.tsx b/Mindspace_front_next/app/map/components/WriteModal/components/ReadViewer/index.tsx
@@ -0,0 +1,105 @@
+"use client";
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState, useRef } from "react";
+import { Viewer } from "@toast-ui/react-editor";
+import "tui-color-picker/dist/tui-color-picker.css";
+import "@toast-ui/editor/dist/toastui-editor.css";
+import "@toast-ui/editor/dist/toastui-editor-viewer.css";
+import styles from "../../WriteModal.module.scss";
+
+import { nodeAtom } from "@/recoil/state/nodeAtom";
+import { useRecoilValue } from "recoil";
+import { useDeletePostMutation } from "@/hooks/queries/board";
+
+import { ReadViewerProps } from "@/constants/types";
+import { formatDateTime, DateTimeFormat } from "@/utils/dateTime";
+
+const ReadViewer = ({
+  nodeData,
+  onEditToggle,
+  onClose,
+  updateNodeInfo,
+}: ReadViewerProps) => {
+  const nodeInfo = useRecoilValue(nodeAtom);
+  const viewerRef = useRef<any>(null);
+
+  const [createPostErrorMessage, setCreatePostErrorMessage] =
+    useState<string>("");
+
+  const [deletePostErrorMessage, setDeletePostErrorMessage] =
+    useState<string>("");
+
+  const { mutate: deletePostMutation } = useDeletePostMutation(() => {
+    updateNodeInfo(nodeInfo?.id, false);
+    onEditToggle();
+    onClose();
+  }, setDeletePostErrorMessage);
+
+  const handleDelete = () => {
+    deletePostMutation(nodeInfo.id as number);
+  };
+
+  useEffect(() => {
+    if (createPostErrorMessage) {
+      alert(createPostErrorMessage);
+      setCreatePostErrorMessage("");
+    }
+    if (deletePostErrorMessage) {
+      alert(deletePostErrorMessage);
+      setDeletePostErrorMessage("");
+    }
+  }, [createPostErrorMessage, deletePostErrorMessage]);
+
+  useEffect(() => {
+    if (viewerRef.current) {
+      viewerRef.current.getInstance().setMarkdown(nodeData?.content);
+    }
+  }, [nodeData?.content]);
+
+  return (
+    <>
+      <div className={styles.header}>
+        <button className={styles.header__button} onClick={onClose}>
+          <span className={styles.header__span}>x</span>
+        </button>
+        <div className={styles.header__left}>
+          <button className={styles.header__button} onClick={handleDelete}>
+            삭제
+          </button>
+          <button className={styles.header__button} onClick={onEditToggle}>
+            수정
+          </button>
+        </div>
+      </div>
+      <div className={styles.content}>
+        <div className={styles.content__title}>
+          <input disabled={false} type="text" value={nodeData.title} />
+
+          <div className={styles.content__dateTime}>
+            <span className={styles.content__date}>
+              {formatDateTime(nodeData.updatedAt, DateTimeFormat.Date)}
+            </span>
+            <span className={styles.content__time}>
+              {formatDateTime(nodeData.updatedAt, DateTimeFormat.Time)}
+            </span>
+          </div>
+        </div>
+        <div className={styles.content__editor}>
+          <div
+            className={`${styles.content__editor} ${styles.editor__content}`}
+          >
+            <div className={styles.content__viewer}>
+              <Viewer
+                ref={viewerRef}
+                initialValue={nodeData.content}
+                usageStatistics={false}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ReadViewer;