운영 기능 및 GA4 대시보드 반영
This commit is contained in:
박성필
@@ -3,3 +3,8 @@
|
||||
@media(max-width:480px){.admin-account .button{display:none}.admin-main{padding-top:28px}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric-grid a{padding:18px}.login-panel{margin:26px 0;padding:24px}}
|
||||
.admin-form{max-width:780px;padding:28px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}.admin-form label{display:block;margin-bottom:17px;color:var(--secondary);font-size:13px;font-weight:700}.admin-form label>span{color:#dc2626}.admin-form input,.admin-form select,.admin-form textarea{width:100%;margin-top:7px;padding:10px 12px;border:1px solid #d4d4d8;border-radius:9px;background:#fff}.admin-form input,.admin-form select{height:44px}.admin-form textarea{resize:vertical;line-height:1.6}.admin-form label small{display:block;margin-top:5px;color:var(--muted);font-weight:400}.admin-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-form-actions{display:flex;gap:10px;margin-top:24px}.danger-zone{max-width:780px;margin-top:24px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #fecaca;border-radius:var(--radius);background:#fff}.danger-zone strong{color:#991b1b}.danger-zone p{margin:4px 0 0;color:var(--muted);font-size:13px}.danger-zone button{padding:9px 14px;border:1px solid #fecaca;border-radius:8px;background:#fff;color:#b91c1c;cursor:pointer}.inquiry-heading{margin-top:22px}.inquiry-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}.inquiry-content{padding:26px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}.contact-summary{padding:16px;background:#f8fafc;border-radius:9px}.contact-summary>span{float:right;color:var(--primary);font-size:12px;font-weight:800}.contact-summary p{margin:0;line-height:1.8}.inquiry-content h2{margin-top:25px;font-size:17px}.inquiry-content>p{line-height:1.85}.reply-form{padding:26px}.reply-form h2{margin:0 0 20px}
|
||||
@media(max-width:760px){.admin-field-grid,.inquiry-detail-grid{grid-template-columns:1fr}.danger-zone{align-items:stretch;flex-direction:column}.danger-zone button{width:100%}}
|
||||
.admin-experiment-notice{max-width:780px;margin:0 0 18px;padding:14px 16px;display:grid;gap:3px;border:1px solid #fde68a;border-radius:10px;background:#fffbeb;color:#92400e;font-size:13px}.admin-experiment-notice strong{font-size:14px}.admin-upload-field>p:first-of-type{margin-top:0}.admin-media-list{display:grid;gap:12px;margin-bottom:18px}.admin-media-item{display:grid;grid-template-columns:160px 1fr;gap:14px;padding:12px;border:1px solid var(--border);border-radius:9px;background:#f8fafc}.admin-media-item>img{width:160px;height:100px}.admin-media-item>div{min-width:0;display:flex;align-items:flex-start;flex-direction:column;gap:8px}.admin-media-item label{width:100%;margin:0}.admin-media-item code{padding:4px 7px;border-radius:5px;background:#e2e8f0;color:#334155;font-size:12px}.admin-media-delete{display:flex!important;align-items:center;gap:7px}.admin-media-delete input{width:16px!important;height:16px!important;margin:0!important}.admin-media-item.is-delete{opacity:.5}.admin-new-media-list{display:grid;gap:10px}.admin-new-media-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:12px;border:1px solid #bfdbfe;border-radius:9px;background:#eff6ff}.admin-new-media-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.admin-new-media-item label{grid-column:1/-1;margin:0}.admin-form code{font-size:12px}@media(max-width:600px){.admin-media-item{grid-template-columns:1fr}.admin-media-item>img{width:100%;height:auto}.admin-new-media-item{grid-template-columns:1fr}.admin-new-media-item .button{width:100%}}
|
||||
.admin-row-actions{display:flex;align-items:center;gap:12px;white-space:nowrap}
|
||||
.admin-block-editor{display:none;margin-bottom:20px}.admin-block-editor.is-ready{display:block}.admin-body-source.is-enhanced{display:none}.admin-block-editor>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.admin-block-editor>header h2{margin:0;font-size:17px}.admin-block-editor>header p{margin:5px 0 0;color:var(--muted);font-size:13px}.admin-block-editor>header>span{padding:5px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:800;white-space:nowrap}.admin-block-list{display:grid;gap:12px}.admin-content-block{padding:14px;border:1px solid #dbe2ea;border-radius:11px;background:#f8fafc}.admin-content-block>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.admin-content-block>header strong{color:#475569;font-size:12px}.admin-content-block-actions{display:flex;gap:5px}.admin-content-block-actions button{min-height:30px;padding:0 9px;border:1px solid #d4d4d8;border-radius:7px;background:#fff;color:#52525b;font-size:11px;cursor:pointer}.admin-content-block-actions button:hover{background:#f1f5f9}.admin-content-block-actions button:disabled{opacity:.4;cursor:not-allowed}.admin-content-block-actions .is-danger{border-color:#fecaca;color:#b91c1c}.admin-content-block-text textarea{min-height:112px;margin:0;overflow:hidden;background:#fff}.admin-content-block-image{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px}.admin-content-block-image>header{grid-column:1/-1;margin-bottom:0}.admin-content-block-image>img{width:220px;height:148px;object-fit:cover;border-radius:9px;background:#e2e8f0}.admin-content-image-fields{min-width:0;display:flex;align-items:stretch;justify-content:center;flex-direction:column}.admin-content-image-fields label{margin:0}.admin-content-insert-actions{grid-column:1/-1;display:flex;justify-content:center;gap:7px;padding-top:10px;border-top:1px dashed #cbd5e1}.admin-content-insert-actions button{padding:6px 9px;border:0;background:transparent;color:#2563eb;font-size:11px;font-weight:700;cursor:pointer}.admin-content-insert-actions button:hover{text-decoration:underline}.admin-hidden-file{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0!important}.admin-block-editor-actions{display:flex;gap:9px;margin-top:12px}.admin-block-help{margin:8px 0 0;color:var(--muted);font-size:12px}@media(max-width:600px){.admin-block-editor>header{flex-direction:column}.admin-content-block-image{grid-template-columns:1fr}.admin-content-block-image>img{width:100%;height:auto;aspect-ratio:16/10}.admin-content-block-actions button{padding:0 7px}.admin-block-editor-actions{display:grid;grid-template-columns:1fr 1fr}.admin-block-editor-actions .button{width:100%}}
|
||||
.admin-new-media-item>img{width:72px;height:52px;grid-row:1;object-fit:cover;border-radius:7px}.admin-new-media-item:has(>img){grid-template-columns:72px minmax(0,1fr)}.admin-new-media-item:has(>img)>label{grid-column:1/-1}.admin-live-preview{width:min(920px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 40px);padding:0;border:0;border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.28)}.admin-live-preview::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}.admin-live-preview-shell>header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid var(--border);background:#fff}.admin-live-preview-shell>header span{color:#2563eb;font-size:10px;font-weight:900;letter-spacing:.14em}.admin-live-preview-shell>header h2{margin:3px 0 0;font-size:20px}.admin-live-preview-shell>header p{margin:4px 0 0;color:var(--muted);font-size:12px}.admin-live-preview-shell>header button{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:#fff;color:#27272a;font-size:25px;line-height:1;cursor:pointer}.admin-live-preview-article{max-width:760px;margin:auto;padding:38px 32px 58px}.admin-live-preview-meta{display:grid;gap:8px;margin-bottom:24px}.admin-live-preview-meta>span{justify-self:start;padding:5px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:800}.admin-live-preview-meta>strong{font-size:30px;line-height:1.3}.admin-live-preview-meta>small{color:var(--muted)}.admin-live-preview-gallery{margin:0 0 28px}.admin-live-preview-gallery>[data-preview-gallery-main]{overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:#e2e8f0}.admin-live-preview-gallery>[data-preview-gallery-main] img{width:100%;height:100%;object-fit:cover}.admin-live-preview-gallery>[data-preview-gallery-thumbs]{display:flex;gap:7px;margin-top:9px;overflow:auto}.admin-live-preview-gallery>[data-preview-gallery-thumbs] button{flex:0 0 70px;height:48px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:7px;background:#e2e8f0;cursor:pointer}.admin-live-preview-gallery>[data-preview-gallery-thumbs] button.is-active{border-color:#2563eb}.admin-live-preview-gallery>[data-preview-gallery-thumbs] img{width:100%;height:100%;object-fit:cover}.admin-live-preview-gallery>p{margin:7px 0 0;color:var(--muted);font-size:11px}.admin-live-preview-body{display:grid;gap:22px}.admin-live-preview-body p{margin:0;color:#3f3f46;line-height:1.9;white-space:pre-line}.admin-live-preview-body p.is-empty{padding:30px;text-align:center;border:1px dashed #cbd5e1;border-radius:10px;color:var(--muted)}.admin-live-preview-body figure{margin:0}.admin-live-preview-body figure img{display:block;width:100%;height:auto;border-radius:12px}@media(max-width:600px){.admin-form-actions{flex-wrap:wrap}.admin-form-actions .button,.admin-form-actions a{flex:1 1 calc(50% - 6px);text-align:center}.admin-live-preview{width:100%;max-height:100%;height:100%;border-radius:0}.admin-live-preview-article{padding:28px 18px 44px}.admin-live-preview-meta>strong{font-size:24px}}
|
||||
.analytics-section{margin-top:44px}.analytics-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.analytics-heading>div>span{color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.12em}.analytics-heading h2{margin:5px 0 0;font-size:24px}.analytics-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.analytics-heading>small{color:var(--muted);font-size:11px;white-space:nowrap}.analytics-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.analytics-metrics article{padding:20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}.analytics-metrics span{display:block;color:var(--muted);font-size:12px}.analytics-metrics strong{display:block;margin:5px 0 1px;font-size:27px}.analytics-metrics small{color:#94a3b8;font-size:10px}.analytics-panel{margin-top:14px;padding:20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}.analytics-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.analytics-panel-heading h3{margin:0;font-size:15px}.analytics-panel-heading>span{color:var(--muted);font-size:10px}.analytics-panel-heading>span i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:2px;background:var(--primary)}.analytics-chart{height:210px;margin-top:24px;display:flex;align-items:end;gap:9px}.analytics-bar{height:100%;min-width:0;flex:1;display:grid;grid-template-rows:20px 1fr 20px;align-items:end;text-align:center}.analytics-bar>span{align-self:start;color:#64748b;font-size:9px}.analytics-bar>i{width:min(24px,70%);min-height:3px;margin:0 auto;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#3b82f6,#2563eb)}.analytics-bar>small{padding-top:5px;color:#94a3b8;font-size:9px;white-space:nowrap}.analytics-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.analytics-ranking{margin:14px 0 0;padding:0;list-style:none}.analytics-ranking li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--border)}.analytics-ranking li>div{min-width:0}.analytics-ranking strong,.analytics-ranking small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-ranking strong{font-size:12px}.analytics-ranking small{margin-top:3px;color:var(--muted);font-size:10px}.analytics-ranking b{color:#334155;font-size:12px;white-space:nowrap}.analytics-empty{margin:18px 0 0;color:var(--muted);font-size:12px}.analytics-unavailable{padding:22px;border:1px solid #fde68a;border-radius:var(--radius);background:#fffbeb;color:#92400e}.analytics-unavailable p{margin:5px 0 0;font-size:12px}@media(max-width:900px){.analytics-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.analytics-heading{align-items:flex-start;flex-direction:column;gap:8px}.analytics-detail-grid{grid-template-columns:1fr}.analytics-chart{gap:4px}.analytics-bar>span{display:none}}@media(max-width:520px){.analytics-metrics{grid-template-columns:1fr 1fr}.analytics-metrics article{padding:16px}.analytics-chart{height:170px}.analytics-bar>small{font-size:8px;transform:rotate(-45deg);transform-origin:center top}.analytics-chart-panel{overflow:hidden}}
|
||||
|
||||
@@ -65,3 +65,7 @@
|
||||
.naver-map-external{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;color:var(--primary);font-weight:700}
|
||||
.naver-map-frame[data-map-state=loading]+.naver-map-external,.naver-map-frame[data-map-state=ready]+.naver-map-external{display:none}
|
||||
@media(max-width:640px){.post-card:hover{transform:none}.email-template{grid-template-columns:minmax(0,1fr) auto minmax(116px,.85fr);gap:6px}.email-direct-row{grid-template-columns:1fr}.email-template-return{width:100%;margin-top:0}.floating-call{display:none}}
|
||||
.naver-map-frame{isolation:isolate}
|
||||
.preview-toolbar{position:sticky;top:88px;z-index:90;width:min(100% - 48px,820px);margin:24px auto -18px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;box-shadow:0 8px 20px rgba(15,23,42,.08)}.preview-toolbar div{display:grid;gap:2px}.preview-toolbar strong{color:#1d4ed8}.preview-toolbar span{color:var(--secondary);font-size:13px}@media(max-width:640px){.preview-toolbar{top:76px;width:min(100% - 32px,820px);align-items:stretch;flex-direction:column}.preview-toolbar .button{width:100%}}
|
||||
.naver-map-zoom{position:absolute;right:10px;top:58px;z-index:5;display:grid;overflow:hidden;border:1px solid rgba(15,23,42,.14);border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.14)}.naver-map-zoom[hidden]{display:none}.naver-map-zoom button{width:38px;height:38px;padding:0;border:0;background:#fff;color:#27272a;font-size:24px;line-height:1;cursor:pointer}.naver-map-zoom button+button{border-top:1px solid var(--border)}.naver-map-zoom button:hover{background:#f8fafc}.naver-map-zoom button:disabled{color:#a1a1aa;cursor:not-allowed}
|
||||
.article-gallery{position:relative;overflow:hidden;margin:0 0 30px;border-radius:var(--radius);background:#0f172a;box-shadow:var(--shadow)}.article-gallery-slides{position:relative;aspect-ratio:16/9}.article-gallery-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease}.article-gallery-slide.is-active{opacity:1;visibility:visible}.article-gallery-slide img{width:100%;height:100%;object-fit:cover}.article-gallery-controls{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px}.article-gallery-controls button{border:0;color:#fff;cursor:pointer}.article-gallery-controls>[data-article-prev],.article-gallery-controls>[data-article-next]{width:34px;height:34px;border-radius:50%;background:rgba(15,23,42,.72);font-size:26px;line-height:1}.article-gallery-dots{display:flex;align-items:center;gap:7px}.article-gallery-dots button{width:8px;height:8px;padding:0;border-radius:999px;background:rgba(255,255,255,.52)}.article-gallery-dots button.is-active{width:22px;background:#fff}.article-gallery-pause{min-height:34px;margin-left:auto;padding:0 11px;border-radius:999px;background:rgba(15,23,42,.72);font-size:11px;font-weight:700}.article-inline-image{margin:28px 0}.article-inline-image img{display:block;width:100%;height:auto;border-radius:12px}.article-body code{font-size:.9em}@media(prefers-reduced-motion:reduce){.article-gallery-slide{transition:none}}@media(max-width:600px){.article-gallery-pause{width:34px;overflow:hidden;padding:0;font-size:0}.article-gallery-pause::before{content:"Ⅱ";font-size:12px}.article-gallery-pause[aria-pressed=true]::before{content:"▶"}}
|
||||
|
||||
@@ -8,3 +8,5 @@
|
||||
.policy{width:min(100% - 48px,940px)}.policy-heading>span{color:var(--primary);font-size:13px;font-weight:800;letter-spacing:.09em}.policy-heading h1{margin:10px 0 0}.policy h2{margin-top:48px;font-size:22px}.policy h3{font-size:16px}.policy li{line-height:1.8;color:var(--secondary)}.policy a{color:var(--primary)}.policy-index{margin-top:32px;padding:22px 26px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}.policy-index ol{margin:0;padding-left:22px;columns:2;column-gap:36px}.policy-index li{break-inside:avoid;margin:5px 0}.policy-table-wrap{margin-top:18px;overflow-x:auto;border:1px solid var(--border);border-radius:10px}.policy table{width:100%;min-width:760px;border-collapse:collapse;background:#fff}.policy th,.policy td{padding:14px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:14px;line-height:1.7}.policy th{background:#f8fafc}.policy tr:last-child th,.policy tr:last-child td{border-bottom:0}.policy th:last-child,.policy td:last-child{border-right:0}.policy ul{padding-left:22px}.policy-contact{padding:20px 22px;background:var(--subtle);border-radius:10px}.policy-contact h3{margin:0 0 12px}.policy-contact dl{margin:0}.policy-contact dl div{display:flex;gap:18px;padding:5px 0}.policy-contact dt{width:58px;color:var(--muted);font-weight:700}.policy-contact dd{margin:0}.policy-effective{padding:16px 18px;background:var(--subtle);border-radius:9px}.consent-notice{margin:4px 0 14px;padding:18px;border:1px solid var(--border);border-radius:9px;background:#fff}.consent-notice h3{margin:0 0 12px;font-size:15px}.consent-notice dl{margin:0}.consent-notice dl div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--border)}.consent-notice dl div:last-child{border:0}.consent-notice dt{color:var(--muted);font-size:12px;font-weight:700}.consent-notice dd{margin:0;color:var(--secondary);font-size:12px;line-height:1.6}.consent-notice>p{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
|
||||
@media(max-width:640px){.policy{width:min(100% - 32px,940px)}.policy-index ol{columns:1}.policy h1{font-size:32px}.policy h2{font-size:20px}.consent-notice dl div{grid-template-columns:1fr;gap:2px}}
|
||||
.service-icon{--service-icon-color:var(--primary);display:grid;place-items:center}.service-icon svg{width:26px;height:26px;fill:none;stroke:var(--service-icon-color);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.service-icon.type-keyphone{--service-icon-color:#7c3aed;background:#f5f3ff}.service-icon.type-cctv{--service-icon-color:#059669;background:#ecfdf5}.service-icon.type-maintenance{--service-icon-color:#ea580c;background:#fff7ed}
|
||||
.floating-call{z-index:200}
|
||||
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}.footer-bottom button{padding:4px 0;border:0;background:none;color:var(--secondary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.cookie-consent{position:fixed;left:24px;right:24px;bottom:24px;z-index:300;width:min(calc(100% - 48px),760px);margin:auto;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #dbeafe;border-radius:14px;background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.2)}.cookie-consent[hidden]{display:none}.cookie-consent strong{display:block;font-size:16px}.cookie-consent p{margin:6px 0 0;color:var(--secondary);font-size:13px;line-height:1.65}.cookie-consent p a{color:var(--primary);font-weight:700}.cookie-consent-actions{display:flex;gap:8px;flex:none}.cookie-consent-actions .button{min-width:72px}@media(max-width:640px){.footer-bottom{align-items:flex-start;flex-direction:column}.cookie-consent{left:16px;right:16px;bottom:16px;width:calc(100% - 32px);padding:18px;align-items:stretch;flex-direction:column;gap:16px}.cookie-consent-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-consent-actions .button{width:100%}}
|
||||
|
||||
338
public/assets/js/admin.js
Normal file
338
public/assets/js/admin.js
Normal file
@@ -0,0 +1,338 @@
|
||||
(() => {
|
||||
const gallery = document.querySelector('[data-media-upload="gallery"]');
|
||||
if (gallery) {
|
||||
const fileInput = gallery.querySelector('[data-media-files]');
|
||||
const list = gallery.querySelector('[data-media-list]');
|
||||
fileInput?.addEventListener('change', () => {
|
||||
list.replaceChildren();
|
||||
const title = document.querySelector('input[name="title"]')?.value.trim() || '게시글';
|
||||
[...fileInput.files].forEach((file, index) => {
|
||||
const item = document.createElement('article');
|
||||
item.className = 'admin-new-media-item';
|
||||
const preview = document.createElement('img');
|
||||
preview.src = URL.createObjectURL(file);
|
||||
preview.alt = '';
|
||||
const name = document.createElement('strong');
|
||||
name.textContent = file.name;
|
||||
const label = document.createElement('label');
|
||||
label.textContent = '대체 텍스트';
|
||||
const alt = document.createElement('input');
|
||||
alt.name = 'new_gallery_alts[]';
|
||||
alt.value = `${title} - 대표 이미지 ${index + 1}`;
|
||||
alt.maxLength = 255;
|
||||
alt.required = true;
|
||||
label.append(alt);
|
||||
item.append(preview, name, label);
|
||||
list.append(item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.admin-media-delete input[type="checkbox"]').forEach((checkbox) => {
|
||||
checkbox.addEventListener('change', () => {
|
||||
const item = checkbox.closest('.admin-media-item');
|
||||
const alt = item?.querySelector('input:not([type]), input[type="text"]');
|
||||
item?.classList.toggle('is-delete', checkbox.checked);
|
||||
if (alt) alt.required = !checkbox.checked;
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
(() => {
|
||||
const editor = document.querySelector('[data-block-editor]');
|
||||
const sourceWrap = document.querySelector('[data-body-source]');
|
||||
const source = document.querySelector('[data-post-body]');
|
||||
if (!editor || !sourceWrap || !source) return;
|
||||
|
||||
const list = editor.querySelector('[data-block-list]');
|
||||
const deleteBin = editor.querySelector('[data-delete-bin]');
|
||||
const inventory = new Map();
|
||||
editor.querySelectorAll('[data-existing-inline]').forEach((item) => {
|
||||
inventory.set(Number(item.dataset.token), {
|
||||
id: Number(item.dataset.id),
|
||||
token: Number(item.dataset.token),
|
||||
path: item.dataset.path,
|
||||
alt: item.dataset.alt,
|
||||
});
|
||||
});
|
||||
let nextToken = Number(editor.dataset.nextToken || 1);
|
||||
|
||||
const button = (label, action, className = '') => {
|
||||
const element = document.createElement('button');
|
||||
element.type = 'button';
|
||||
element.textContent = label;
|
||||
element.dataset.blockAction = action;
|
||||
if (className) element.className = className;
|
||||
return element;
|
||||
};
|
||||
|
||||
const resizeText = (textarea) => {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = `${Math.max(112, textarea.scrollHeight)}px`;
|
||||
};
|
||||
|
||||
const updateControls = () => {
|
||||
const blocks = [...list.children];
|
||||
blocks.forEach((block, index) => {
|
||||
block.querySelector('[data-block-action="up"]').disabled = index === 0;
|
||||
block.querySelector('[data-block-action="down"]').disabled = index === blocks.length - 1;
|
||||
});
|
||||
};
|
||||
|
||||
const bindBlockActions = (block) => {
|
||||
block.querySelector('[data-block-action="up"]').addEventListener('click', () => {
|
||||
const previous = block.previousElementSibling;
|
||||
if (previous) list.insertBefore(block, previous);
|
||||
updateControls();
|
||||
});
|
||||
block.querySelector('[data-block-action="down"]').addEventListener('click', () => {
|
||||
const next = block.nextElementSibling;
|
||||
if (next) list.insertBefore(next, block);
|
||||
updateControls();
|
||||
});
|
||||
block.querySelector('[data-block-action="remove"]').addEventListener('click', () => {
|
||||
if (block.dataset.existingId) {
|
||||
const deleted = document.createElement('input');
|
||||
deleted.type = 'hidden';
|
||||
deleted.name = 'delete_images[]';
|
||||
deleted.value = block.dataset.existingId;
|
||||
deleteBin.append(deleted);
|
||||
}
|
||||
block.remove();
|
||||
if (!list.children.length) addTextBlock('');
|
||||
updateControls();
|
||||
});
|
||||
};
|
||||
|
||||
const createShell = (type, title) => {
|
||||
const block = document.createElement('article');
|
||||
block.className = `admin-content-block admin-content-block-${type}`;
|
||||
block.dataset.blockType = type;
|
||||
const header = document.createElement('header');
|
||||
const heading = document.createElement('strong');
|
||||
heading.textContent = title;
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'admin-content-block-actions';
|
||||
actions.append(
|
||||
button('위로', 'up'),
|
||||
button('아래로', 'down'),
|
||||
button('삭제', 'remove', 'is-danger'),
|
||||
);
|
||||
header.append(heading, actions);
|
||||
block.append(header);
|
||||
bindBlockActions(block);
|
||||
return block;
|
||||
};
|
||||
|
||||
const appendInsertControls = (block) => {
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'admin-content-insert-actions';
|
||||
const addText = document.createElement('button');
|
||||
addText.type = 'button';
|
||||
addText.textContent = '아래에 문단 추가';
|
||||
addText.addEventListener('click', () => {
|
||||
const added = addTextBlock('', block.nextElementSibling);
|
||||
added.querySelector('textarea').focus();
|
||||
});
|
||||
const addImage = document.createElement('button');
|
||||
addImage.type = 'button';
|
||||
addImage.textContent = '아래에 이미지 추가';
|
||||
addImage.addEventListener('click', () => chooseImage(block.nextElementSibling));
|
||||
controls.append(addText, addImage);
|
||||
block.append(controls);
|
||||
};
|
||||
|
||||
const addTextBlock = (value, before = null) => {
|
||||
const block = createShell('text', '텍스트 문단');
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.rows = 4;
|
||||
textarea.value = value;
|
||||
textarea.placeholder = '본문 내용을 입력하세요.';
|
||||
textarea.setAttribute('aria-label', '본문 텍스트 문단');
|
||||
textarea.addEventListener('input', () => resizeText(textarea));
|
||||
block.append(textarea);
|
||||
appendInsertControls(block);
|
||||
list.insertBefore(block, before);
|
||||
requestAnimationFrame(() => resizeText(textarea));
|
||||
updateControls();
|
||||
return block;
|
||||
};
|
||||
|
||||
const addImageBlock = ({ id = null, token, path, alt, fileInput = null }, before = null) => {
|
||||
const block = createShell('image', id ? '등록된 본문 이미지' : '새 본문 이미지');
|
||||
block.dataset.token = String(token);
|
||||
if (id) block.dataset.existingId = String(id);
|
||||
|
||||
const preview = document.createElement('img');
|
||||
preview.src = path;
|
||||
preview.alt = '';
|
||||
const fields = document.createElement('div');
|
||||
fields.className = 'admin-content-image-fields';
|
||||
const label = document.createElement('label');
|
||||
label.textContent = '대체 텍스트';
|
||||
const altInput = document.createElement('input');
|
||||
altInput.name = id ? `media_alt[${id}]` : 'new_inline_alts[]';
|
||||
altInput.value = alt;
|
||||
altInput.maxLength = 255;
|
||||
altInput.required = true;
|
||||
label.append(altInput);
|
||||
fields.append(label);
|
||||
|
||||
if (fileInput) {
|
||||
fileInput.name = 'inline_images[]';
|
||||
fileInput.className = 'admin-hidden-file';
|
||||
const tokenInput = document.createElement('input');
|
||||
tokenInput.type = 'hidden';
|
||||
tokenInput.name = 'new_inline_tokens[]';
|
||||
tokenInput.value = String(token);
|
||||
fields.append(fileInput, tokenInput);
|
||||
}
|
||||
block.append(preview, fields);
|
||||
appendInsertControls(block);
|
||||
list.insertBefore(block, before);
|
||||
updateControls();
|
||||
return block;
|
||||
};
|
||||
|
||||
const imageCount = () => list.querySelectorAll('[data-block-type="image"]').length;
|
||||
const chooseImage = (before = null) => {
|
||||
if (imageCount() >= 10) {
|
||||
window.alert('본문 이미지는 최대 10장까지 등록할 수 있습니다.');
|
||||
return;
|
||||
}
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/jpeg,image/png,image/webp';
|
||||
input.className = 'admin-hidden-file';
|
||||
input.addEventListener('change', () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
const title = document.querySelector('input[name="title"]')?.value.trim() || '게시글';
|
||||
addImageBlock({
|
||||
token: nextToken++,
|
||||
path: URL.createObjectURL(file),
|
||||
alt: `${title} - 본문 이미지`,
|
||||
fileInput: input,
|
||||
}, before?.isConnected ? before : null);
|
||||
}, { once: true });
|
||||
deleteBin.append(input);
|
||||
input.click();
|
||||
};
|
||||
|
||||
const usedTokens = new Set();
|
||||
const initialBody = source.value.trim();
|
||||
const parts = initialBody ? initialBody.split(/\r?\n(?:[\t ]*\r?\n)+/) : [];
|
||||
parts.forEach((part) => {
|
||||
const match = part.trim().match(/^\[\[image:(\d+)\]\]$/);
|
||||
const media = match ? inventory.get(Number(match[1])) : null;
|
||||
if (media) {
|
||||
addImageBlock(media);
|
||||
usedTokens.add(media.token);
|
||||
} else {
|
||||
addTextBlock(part);
|
||||
}
|
||||
});
|
||||
inventory.forEach((media) => {
|
||||
if (!usedTokens.has(media.token)) addImageBlock(media);
|
||||
});
|
||||
if (!list.children.length) addTextBlock('');
|
||||
|
||||
editor.querySelector('[data-add-text]').addEventListener('click', () => {
|
||||
const block = addTextBlock('');
|
||||
block.querySelector('textarea').focus();
|
||||
});
|
||||
editor.querySelector('[data-add-image]').addEventListener('click', () => chooseImage());
|
||||
|
||||
source.required = false;
|
||||
sourceWrap.classList.add('is-enhanced');
|
||||
editor.classList.add('is-ready');
|
||||
source.closest('form').addEventListener('submit', () => {
|
||||
source.value = [...list.children].map((block) => {
|
||||
if (block.dataset.blockType === 'image') return `[[image:${block.dataset.token}]]`;
|
||||
return block.querySelector('textarea').value.trim();
|
||||
}).filter(Boolean).join('\n\n');
|
||||
});
|
||||
|
||||
const previewDialog = document.querySelector('[data-live-preview]');
|
||||
const openPreview = document.querySelector('[data-open-live-preview]');
|
||||
const closePreview = previewDialog?.querySelector('[data-close-live-preview]');
|
||||
const renderPreview = () => {
|
||||
const previewTitle = previewDialog.querySelector('[data-preview-title]');
|
||||
const previewCategory = previewDialog.querySelector('[data-preview-category]');
|
||||
const previewAuthor = previewDialog.querySelector('[data-preview-author]');
|
||||
const previewBody = previewDialog.querySelector('[data-preview-body]');
|
||||
const previewGallery = previewDialog.querySelector('[data-preview-gallery]');
|
||||
const galleryMain = previewDialog.querySelector('[data-preview-gallery-main]');
|
||||
const galleryThumbs = previewDialog.querySelector('[data-preview-gallery-thumbs]');
|
||||
const galleryCount = previewDialog.querySelector('[data-preview-gallery-count]');
|
||||
|
||||
previewTitle.textContent = document.querySelector('input[name="title"]')?.value.trim() || '제목 없는 글';
|
||||
previewCategory.textContent = document.querySelector('select[name="category"]')?.value || '';
|
||||
previewAuthor.textContent = `${document.querySelector('input[name="author"]')?.value.trim() || ''} 기술팀`;
|
||||
previewBody.replaceChildren();
|
||||
[...list.children].forEach((block) => {
|
||||
if (block.dataset.blockType === 'image') {
|
||||
const figure = document.createElement('figure');
|
||||
const image = document.createElement('img');
|
||||
image.src = block.querySelector('img').src;
|
||||
image.alt = block.querySelector('.admin-content-image-fields input')?.value.trim() || '';
|
||||
figure.append(image);
|
||||
previewBody.append(figure);
|
||||
return;
|
||||
}
|
||||
const value = block.querySelector('textarea').value.trim();
|
||||
if (!value) return;
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = value;
|
||||
previewBody.append(paragraph);
|
||||
});
|
||||
if (!previewBody.children.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'is-empty';
|
||||
empty.textContent = '본문 내용을 입력하면 여기에 표시됩니다.';
|
||||
previewBody.append(empty);
|
||||
}
|
||||
|
||||
const galleryItems = [
|
||||
...document.querySelectorAll('[data-media-upload="gallery"] .admin-media-item:not(.is-delete), [data-media-upload="gallery"] .admin-new-media-item'),
|
||||
].map((item) => ({
|
||||
src: item.querySelector('img')?.src || '',
|
||||
alt: item.querySelector('input:not([type="checkbox"])')?.value.trim() || '',
|
||||
})).filter((item) => item.src);
|
||||
galleryMain.replaceChildren();
|
||||
galleryThumbs.replaceChildren();
|
||||
previewGallery.hidden = galleryItems.length === 0;
|
||||
if (galleryItems.length) {
|
||||
const mainImage = document.createElement('img');
|
||||
mainImage.src = galleryItems[0].src;
|
||||
mainImage.alt = galleryItems[0].alt;
|
||||
galleryMain.append(mainImage);
|
||||
galleryItems.forEach((item, index) => {
|
||||
const thumb = document.createElement('button');
|
||||
thumb.type = 'button';
|
||||
thumb.setAttribute('aria-label', `${index + 1}번째 대표 이미지 보기`);
|
||||
if (index === 0) thumb.classList.add('is-active');
|
||||
const image = document.createElement('img');
|
||||
image.src = item.src;
|
||||
image.alt = '';
|
||||
thumb.append(image);
|
||||
thumb.addEventListener('click', () => {
|
||||
mainImage.src = item.src;
|
||||
mainImage.alt = item.alt;
|
||||
[...galleryThumbs.children].forEach((child) => child.classList.toggle('is-active', child === thumb));
|
||||
});
|
||||
galleryThumbs.append(thumb);
|
||||
});
|
||||
galleryCount.textContent = `대표 이미지 ${galleryItems.length}장`;
|
||||
}
|
||||
};
|
||||
|
||||
openPreview?.addEventListener('click', () => {
|
||||
renderPreview();
|
||||
previewDialog.showModal();
|
||||
});
|
||||
closePreview?.addEventListener('click', () => previewDialog.close());
|
||||
previewDialog?.addEventListener('click', (event) => {
|
||||
if (event.target === previewDialog) previewDialog.close();
|
||||
});
|
||||
})();
|
||||
@@ -1,3 +1,115 @@
|
||||
(() => {
|
||||
const root = document.querySelector('[data-analytics-consent]');
|
||||
if (!root) return;
|
||||
|
||||
const banner = document.querySelector('[data-cookie-consent]');
|
||||
const settingsButton = document.querySelector('[data-cookie-settings]');
|
||||
const acceptButton = banner?.querySelector('[data-cookie-accept]');
|
||||
const declineButton = banner?.querySelector('[data-cookie-decline]');
|
||||
const enabled = root.dataset.analyticsEnabled === 'true';
|
||||
const measurementId = root.dataset.analyticsMeasurementId || '';
|
||||
const consentKey = root.dataset.analyticsConsentKey || 'gtsit_analytics_consent_v1';
|
||||
let analyticsLoaded = false;
|
||||
|
||||
const readConsent = () => {
|
||||
try {
|
||||
return window.localStorage.getItem(consentKey);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const saveConsent = (value) => {
|
||||
try {
|
||||
window.localStorage.setItem(consentKey, value);
|
||||
} catch {
|
||||
// 저장소를 사용할 수 없는 경우 현재 페이지만 선택을 유지합니다.
|
||||
}
|
||||
};
|
||||
|
||||
const setGoogleConsent = (analyticsStorage) => {
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = window.gtag || function gtag() {
|
||||
window.dataLayer.push(arguments);
|
||||
};
|
||||
window.gtag('consent', 'update', {
|
||||
analytics_storage: analyticsStorage,
|
||||
ad_storage: 'denied',
|
||||
ad_user_data: 'denied',
|
||||
ad_personalization: 'denied',
|
||||
});
|
||||
};
|
||||
|
||||
const loadAnalytics = () => {
|
||||
if (!enabled || !measurementId || analyticsLoaded) return;
|
||||
analyticsLoaded = true;
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = window.gtag || function gtag() {
|
||||
window.dataLayer.push(arguments);
|
||||
};
|
||||
window.gtag('consent', 'default', {
|
||||
analytics_storage: 'denied',
|
||||
ad_storage: 'denied',
|
||||
ad_user_data: 'denied',
|
||||
ad_personalization: 'denied',
|
||||
});
|
||||
window.gtag('consent', 'update', {
|
||||
analytics_storage: 'granted',
|
||||
ad_storage: 'denied',
|
||||
ad_user_data: 'denied',
|
||||
ad_personalization: 'denied',
|
||||
});
|
||||
window.gtag('js', new Date());
|
||||
window.gtag('config', measurementId, {
|
||||
allow_google_signals: false,
|
||||
allow_ad_personalization_signals: false,
|
||||
});
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.async = true;
|
||||
script.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(measurementId)}`;
|
||||
document.head.append(script);
|
||||
};
|
||||
|
||||
const clearAnalyticsCookies = () => {
|
||||
const names = document.cookie.split(';').map((cookie) => cookie.split('=')[0].trim()).filter((name) => name.startsWith('_ga'));
|
||||
names.forEach((name) => {
|
||||
document.cookie = `${name}=; Max-Age=0; path=/; SameSite=Lax`;
|
||||
document.cookie = `${name}=; Max-Age=0; path=/; domain=.gtsit.co.kr; SameSite=Lax`;
|
||||
});
|
||||
};
|
||||
|
||||
const hideBanner = () => {
|
||||
if (banner) banner.hidden = true;
|
||||
};
|
||||
|
||||
const showBanner = () => {
|
||||
if (!banner) return;
|
||||
banner.hidden = false;
|
||||
acceptButton?.focus();
|
||||
};
|
||||
|
||||
acceptButton?.addEventListener('click', () => {
|
||||
saveConsent('granted');
|
||||
hideBanner();
|
||||
if (analyticsLoaded) setGoogleConsent('granted');
|
||||
else loadAnalytics();
|
||||
});
|
||||
|
||||
declineButton?.addEventListener('click', () => {
|
||||
saveConsent('denied');
|
||||
setGoogleConsent('denied');
|
||||
clearAnalyticsCookies();
|
||||
hideBanner();
|
||||
});
|
||||
|
||||
settingsButton?.addEventListener('click', showBanner);
|
||||
|
||||
const consent = readConsent();
|
||||
if (consent === 'granted') loadAnalytics();
|
||||
else if (consent !== 'denied') showBanner();
|
||||
})();
|
||||
|
||||
(() => {
|
||||
const toggle = document.querySelector('.menu-toggle');
|
||||
const navigation = document.querySelector('.site-navigation');
|
||||
@@ -212,6 +324,82 @@
|
||||
else returnButton.hidden = false;
|
||||
})();
|
||||
|
||||
(() => {
|
||||
const slider = document.querySelector('[data-article-slider]');
|
||||
if (!slider) return;
|
||||
|
||||
const slides = [...slider.querySelectorAll('.article-gallery-slide')];
|
||||
const dots = [...slider.querySelectorAll('[data-article-dot]')];
|
||||
const previous = slider.querySelector('[data-article-prev]');
|
||||
const next = slider.querySelector('[data-article-next]');
|
||||
const pause = slider.querySelector('[data-article-pause]');
|
||||
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
let current = 0;
|
||||
let timer = null;
|
||||
let isPaused = false;
|
||||
let isInteracting = false;
|
||||
|
||||
const show = (index) => {
|
||||
current = (index + slides.length) % slides.length;
|
||||
slides.forEach((slide, slideIndex) => {
|
||||
const active = slideIndex === current;
|
||||
slide.classList.toggle('is-active', active);
|
||||
slide.setAttribute('aria-hidden', String(!active));
|
||||
});
|
||||
dots.forEach((dot, dotIndex) => {
|
||||
const active = dotIndex === current;
|
||||
dot.classList.toggle('is-active', active);
|
||||
if (active) dot.setAttribute('aria-current', 'true');
|
||||
else dot.removeAttribute('aria-current');
|
||||
});
|
||||
};
|
||||
const stop = () => {
|
||||
if (timer !== null) window.clearInterval(timer);
|
||||
timer = null;
|
||||
};
|
||||
const start = () => {
|
||||
stop();
|
||||
if (isPaused || isInteracting || reducedMotion.matches || document.hidden) return;
|
||||
timer = window.setInterval(() => show(current + 1), 5000);
|
||||
};
|
||||
const move = (direction) => {
|
||||
show(current + direction);
|
||||
start();
|
||||
};
|
||||
|
||||
previous?.addEventListener('click', () => move(-1));
|
||||
next?.addEventListener('click', () => move(1));
|
||||
dots.forEach((dot) => dot.addEventListener('click', () => {
|
||||
show(Number(dot.dataset.articleDot));
|
||||
start();
|
||||
}));
|
||||
pause?.addEventListener('click', () => {
|
||||
isPaused = !isPaused;
|
||||
pause.setAttribute('aria-pressed', String(isPaused));
|
||||
pause.textContent = isPaused ? '자동재생 시작' : '자동재생 일시정지';
|
||||
start();
|
||||
});
|
||||
slider.addEventListener('mouseenter', () => {
|
||||
isInteracting = true;
|
||||
stop();
|
||||
});
|
||||
slider.addEventListener('mouseleave', () => {
|
||||
isInteracting = false;
|
||||
start();
|
||||
});
|
||||
slider.addEventListener('focusin', () => {
|
||||
isInteracting = true;
|
||||
stop();
|
||||
});
|
||||
slider.addEventListener('focusout', () => {
|
||||
isInteracting = false;
|
||||
start();
|
||||
});
|
||||
document.addEventListener('visibilitychange', start);
|
||||
reducedMotion.addEventListener('change', start);
|
||||
start();
|
||||
})();
|
||||
|
||||
(() => {
|
||||
const mapFrame = document.querySelector('[data-naver-map]');
|
||||
if (!mapFrame) return;
|
||||
@@ -219,6 +407,9 @@
|
||||
const mapElement = mapFrame.querySelector('.naver-map');
|
||||
const statusElement = mapFrame.querySelector('[data-naver-map-status]');
|
||||
const fullscreenButton = mapFrame.querySelector('[data-naver-map-fullscreen]');
|
||||
const zoomControl = mapFrame.querySelector('[data-naver-map-zoom]');
|
||||
const zoomInButton = mapFrame.querySelector('[data-naver-map-zoom-in]');
|
||||
const zoomOutButton = mapFrame.querySelector('[data-naver-map-zoom-out]');
|
||||
const externalLink = mapFrame.parentElement?.querySelector('[data-naver-map-external]');
|
||||
const clientId = mapFrame.dataset.clientId;
|
||||
const latitude = Number(mapFrame.dataset.latitude);
|
||||
@@ -231,6 +422,7 @@
|
||||
mapFrame.dataset.mapState = state;
|
||||
mapFrame.setAttribute('aria-busy', String(state === 'loading'));
|
||||
if (fullscreenButton) fullscreenButton.hidden = state !== 'ready';
|
||||
if (zoomControl) zoomControl.hidden = state !== 'ready';
|
||||
if (statusElement && message) statusElement.textContent = message;
|
||||
};
|
||||
|
||||
@@ -249,10 +441,15 @@
|
||||
center: position,
|
||||
zoom: 17,
|
||||
minZoom: 10,
|
||||
zoomControl: true,
|
||||
zoomControlOptions: {
|
||||
position: window.naver.maps.Position.RIGHT_CENTER,
|
||||
},
|
||||
maxZoom: 21,
|
||||
draggable: false,
|
||||
keyboardShortcuts: false,
|
||||
scrollWheel: false,
|
||||
pinchZoom: false,
|
||||
disableDoubleClickZoom: true,
|
||||
disableDoubleTapZoom: true,
|
||||
disableTwoFingerTapZoom: true,
|
||||
zoomControl: false,
|
||||
});
|
||||
|
||||
new window.naver.maps.Marker({
|
||||
@@ -261,6 +458,22 @@
|
||||
title: label,
|
||||
});
|
||||
|
||||
const updateZoomButtons = () => {
|
||||
const zoom = map.getZoom();
|
||||
if (zoomInButton) zoomInButton.disabled = zoom >= 21;
|
||||
if (zoomOutButton) zoomOutButton.disabled = zoom <= 10;
|
||||
};
|
||||
const setFixedZoom = (difference) => {
|
||||
const nextZoom = Math.min(21, Math.max(10, map.getZoom() + difference));
|
||||
map.setCenter(position);
|
||||
map.setZoom(nextZoom, false);
|
||||
map.setCenter(position);
|
||||
updateZoomButtons();
|
||||
};
|
||||
zoomInButton?.addEventListener('click', () => setFixedZoom(1));
|
||||
zoomOutButton?.addEventListener('click', () => setFixedZoom(-1));
|
||||
updateZoomButtons();
|
||||
|
||||
const refreshMapSize = () => {
|
||||
window.setTimeout(() => {
|
||||
window.naver.maps.Event.trigger(map, 'resize');
|
||||
|
||||
185
public/index.php
185
public/index.php
@@ -10,9 +10,11 @@ use App\Repositories\InquiryRepository;
|
||||
use App\Repositories\AdminRepository;
|
||||
use App\Auth\AdminAuth;
|
||||
use App\Repositories\SiteSettingRepository;
|
||||
use App\Services\AnalyticsService;
|
||||
|
||||
$path = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
|
||||
$basePath = (string) config('app.base_path', '');
|
||||
$mediaExperiment = $basePath !== '';
|
||||
if ($basePath !== '') {
|
||||
if ($path !== $basePath && !str_starts_with($path, $basePath . '/')) {
|
||||
http_response_code(404);
|
||||
@@ -68,7 +70,12 @@ if ($path === '/blog' && $method === 'GET') {
|
||||
}
|
||||
|
||||
if (preg_match('#^/blog/([a-z0-9-]+)$#', $path, $matches) === 1 && $method === 'GET') {
|
||||
$post = $postRepository?->findPublishedBySlug($matches[1]);
|
||||
$requestedSlug = $matches[1];
|
||||
$slugRedirects = config('post_slug_redirects', []);
|
||||
if (is_array($slugRedirects) && isset($slugRedirects[$requestedSlug])) {
|
||||
redirect('/blog/' . $slugRedirects[$requestedSlug], 301);
|
||||
}
|
||||
$post = $postRepository?->findPublishedBySlug($requestedSlug);
|
||||
if ($post === null) {
|
||||
http_response_code(404);
|
||||
render('errors/404', ['title' => '게시글을 찾을 수 없습니다']);
|
||||
@@ -346,20 +353,48 @@ if (str_starts_with($path, '/admin')) {
|
||||
}
|
||||
|
||||
if ($path === '/admin' && $method === 'GET') {
|
||||
render('admin/dashboard', ['title'=>'대시보드','counts'=>$adminRepository->dashboardCounts()], 'layouts/admin');
|
||||
$analytics = (new AnalyticsService())->dashboard();
|
||||
render('admin/dashboard', ['title'=>'대시보드','counts'=>$adminRepository->dashboardCounts(),'analytics'=>$analytics], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
if ($path === '/admin/posts' && $method === 'GET') {
|
||||
render('admin/posts/index', ['title'=>'글 관리','posts'=>$adminRepository->posts()], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
if (preg_match('#^/admin/posts/(\d+)/preview$#', $path, $adminPreviewMatch) === 1 && $method === 'GET') {
|
||||
$post = $adminRepository->findPost((int) $adminPreviewMatch[1]);
|
||||
if (!$post) {
|
||||
http_response_code(404);
|
||||
render('errors/404', ['title'=>'게시글을 찾을 수 없습니다'], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
render('blog/show', [
|
||||
'title'=>'미리보기 · ' . $post['title'],
|
||||
'description'=>$post['excerpt'] ?: '관리자 게시글 미리보기',
|
||||
'post'=>$post,
|
||||
'preview'=>true,
|
||||
'mediaExperiment'=>$mediaExperiment,
|
||||
'noindex'=>true,
|
||||
'canonicalUrl'=>rtrim((string) config('app.base_url'), '/') . '/blog/' . $post['slug'],
|
||||
]);
|
||||
exit;
|
||||
}
|
||||
if ($path === '/admin/posts/new' && $method === 'GET') {
|
||||
render('admin/posts/form', ['title'=>'새 글 작성','post'=>null,'errors'=>[]], 'layouts/admin');
|
||||
render('admin/posts/form', ['title'=>'새 글 작성','post'=>null,'errors'=>[],'mediaExperiment'=>$mediaExperiment], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
if ($path === '/admin/posts/new' && $method === 'POST') {
|
||||
verify_csrf();
|
||||
$postData = collect_post_input();
|
||||
if ($mediaExperiment) {
|
||||
$result = save_media_post_request($adminRepository, $postData, null, null);
|
||||
if ($result['errors']) {
|
||||
http_response_code(422);
|
||||
render('admin/posts/form', ['title'=>'새 글 작성','post'=>null,'errors'=>$result['errors'],'mediaExperiment'=>true], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
redirect('/admin/posts/' . $result['id'] . '/preview');
|
||||
}
|
||||
$errors = validate_post_input($postData, $adminRepository);
|
||||
[$image, $imageError] = prepare_post_image($_FILES['image'] ?? null);
|
||||
if ($imageError !== null) $errors[] = $imageError;
|
||||
@@ -390,12 +425,22 @@ if (str_starts_with($path, '/admin')) {
|
||||
exit;
|
||||
}
|
||||
if ($method === 'GET') {
|
||||
render('admin/posts/form', ['title'=>'글 수정','post'=>$post,'errors'=>[]], 'layouts/admin');
|
||||
render('admin/posts/form', ['title'=>'글 수정','post'=>$post,'errors'=>[],'mediaExperiment'=>$mediaExperiment], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
if ($method === 'POST') {
|
||||
verify_csrf();
|
||||
$postData = collect_post_input();
|
||||
if ($mediaExperiment) {
|
||||
$result = save_media_post_request($adminRepository, $postData, $post, $postId);
|
||||
if ($result['errors']) {
|
||||
$post = $adminRepository->findPost($postId) ?? $post;
|
||||
http_response_code(422);
|
||||
render('admin/posts/form', ['title'=>'글 수정','post'=>$post,'errors'=>$result['errors'],'mediaExperiment'=>true], 'layouts/admin');
|
||||
exit;
|
||||
}
|
||||
redirect('/admin/posts/' . $postId . '/preview');
|
||||
}
|
||||
$errors = validate_post_input($postData, $adminRepository, $postId);
|
||||
[$image, $imageError] = prepare_post_image($_FILES['image'] ?? null);
|
||||
if ($imageError !== null) $errors[] = $imageError;
|
||||
@@ -515,8 +560,6 @@ function validate_post_input(array $data, AdminRepository $repository, ?int $exc
|
||||
{
|
||||
$errors = [];
|
||||
if ($data['title']==='' || mb_strlen($data['title'])>200) $errors[]='제목을 200자 이내로 입력해 주세요.';
|
||||
if (!preg_match('/^[a-z0-9]+(?:-[a-z0-9]+)*$/', $data['slug'])) $errors[]='slug는 영문 소문자, 숫자, 하이픈으로 입력해 주세요.';
|
||||
elseif ($repository->slugExists($data['slug'], $exceptId)) $errors[]='이미 사용 중인 slug입니다.';
|
||||
if (!in_array($data['category'], ['네트워크','키폰시스템','CCTV','시공사례'], true)) $errors[]='카테고리를 확인해 주세요.';
|
||||
if (mb_strlen($data['excerpt'])>500) $errors[]='목록 요약을 500자 이내로 입력해 주세요.';
|
||||
if ($data['body']==='') $errors[]='본문을 입력해 주세요.';
|
||||
@@ -526,14 +569,140 @@ function validate_post_input(array $data, AdminRepository $repository, ?int $exc
|
||||
return $errors;
|
||||
}
|
||||
|
||||
function prepare_post_image(?array $file): array
|
||||
function save_media_post_request(AdminRepository $repository, array $postData, ?array $post, ?int $postId): array
|
||||
{
|
||||
$deleteIds = array_values(array_unique(array_filter(array_map('intval', (array) ($_POST['delete_images'] ?? [])))));
|
||||
$existingGallery = $post['gallery_images'] ?? [];
|
||||
$existingInline = $post['inline_images'] ?? [];
|
||||
$existingById = [];
|
||||
foreach ([...$existingGallery, ...$existingInline] as $image) {
|
||||
$existingById[(int) $image['id']] = $image;
|
||||
}
|
||||
$deleteIds = array_values(array_filter($deleteIds, static fn (int $id): bool => isset($existingById[$id])));
|
||||
|
||||
foreach ($existingInline as $image) {
|
||||
if (in_array((int) $image['id'], $deleteIds, true)) {
|
||||
$postData['body'] = preg_replace(
|
||||
'/(?:\R{2,})?\[\[image:' . preg_quote((string) $image['token'], '/') . '\]\](?:\R{2,})?/',
|
||||
"\n\n",
|
||||
$postData['body']
|
||||
) ?? $postData['body'];
|
||||
}
|
||||
}
|
||||
$postData['body'] = trim($postData['body']);
|
||||
$_POST['body'] = $postData['body'];
|
||||
|
||||
$errors = validate_post_input($postData, $repository, $postId);
|
||||
[$galleryUploads, $galleryErrors] = prepare_post_images($_FILES['gallery_images'] ?? null, '대표 이미지');
|
||||
[$inlineUploads, $inlineErrors] = prepare_post_images($_FILES['inline_images'] ?? null, '본문 이미지');
|
||||
$errors = [...$errors, ...$galleryErrors, ...$inlineErrors];
|
||||
|
||||
$newGalleryAlts = array_map(static fn ($value): string => trim((string) $value), (array) ($_POST['new_gallery_alts'] ?? []));
|
||||
$newInlineAlts = array_map(static fn ($value): string => trim((string) $value), (array) ($_POST['new_inline_alts'] ?? []));
|
||||
$submittedInlineTokens = array_map(static fn ($value): string => trim((string) $value), (array) ($_POST['new_inline_tokens'] ?? []));
|
||||
$newInlineTokens = [];
|
||||
foreach ($submittedInlineTokens as $token) {
|
||||
if (preg_match('/^[1-9]\d{0,2}$/D', $token) !== 1) {
|
||||
$errors[] = '본문 이미지 위치 정보를 다시 확인해 주세요.';
|
||||
continue;
|
||||
}
|
||||
$newInlineTokens[] = (int) $token;
|
||||
}
|
||||
if (count($newGalleryAlts) !== count($galleryUploads)) $errors[] = '선택한 대표 이미지 정보를 다시 확인해 주세요.';
|
||||
if (count($newInlineAlts) !== count($inlineUploads)) $errors[] = '선택한 본문 이미지 정보를 다시 확인해 주세요.';
|
||||
if (count($newInlineTokens) !== count($inlineUploads)) $errors[] = '선택한 본문 이미지의 위치 정보를 다시 확인해 주세요.';
|
||||
foreach ($newGalleryAlts as $alt) if ($alt === '' || mb_strlen($alt) > 255) $errors[] = '새 대표 이미지의 대체 텍스트를 255자 이내로 입력해 주세요.';
|
||||
foreach ($newInlineAlts as $alt) if ($alt === '' || mb_strlen($alt) > 255) $errors[] = '새 본문 이미지의 대체 텍스트를 255자 이내로 입력해 주세요.';
|
||||
|
||||
$imageAlts = [];
|
||||
foreach ((array) ($_POST['media_alt'] ?? []) as $imageId => $alt) {
|
||||
$imageId = (int) $imageId;
|
||||
if (!isset($existingById[$imageId]) || in_array($imageId, $deleteIds, true)) continue;
|
||||
$alt = trim((string) $alt);
|
||||
if ($alt === '' || mb_strlen($alt) > 255) $errors[] = '등록된 이미지의 대체 텍스트를 255자 이내로 입력해 주세요.';
|
||||
$imageAlts[$imageId] = $alt;
|
||||
}
|
||||
|
||||
$remainingGallery = count(array_filter($existingGallery, static fn (array $image): bool => !in_array((int) $image['id'], $deleteIds, true)));
|
||||
$remainingInlineImages = array_values(array_filter($existingInline, static fn (array $image): bool => !in_array((int) $image['id'], $deleteIds, true)));
|
||||
$remainingInline = count($remainingInlineImages);
|
||||
$totalGallery = $remainingGallery + count($galleryUploads);
|
||||
$totalInline = $remainingInline + count($inlineUploads);
|
||||
if ($totalGallery > 6) $errors[] = '대표 이미지는 최대 6장까지 등록할 수 있습니다.';
|
||||
if ($totalInline > 10) $errors[] = '본문 이미지는 최대 10장까지 등록할 수 있습니다.';
|
||||
if (($totalGallery > 1 || $totalInline > 0) && $postData['status'] !== 'draft') {
|
||||
$errors[] = '다중·본문 이미지 기능은 테스트 중이므로 초안으로만 저장할 수 있습니다.';
|
||||
}
|
||||
$activeTokens = array_map(static fn (array $image): int => (int) $image['token'], $remainingInlineImages);
|
||||
foreach ($newInlineTokens as $token) {
|
||||
if (in_array($token, $activeTokens, true)) $errors[] = '본문 이미지 위치 정보가 중복되었습니다.';
|
||||
$activeTokens[] = $token;
|
||||
}
|
||||
if (count($activeTokens) !== count(array_unique($activeTokens))) $errors[] = '본문 이미지 위치 정보가 중복되었습니다.';
|
||||
preg_match_all('/\[\[image:(\d+)\]\]/', $postData['body'], $bodyTokenMatches);
|
||||
$bodyTokens = array_map('intval', $bodyTokenMatches[1] ?? []);
|
||||
foreach ($activeTokens as $token) {
|
||||
if (count(array_keys($bodyTokens, $token, true)) !== 1) $errors[] = '각 본문 이미지는 글 안에 한 번씩 배치해 주세요.';
|
||||
}
|
||||
foreach ($bodyTokens as $token) {
|
||||
if (!in_array($token, $activeTokens, true)) $errors[] = '연결되지 않은 본문 이미지 위치가 있습니다.';
|
||||
}
|
||||
if ($errors !== []) return ['id' => $postId, 'errors' => array_values(array_unique($errors))];
|
||||
|
||||
$storedPaths = [];
|
||||
$galleryImages = [];
|
||||
$inlineImages = [];
|
||||
try {
|
||||
foreach ($galleryUploads as $index => $image) {
|
||||
$path = store_post_image($image);
|
||||
$storedPaths[] = $path;
|
||||
$galleryImages[] = ['path' => $path, 'alt' => $newGalleryAlts[$index]];
|
||||
}
|
||||
foreach ($inlineUploads as $index => $image) {
|
||||
$path = store_post_image($image);
|
||||
$storedPaths[] = $path;
|
||||
$inlineImages[] = ['path' => $path, 'alt' => $newInlineAlts[$index], 'token' => $newInlineTokens[$index]];
|
||||
}
|
||||
$result = $repository->savePostWithMedia($postData, $postId, $galleryImages, $inlineImages, $deleteIds, $imageAlts);
|
||||
foreach ($result['old_paths'] as $oldPath) remove_stored_image((string) $oldPath);
|
||||
return ['id' => $result['id'], 'errors' => []];
|
||||
} catch (Throwable) {
|
||||
foreach ($storedPaths as $storedPath) remove_stored_image($storedPath);
|
||||
return ['id' => $postId, 'errors' => ['저장하지 못했습니다. 잠시 후 다시 시도해 주세요.']];
|
||||
}
|
||||
}
|
||||
|
||||
function prepare_post_images(?array $files, string $label): array
|
||||
{
|
||||
if ($files === null || !isset($files['name'], $files['error'], $files['size'], $files['tmp_name'])) return [[], []];
|
||||
$names = is_array($files['name']) ? $files['name'] : [$files['name']];
|
||||
$errors = is_array($files['error']) ? $files['error'] : [$files['error']];
|
||||
$sizes = is_array($files['size']) ? $files['size'] : [$files['size']];
|
||||
$temporaryNames = is_array($files['tmp_name']) ? $files['tmp_name'] : [$files['tmp_name']];
|
||||
$prepared = [];
|
||||
$messages = [];
|
||||
foreach ($names as $index => $name) {
|
||||
if (($errors[$index] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_NO_FILE) continue;
|
||||
[$image, $error] = prepare_post_image([
|
||||
'name' => $name,
|
||||
'error' => $errors[$index] ?? UPLOAD_ERR_NO_FILE,
|
||||
'size' => $sizes[$index] ?? 0,
|
||||
'tmp_name' => $temporaryNames[$index] ?? '',
|
||||
], $label);
|
||||
if ($error !== null) $messages[] = $error;
|
||||
if ($image !== null) $prepared[] = $image;
|
||||
}
|
||||
return [$prepared, $messages];
|
||||
}
|
||||
|
||||
function prepare_post_image(?array $file, string $label = '대표 이미지'): array
|
||||
{
|
||||
if ($file === null || ($file['error'] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_NO_FILE) return [null, null];
|
||||
if (!isset($file['error'], $file['size'], $file['tmp_name']) || is_array($file['error']) || is_array($file['size']) || is_array($file['tmp_name'])) {
|
||||
return [null, '이미지 업로드 요청이 올바르지 않습니다.'];
|
||||
}
|
||||
if ((int) $file['error'] !== UPLOAD_ERR_OK) return [null, '이미지를 업로드하지 못했습니다. 파일 크기를 확인해 주세요.'];
|
||||
if ((int) $file['size'] <= 0 || (int) $file['size'] > 8 * 1024 * 1024) return [null, '대표 이미지는 8MB 이하만 등록할 수 있습니다.'];
|
||||
if ((int) $file['size'] <= 0 || (int) $file['size'] > 8 * 1024 * 1024) return [null, $label . '는 파일당 8MB 이하만 등록할 수 있습니다.'];
|
||||
|
||||
$tmpName = (string) $file['tmp_name'];
|
||||
if (!is_uploaded_file($tmpName)) return [null, '업로드된 이미지 파일을 확인할 수 없습니다.'];
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<url><loc>https://gtsit.co.kr/blog</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/contact</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/privacy</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/office-lan-structure-cabling-guide</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/outdoor-wireless-link-installation-guide</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/keyphone-system-capacity-selection</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/cctv-recorder-essential-features</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/network-rack-cabling-maintenance-case</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/office-network-move-checklist</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/post-1</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/post-10</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/post-11</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/post-12</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/post-13</loc></url>
|
||||
<url><loc>https://gtsit.co.kr/blog/post-14</loc></url>
|
||||
</urlset>
|
||||
|
||||
Reference in New Issue
Block a user