feat(FE) : auth 알림 함수 작성(#176)

client/src/components/auth/login.js

@@ -1,6 +1,6 @@
 import { initializeApp } from 'firebase/app';
 import { getMessaging, getToken } from 'firebase/messaging';
-import { inputForm } from '@/components/common';
+import { inputForm, notification } from '@/components/common';
 import { loginU } from '@/apis/auth';
 import { navigate } from '@/core/router';
 import { INPUT } from '@/constants/constant';
@@ -46,6 +46,7 @@ const login = () => {
 
     await loginU(userData);
     navigate('/card');
+    await notification('로그인', 'login')();
 
     const firebaseConfig = {
       apiKey: 'AIzaSyCsLBsvozvTnYlDH-5cS0A8X_AjV5o4jjM',
@@ -73,6 +74,12 @@ const login = () => {
     });
   };
 
+  // prettier-ignore
+  const handleSubmission = (target) => 
+    _.pipe(
+      handleSubmitData(target),
+      notification('로그인', 'login'));
+
   // prettier-ignore
   const handleSubmitData = (target) => 
     _.pipe(
@@ -104,6 +111,7 @@ const login = () => {
       appendInputForm,
       () => handleChangeInput(document),
       () => handleSubmitData(fragment),
+      // () => handleSubmission(fragment),
       () => fragment);
 
   return appendLogin;

client/src/components/auth/register.js

@@ -1,4 +1,4 @@
-import { inputForm } from '@/components/common';
+import { inputForm, notification } from '@/components/common';
 import { regiseterUser, verificateEmail } from '@/apis/auth';
 import { navigate } from '@/core/router';
 import { INPUT } from '@/constants/constant';
@@ -129,6 +129,7 @@ const register = () => {
 
     navigate('/card');
     await regiseterUser(data);
+    notification('로그아웃', 'logout')();
   };
 
   const addInputForm = (fragment) => (input) => inputForm({ ...input, target: fragment })();

client/src/components/common/index.js

@@ -3,3 +3,4 @@ export { default as inputForm } from './inputForm';
 export { default as dropdownMenu } from './dropdownMenu';
 export { default as sideMenu } from './sideMenu';
 export { default as modal } from './modal';
+export { default as notification } from './notification';

client/src/components/common/notification.js

@@ -0,0 +1,38 @@
+import { $ } from '@/utils';
+import { _ } from '@/utils/customFx';
+
+const notification = (label, classname) => {
+  const notificationTpl = `
+        <div class='notification-container ${classname}'>
+            <p>${label} 되었습니다.</p>
+        </div>
+    `;
+
+  //prettier-ignore
+  const renderNotification = () => 
+    _.go(
+        notificationTpl, 
+        $.el, 
+        $.append($.qs('#root')));
+
+  const toggleShow = (target) => target.classList.toggle('show');
+
+  const showNotification = () => {
+    const notificationDiv = $.qs('.notification-container');
+    toggleShow(notificationDiv);
+    setTimeout(() => {
+      toggleShow(notificationDiv);
+    }, 2000);
+  };
+
+  //prettier-ignore
+  const notificationEvent = async () => {
+    _.go(
+        renderNotification(), 
+        () => showNotification);
+  };
+
+  return notificationEvent;
+};
+
+export default notification;

client/src/pages/MainPage.js

@@ -1,6 +1,6 @@
 import { SERVER_URL } from '@/constants/constant';
 import { cardDetail, cardList } from '@/components/main';
-import { dropdownMenu, header } from '@/components/common';
+import { dropdownMenu, header, notification } from '@/components/common';
 import { IO, $, slider } from '@/utils';
 import { _ } from '@/utils/customFx';
 import { navigate } from '@/core/router';
@@ -229,6 +229,7 @@ const navigateMain = async () => {
     MainPage.render(),
     addEvents,
     slider(),
+    // () => notification("logout", "logout")(),
     () => $.qsa('.mark-used-button'),
     makeUsedState,
     () => $.qs('.main-dropdown-button'),

client/src/styles/common.scss

@@ -8,6 +8,26 @@
   margin: 0;
 }
 
+.notification-container {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 1rem 1rem 0 0;
+  padding: 1.5rem 0;
+  width: 100%;
+  position: absolute;
+  bottom: calc(-50px - 3rem);
+  transition: transform 0.3s ease-in-out;
+  z-index: 15;
+
+  p {
+    font-size: calc(-50px - 3rem);
+    text-align: center;
+  }
+
+  &.show {
+    transform: translateY(-50px);
+  }
+}
+
 .outside-modal-container {
   position: fixed;
   top: 0;