Merge feat(FE) : 로그아웃화면 UI 구현(#171)

feat(FE) : 로그아웃화면 UI 구현(#171)

client/src/components/common/header.js

@@ -2,7 +2,7 @@ import { SERVER_URL } from '@/constants/constant';
 import { navigate } from '@/core/router';
 import { _ } from '@/utils/customFx';
 import { $ } from '@/utils';
-import { sideMenu } from '@/components/common';
+import { sideMenu, modal } from '@/components/common';
 
 const header = (props) => {
   const { color, label, path } = props;
@@ -40,32 +40,19 @@ const header = (props) => {
       </header>
     `;
 
-  const hideElement = (target) => {
-    target.style.display = 'none';
+  const logoutEvent = (target) => {
+    toggleActive(target);
   };
 
-  const openMenuEvent = ({ target }) => {
+  const openMenuEvent = () => {
     const trigger = $.qs('.trigger');
     const menuTarget = $.qs('.menu-section');
-    // if (trigger.classList.contains('active')) closeMenuEvent(target);
 
     toggleActive(trigger);
     toggleActive(menuTarget);
-  };
-
-  // //prettier-ignore
-  // const openMenuEvent = () =>
-  //   _.go(
-  //     sideMenu()(),
-  //     () => $.qs('.trigger'),
-  //     toggleActive,
-  //     () => $.qs('.active'),
-  //     $.on('click', closeMenuEvent));
 
-  const closeMenuEvent = () => {
-    console.log(1);
-    const target = $.qs('.menu-section');
-    target.style.display = 'none';
+    const logoutButton = $.qs('.logout-button');
+    logoutButton.addEventListener('click', toggleActive());
   };
 
   const toggleActive = (target) => target.classList.toggle('active');
@@ -91,7 +78,8 @@ const header = (props) => {
       handleEvent,
       () => sideMenu()(),
       () => $.qs('.trigger'),
-      $.on('click', openMenuEvent));
+      $.on('click', openMenuEvent),
+      () => modal("로그아웃", "logout")());
 
   return appendHeader;
 };

client/src/components/common/index.js

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

client/src/components/common/modal.js

@@ -0,0 +1,32 @@
+import { $ } from '@/utils';
+import { _ } from '@/utils/customFx';
+
+const logout = (label, classname) => {
+  const logoutTpl = `
+  <div class='outside-modal-container outside-${classname} active'>
+    <section class='modal-section-wrapper ${classname}'>
+      <section class='modal-section  ${classname}'>
+      <div class='modal-text-container'>
+      <h4 class='modal-text'>${label}</h4>
+      <h5 class='modal-do-text'> 하시겠습니까? </h5>
+      </div>
+      <section class='modal-button-section'>
+        <button type='button' class='modal-button'>확인</button>
+        <button type='button' class='cancel-button'>취소</button>
+      </section>
+      </section>
+    </section>
+  </div>
+  `;
+
+  // prettier-ignore
+  const renderLogoutModal = () => 
+    _.go(
+      logoutTpl, 
+      $.el, 
+      $.replace($.qs('.main-card-box')));
+
+  return renderLogoutModal;
+};
+
+export default logout;

client/src/components/common/sideMenu.js

@@ -13,7 +13,7 @@ const sideMenu = () => {
           <ul class='menu-button'>
             <li>마이페이지</li>
             <li>사용 내역</li>
-            <li>로그아웃</li>
+            <li class='logout-button'>로그아웃</li>
           </ul>
         </section>
         <img class='small-logo-mint' src='${MINT_LOGO_URL}' alt='amatta-small-logo'/>

client/src/styles/common.scss

@@ -8,6 +8,81 @@
   margin: 0;
 }
 
+.outside-modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: calc(var(--vh, 1vh) * 100);
+  z-index: 12;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: none;
+
+  &.active {
+    display: flex;
+  }
+
+  .modal-section-wrapper {
+    width: 70%;
+    // height: 20%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 13;
+    background-color: $white-color;
+    border-radius: 0.75rem;
+    text-align: center;
+
+    .modal-section {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 2rem;
+    }
+
+    .modal-text-container {
+      margin-top: 0.25rem;
+
+      .modal-text {
+        font-size: 1.5rem;
+        color: $gray700;
+        margin-bottom: 0.5rem;
+      }
+
+      .modal-do-text {
+        font-size: 1.125rem;
+        color: $gray500;
+        margin-bottom: 2rem;
+      }
+    }
+
+    .modal-button-section {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 3.25rem;
+      justify-content: space-between;
+      font-size: 1.325rem;
+
+      .modal-button {
+        width: 48%;
+        border-radius: 0.5rem;
+        background-color: $pink-color;
+        color: $white-color;
+        border: none;
+      }
+
+      .cancel-button {
+        width: 48%;
+        border-radius: 0.5rem;
+        background-color: $gray300;
+        border: none;
+      }
+    }
+  }
+}
+
 .calendar {
   opacity: 0;
   position: relative;