온라인 문의 / 예약 요청

아래 정보를 입력하시면 문자 메시지로 바로 전송됩니다.
주소는 반드시 정확하게 작성해주세요.

연락처

원하시는 지역

상세 주소

원하시는 시간대

관심 프로그램

추가 요청사항

</div>
    </div>
</div>
</div></div></div></div></section></body>

</style>

<p style="text-align: center;"><span style="color: rgb(44, 130, 201);"><strong><br></strong></span></p><hr size="100%" style="border-top:#948c78 1px solid !important; opacity:0.3;"><p style="text-align: center;"><span style="color: rgb(44, 130, 201);"><strong>상호명 : 서울출장마사지NO.1</strong></span></p><p style="text-align: center;"><span style="color: rgb(44, 130, 201);"><strong>대표자 : 하이브타이 </strong></span></p><p style="text-align: center;"><span style="color: rgb(44, 130, 201);"><strong>고객센터 : 010-0000-0000</strong></span></p><p style="text-align: center;"><strong><span style="color: rgb(44, 130, 201);">주소 : 서울특별시 강남구 역삼동 1323</span></strong></p><p style="text-align: center;"><span style="color: rgb(44, 130, 201);"><strong>2025© 서울출장마사지NO.1 24시간 연중무휴.</strong></span></p>
                            </div>
        </div>
    </div>
</footer>

let section = $('.section');
    section.each(function(){
        let code = $(this).attr('id');
        if($('#' + code).hasClass('hidden-lg')) {
            $('#' + code).removeClass('hidden-lg');
            $('#' + code).removeClass('hidden-md');
            $('#' + code).removeClass('hidden-sm');
            $('#' + code).addClass('from-mobile');
        }
    });
</script>

<template v-slot:default>
                <div>
                    <div style="margin-bottom: 15px;">
                        <div style="position: relative;">
                            <input type="text"
                                   class="form-control free-modal-image-modal-search-input"
                                   placeholder="검색어를 입력해 주세요."
                                   v-model="keyword"
                                   @keyup.enter="getImages()"/>
                            <button type="button"
                                    class="free-modal-image-modal-search-btn"
                                    @click="getImages()">
                                <img src="/file/icon/돋보기.svg">
                            </button>
                        </div>
                    </div>
                    <div class="text-right text-muted">Powered by Unsplash</div>
                    <div v-if="loading">이미지 불러오는중...</div>
                    <template v-else>
                        <div v-if="rows.length == 0">{{text_content}}</div>
                        <div v-else>
                            <div class="free-modal-image-grid-flex">
                                <template v-for="item,index in rows">
                                    <div v-if="index >= (page - 1) * limit && index < page * limit"
                                         class="free-modal-image-item"
                                         @click="choiceImage(item)"
                                         :class="activeImage(item)">
                                        <img :src="item.urls.thumb">
                                        <div class="free-modal-image-overlay">
                                            <div class="free-modal-image-info">
                                                <div class="free-modal-author-name">{{item.user.name}}</div>
                                                <div class="free-modal-image-description">
                                                    {{item.alt_description}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>

</div>
            </template>

temp : {
                        $table : "",
                    },
                    row: {},
                    rows : [],

file_idx : "",
                    limit : 9,
                    page : 1,

image_url : "",
                    keyword : "",
                    select_item : null,
                    text_content : "이미지가 없습니다.",
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
            },
            async mounted() {
                this.table = await this.api.table("jd_file");

this.load = true;

this.$nextTick(async () => {
                    // 해당부분에 퍼블리싱 라이브러리,플러그인 선언부분 하시면 됩니다 ex) swiper
                });
            },
            updated() {

},
            methods: {
                async getImages() {
                    this.loading = true;

try {
                        let url = "https://api.unsplash.com/photos/random?count=30&lang=ko";
                        if (this.keyword) url += "&query=" + encodeURIComponent(this.keyword);

const res = await fetch(url, {
                            headers: {
                                'Authorization': 'Client-ID as5fffgkzlS5z8NVX7xYsekawUaPRDO_SHXJFvFQxBs'
                            }
                        });

// ❗ HTTP 에러 처리
                        if (!res.ok) {
                            throw new Error(`Unsplash API error: ${res.status}`);
                        }

const data = await res.json();
                        this.rows = data;

} catch (err) {
                        // 사용자용 처리
                        this.rows = [];
                        this.text_content = "현재 요청이많아 무료 이미지는 사용이 불가능합니다. 죄송합니다."
                    } finally {
                        this.loading = false;
                    }
                },
                saveImage() {
                    if(this.widget_type === "image") {
                        this.modelValue.row.file_src = this.select_item.urls.full;
                        this.modelValue.row.file_width = this.select_item.width;
                        this.modelValue.row.file_height = this.select_item.height;

// height는 기획자가 고정 400으로 원함
                        this.modelValue.row.width = this.select_item.width;
                    }else if(this.widget_type === "image_hover") {
                        this.modelValue.row.option_mouse_over_image_src = this.select_item.urls.full;
                        this.modelValue.row.option_mouse_over_image_name = this.select_item.alternative_slugs['ko'];
                    }

this.$closeModal(this.modelValue);

},
                activeImage(item) {
                    if(this.widget_type === "image" || this.widget_type === "image_hover") {
                        if(item.urls.full === this.select_item?.urls.full) return "active";
                    }

return false;
                },
                choiceImage(item) {
                    if(this.widget_type === "image" || this.widget_type === "image_hover") {
                        this.select_item = item;
                    }
                },
            },
            computed: {
                totalPage() {
                    return this.rows.length % this.limit === 0 ? this.rows.length / this.limit : Math.floor(this.rows.length / this.limit) + 1;
                }
            },
            watch: {
                async "modelValue.status"(value, old_value) {
                    const $modal = $("#widget_setting_jd");

if(!value) {
                        this.file_idx = "";
                        this.rows = [];

$modal.data('bs.modal').options.backdrop = true;
                        $modal.data('bs.modal').options.keyboard = true;
                        return false;
                    }

$modal.data('bs.modal').options.backdrop = 'static';
                    $modal.data('bs.modal').options.keyboard = false;

await this.getImages();
                }
            }
        }});
</script>

.free-modal-image-item {
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #ddd;
        transition: all 0.2s;
        aspect-ratio: 1 / 1;
        position: relative;
    }

.free-modal-image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: all 0.2s;
    }

.free-modal-image-item:hover {
        border-color: #337ab7;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transform: scale(1.05);
    }

.free-modal-image-item.active {
        outline: 3px solid red;
        outline-offset: -3px;
    }

/* 오버레이 스타일 */
    .free-modal-image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.3) 70%, transparent 100%);
        padding: 15px 10px 10px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 999999;
    }

.free-modal-image-item:hover .free-modal-image-overlay {
        opacity: 1;
    }

.free-modal-image-info {
        color: white;
        font-size: 12px;
    }

.free-modal-author-name {
        font-weight: bold;
        margin-bottom: 3px;
        font-size: 13px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
    }

.free-modal-image-description {
        font-size: 11px;
        line-height: 1.3;
        opacity: 0.95;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
    }

.free-modal-image-modal-search-input {
        padding-right: 45px !important;
        border-radius: 4px;
        border: 1px solid #ddd;
        height: 40px;
    }

.free-modal-image-modal-search-input:focus {
        border-color: #66afe9;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }

.free-modal-image-modal-search-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        color: #999;
        transition: color 0.2s;
    }

.free-modal-image-modal-search-btn:hover {
        color: #333;
    }

.free-modal-image-modal-search-btn:focus {
        outline: none;
    }
</style><script type="text/x-template" id="design-widget-image-modal-template">
    <div v-if="load" class="jaydream design-widget-image-modal">
        <div class="row">
            
            <div class="col-md-6">
                <div class="jd-image-preview-box" :class="{ 'has-image': row.upload_file || row.file_src }">
                    <template v-if="row.upload_file || row.file_src">
                        <div style="position: relative; display: inline-block;">
                            <img :src="row.upload_file ? row.upload_file.src : row.file_src" class="jd-preview-image" :style="getStyle()">

</div>
                    </template>

<div class="col-md-6">
                <h4 class="jd-image-modal-title">
                    <img src="/file/icon/basic.svg"> 기본 설정
                </h4>

<div class="form-group" style="margin-bottom: 12px;">
                    <label class="jd-image-modal-content-text">
                        <input type="checkbox" v-model="row.border_radius_use"> 모서리 둥글게

<div class="form-group" style="margin-bottom: 12px;">
                    <label class="jd-image-modal-content-text">
                        <input type="checkbox" v-model="row.border_use"> 테두리

<div style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 1px solid #ddd;">
                            <input type="color"
                                   v-model="row.border_color"
                                   style="width: 150%; height: 150%; border: none; cursor: pointer; transform: translate(-17%, -17%);">
                        </div>

<div class="number-input-wrapper">
                            <input type="text" v-model="row.border_width" class="form-control form-control-sm" v-number>
                            <div class="number-stepper">
                                <button type="button" class="stepper-up" @click="row.border_width++;">
                                    <svg width="10" height="6" viewBox="0 0 10 6">
                                        <path d="M5 0L10 6H0L5 0Z" fill="#666"/>
                                    </svg>
                                </button>
                                <button type="button" class="stepper-down" @click="row.border_width--;">
                                    <svg width="10" height="6" viewBox="0 0 10 6">
                                        <path d="M5 6L0 0H10L5 6Z" fill="#666"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </label>
                </div>
            </div>
        </div>

<hr>

<div class="row">
            
            <div class="col-md-6">
                <h4 class="jd-image-modal-title">
                    <img src="/file/icon/image_size.svg"> 이미지 사이즈
                </h4>

<div class="col-md-6">
                <h4 class="jd-image-modal-title">
                    <img src="/file/icon/image_margin.svg"> 여백 설정
                </h4>

<hr>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#textSection">
                <div>
                    <img src="/file/icon/text.svg" style="height: 23px">
                    <span class="jd-effect-text">텍스트 삽입</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_text}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_text}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="textSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_text == '사용안함'}" @click="row.option_text = '사용안함'; editor = false;">
                                <img src="/file/icon/사용안함.svg">
                                <span>사용안함</span>
                            </div>

<div class="col-md-6" style="display : flex;">
                            <div v-if="row.option_text == '사용안함'" style="flex : 1; text-align : center; align-content: center;">
                                <span style="font-size: large; color : #959595; ">텍스트를 추가하지 않았습니다.</span>
                            </div>
                            <div v-if="row.option_text == '이미지 하단'" style="flex : 1; align-content: center;">
                                <div style="display: flex; gap : 5px; align-items: center;">
                                    <label style="margin: 0; white-space: nowrap;">텍스트 여백</label>
                                    <input type="text" class="form-control input-sm" v-model="row.option_text_margin_top" style="width: 80px;">
                                    <span>px</span>
                                </div>
                                <p style="color: #999; font-size: 12px; margin-top: 10px;">
                                    ※ 생성된 텍스트를 더블클릭하면 문구와 서식을 상세 설정할 수 있습니다.
                                </p>
                            </div>

<div style="max-width: 250px;">
                                        <div class="text-center" style="margin-bottom: 5px;">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_top" style="width: 60px; display: inline-block;">
                                        </div>
                                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_left" style="width: 60px; margin-right: 10px;">
                                            <div style="width: 60px; height: 30px; background: #f5f5f5; border: 1px solid #ddd;"></div>
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_right" style="width: 60px; margin-left: 10px;">
                                        </div>
                                        <div class="text-center">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_bottom" style="width: 60px; display: inline-block;">
                                        </div>
                                    </div>
                                </div>

<p style="color: #999; font-size: 12px; margin-top: 15px;">
                                    ※ 생성된 텍스트를 더블클릭하면 문구와 서식을 상세 설정할 수 있습니다.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#clickSection">
                <div>
                    <img src="/file/icon/mouse_click.svg" style="height: 23px">
                    <span class="jd-effect-text">마우스 클릭 동작</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_mouse_click}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_mouse_click}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="clickSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_mouse_click == '동작없음'}" @click="row.option_mouse_click = '동작없음'">
                                <img src="/file/icon/동작없음.svg">
                                <span>동작없음</span>
                            </div>

<div class="col-md-6" style="display : flex;">
                            <div style="flex: 1; text-align: center; align-content: center;">
                                <template v-if="row.option_mouse_click == '동작없음'">
                                    <span style="font-size: large; color : #959595; ">마우스 클릭 동작을 선택하지 않았습니다.</span>
                                </template>

<template v-if="row.option_mouse_click_url_type == '페이지'">
                                            <template v-if="menus.length == 0">데이터를 불러들이는 중입니다.</template>

<template v-else>
                                                <select class="form-control" style="flex : 8;" v-model="row.option_mouse_click_url">
                                                    <option value="">선택해주세요.</option>
                                                    <template v-for="item in menus">
                                                        <option :value="item.url">{{item.name}}</option>
                                                    </template>
                                                </select>
                                            </template>
                                        </template>
                                    </div>

<template v-if="row.option_mouse_click == '크게 보기'">
                                    <img src="/file/icon/전구.svg" style="width: 22px; margin-right: 3px; margin-bottom: 9px;">
                                    <span style="font-size: large; color : #959595; ">이미지 클릭 시 확대된 이미지 창이 노출됩니다.</span>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#scrollSection">
                <div>
                    <img src="/file/icon/scroll.svg" style="height: 23px">
                    <span class="jd-effect-text">스크롤 애니메이션</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_scroll}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_scroll}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="scrollSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_scroll == '효과없음'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '효과없음'">
                                <img src="/file/icon/효과없음.svg">
                                <span>효과없음</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '페이드'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '페이드'">
                                <img src="/file/icon/페이드.svg">
                                <span>페이드</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '줌인'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '줌인'">
                                <img src="/file/icon/줌인.svg">
                                <span>줌인</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '줌아웃'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '줌아웃'">
                                <img src="/file/icon/줌아웃.svg">
                                <span>줌아웃</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '플립'}" @click=" row.option_scroll_direction = 'up'; row.option_scroll = '플립'">
                                <img src="/file/icon/플립.svg">
                                <span>플립</span>
                            </div>
                        </div>

<div class="col-md-6" style="display : flex;">
                            <template v-if="row.option_scroll == '효과없음'">
                                <div style="flex: 1; text-align: center; align-content: center;">
                                    <span style="font-size: large; color : #959595; ">스크롤 애니메이션을 선택하지 않았습니다.</span>
                                </div>
                            </template>

</div>
                            </template>

</div>
                    </div>
                </div>
            </div>
        </div>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#hoverSection">
                <div>
                    <img src="/file/icon/mouse_over.svg" style="height: 23px">
                    <span class="jd-effect-text">마우스 오버 애니메이션</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_mouse_over}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_mouse_over}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="hoverSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_mouse_over == '효과없음'}" @click="row.option_mouse_over = '효과없음'">
                                <img src="/file/icon/효과없음.svg">
                                <span>효과없음</span>
                            </div>

<div class="col-md-6" style="display : flex; align-items: center;">
                            <template v-if="row.option_mouse_over == '효과없음'">
                                <div style="flex: 1; text-align: center; align-content: center;">
                                    <span style="font-size: large; color : #959595; ">마우스오버 애니메이션을 선택하지 않았습니다.</span>
                                </div>
                            </template>

</div>
                            </template>

<template v-else>
                                                <button type="button" class="jd-white-btn" @click="$refs.fileInput2.click()">직접 업로드</button>
                                                <button type="button" class="jd-white-btn" @click="widget_type = 'image_hover'; $openModal(modal,{row});">무료 이미지</button>
                                                <button type="button" class="jd-white-btn" @click="widget_type = 'image_hover'; $openModal(modal2,{row})">이미지 보관함</button>
                                                <input class="hidden" ref="fileInput2" type="file" @change="vue.changeFile($event,row,'hover_file',{'callback' : changeEvent2});">
                                            </template>
                                        </div>
                                    </div>
                                    <div style="margin-top: 8px; font-size: 12px; color: #666;">
                                        ※ 애니메이션 이미지는 대상 이미지의 크기에 자동으로 맞춰집니다.
                                    </div>

<div>
                                        <div style="margin-bottom: 8px; font-weight: 600; font-size: 14px;">전환 애니메이션</div>
                                        <select class="form-control" style="font-size: 13px;" v-model="row.option_mouse_over_image_animation">
                                            <option value="">없음</option>
                                            <option value="페이드">페이드</option>
                                            <option value="슬라이드">슬라이드</option>
                                            <option value="플립">플립</option>
                                        </select>
                                    </div>
                                </div>
                            </template>

<div style="display:flex; align-items: center; gap: 10px;">
                                        <span style="margin: 0; font-weight: 600; font-size: 14px;">전환 애니메이션</span>
                                        <select class="form-control input-sm" style="width: 80px; display: inline-block; flex : 1" v-model="row.option_mouse_over_text_animation">
                                            <option value="">없음</option>
                                            <option value="페이드">페이드</option>
                                            <option value="슬라이드">슬라이드</option>
                                            <option value="플립">플립</option>
                                        </select>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<design-widget-image-free-modal v-model="modal" @update:modelValue="value => $emit('update:modelValue', value)" :widget_type></design-widget-image-free-modal>
        <design-widget-image-storage-modal v-model="modal2" @update:modelValue="value => $emit('update:modelValue', value)" :widget_type></design-widget-image-storage-modal>
    </div>

modal : this.lib.createModalObject(),
                    modal2 : this.lib.createModalObject(),

sessions : {},

table : null,
                    widget_type : "image",
                    row: {
                        widget_code : this.widget_code,
                        user_idx : "",
                        upload_file : null,
                        file_src : "",
                        box_shadow_use : false,
                        box_shadow_opacity : "20",
                        filter_use : false,
                        filter_brightness : "50",
                        border_radius_use : false,
                        border_radius_px : "6",
                        circle_use : false,
                        border_use : false,
                        border_width : "1",
                        border_color : "#000000",
                        height : "400",
                        width : "0",
                        image_attribute : "full",
                        padding_top : "0",
                        padding_right : "0",
                        padding_bottom : "0",
                        padding_left : "0",

option_text : "사용안함",
                        option_text_content : "더블 클릭하여 텍스트를 수정해주세요.",
                        option_text_position : "middle-center",
                        option_text_background : "transparent",
                        option_text_margin_top : "0",
                        option_text_margin_right : "0",
                        option_text_margin_bottom : "0",
                        option_text_margin_left : "0",

option_mouse_click : "동작없음",
                        option_mouse_click_url_type : "URL",
                        option_mouse_click_url : "",
                        option_mouse_click_target : "_self",

option_scroll : "효과없음",
                        option_scroll_direction : "center",
                        option_scroll_duration : "1000",
                        option_scroll_delay : "0",

// 페이드~ 플립
                        option_mouse_over : "효과없음",
                        option_mouse_over_direction : "center",
                        option_mouse_over_duration : "1000",
                        option_mouse_over_delay : "0",
                        //테두리
                        option_mouse_over_border_color : "#000000",
                        option_mouse_over_border_width : "1",
                        //그림자
                        option_mouse_over_box_shadow_opacity : "20",
                        //색 오버레이
                        option_mouse_over_background_color : "#ffffff00",
                        option_mouse_over_overlay_opacity: 50,
                        //이미지 전환
                        hover_file : null,
                        option_mouse_over_image_name : "",
                        option_mouse_over_image_src : "",
                        option_mouse_over_image_animation : "",
                        //텍스트
                        option_mouse_over_text_color : "#ffffff",
                        option_mouse_over_text_background : "#0000008c",
                        option_mouse_over_font_size : "14",
                        option_mouse_over_text_position : "middle-center",
                        option_mouse_over_text : "",
                        option_mouse_over_text_animation : "",
                    },
                    rows : [],
                    menus : [],
                    menu_load : false,

editor : false,
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                if(!this.site_code) {
                    await this.lib.alert("잘못된 접근입니다.")
                    window.history.back();
                    return false;
                }
                this.sessions = await this.session.all();
                this.table = await this.api.table("jd_widget_image");
                this.table.where('widget_code',this.widget_code);
                let row = await this.table.get();
                if(row.length > 0) this.row = row[0];

this.row.user_idx = this.sessions.mem_idx;
                // await this.table.get(this.rows,{paging : 10})

this.load = true;

this.$nextTick(async () => {
                    // 해당부분에 퍼블리싱 라이브러리,플러그인 선언부분 하시면 됩니다 ex) swiper
                    //해당부분은 시간이 좀 걸리길래 비동기로 변경
                    this.api.table("menu").where("site_code",this.site_code).get(this.menus);
                });
            },
            updated() {
            },
            methods: {
                summernoteColorEvent(color) {
                    this.row.option_text_background = color;
                },
                summernoteCustomEvent() {
                    this.editor = false;
                },
                async dataPost() {
                    window.design.loadingOn()
                    if(this.row.upload_file) {
                        let res = await this.lib.ajax("file_save",{
                            "user_idx" : this.row.user_idx,
                            "upload_file" : this.row.upload_file,
                            "width" : this.row.file_width,
                            "height" : this.row.file_height,
                            "memo" : "jd_widget_image",
                            "widget_code" : this.row.widget_code,
                            "site_code" : this.site_code,
                        })

let file = res['file'];

this.row.upload_file = null;
                        this.row.file_src = file.src;
                    }

if(this.row.hover_file) {
                        let res = await this.lib.ajax("file_save",{
                            "user_idx" : this.row.user_idx,
                            "hover_file" : this.row.hover_file,
                            "memo" : "jd_widget_image_hover"
                        })

let file = res['file'];

this.row.hover_file = null;
                        this.row.option_mouse_over_image_name = file.name;
                        this.row.option_mouse_over_image_src = file.src;
                    }

await this.table.post(this.row,{return : true});
                    window.design.loadingOff()

window.JAYDREAM_VUE_GLOBAL[this.widget_code].reload = true;

$(this.$el).closest('.modal').modal('hide');
                },
                changeEvent() {
                    this.row.width = this.row.upload_file.width;

this.row.file_width = this.row.upload_file.width;
                    this.row.file_height = this.row.upload_file.height;
                },
                changeEvent2() {
                    // this.row.option_mouse_over_image_name = this.hover_file.name;
                },
                getTextStyle() {
                    let style = {};

// style.padding = "10px";
                    style.fontSize = "16px";
                    style.background = this.row.option_text_background;
                    // style.width = this.row.width + "px";
                    style.maxWidth = "415px";

style.marginTop = this.row.option_text_margin_top + "px";
                    style.marginRight = this.row.option_text_margin_right + "px";
                    style.marginBottom = this.row.option_text_margin_bottom + "px";
                    style.marginLeft = this.row.option_text_margin_left + "px";

if(this.row.option_text == "이미지 겹침") {
                        style.position = 'absolute';

// position에 따른 스타일 적용
                        const position = this.row.option_text_position;

if(position === 'top-left') {
                            style.top = '0';
                            style.left = '0';
                        } else if(position === 'top-center') {
                            style.top = '0';
                            style.left = '50%';
                            style.transform = 'translateX(-50%)';
                        } else if(position === 'top-right') {
                            style.top = '0';
                            style.right = '0';
                        } else if(position === 'middle-left') {
                            style.top = '50%';
                            style.left = '0';
                            style.transform = 'translateY(-50%)';
                        } else if(position === 'middle-center') {
                            style.top = '50%';
                            style.left = '50%';
                            style.transform = 'translate(-50%, -50%)';
                        } else if(position === 'middle-right') {
                            style.top = '50%';
                            style.right = '0';
                            style.transform = 'translateY(-50%)';
                        } else if(position === 'bottom-left') {
                            style.bottom = '0';
                            style.left = '0';
                        } else if(position === 'bottom-center') {
                            style.bottom = '0';
                            style.left = '50%';
                            style.transform = 'translateX(-50%)';
                        } else if(position === 'bottom-right') {
                            style.bottom = '0';
                            style.right = '0';
                        }
                    }

return style;
                },
                getStyle() {
                    let style = {};

// 그림자
                    if(this.row.box_shadow_use) {
                        style.boxShadow = `0px 4px 8px rgba(0, 0, 0, ${this.row.box_shadow_opacity / 100})`;
                    }

// 이미지 어둡게
                    if (this.row.filter_use) {
                        const brightness = 100 - this.row.filter_brightness;
                        style.filter = `brightness(${brightness}%)`;
                    }

// 모서리 둥글게
                    if (this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

// 원형 이미지
                    if (this.row.circle_use) {
                        style.borderRadius = '50%';
                        style.aspectRatio = '1 / 1';  // 정사각형 비율
                        style.objectFit = 'cover';     // 이미지 가운데 중심으로 채움
                    }

// 테두리
                    if (this.row.border_use) {
                        style.border = `${this.row.border_width}px solid ${this.row.border_color}`;
                    }

// 여백설정
                    if (this.row.padding_top) {
                        style.paddingTop = `${this.row.padding_top}px`;
                    }
                    if (this.row.padding_right) {
                        style.paddingRight = `${this.row.padding_right}px`;
                    }
                    if (this.row.padding_bottom) {
                        style.paddingBottom = `${this.row.padding_bottom}px`;
                    }
                    if (this.row.padding_left) {
                        style.paddingLeft = `${this.row.padding_left}px`;
                    }

return style;
                },
            },
            computed: {

},
            watch: {
                async "row.image_attribute"(value, old_value) {
                    if(value == "full") this.row.circle_use = false;
                },

async "row.border_radius_use"(value, old_value) {
                    if(value) this.row.circle_use = false;
                },

async "row.circle_use"(value, old_value) {
                    if(value) this.row.border_radius_use = false;
                }
            }
        }});
</script>

.jd-image-modal-content-text {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 0;
        font-size: 14px;
    }

.number-input-wrapper {
        position: relative;
        width: 80px;
    }

.number-input-wrapper input {
        width: 100%;
        padding-left: 24px;   /* 왼쪽 아이콘 공간 */
        padding-right: 24px;  /* 오른쪽 스테퍼 공간 */
        text-align: center;
        font-size: 14px;
    }

.input-icon-left {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

.number-stepper {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

.number-stepper button {
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 10px;
    }

.number-stepper button:hover svg path {
        fill: #333;
    }

.number-stepper button:active svg path {
        fill: #999;
    }

.number-stepper svg {
        display: block;
    }

.panel-default > .panel-heading {
        background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%) !important;
    }
</style><script type="text/x-template" id="design-widget-image-storage-modal-template">
    <div v-if="load">
        <external-bs-modal v-model="modelValue" @update:modelValue="value => $emit('update:modelValue', value)">
            <template v-slot:header>
                <h5 class="modal-title" id="exampleModalLabel">이미지 보관함</h5>
            </template>

<template v-slot:default>
                <div>
                    <div v-if="loading">이미지 불러오는중...</div>
                    <template v-else>
                        <div v-if="rows.length == 0">이미지가 없습니다.</div>
                        <div v-else>
                            <div class="image-grid-flex">
                                <template v-for="item,index in rows">
                                    <div v-if="index >= (page - 1) * limit && index < page * limit" class="image-item" @click="choiceImage(item)" :class="activeImage(item)">
                                        <img :src="item.src">
                                        <button class="image-delete-btn" @click.stop="deleteImage(item)">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>

</div>
            </template>

temp : {
                        $table : "",
                    },
                    row: {},
                    rows : [],

limit : 9,
                    page : 1,

select_item : null,
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
            },
            async mounted() {
                this.table = await this.api.table("jd_file");

this.load = true;

},
            methods: {
                async deleteImage(item) {
                    if(!await this.lib.confirm("삭제시 연결된 이미지가 있을경우 엑박이 뜹니다 삭제 하시겠습니까?")) return false;

await this.api.table("jd_file").delete(item,{return : true});

await this.getImages();
                },
                async getImages() {
                    this.loading = true;

await this.table.where("user_idx",this.modelValue.row.user_idx).get(this.rows);

this.loading = false;

},
                saveImage() {
                    if(this.widget_type === "image") {
                        this.modelValue.row.file_src = this.select_item.src;
                        this.modelValue.row.file_width = this.select_item.width;
                        this.modelValue.row.file_height = this.select_item.height;

// height는 기획자가 고정 400으로 원함
                        this.modelValue.row.width = this.select_item.width;
                    }else if(this.widget_type === "image_hover") {
                        this.modelValue.row.option_mouse_over_image_src = this.select_item.src;
                        this.modelValue.row.option_mouse_over_image_name = this.select_item.name;
                    }

this.$closeModal(this.modelValue);

},
                activeImage(item) {
                    if(this.widget_type === "image" || this.widget_type === "image_hover") {
                        if(item.src === this.select_item?.src) return "active";
                    }

return false;
                },
                choiceImage(item) {
                    if(this.widget_type === "image" ||  this.widget_type === "image_hover") {
                        this.select_item = item;
                    }
                },
            },
            computed: {
                totalPage() {
                    return this.rows.length % this.limit === 0 ? this.rows.length / this.limit : Math.floor(this.rows.length / this.limit) + 1;
                }
            },
            watch: {
                async "modelValue.status"(value, old_value) {
                    const $modal = $("#widget_setting_jd");

if(!value) {
                        this.file_idx = "";
                        this.rows = [];

$modal.data('bs.modal').options.backdrop = true;
                        $modal.data('bs.modal').options.keyboard = true;

return false;
                    }

$modal.data('bs.modal').options.backdrop = 'static';
                    $modal.data('bs.modal').options.keyboard = false;

await this.getImages();
                }
            }
        }});
</script>

.image-item {
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #ddd;
        transition: all 0.2s;
        aspect-ratio: 1 / 1; /* 정사각형 비율 */
        position: relative; /* 삭제 버튼 위치를 위해 추가 */
    }

.image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지를 정사각형에 꽉 차게 */
        display: block;
        transition: all 0.2s;
    }

.image-item:hover {
        border-color: #337ab7;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transform: scale(1.05);
    }

.image-item.active {
        outline: 3px solid red;
        outline-offset: -3px;
    }

/* 삭제 버튼 스타일 */
    .image-delete-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 28px;
        height: 28px;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: all 0.2s;
        padding: 0;
    }

.image-delete-btn svg {
        color: #dc3545;
    }

.image-item:hover .image-delete-btn {
        opacity: 1;
    }

.image-delete-btn:hover {
        background-color: #dc3545;
        border-color: #dc3545;
    }

.image-delete-btn:hover svg {
        color: white;
    }
</style><script type="text/x-template" id="design-widget-image-template">
    <div v-if="load">
        <template v-if="row.idx">
            <div style="text-align: center;" ref="imageElement" @mouseenter="hoverEvent(); parent_div_hover = true;" @mouseleave="leaveEvent(); parent_div_hover = false;">
                <div style="position: relative; display: inline-block" :style="getDivStyle()" @mouseenter="hover = true;" @mouseleave="hover = false;">
                    <img :src="getSrc()" class="jd-image" :style="getStyle()"
                         @click="getClick()" @load="onImageLoad">

<div v-if="row.option_mouse_over == '색 오버레이' && hover"
                         :style="getOverlayStyle()"
                         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;">
                    </div>

<template v-if="row.option_mouse_over == '텍스트' && hover">
                        <div :style="getHoverTextPositionStyle()">
                            <div :style="getHoverTextAnimationStyle()">
                                {{row.option_mouse_over_text}}
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>

<template v-else>
            <div class="jd-imageupload-box">
                <i class="fal fa-image jd-imageupload-icon"></i>
                <p class="jd-imageupload-text">더블 클릭하여 이미지를 첨부하세요.</p>
            </div>
        </template>

</div>

observer: null,
                    scrollEvent : true,

table : null,
                    row: {},
                    rows : [],

hover : false,
                    parent_div_hover : false,

renderedWidth: null,

modal: {
                        id : "", // modal의 id값을 설정합니다 빈값이라면 고유값을 랜덤으로 생성해 지정합니다
                        class_1: "", // modal fade 부분에 클래스를 추가합니다 ex) "one_class two_class"
                        class_2: "", // modal-dialog 부분에 클래스를 추가합니다
                        status: false,
                        table : "",
                        primary : "",
                        row : null,
                    },

viewImage : "",
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                this.table = await this.api.table("jd_widget_image");
                this.table.where('widget_code',this.widget_code);
                let row = await this.table.get();
                if(row.length > 0) this.row = row[0];

this.load = true;

this.$nextTick(async () => {
                    if(!this.row.file_src) $('.firewall').addClass('widget_setting_btn');

this.initScrollObserver();

if(window.design) {
                        window.design.menu.grid.reset();
                    }
                });
            },
            updated() {

},
            methods: {
                onImageLoad(event) {
                    if(this.row.image_attribute == 'original' && !this.renderedWidth) {
                        this.renderedWidth = event.target.offsetWidth;
                    }
                },
                getSrc() {
                    if(this.row.option_mouse_over == '이미지 전환' && this.hover) {
                        return this.row.option_mouse_over_image_src;
                    }

return this.row.file_src
                },
                leaveEvent() {
                    if(['페이드','줌인','줌아웃','플립'].includes(this.row.option_mouse_over)) {
                        this.scrollEvent = false;
                    }
                },
                hoverEvent() {
                    if(['페이드','줌인','줌아웃','플립'].includes(this.row.option_mouse_over)) {
                        this.scrollEvent = true;
                    }
                },
                getHoverTextPositionStyle() {
                    let style = {};
                    style.position = 'absolute';
                    style.color = this.row.option_mouse_over_text_color;
                    style.background = this.row.option_mouse_over_text_background;
                    style.fontSize = `${this.row.option_mouse_over_font_size}px`;

const position = this.row.option_mouse_over_text_position;

if(position === 'top-left') {
                        style.top = '0';
                        style.left = '0';
                    } else if(position === 'top-center') {
                        style.top = '0';
                        style.left = '50%';
                        style.transform = 'translateX(-50%)';
                    } else if(position === 'top-right') {
                        style.top = '0';
                        style.right = '0';
                    } else if(position === 'middle-left') {
                        style.top = '50%';
                        style.left = '0';
                        style.transform = 'translateY(-50%)';
                    } else if(position === 'middle-center') {
                        style.top = '50%';
                        style.left = '50%';
                        style.transform = 'translate(-50%, -50%)';
                    } else if(position === 'middle-right') {
                        style.top = '50%';
                        style.right = '0';
                        style.transform = 'translateY(-50%)';
                    } else if(position === 'bottom-left') {
                        style.bottom = '0';
                        style.left = '0';
                    } else if(position === 'bottom-center') {
                        style.bottom = '0';
                        style.left = '50%';
                        style.transform = 'translateX(-50%)';
                    } else if(position === 'bottom-right') {
                        style.bottom = '0';
                        style.right = '0';
                    }

return style;
                },

getHoverTextAnimationStyle() {
                    let style = {};

if(this.row.option_mouse_over_text_animation) {
                        const animation = this.row.option_mouse_over_text_animation;
                        const duration = 500;

if(animation === '페이드') {
                            style.animation = `hover-text-fade ${duration}ms ease both`;
                        } else if(animation === '슬라이드') {
                            style.animation = `hover-text-slide ${duration}ms ease both`;
                        } else if(animation === '플립') {
                            style.animation = `hover-text-flip ${duration}ms ease both`;
                        }
                    }

return style;
                },
                getOverlayStyle() {
                    const color = this.row.option_mouse_over_background_color;
                    const opacity = this.row.option_mouse_over_overlay_opacity / 100;

const r = parseInt(color.slice(1, 3), 16);
                    const g = parseInt(color.slice(3, 5), 16);
                    const b = parseInt(color.slice(5, 7), 16);

return {
                        backgroundColor: `rgba(${r}, ${g}, ${b}, ${opacity})`
                    };
                },
                hoverStyle(style) {
                    if(!this.hover) return false;
                    if(this.row.option_mouse_over == '테두리') {
                        style.outline = `${this.row.option_mouse_over_border_width}px solid ${this.row.option_mouse_over_border_color}`;
                        style.outlineOffset = `-${this.row.option_mouse_over_border_width}px`;
                    }

if(this.row.option_mouse_over == '그림자') {
                        style.boxShadow = `0px 4px 8px rgba(0, 0, 0, ${this.row.option_mouse_over_box_shadow_opacity / 100})`;
                    }

return style;
                },
                initScrollObserver() {
                    let component = this;
                    let time = parseInt(this.row.option_scroll_delay) + parseInt(this.row.option_scroll_duration);
                    this.observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                this.scrollEvent = true;
                                setTimeout(() => {
                                    component.scrollEvent = false;
                                }, time);
                            } else if (!entry.isIntersecting) {
                                this.scrollEvent = false;
                            }
                        });
                    }, {
                        threshold: 0.1  // 이미지의 10%가 보이면 트리거
                    });

if(this.$refs.imageElement) {
                        this.observer.observe(this.$refs.imageElement);
                    }
                },
                async getClick() {
                    if(this.row.option_mouse_click == '링크 이동') {
                        this.lib.href(this.row.option_mouse_click_url,this.row.option_mouse_click_target);
                    }

if(this.row.option_mouse_click == '크게 보기') {
                        this.viewImage = this.row.file_src;
                    }

return false;
                },
                getTextStyle() {
                    let style = {};

// style.padding = "10px";
                    style.fontSize = "16px";
                    style.background = this.row.option_text_background;
                    // style.width = this.row.width + "px";
                    style.maxWidth = "100%";

if(this.row.option_text == "이미지 겹침") {
                        style.position = 'absolute';

// position에 따른 스타일 적용
                        const position = this.row.option_text_position;

return style;
                },
                getDivStyle() {
                    let style = {};

if(this.row.option_mouse_click != "동작없음") {
                        style.cursor = 'pointer';
                    }

if(this.row.image_attribute == 'full') {
                        style.display = "block";
                    }

if(this.row.option_scroll !== '효과없음' && this.scrollEvent) {
                        const effect = this.row.option_scroll;
                        const direction = this.row.option_scroll_direction || 'up';
                        const duration = parseInt(this.row.option_scroll_duration) || 300;  // 숫자로 변환
                        const delay = parseInt(this.row.option_scroll_delay) || 0;          // 숫자로 변환

const animationName = effect === '페이드' ? 'fade' :
                            effect === '줌인' ? 'zoom-in' :
                                effect === '줌아웃' ? 'zoom-out' :
                                    effect === '플립' ? 'flip' : 'fade';

style.animation = `${animationName}-${direction} ${duration}ms ease ${delay}ms both`;
                    }

if(['페이드','줌인','줌아웃','플립'].includes(this.row.option_mouse_over) && this.scrollEvent && this.parent_div_hover) {
                        const effect = this.row.option_mouse_over;
                        const direction = this.row.option_mouse_over_direction || 'up';
                        const duration = parseInt(this.row.option_mouse_over_duration) || 300;  // 숫자로 변환
                        const delay = parseInt(this.row.option_mouse_over_delay) || 0;          // 숫자로 변환

style.animation = `${animationName}-${direction} ${duration}ms ease ${delay}ms both`;
                    }

this.hoverStyle(style);

return style;
                },
                getStyle() {
                    let style = {};

// 그림자
                    if(this.row.box_shadow_use) {
                        style.boxShadow = `0px 4px 8px rgba(0, 0, 0, ${this.row.box_shadow_opacity / 100})`;
                    }

// 모서리 둥글게
                    if (this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

// 테두리
                    if (this.row.border_use) {
                        style.border = `${this.row.border_width}px solid ${this.row.border_color}`;
                    }

//이미지 사이즈
                    if(this.row.image_attribute == 'full') {
                        style.height = `${this.row.height}px`;
                        style.width = '100%';
                        style.objectFit = 'cover';
                    }
                    if(this.row.image_attribute == 'original') {
                        style.height = `${this.row.height}px`;
                        if (!this.row.circle_use) style.objectFit = 'contain';

}
                    if(this.row.image_attribute == 'self') {
                        style.height = `${this.row.height}px`;
                        if (!this.row.circle_use) style.width = `${this.row.width}px`;
                        style.objectFit = 'cover';
                    }

if(this.row.option_mouse_over == '이미지 전환' && this.hover) {

if(this.row.image_attribute == 'original') style.width = `${this.renderedWidth}px`;
                        if(this.row.image_attribute == 'full') style.width = "100%";
                        if(this.row.image_attribute == 'self') style.width = `${this.row.width}px`;
                        style.objectFit = 'cover';
                        style.height = `${this.row.height}px`;
                        let animation = this.row.option_mouse_over_image_animation;
                        let duration = 500;
                        if(animation === '페이드') {
                            style.animation = `hover-text-fade ${duration}ms ease both`;
                        } else if(animation === '슬라이드') {
                            style.animation = `hover-text-slide ${duration}ms ease both`;
                        } else if(animation === '플립') {
                            style.animation = `hover-text-flip ${duration}ms ease both`;
                        }
                    }

return style;
                },
            },
            computed: {
                appState() {
                    return window.JAYDREAM_VUE_GLOBAL[this.$app_name];
                }
            },
            watch: {
                appState: {
                    async handler(newVal) {
                        if(newVal.reload) {
                            let row = await this.table.get();
                            if(row.length > 0) this.row = row[0];
                            this.appState.reload = false;
                        }
                    },
                    deep: true
                }
            }
        }});
</script>

/* 키프레임들 */
    @keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fade-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fade-left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes fade-right { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes fade-center { from { opacity: 0; } to { opacity: 1; } }

@keyframes zoom-in-up { from { opacity: 0; transform: scale(0.8) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-in-down { from { opacity: 0; transform: scale(0.8) translateY(-30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-in-left { from { opacity: 0; transform: scale(0.8) translateX(30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-in-right { from { opacity: 0; transform: scale(0.8) translateX(-30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-in-center { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

@keyframes zoom-out-up { from { opacity: 0; transform: scale(1.2) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-out-down { from { opacity: 0; transform: scale(1.2) translateY(-30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-out-left { from { opacity: 0; transform: scale(1.2) translateX(30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-out-right { from { opacity: 0; transform: scale(1.2) translateX(-30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-out-center { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }

@keyframes flip-up { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
    @keyframes flip-down { from { opacity: 0; transform: perspective(400px) rotateX(-90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
    @keyframes flip-left { from { opacity: 0; transform: perspective(400px) rotateY(90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }
    @keyframes flip-right { from { opacity: 0; transform: perspective(400px) rotateY(-90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }

/* 호버 텍스트 애니메이션 */
    @keyframes hover-text-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

@keyframes hover-text-slide {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

@keyframes hover-text-flip {
        from {
            opacity: 0;
            transform: perspective(400px) rotateX(90deg);
        }
        to {
            opacity: 1;
            transform: perspective(400px) rotateX(0);
        }
    }

/* 이미지 오버레이 */
    .widget-image-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 910000;
        cursor: pointer;
    }

.widget-image-overlay img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        cursor: default;
    }

.widget-overlay-close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 40px;
        color: white;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        line-height: 1;
    }

.widget-overlay-close:hover {
        color: #ccc;
    }
</style><script type="text/x-template" id="design-widget-map-google-template">
    <div v-if="load">
        <div v-html="modelValue.google_iframe"></div>
    </div>

table : null,
                    row: {},
                    rows : [],
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                // this.table = await this.api.table("exam");
                // await this.table.get(this.rows,{paging : 10})

this.load = true;

},
            methods: {

},
            computed: {

},
            watch: {

}
        }});
</script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material-darker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
<script type="text/x-template" id="design-widget-map-modal-google-template">
    <div v-if="load">
        <div class="design-widget-map-modal-google-guide-container">
            <div class="design-widget-map-modal-google-guide-header">
                <h4 class="design-widget-map-modal-google-guide-title">
                    <span class="design-widget-map-modal-google-guide-icon">ⓘ</span>
                    구글 지도 삽입 방법
                </h4>
            </div>

<div class="design-widget-map-modal-google-note">
                ※ 지도의 크기를 조정하시려면, 퍼온 링크 내에서 width(너비), height(높이) 픽셀값을 각각 수정해 주세요.(*채우기: width=”100%” 입력)
            </div>
        </div>