From 71004b6cbba57bb643e635b995f83964dc694b04 Mon Sep 17 00:00:00 2001
From: SUMMERLOVE7 <wkdalswl77@naver.com>
Date: Wed, 22 Feb 2023 12:07:32 +0900
Subject: [PATCH] =?UTF-8?q?feat(FE)=20:=20login=20alarm=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=82=BD=EC=9E=85(#176)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/apis/client.js                    |  6 +++---
 client/src/components/auth/login.js          |  2 +-
 client/src/components/auth/register.js       |  2 +-
 client/src/components/common/notification.js | 11 +++++++++--
 client/src/styles/common.scss                | 16 ++++++++++++++++
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/client/src/apis/client.js b/client/src/apis/client.js
index 412e6ec..6cb70bf 100644
--- a/client/src/apis/client.js
+++ b/client/src/apis/client.js
@@ -18,16 +18,16 @@ client.interceptors.response.use(
       switch (error.response.status) {
         case 401:
           navigate('/');
-          notification('로그인이 필요합니다.', 'login')();
+          notification('로그인이 필요합니다.', 'login', false)();
           return new Promise(() => {});
         case 400:
-          notification(`${error.response.data}`, 'login')();
+          notification(`${error.response.data}`, 'login', false)();
           return new Promise(() => {});
         default:
           return Promise.reject(error);
       }
     } else if (error.code === 'ERR_NETWORK') {
-      notification('올바르지 않은 이미지 형식입니다.', 'login')();
+      notification('올바르지 않은 이미지 형식입니다.', 'login', false)();
     }
     return Promise.reject(error);
   },
diff --git a/client/src/components/auth/login.js b/client/src/components/auth/login.js
index b0e1099..6bc7abe 100644
--- a/client/src/components/auth/login.js
+++ b/client/src/components/auth/login.js
@@ -71,7 +71,7 @@ const login = () => {
       // if (res === 'denied') window.alert('알림을 받으시려면 알림을 허용해주세요');
     });
     await navigate('/card');
-    notification('로그인에 성공하였습니다.', 'login')();
+    notification('로그인에 성공하였습니다.', 'login', true)();
   };
 
   // prettier-ignore
diff --git a/client/src/components/auth/register.js b/client/src/components/auth/register.js
index 10eaf9f..a583a5a 100644
--- a/client/src/components/auth/register.js
+++ b/client/src/components/auth/register.js
@@ -128,7 +128,7 @@ const register = () => {
 
     await navigate('/card');
     await regiseterUser(data);
-    notification('회원가입에 성공하였습니다.', 'register')();
+    notification('회원가입에 성공하였습니다.', 'register', true)();
   };
 
   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 eadfd1f..e1b93f6 100644
--- a/client/src/components/common/notification.js
+++ b/client/src/components/common/notification.js
@@ -1,10 +1,17 @@
+import { SERVER_URL } from '@/constants/constant';
 import { $ } from '@/utils';
 import { _ } from '@/utils/customFx';
 
-const notification = (label, classname) => {
+const notification = (label, classname, isSuccess) => {
+  const CIRCLE_CHECK_URL = `${SERVER_URL.IMG}icon/circle-check.svg`;
+  const CIRCLE_X_URL = `${SERVER_URL.IMG}icon/circle-xmark.svg`;
+
+  const CircleCheckTpl = `<img class="circle-check-icon" src='${CIRCLE_CHECK_URL}' alt='circle-check-icon' />`;
+  const CircleXTpl = `<img class="circle-x-icon" src='${CIRCLE_X_URL}' alt='circle-x-icon' />`;
+
   const notificationTpl = `
         <div class='notification-container ${classname}'>
-            <p>${label}</p>
+            <p>${isSuccess ? CircleCheckTpl : CircleXTpl} &nbsp; ${label} </p>
         </div>
     `;
 
diff --git a/client/src/styles/common.scss b/client/src/styles/common.scss
index dde0db4..2c8888a 100644
--- a/client/src/styles/common.scss
+++ b/client/src/styles/common.scss
@@ -24,11 +24,27 @@
   p {
     font-size: 1rem;
     text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 
   &.show {
     transform: translateY(6rem);
   }
+
+  img {
+    height: 1.25rem;
+  }
+
+  .circle-check-icon {
+    filter: invert(72%) sepia(86%) saturate(5280%) hue-rotate(87deg) brightness(126%) contrast(121%);
+  }
+
+  .circle-x-icon {
+    filter: invert(21%) sepia(100%) saturate(6748%) hue-rotate(358deg) brightness(119%)
+      contrast(115%);
+  }
 }
 
 .outside-modal-container {