feat(FE) : 알림창 띄우기 구현(#176)

client/src/components/auth/login.js

@@ -44,9 +44,10 @@ const login = () => {
     e.stopPropagation();
     e.preventDefault();
 
+    //await loginU({ email: '[email protected]', password: 'testPassword' });
     await loginU(userData);
-    navigate('/card');
-    await notification('로그인 성공', 'login');
+    await navigate('/card');
+    notification('로그인에 성공하였습니다.', 'login')();
 
     const firebaseConfig = {
       apiKey: 'AIzaSyCsLBsvozvTnYlDH-5cS0A8X_AjV5o4jjM',
@@ -70,15 +71,15 @@ const login = () => {
           fcmToken(tokens);
         });
       }
-      if (res === 'denied') window.alert('알림을 받으시려면 알림을 허용해주세요');
+      // if (res === 'denied') window.alert('알림을 받으시려면 알림을 허용해주세요');
     });
   };
 
   // prettier-ignore
   const handleSubmission = (target) => 
-    _.pipe(
+    _.go(
       handleSubmitData(target),
-      notification('로그인', 'login'));
+      () => notification('로그인', 'login')());
 
   // prettier-ignore
   const handleSubmitData = (target) => 
@@ -110,7 +111,7 @@ const login = () => {
       appendInputForm,
       () => handleChangeInput(document),
       () => handleSubmitData(fragment),
-      // () => handleSubmission(fragment),
+      //() => handleSubmission(fragment),
       () => fragment);
 
   return appendLogin;

client/src/components/auth/register.js

@@ -127,9 +127,9 @@ const register = () => {
     const { name, email, password, phoneNumber } = userData;
     const data = { name, email, password, phoneNumber };
 
-    navigate('/card');
+    await navigate('/card');
     await regiseterUser(data);
-    await notification('회원가입', 'register')();
+    notification('회원가입에 성공하였습니다.', 'register')();
   };
 
   const addInputForm = (fragment) => (input) => inputForm({ ...input, target: fragment })();

client/src/components/common/notification.js

@@ -8,29 +8,29 @@ const notification = (label, classname) => {
         </div>
     `;
 
-  //prettier-ignore
+  // prettier-ignore
   const renderNotification = () => 
     _.go(
         notificationTpl, 
-        $.el, 
+        $.el,
         $.append($.qs('#root')));
 
-  const toggleShow = (target) => target.classList.toggle('show');
-
   const showNotification = () => {
     const notificationDiv = $.qs('.notification-container');
-    toggleShow(notificationDiv);
     setTimeout(() => {
-      toggleShow(notificationDiv);
+      notificationDiv.classList.add('show');
+    }, 50);
+    setTimeout(() => {
+      notificationDiv.classList.remove('show');
     }, 2000);
   };
 
-  //prettier-ignore
-  const notificationEvent = async () => {
+  // prettier-ignore
+  const notificationEvent = ()  => 
     _.go(
-        renderNotification(), 
-        () => showNotification);
-  };
+        renderNotification(),
+        () => showNotification(),
+        );
 
   return notificationEvent;
 };

client/src/core/router.js

@@ -26,7 +26,7 @@ const setData = (data) => (path) => {
 
 // prettier-ignore
 const navigate = 
-  (path, data = {}) =>
+  async (path, data = {}) =>
     _.go(
       path,
       setData(data),

client/src/styles/common.scss

@@ -9,22 +9,25 @@
 }
 
 .notification-container {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 1rem 1rem 0 0;
-  padding: 1.5rem 0;
-  width: 100%;
+  background: rgba(83, 72, 78, 0.8);
+  color: $white-color;
+  border-radius: 0.75rem;
+  padding: 1rem 0;
+  width: 80%;
+  margin-left: 10%;
   position: absolute;
-  bottom: calc(-50px - 1.1rem);
-  transition: transform 0.3s ease-in-out;
+  top: -5rem;
+  // bottom: calc(-50px - 1.1rem);
+  transition: transform 0.5s ease-in-out;
   z-index: 15;
 
   p {
-    font-size: 1.5rem;
+    font-size: 1rem;
     text-align: center;
   }
 
   &.show {
-    transform: translateY(calc(-50px - 1.1rem));
+    transform: translateY(6rem);
   }
 }
 

client/src/utils/domFx.js

@@ -35,8 +35,9 @@ $.prepend = _.curry((child, parent) => {
 
 $.append = _.curry((parent, child) => {
   parent.appendChild(child);
+  // console.log(parent, child);
 
-  return parent;
+  return child;
 });
 
 $.closest = _.curry((sel, el) => el.closest(sel));