82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<customPopup v-model:show="show">
|
||
|
|
<div class="popup-content" :style="{ width, height }">
|
||
|
|
<!-- Top -->
|
||
|
|
<div class="popup-top">
|
||
|
|
<slot name="top"></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Middle -->
|
||
|
|
<div class="popup-middle">
|
||
|
|
<slot name="middle"></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Bottom -->
|
||
|
|
<div class="popup-bottom">
|
||
|
|
<button class="popup-close" @click="show = false">닫기</button>
|
||
|
|
<slot name="bottom"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</customPopup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
width?: string
|
||
|
|
height?: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
// defineModel + 기본값 지정
|
||
|
|
const show = defineModel('show', {type: Boolean, default:false});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.popup-content {
|
||
|
|
background: white;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
border-radius: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.popup-top {
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
background: #f0f0f0;
|
||
|
|
border-bottom: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
.popup-middle {
|
||
|
|
flex: 1;
|
||
|
|
padding: 20px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.popup-bottom {
|
||
|
|
padding: 10px 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center; /* 중앙 정렬 */
|
||
|
|
gap: 10px;
|
||
|
|
background: #f9f9f9;
|
||
|
|
border-top: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ⭐️ bottom 슬롯 버튼 공통 스타일 */
|
||
|
|
.popup-bottom ::v-deep(button) {
|
||
|
|
padding: 8px 16px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
background: #007bff;
|
||
|
|
color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.popup-bottom ::v-deep(button:hover) {
|
||
|
|
background: #0056b3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-close {
|
||
|
|
background: #ddd !important;
|
||
|
|
color: black !important;
|
||
|
|
}
|
||
|
|
</style>
|