feat(FE) : login alarm 아이콘 삽입(#176)

softeerbootcamp · Feb 22, 2023 · 71004b6 · 71004b6
1 parent bafef17
commit 71004b6
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {