TaskFlow-FE/src/components/common/ModalView.vue at 775e5eb182f0af7c8685bc8241b2a451afb0e4b4 · TaskFlow-CLAP/TaskFlow-FE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
  <div
    v-if="isOpen"
    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-[99]"
    @click.self="closeModal" />
  <Transition name="modal">
    <div
      v-if="isOpen"
      class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99]">
      <div class="flex flex-col gap-8 w-[300px]">
        <div class="flex flex-col gap-6">
          <div class="flex flex-col items-center gap-2">
            <CommonIcons
              v-if="type == 'successType'"
              :name="successIcon" />
            <CommonIcons
              v-if="type == 'failType' || type == 'inputType' || type === 'terminate'"
              :name="failIcon" />
            <CommonIcons
              v-if="type == 'warningType'"
              :name="warningIcon" />
            <LoadingIcon v-if="type == 'loadingType'" />
            <div
              v-if="$slots.header"
              class="flex text-2xl font-semibold justify-center whitespace-pre-wrap text-center">
              <slot name="header"></slot>
            </div>

            <div
              v-if="type != 'inputType' && $slots.body"
              class="flex text-sm font-semibold text-body justify-center whitespace-pre-wrap text-center">
              <slot name="body"></slot>
            </div>
          </div>

          <textarea
            v-if="type == 'inputType' || type === 'terminate'"
            v-model="textValue"
            :placeholder="
              type === 'terminate' ? '종료 사유를 입력해주세요' : '반려 사유를 입력해주세요'
            "
            class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
        </div>

        <button
          type="button"
          class="button-large-primary"
          v-if="type == 'successType'"
          @click="closeModal">
          확인
        </button>

        <button
          type="button"
          class="button-large-default"
          v-if="type == 'failType'"
          @click="closeModal">
          확인
        </button>

        <div
          class="flex items-center gap-6"
          v-if="type == 'warningType' || type == 'inputType' || type === 'terminate'">
          <button
            type="button"
            class="button-large-default"
            @click="closeModal">
            취소
          </button>
          <button
            type="button"
            class="button-large-red"
            @click="confirmModal">
            {{ type === 'inputType' ? '반려' : type === 'terminate' ? '종료' : '삭제' }}
          </button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
import { preventEnter } from '@/utils/preventEnter'
import { onUnmounted, ref, watch } from 'vue'
import CommonIcons from './CommonIcons.vue'
import LoadingIcon from './LoadingIcon.vue'

const { isOpen, type, modelValue } = defineProps<{
  isOpen: boolean
  type?: string
  modelValue?: string
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'click'): void
  (e: 'update:modelValue', value: string): void
}>()

const textValue = ref(modelValue || '')

watch(textValue, newValue => {
  emit('update:modelValue', newValue)
})

const closeModal = () => {
  textValue.value = ''
  emit('close')
}

const confirmModal = () => {
  emit('click')
}

watch(
  () => isOpen,
  () => {
    if (isOpen) {
      textValue.value = ''
      document.body.style.overflow = 'hidden'
      window.addEventListener('keydown', preventEnter)
    } else {
      document.body.style.overflow = ''
      window.removeEventListener('keydown', preventEnter)
    }
  }
)

onUnmounted(() => {
  document.body.style.overflow = ''
  window.removeEventListener('keydown', preventEnter)
})
</script>