From 76d25f3f7ac96331c0313367c6552654708d7729 Mon Sep 17 00:00:00 2001
From: SUMMERLOVE7 <wkdalswl77@naver.com>
Date: Mon, 20 Feb 2023 18:13:07 +0900
Subject: [PATCH] =?UTF-8?q?feat(FE)=20:=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=ED=99=94=EB=A9=B4=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95(#171)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/common/header.js | 18 ++++++++++++------
 client/src/components/common/modal.js  |  4 ++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/src/components/common/header.js b/client/src/components/common/header.js
index ffba2d9..fbf3378 100644
--- a/client/src/components/common/header.js
+++ b/client/src/components/common/header.js
@@ -40,8 +40,11 @@ const header = (props) => {
       </header>
     `;
 
-  const logoutEvent = (target) => {
-    toggleActive(target);
+  const logoutEvent = () => {
+    modal('로그아웃', 'logout')();
+
+    const logoutModal = $.qs('.outside-modal-container');
+    toggleActive(logoutModal);
   };
 
   const openMenuEvent = () => {
@@ -50,9 +53,6 @@ const header = (props) => {
 
     toggleActive(trigger);
     toggleActive(menuTarget);
-
-    const logoutButton = $.qs('.logout-button');
-    logoutButton.addEventListener('click', toggleActive());
   };
 
   const toggleActive = (target) => target.classList.toggle('active');
@@ -79,7 +79,13 @@ const header = (props) => {
       () => sideMenu()(),
       () => $.qs('.trigger'),
       $.on('click', openMenuEvent),
-      () => modal("로그아웃", "logout")());
+      () => $.qs('.logout-button'),
+      $.on('click', logoutEvent),
+      // () => $.qs('.modal-button'),
+      // $.on('click', navigate('/')),
+      // () => $.qs('.cancel-button'),
+      // $.on('click', navigate('/card'))
+      );
 
   return appendHeader;
 };
diff --git a/client/src/components/common/modal.js b/client/src/components/common/modal.js
index 77dec38..44f3bfd 100644
--- a/client/src/components/common/modal.js
+++ b/client/src/components/common/modal.js
@@ -3,8 +3,8 @@ import { _ } from '@/utils/customFx';
 
 const logout = (label, classname) => {
   const logoutTpl = `
-  <div class='outside-modal-container outside-${classname} active'>
-    <section class='modal-section-wrapper ${classname}'>
+  <div class='outside-modal-container outside-${classname}'>
+    <section class='modal-section-wrapper ${classname}-wrapper'>
       <section class='modal-section  ${classname}'>
       <div class='modal-text-container'>
       <h4 class='modal-text'>${label}</h4>