diff --git a/client/src/components/auth/login.js b/client/src/components/auth/login.js index fd1f9d4..c2dce98 100644 --- a/client/src/components/auth/login.js +++ b/client/src/components/auth/login.js @@ -1,6 +1,6 @@ import { initializeApp } from 'firebase/app'; import { getMessaging, getToken } from 'firebase/messaging'; -import { inputForm } from '@/components/common'; +import { inputForm, notification } from '@/components/common'; import { loginU } from '@/apis/auth'; import { navigate } from '@/core/router'; import { INPUT } from '@/constants/constant'; @@ -46,6 +46,7 @@ const login = () => { await loginU(userData); navigate('/card'); + await notification('로그인', 'login')(); const firebaseConfig = { apiKey: 'AIzaSyCsLBsvozvTnYlDH-5cS0A8X_AjV5o4jjM', @@ -73,6 +74,12 @@ const login = () => { }); }; + // prettier-ignore + const handleSubmission = (target) => + _.pipe( + handleSubmitData(target), + notification('로그인', 'login')); + // prettier-ignore const handleSubmitData = (target) => _.pipe( @@ -104,6 +111,7 @@ const login = () => { appendInputForm, () => handleChangeInput(document), () => handleSubmitData(fragment), + // () => handleSubmission(fragment), () => fragment); return appendLogin; diff --git a/client/src/components/auth/register.js b/client/src/components/auth/register.js index 965143c..f21201a 100644 --- a/client/src/components/auth/register.js +++ b/client/src/components/auth/register.js @@ -1,4 +1,4 @@ -import { inputForm } from '@/components/common'; +import { inputForm, notification } from '@/components/common'; import { regiseterUser, verificateEmail } from '@/apis/auth'; import { navigate } from '@/core/router'; import { INPUT } from '@/constants/constant'; @@ -129,6 +129,7 @@ const register = () => { navigate('/card'); await regiseterUser(data); + notification('로그아웃', 'logout')(); }; const addInputForm = (fragment) => (input) => inputForm({ ...input, target: fragment })(); diff --git a/client/src/components/common/index.js b/client/src/components/common/index.js index c01919d..0a13940 100644 --- a/client/src/components/common/index.js +++ b/client/src/components/common/index.js @@ -3,3 +3,4 @@ export { default as inputForm } from './inputForm'; export { default as dropdownMenu } from './dropdownMenu'; export { default as sideMenu } from './sideMenu'; export { default as modal } from './modal'; +export { default as notification } from './notification'; diff --git a/client/src/components/common/notification.js b/client/src/components/common/notification.js new file mode 100644 index 0000000..f8343ef --- /dev/null +++ b/client/src/components/common/notification.js @@ -0,0 +1,38 @@ +import { $ } from '@/utils'; +import { _ } from '@/utils/customFx'; + +const notification = (label, classname) => { + const notificationTpl = ` +
+

${label} 되었습니다.

+
+ `; + + //prettier-ignore + const renderNotification = () => + _.go( + notificationTpl, + $.el, + $.append($.qs('#root'))); + + const toggleShow = (target) => target.classList.toggle('show'); + + const showNotification = () => { + const notificationDiv = $.qs('.notification-container'); + toggleShow(notificationDiv); + setTimeout(() => { + toggleShow(notificationDiv); + }, 2000); + }; + + //prettier-ignore + const notificationEvent = async () => { + _.go( + renderNotification(), + () => showNotification); + }; + + return notificationEvent; +}; + +export default notification; diff --git a/client/src/pages/MainPage.js b/client/src/pages/MainPage.js index 8c980e0..0f4b255 100644 --- a/client/src/pages/MainPage.js +++ b/client/src/pages/MainPage.js @@ -1,6 +1,6 @@ import { SERVER_URL } from '@/constants/constant'; import { cardDetail, cardList } from '@/components/main'; -import { dropdownMenu, header } from '@/components/common'; +import { dropdownMenu, header, notification } from '@/components/common'; import { IO, $, slider } from '@/utils'; import { _ } from '@/utils/customFx'; import { navigate } from '@/core/router'; @@ -229,6 +229,7 @@ const navigateMain = async () => { MainPage.render(), addEvents, slider(), + // () => notification("logout", "logout")(), () => $.qsa('.mark-used-button'), makeUsedState, () => $.qs('.main-dropdown-button'), diff --git a/client/src/styles/common.scss b/client/src/styles/common.scss index ffe2b9a..056e626 100644 --- a/client/src/styles/common.scss +++ b/client/src/styles/common.scss @@ -8,6 +8,26 @@ margin: 0; } +.notification-container { + background: rgba(0, 0, 0, 0.3); + border-radius: 1rem 1rem 0 0; + padding: 1.5rem 0; + width: 100%; + position: absolute; + bottom: calc(-50px - 3rem); + transition: transform 0.3s ease-in-out; + z-index: 15; + + p { + font-size: calc(-50px - 3rem); + text-align: center; + } + + &.show { + transform: translateY(-50px); + } +} + .outside-modal-container { position: fixed; top: 0;