Merge pull request #38 from info-dsm/#29-CreateNotice

#29 create notice
info-dsm · Nov 14, 2022 · 8aff153 · 8aff153
2 parents a543415 + 72276aa
commit 8aff153
Show file tree

Hide file tree

Showing 11 changed files with 1,061 additions and 149 deletions.
diff --git a/src/components/common/alert/index.js b/src/components/common/alert/index.js
@@ -0,0 +1,56 @@
+import "./styles.css";
+
+export const Alert = (function () {
+  let promise = null;
+  return function (props) {
+    if (promise) return promise;
+    const body = document.querySelector("body");
+    const mainDiv = document.createElement("div");
+    const modalDiv = document.createElement("div");
+    const iconDiv = document.createElement("div");
+    const icon = document.createElement("div");
+    const h1 = document.createElement("h1");
+    const message = document.createElement("div");
+    const buttonDiv = document.createElement("div");
+
+    mainDiv.classList.add("AlertMainDiv");
+    modalDiv.classList.add("AlertModal");
+    iconDiv.classList.add("AlertIconDiv");
+    message.classList.add("AlertMessage");
+    buttonDiv.innerHTML = `<button id="AlertButton">OK</button>`;
+    message.innerText = props.message;
+    h1.innerText = props.state;
+    h1.classList.add("AlertH1");
+    icon.classList.add("AlertIcon");
+
+    if (props.state === "success") {
+      h1.classList.add("SuccessH1");
+      buttonDiv.classList.add("SuccessButton");
+      iconDiv.classList.add("SuccessIconDiv");
+      icon.classList.add("SuccessIcon");
+    } else if (props.state === "error") {
+      h1.classList.add("ErrorH1");
+      buttonDiv.classList.add("ErrorButton");
+      iconDiv.classList.add("ErrorIconDiv");
+    }
+
+    iconDiv.appendChild(icon);
+    modalDiv.appendChild(iconDiv);
+    modalDiv.appendChild(h1);
+    modalDiv.appendChild(message);
+    modalDiv.appendChild(buttonDiv);
+    mainDiv.appendChild(modalDiv);
+    body.appendChild(mainDiv);
+
+    promise = new Promise((resolve, reject) => {
+      document.getElementById("AlertButton").addEventListener("click", () => {
+        modalDiv.classList.add("AlertFadeOutModal");
+        setTimeout(() => {
+          body.removeChild(mainDiv);
+          return resolve("resolve");
+        }, 500);
+      });
+    });
+    return promise;
+  };
+})();
diff --git a/src/components/common/alert/styles.css b/src/components/common/alert/styles.css
@@ -0,0 +1,152 @@
+@keyframes AlertFadeIn {
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+
+@keyframes AlertFadeOut {
+  0% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+}
+
+.AlertMainDiv {
+  position: fixed;
+  z-index: 99;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.AlertModal {
+  width: 460px;
+  height: 700px;
+  border-radius: 12px;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: #fcfffb;
+
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
+
+  animation: AlertFadeIn 0.5s ease-out forwards;
+}
+
+.AlertFadeOutModal {
+  animation: AlertFadeOut 0.5s ease-out forwards;
+}
+
+.AlertH1 {
+  margin-top: 60px;
+  font-weight: 500;
+  font-size: 40px;
+  color: #5c5d58;
+}
+
+.SuccessH1 {
+  color: #3ede3e;
+}
+
+.ErrorH1 {
+  color: rgb(243, 104, 104);
+}
+
+.AlertModal button {
+  width: 200px;
+  height: 60px;
+  font-size: 24px;
+  font-weight: 700;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  border-radius: 12px;
+  margin-top: 30px;
+  background-image: linear-gradient(#5c5d58 0%, #5c5d58 100%);
+  color: #fcfffb;
+}
+
+.SuccessButton > button {
+  background-image: linear-gradient(#8ae8be 0%, #3ede3e 100%);
+}
+
+.ErrorButton > button {
+  background-image: linear-gradient(#ffa7ba 0%, rgb(243, 104, 104) 100%);
+}
+
+.AlertMessage {
+  width: 70%;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.AlertIconDiv {
+  margin-top: 100px;
+  width: 250px;
+  height: 250px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 10px solid transparent;
+  border-radius: 50%;
+  background-image: linear-gradient(#fff, #fff),
+    linear-gradient(#5c5d58 0%, #5c5d58 100%);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+
+.AlertIcon {
+  width: 80px;
+  height: 80px;
+  background-color: #fcfffb;
+  background-image: linear-gradient(#5c5d58 0%, #5c5d58 100%);
+  clip-path: polygon(
+    30% 8%,
+    9% 28%,
+    30% 50%,
+    9% 72%,
+    28% 92%,
+    50% 70%,
+    72% 91%,
+    91% 72%,
+    70% 50%,
+    91% 28%,
+    70% 8%,
+    50% 30%
+  );
+}
+
+.SuccessIcon {
+  clip-path: polygon(36% 60%, 83% 9%, 100% 26%, 36% 89%, 0 57%, 14% 41%);
+}
+
+.SuccessIconDiv {
+  background-image: linear-gradient(#fff, #fff),
+    linear-gradient(#d0eda2 0%, #a0ebbf 100%);
+}
+
+.SuccessIconDiv > div {
+  background-image: linear-gradient(#d0eda2 0%, #a0ebbf 100%);
+}
+
+.ErrorIconDiv {
+  background-image: linear-gradient(#fff, #fff),
+    linear-gradient(#ffa7ba 0%, rgb(243, 104, 104) 100%);
+}
+
+.ErrorIconDiv > div {
+  background-image: linear-gradient(#ffa7ba 0%, rgb(243, 104, 104) 100%);
+}
diff --git a/src/components/common/notice/index.jsx b/src/components/common/notice/index.jsx
@@ -1,42 +1,38 @@
 import "./style.css";
 export const Notice = (props) => {
-  const asdf = document.getElementsByClassName("MainDiv");
-  console.log(asdf);
-  if (asdf.length === 0) {
+  if (document.getElementsByClassName("MainDiv").length === 0) {
     const body = document.querySelector("body");
     const mainDiv = document.createElement("div");
     const logoSpan = document.createElement("span");
     const iconDiv = document.createElement("div");
     const messageDiv = document.createElement("div");
     const barDiv = document.createElement("div");
 
-    mainDiv.classList.add("MainDiv");
-    logoSpan.classList.add("Logo");
-    iconDiv.classList.add("Icon");
-    messageDiv.classList.add("Message");
+    mainDiv.classList.add("NoticeMainDiv");
+    logoSpan.classList.add("NoticeLogo");
+    iconDiv.classList.add("NoticeIcon");
+    messageDiv.classList.add("NoticeMessage");
     messageDiv.innerText = `${props.message}`;
-    barDiv.classList.add("Bar");
+    barDiv.classList.add("NoticeBar");
 
     if (props.state === "success") {
-      mainDiv.classList.add("SuccessMain");
-      iconDiv.classList.add("SuccessIcon");
-      barDiv.classList.add("SuccessBar");
+      mainDiv.classList.add("NoticeSuccessMain");
+      iconDiv.classList.add("NoticeSuccessIcon");
+      barDiv.classList.add("NoticeSuccessBar");
     } else if (props.state === "error") {
-      mainDiv.classList.add("ErrorMain");
-      barDiv.classList.add("ErrorBar");
+      mainDiv.classList.add("NoticeErrorMain");
+      barDiv.classList.add("NoticeErrorBar");
     }
 
     logoSpan.appendChild(iconDiv);
     mainDiv.appendChild(logoSpan);
     mainDiv.appendChild(messageDiv);
     mainDiv.appendChild(barDiv);
-    console.log(mainDiv);
 
     body.appendChild(mainDiv);
 
     setTimeout(() => {
       body.removeChild(mainDiv);
-      console.log(mainDiv);
     }, 3500);
     clearTimeout();
   }

diff --git a/src/components/common/notice/style.css b/src/components/common/notice/style.css
@@ -11,7 +11,7 @@
   }
 }
 
-.MainDiv {
+.NoticeMainDiv {
   position: relative;
   position: fixed;
   width: 450px;
@@ -34,27 +34,27 @@
     linear-gradient(#5c5d58 0%, #5c5d58 100%);
 }
 
-.MainDiv > span {
+.NoticeMainDiv > span {
   background-image: linear-gradient(#5c5d58 0%, #5c5d58 100%);
 }
 
-.SuccessMain {
+.NoticeSuccessMain {
   background-image: linear-gradient(#fff, #fff),
     linear-gradient(to right, #d0f398 0%, #61bf61 100%);
 }
-.SuccessMain > span {
+.NoticeSuccessMain > span {
   background-image: linear-gradient(to right, #d0f398 0%, #61bf61 100%);
 }
 
-.ErrorMain {
+.NoticeErrorMain {
   background-image: linear-gradient(#fff, #fff),
     linear-gradient(to right, #ff9baf 0%, #f00000 100%);
 }
-.ErrorMain > span {
+.NoticeErrorMain > span {
   background-image: linear-gradient(to right, #ff9baf 0%, #f00000 100%);
 }
 
-.Logo {
+.NoticeLogo {
   width: 87px;
   height: 100%;
   clip-path: polygon(0% 0%, 65% 0, 65% 34%, 80% 50%, 65% 64%, 65% 100%, 0 100%);
@@ -65,7 +65,7 @@
   align-items: center;
 }
 
-.Icon {
+.NoticeIcon {
   width: 30px;
   height: 30px;
   background-color: #fff;
@@ -86,11 +86,11 @@
   );
 }
 
-.SuccessIcon {
+.NoticeSuccessIcon {
   clip-path: polygon(36% 60%, 83% 9%, 100% 26%, 36% 89%, 0 57%, 14% 41%);
 }
 
-.Message {
+.NoticeMessage {
   font-size: 16px;
   font-weight: 400;
   margin-left: -6px;
@@ -106,7 +106,7 @@
   }
 }
 
-.Bar {
+.NoticeBar {
   width: 380px;
   height: 5px;
   position: absolute;
@@ -118,10 +118,10 @@
   background-color: #5c5d58;
 }
 
-.SuccessBar {
+.NoticeSuccessBar {
   background-color: #89d275;
 }
 
-.ErrorBar {
+.NoticeErrorBar {
   background-color: #f63a42;
 }