From 1476d1880f1a61f07d309686eb618d590e02aa33 Mon Sep 17 00:00:00 2001
From: SUMMERLOVE7 <wkdalswl77@naver.com>
Date: Tue, 21 Feb 2023 14:00:32 +0900
Subject: [PATCH] =?UTF-8?q?feat(FE)=20:=20=EC=95=8C=EB=A6=BC=EC=B0=BD=20?=
 =?UTF-8?q?=EB=9D=84=EC=9A=B0=EA=B8=B0=20=EA=B5=AC=ED=98=84(#176)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/auth/login.js          | 13 ++++++------
 client/src/components/auth/register.js       |  4 ++--
 client/src/components/common/notification.js | 22 ++++++++++----------
 client/src/core/router.js                    |  2 +-
 client/src/styles/common.scss                | 19 ++++++++++-------
 client/src/utils/domFx.js                    |  3 ++-
 6 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/client/src/components/auth/login.js b/client/src/components/auth/login.js
index a484233..5f061e5 100644
--- a/client/src/components/auth/login.js
+++ b/client/src/components/auth/login.js
@@ -44,9 +44,10 @@ const login = () => {
     e.stopPropagation();
     e.preventDefault();
 
+    //await loginU({ email: 'test@test.com', 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;
diff --git a/client/src/components/auth/register.js b/client/src/components/auth/register.js
index 9129ecf..7745b4e 100644
--- a/client/src/components/auth/register.js
+++ b/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 })();
diff --git a/client/src/components/common/notification.js b/client/src/components/common/notification.js
index 1732b38..eadfd1f 100644
--- a/client/src/components/common/notification.js
+++ b/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;
 };
diff --git a/client/src/core/router.js b/client/src/core/router.js
index 1375bf1..65b13de 100644
--- a/client/src/core/router.js
+++ b/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),
diff --git a/client/src/styles/common.scss b/client/src/styles/common.scss
index 9060bbe..dde0db4 100644
--- a/client/src/styles/common.scss
+++ b/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);
   }
 }
 
diff --git a/client/src/utils/domFx.js b/client/src/utils/domFx.js
index f9eacdc..a9111a3 100644
--- a/client/src/utils/domFx.js
+++ b/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));