diff --git a/app/app.vue b/app/app.vue index e5492cb..548c253 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,8 +1,5 @@ + + + + diff --git a/layers/components/blocks/modal/Alert.vue b/layers/components/blocks/modal/Alert.vue new file mode 100644 index 0000000..d044349 --- /dev/null +++ b/layers/components/blocks/modal/Alert.vue @@ -0,0 +1,59 @@ + + + diff --git a/layers/components/blocks/modal/Confirm.vue b/layers/components/blocks/modal/Confirm.vue new file mode 100644 index 0000000..bf17a0a --- /dev/null +++ b/layers/components/blocks/modal/Confirm.vue @@ -0,0 +1,66 @@ + + + diff --git a/layers/components/blocks/modal/YouTube.vue b/layers/components/blocks/modal/YouTube.vue index 83687db..d49f344 100644 --- a/layers/components/blocks/modal/YouTube.vue +++ b/layers/components/blocks/modal/YouTube.vue @@ -1,3 +1,52 @@ + + - - diff --git a/layers/stores/useModalStore.ts b/layers/stores/useModalStore.ts index cc555d1..98e86b0 100644 --- a/layers/stores/useModalStore.ts +++ b/layers/stores/useModalStore.ts @@ -4,7 +4,6 @@ import type { YoutubeParams, } from '#layers/types/components/modal' -// [TODO] 모달 상태 관리 개선 const createModalState = () => ({ storeIsOpen: ref(false), storeIsShowDimmed: ref(false), @@ -13,20 +12,8 @@ const createModalState = () => ({ storeContentText: ref(''), storeConfirmButtonText: ref(''), storeConfirmButtonEvent: skipHydrate(ref<() => void>(() => {})), - storeCloseButtonEvent: skipHydrate(ref<() => void>(() => {})), }) -const resetModalState = (type: ReturnType) => { - type.storeIsOpen.value = false - type.storeIsShowDimmed.value = false - type.storeClassName.value = '' - type.storeIsOutsideClose.value = true - type.storeContentText.value = '' - type.storeConfirmButtonText.value = '' - type.storeConfirmButtonEvent.value = () => {} - type.storeCloseButtonEvent.value = () => {} -} - export const useModalStore = defineStore('modalStore', () => { const scrollStore = useScrollStore() @@ -41,8 +28,7 @@ export const useModalStore = defineStore('modalStore', () => { isOutsideClose = true, contentText, confirmButtonText = '', - confirmButtonEvent, - closeButtonEvent, + confirmButtonEvent = () => {}, }: DialogParams) => { alert.storeIsOpen.value = true alert.storeIsShowDimmed.value = isShowDimmed @@ -50,12 +36,7 @@ export const useModalStore = defineStore('modalStore', () => { alert.storeContentText.value = contentText alert.storeConfirmButtonText.value = confirmButtonText alert.storeIsOutsideClose.value = isOutsideClose - alert.storeConfirmButtonEvent.value = confirmButtonEvent ?? handleResetAlert - alert.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetAlert - } - - const handleResetAlert = () => { - resetModalState(alert) + alert.storeConfirmButtonEvent.value = confirmButtonEvent } // confirm ------------------ @@ -72,9 +53,8 @@ export const useModalStore = defineStore('modalStore', () => { contentText, confirmButtonText = '', cancelButtonText = '', - confirmButtonEvent, - cancelButtonEvent, - closeButtonEvent, + confirmButtonEvent = () => {}, + cancelButtonEvent = () => {}, }: DialogParams) => { confirm.storeIsOpen.value = true confirm.storeIsShowDimmed.value = isShowDimmed @@ -83,29 +63,26 @@ export const useModalStore = defineStore('modalStore', () => { confirm.storeConfirmButtonText.value = confirmButtonText confirm.storeCancelButtonText.value = cancelButtonText confirm.storeIsOutsideClose.value = isOutsideClose - confirm.storeConfirmButtonEvent.value = - confirmButtonEvent ?? handleResetConfirm - confirm.storeCancelButtonEvent.value = - cancelButtonEvent ?? handleResetConfirm - confirm.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetConfirm - } - - const handleResetConfirm = () => { - resetModalState(confirm) - confirm.storeCancelButtonText.value = '' - confirm.storeCancelButtonEvent.value = () => {} + confirm.storeConfirmButtonEvent.value = confirmButtonEvent + confirm.storeCancelButtonEvent.value = cancelButtonEvent } // youtube ------------------ const youtube = { storeIsOpen: ref(false), storeYoutubeUrl: ref(''), + storeIsOutsideClose: ref(true), storeClassName: ref(''), } - const handleOpenYoutube = ({ youtubeUrl, className = '' }: YoutubeParams) => { + const handleOpenYoutube = ({ + youtubeUrl, + isOutsideClose = true, + className = '', + }: YoutubeParams) => { youtube.storeIsOpen.value = true youtube.storeYoutubeUrl.value = youtubeUrl + youtube.storeIsOutsideClose.value = isOutsideClose youtube.storeClassName.value = className scrollStore.controlScrollLock(true) } @@ -113,6 +90,7 @@ export const useModalStore = defineStore('modalStore', () => { const handleResetYoutube = () => { youtube.storeIsOpen.value = false youtube.storeYoutubeUrl.value = '' + youtube.storeIsOutsideClose.value = true youtube.storeClassName.value = '' scrollStore.controlScrollLock(false) } @@ -123,8 +101,6 @@ export const useModalStore = defineStore('modalStore', () => { youtube, handleOpenAlert, handleOpenConfirm, - handleResetAlert, - handleResetConfirm, handleOpenYoutube, handleResetYoutube, } diff --git a/layers/types/components/modal.ts b/layers/types/components/modal.ts index b806da0..f2393c8 100644 --- a/layers/types/components/modal.ts +++ b/layers/types/components/modal.ts @@ -12,5 +12,6 @@ export interface DialogParams { export interface YoutubeParams { youtubeUrl: string + isOutsideClose?: boolean className?: string } diff --git a/public/images/common/dark/Frame.svg b/public/images/common/dark/Frame.svg deleted file mode 100644 index b4b0534..0000000 --- a/public/images/common/dark/Frame.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/public/images/common/dark/ic-v2-content-option-horizontal-fill.svg b/public/images/common/dark/ic-v2-content-option-horizontal-fill.svg deleted file mode 100644 index 881b97d..0000000 --- a/public/images/common/dark/ic-v2-content-option-horizontal-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/dark/ic-v2-control-arrow-right-line.svg b/public/images/common/dark/ic-v2-control-arrow-right-line.svg deleted file mode 100644 index e4c5431..0000000 --- a/public/images/common/dark/ic-v2-control-arrow-right-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/dark/ic-v2-control-close-line.svg b/public/images/common/dark/ic-v2-control-close-line.svg deleted file mode 100644 index d5c7b86..0000000 --- a/public/images/common/dark/ic-v2-control-close-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/dark/ic-v2-control-select-arrow-down-fill.svg b/public/images/common/dark/ic-v2-control-select-arrow-down-fill.svg deleted file mode 100644 index 9ac3064..0000000 --- a/public/images/common/dark/ic-v2-control-select-arrow-down-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/dark/ic-v2-control-web-link-line.svg b/public/images/common/dark/ic-v2-control-web-link-line.svg deleted file mode 100644 index 5839161..0000000 --- a/public/images/common/dark/ic-v2-control-web-link-line.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/common/dark/ic-v2-logo-apple-fill.svg b/public/images/common/dark/ic-v2-logo-apple-fill.svg deleted file mode 100644 index ee4ad05..0000000 --- a/public/images/common/dark/ic-v2-logo-apple-fill.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/common/dark/ic-v2-navigation-menu-bold-line.svg b/public/images/common/dark/ic-v2-navigation-menu-bold-line.svg deleted file mode 100644 index 28d2b9c..0000000 --- a/public/images/common/dark/ic-v2-navigation-menu-bold-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/dark/ic-v2-stove-s-color.svg b/public/images/common/dark/ic-v2-stove-s-color.svg deleted file mode 100644 index 38b72d2..0000000 --- a/public/images/common/dark/ic-v2-stove-s-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/light/Frame.svg b/public/images/common/light/Frame.svg deleted file mode 100644 index 865f6de..0000000 --- a/public/images/common/light/Frame.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/public/images/common/light/ic-v2-content-option-horizontal-fill.svg b/public/images/common/light/ic-v2-content-option-horizontal-fill.svg deleted file mode 100644 index 66c0abb..0000000 --- a/public/images/common/light/ic-v2-content-option-horizontal-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/light/ic-v2-control-arrow-right-line.svg b/public/images/common/light/ic-v2-control-arrow-right-line.svg deleted file mode 100644 index 020c548..0000000 --- a/public/images/common/light/ic-v2-control-arrow-right-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/light/ic-v2-control-close-line.svg b/public/images/common/light/ic-v2-control-close-line.svg deleted file mode 100644 index e206cd8..0000000 --- a/public/images/common/light/ic-v2-control-close-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/light/ic-v2-control-select-arrow-down-fill.svg b/public/images/common/light/ic-v2-control-select-arrow-down-fill.svg deleted file mode 100644 index bb226b8..0000000 --- a/public/images/common/light/ic-v2-control-select-arrow-down-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/light/ic-v2-control-web-link-line.svg b/public/images/common/light/ic-v2-control-web-link-line.svg deleted file mode 100644 index c51ccfe..0000000 --- a/public/images/common/light/ic-v2-control-web-link-line.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/common/light/ic-v2-logo-apple-fill.svg b/public/images/common/light/ic-v2-logo-apple-fill.svg deleted file mode 100644 index 0cdd2c5..0000000 --- a/public/images/common/light/ic-v2-logo-apple-fill.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/common/light/ic-v2-navigation-menu-bold-line.svg b/public/images/common/light/ic-v2-navigation-menu-bold-line.svg deleted file mode 100644 index cdf4f67..0000000 --- a/public/images/common/light/ic-v2-navigation-menu-bold-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/common/light/ic-v2-stove-s-color.svg b/public/images/common/light/ic-v2-stove-s-color.svg deleted file mode 100644 index 38b72d2..0000000 --- a/public/images/common/light/ic-v2-stove-s-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - -