[Mission5/정동환] Project_Notion_VanillaJs 과제

Notion_VanillaJS/src/App.js

@@ -11,6 +11,9 @@ export default class App extends Component {
     return `
     <aside class='sideBar'></aside>
     <section class ='page-Container'></section>
+    <dialog class='modal'>
+      <p class='modal-content'>게시글이 추가 되었습니다</p>
+    </dialog>
     `;
   }
 

Notion_VanillaJS/src/store/PostListStore.js

@@ -1,5 +1,6 @@
 import { Store } from '@/core';
 import { fetchPostList, deletePost } from '../api/request';
+import { showModal } from '@/utils';
 
 /**
  *
@@ -13,6 +14,7 @@ async function reducer({ state, actionType, payload }) {
       return { ...state, postList };
     case 'DELETE':
       await deletePost(payload.id);
+      showModal('DELETE');
       const deletedPostList = await fetchPostList();
       return { ...state, postList: deletedPostList };
   }

Notion_VanillaJS/src/store/PostStore.js

@@ -1,7 +1,6 @@
-import { Store } from '@/core';
+import { Store, push } from '@/core';
 import { createPost, deletePost, fetchPost, updatePost } from '../api/request';
-import { push } from '@/core';
-
+import { showModal } from '@/utils';
 /**
  *
  * state: postId, title, content, updated
@@ -16,14 +15,17 @@ async function reducer({ state, actionType, payload }) {
       return { ...state, post: { ...post, content: post?.content ?? '' } };
     case 'CREATE_POST':
       const newPost = await createPost(payload?.parent);
+      showModal('CREATE');
       push(`/posts/${newPost.id}`);
       return { ...state, post: { ...newPost, content: '' } };
     case 'UPDATE_POST':
       await updatePost(state.post);
       const updatedPost = await fetchPost(state.post.id);
+      showModal('UPDATE');
       return { ...state, post: updatedPost };
     case 'DELETE_POST':
       await deletePost(payload.id);
+      showModal('DELETE');
       return;
   }
 }

Notion_VanillaJS/src/utils/index.js

@@ -23,3 +23,28 @@ export function debounceSaveServer(callback) {
     }, delay);
   };
 }
+
+export function showModal(type) {
+  const delay = 2000;
+
+  const $modal = document.body.querySelector('.modal');
+  fillModal(type, $modal);
+  toggleModal($modal);
+  setTimeout(() => {
+    toggleModal($modal);
+  }, delay);
+}
+
+function toggleModal($modal) {
+  $modal.classList.toggle('open');
+}
+
+function fillModal(type, $modal) {
+  const modalContent = {
+    CREATE: '게시글이 추가되었습니다',
+    UPDATE: '게시글이 수정되었습니다',
+    DELETE: '게시글이 삭제되었습니다',
+  };
+  const $contentContainer = $modal.querySelector('.modal-content');
+  $contentContainer.innerHTML = modalContent[type];
+}

Notion_VanillaJS/style.css

@@ -13,10 +13,6 @@
 html,
 body {
   font-family: 'LINESeedKR-Bd';
-  #app {
-    margin: 0 auto;
-    min-height: 100vh;
-  }
 }
 
 button {
@@ -31,4 +27,34 @@ li {
 #app {
   display: grid;
   grid-template-columns: 20% 80%;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+.modal {
+  position: fixed;
+
+  opacity: 0;
+  visibility: hidden;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  top: 20%;
+  left: 20%;
+
+  width: 14rem;
+  height: 4rem;
+
+  color: whitesmoke;
+
+  background-color: #666666;
+  transition: all ease-in-out 700ms;
+}
+
+.modal.open {
+  opacity: 1;
+  visibility: visible;
 }