From a77a670257caaa357e14064407be60844e3b79b9 Mon Sep 17 00:00:00 2001 From: SUMMERLOVE7 Date: Mon, 20 Feb 2023 17:45:03 +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=20UI=20=EA=B5=AC=ED=98=84(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/header.js | 28 +++------ client/src/components/common/index.js | 1 + client/src/components/common/modal.js | 32 ++++++++++ client/src/components/common/sideMenu.js | 2 +- client/src/styles/common.scss | 75 ++++++++++++++++++++++++ 5 files changed, 117 insertions(+), 21 deletions(-) create mode 100644 client/src/components/common/modal.js diff --git a/client/src/components/common/header.js b/client/src/components/common/header.js index 15f33c3..ffba2d9 100644 --- a/client/src/components/common/header.js +++ b/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) => { `; - 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; }; diff --git a/client/src/components/common/index.js b/client/src/components/common/index.js index 4503b13..c01919d 100644 --- a/client/src/components/common/index.js +++ b/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'; diff --git a/client/src/components/common/modal.js b/client/src/components/common/modal.js new file mode 100644 index 0000000..77dec38 --- /dev/null +++ b/client/src/components/common/modal.js @@ -0,0 +1,32 @@ +import { $ } from '@/utils'; +import { _ } from '@/utils/customFx'; + +const logout = (label, classname) => { + const logoutTpl = ` +
+
+
+
+

${label}

+
하시겠습니까?
+
+
+ + +
+
+
+
+ `; + + // prettier-ignore + const renderLogoutModal = () => + _.go( + logoutTpl, + $.el, + $.replace($.qs('.main-card-box'))); + + return renderLogoutModal; +}; + +export default logout; diff --git a/client/src/components/common/sideMenu.js b/client/src/components/common/sideMenu.js index 10a4dce..cee22e4 100644 --- a/client/src/components/common/sideMenu.js +++ b/client/src/components/common/sideMenu.js @@ -13,7 +13,7 @@ const sideMenu = () => { amatta-small-logo diff --git a/client/src/styles/common.scss b/client/src/styles/common.scss index 9b77566..ffe2b9a 100644 --- a/client/src/styles/common.scss +++ b/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;