Add: 플로팅 CTA 버튼 + 메인페이지 문의폼 임베드 + CTA 카카오톡 카드
- 플로팅 문의 버튼: 전 페이지 하단 좌측 고정 (카카오톡/전화/문의 3옵션) - 메인페이지 CTA 섹션: 오시는 길 → 카카오톡 오픈채팅 카드로 교체 - 메인페이지 하단: 온라인 문의폼 직접 임베드 (contact 페이지 이동 불필요) - FAQ 바로가기: 온라인 문의하기 버튼 추가 (#inline-contact 앵커) - i18n 4개 언어 번역 키 추가 (floating CTA, CTA 카카오톡, 문의폼) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com
parent
1463450830
commit
491a6b40b2
164
css/common.css
164
css/common.css
@ -1248,6 +1248,161 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
플로팅 CTA (문의하기) 버튼
|
||||
======================================== */
|
||||
.floating-cta {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
z-index: 9001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cta-main-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--gradient-main);
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 18px rgba(255, 136, 0, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cta-main-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 24px rgba(255, 136, 0, 0.5);
|
||||
}
|
||||
|
||||
.cta-main-btn .cta-icon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.floating-cta.active .cta-main-btn .cta-icon-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.floating-cta.active .cta-main-btn .cta-icon-close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.floating-cta.active .cta-main-btn {
|
||||
background: var(--text-secondary);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 옵션 메뉴 */
|
||||
.cta-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floating-cta.active .cta-options {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cta-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 28px;
|
||||
text-decoration: none;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.2s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-option:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cta-option i,
|
||||
.cta-option svg {
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cta-option svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
/* 카카오톡 */
|
||||
.cta-kakao {
|
||||
background: #FEE500;
|
||||
color: #3C1E1E;
|
||||
}
|
||||
|
||||
.cta-kakao svg {
|
||||
fill: #3C1E1E;
|
||||
}
|
||||
|
||||
.cta-kakao:hover {
|
||||
background: #f5dc00;
|
||||
}
|
||||
|
||||
/* 전화 */
|
||||
.cta-phone {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.cta-phone:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
/* 문의 페이지 */
|
||||
.cta-contact {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.cta-contact:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.floating-cta {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.cta-main-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cta-option {
|
||||
padding: 8px 14px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
접근성
|
||||
======================================== */
|
||||
@ -1507,6 +1662,15 @@ body {
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* 다크 모드 플로팅 CTA */
|
||||
[data-theme="dark"] .cta-main-btn {
|
||||
box-shadow: 0 4px 18px rgba(255, 136, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cta-option {
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-light {
|
||||
background: var(--dark-bg);
|
||||
}
|
||||
|
||||
13
i18n/en.json
13
i18n/en.json
@ -34,7 +34,11 @@
|
||||
"skipToContent": "Skip to content",
|
||||
"videoLoading": "Loading video...",
|
||||
"videoError": "Unable to load video",
|
||||
"imageError": "Unable to load image"
|
||||
"imageError": "Unable to load image",
|
||||
"floatingCTA": "Contact Us",
|
||||
"floatingKakao": "KakaoTalk Chat",
|
||||
"floatingPhone": "Call Us",
|
||||
"floatingContact": "Contact Page"
|
||||
},
|
||||
"index": {
|
||||
"meta": {
|
||||
@ -131,7 +135,8 @@
|
||||
"title": "New to Motion Capture?",
|
||||
"desc": "No worries if it's your first time. We've organized frequently asked questions from booking to filming.",
|
||||
"btnFaq": "View FAQ",
|
||||
"btnContact": "1:1 Inquiry"
|
||||
"btnContact": "1:1 Inquiry",
|
||||
"btnOnline": "Online Inquiry Page"
|
||||
},
|
||||
"cta": {
|
||||
"label": "Get Started",
|
||||
@ -142,8 +147,8 @@
|
||||
"infoReservation": "Reservations",
|
||||
"infoBusiness": "Business",
|
||||
"infoDiscord": "Discord",
|
||||
"infoDirections": "Directions",
|
||||
"infoAddress": "236 Jubuto-ro, Bupyeong-gu, Incheon Techno Valley"
|
||||
"infoKakao": "KakaoTalk",
|
||||
"infoKakaoDesc": "Open Chat Consultation"
|
||||
},
|
||||
"popup": {
|
||||
"title": "Pricing Update Notice",
|
||||
|
||||
13
i18n/ja.json
13
i18n/ja.json
@ -34,7 +34,11 @@
|
||||
"skipToContent": "本文へスキップ",
|
||||
"videoLoading": "動画を読み込み中...",
|
||||
"videoError": "動画を読み込めません",
|
||||
"imageError": "画像を読み込めません"
|
||||
"imageError": "画像を読み込めません",
|
||||
"floatingCTA": "お問い合わせ",
|
||||
"floatingKakao": "KakaoTalkチャット",
|
||||
"floatingPhone": "電話でお問い合わせ",
|
||||
"floatingContact": "お問い合わせページ"
|
||||
},
|
||||
"index": {
|
||||
"meta": {
|
||||
@ -131,7 +135,8 @@
|
||||
"title": "初めてで不安ですか？",
|
||||
"desc": "モーションキャプチャーが初めてでも大丈夫です。予約から撮影までよくある質問をまとめました。",
|
||||
"btnFaq": "よくある質問を見る",
|
||||
"btnContact": "1:1お問い合わせ"
|
||||
"btnContact": "1:1お問い合わせ",
|
||||
"btnOnline": "オンラインお問い合わせページ"
|
||||
},
|
||||
"cta": {
|
||||
"label": "Get Started",
|
||||
@ -142,8 +147,8 @@
|
||||
"infoReservation": "ご予約",
|
||||
"infoBusiness": "ビジネス",
|
||||
"infoDiscord": "Discord",
|
||||
"infoDirections": "アクセス",
|
||||
"infoAddress": "仁川市富平区主夫吐路236、仁川テクノバレー"
|
||||
"infoKakao": "KakaoTalk",
|
||||
"infoKakaoDesc": "オープンチャットで相談"
|
||||
},
|
||||
"popup": {
|
||||
"title": "料金プラン変更のお知らせ",
|
||||
|
||||
13
i18n/ko.json
13
i18n/ko.json
@ -34,7 +34,11 @@
|
||||
"skipToContent": "본문 바로가기",
|
||||
"videoLoading": "비디오 로딩 중...",
|
||||
"videoError": "비디오를 로드할 수 없습니다",
|
||||
"imageError": "이미지를 불러올 수 없습니다"
|
||||
"imageError": "이미지를 불러올 수 없습니다",
|
||||
"floatingCTA": "문의하기",
|
||||
"floatingKakao": "카카오톡 상담",
|
||||
"floatingPhone": "전화 문의",
|
||||
"floatingContact": "문의 페이지"
|
||||
},
|
||||
"index": {
|
||||
"meta": {
|
||||
@ -131,7 +135,8 @@
|
||||
"title": "처음이라 막막하신가요?",
|
||||
"desc": "모션캡쳐가 처음이어도 괜찮습니다. 예약부터 촬영까지 자주 묻는 질문을 정리했어요.",
|
||||
"btnFaq": "자주 묻는 질문 보기",
|
||||
"btnContact": "1:1 문의하기"
|
||||
"btnContact": "1:1 문의하기",
|
||||
"btnOnline": "온라인 문의하기"
|
||||
},
|
||||
"cta": {
|
||||
"label": "Get Started",
|
||||
@ -142,8 +147,8 @@
|
||||
"infoReservation": "예약 문의",
|
||||
"infoBusiness": "비즈니스",
|
||||
"infoDiscord": "Discord",
|
||||
"infoDirections": "오시는 길",
|
||||
"infoAddress": "인천 부평구 주부토로 236, 인천테크노밸리"
|
||||
"infoKakao": "카카오톡",
|
||||
"infoKakaoDesc": "오픈채팅 상담하기"
|
||||
},
|
||||
"popup": {
|
||||
"title": "요금제 변경 안내",
|
||||
|
||||
13
i18n/zh.json
13
i18n/zh.json
@ -34,7 +34,11 @@
|
||||
"skipToContent": "跳转到正文",
|
||||
"videoLoading": "视频加载中...",
|
||||
"videoError": "无法加载视频",
|
||||
"imageError": "无法加载图片"
|
||||
"imageError": "无法加载图片",
|
||||
"floatingCTA": "咨询",
|
||||
"floatingKakao": "KakaoTalk咨询",
|
||||
"floatingPhone": "电话咨询",
|
||||
"floatingContact": "咨询页面"
|
||||
},
|
||||
"index": {
|
||||
"meta": {
|
||||
@ -131,7 +135,8 @@
|
||||
"title": "第一次不知道怎么做？",
|
||||
"desc": "即使是第一次接触动作捕捉也没关系。我们整理了从预约到拍摄的常见问题。",
|
||||
"btnFaq": "查看常见问题",
|
||||
"btnContact": "1:1 咨询"
|
||||
"btnContact": "1:1 咨询",
|
||||
"btnOnline": "在线咨询页面"
|
||||
},
|
||||
"cta": {
|
||||
"label": "Get Started",
|
||||
@ -142,8 +147,8 @@
|
||||
"infoReservation": "预约咨询",
|
||||
"infoBusiness": "商务合作",
|
||||
"infoDiscord": "Discord",
|
||||
"infoDirections": "交通指南",
|
||||
"infoAddress": "仁川市富平区主夫吐路236，仁川科技谷"
|
||||
"infoKakao": "KakaoTalk",
|
||||
"infoKakaoDesc": "开放聊天咨询"
|
||||
},
|
||||
"popup": {
|
||||
"title": "价格调整通知",
|
||||
|
||||
144
index.html
144
index.html
@ -179,6 +179,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/popup.css?v=2">
|
||||
<link rel="stylesheet" href="css/contact.css">
|
||||
|
||||
|
||||
|
||||
@ -828,12 +829,146 @@
|
||||
</div>
|
||||
<div class="faq-shortcut-actions">
|
||||
<a href="/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">자주 묻는 질문 보기</a>
|
||||
<a href="/contact" class="btn btn-ghost btn-lg" data-i18n="index.faqShortcut.btnContact">1:1 문의하기</a>
|
||||
<a href="#inline-contact" class="btn btn-outline btn-lg" data-i18n="index.faqShortcut.btnOnline"><i class="fa-solid fa-paper-plane" style="margin-right:6px"></i>온라인 문의하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 온라인 문의 폼 (메인 페이지 임베드) -->
|
||||
<section class="section" id="inline-contact">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 data-i18n="contact.form.title">온라인 문의</h2>
|
||||
<p data-i18n="contact.form.desc">아래 양식을 작성하시면 빠르게 답변 드리겠습니다</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-form-wrapper">
|
||||
<form id="contactForm" class="contact-form" novalidate>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="name" data-i18n="contact.form.name">이름 <span class="required">*</span></label>
|
||||
<input type="text" id="name" name="name" required placeholder="홍길동" data-i18n-placeholder="contact.form.namePlaceholder">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" data-i18n="contact.form.email">이메일 <span class="required">*</span></label>
|
||||
<input type="email" id="email" name="email" required placeholder="example@email.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="phone" data-i18n="contact.form.phone">전화번호</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="010-0000-0000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="service" data-i18n="contact.form.service">문의 유형 <span class="required">*</span></label>
|
||||
<select id="service" name="service" required>
|
||||
<option value="" data-i18n="contact.form.serviceDefault">선택해주세요</option>
|
||||
<option value="studio_rental" data-i18n="contact.form.serviceRental">스튜디오 대관</option>
|
||||
<option value="motion_recording" data-i18n="contact.form.serviceMotion">모션 녹화</option>
|
||||
<option value="music_video" data-i18n="contact.form.serviceMV">뮤직비디오 제작</option>
|
||||
<option value="partnership" data-i18n="contact.form.servicePartner">제휴/협력</option>
|
||||
<option value="other" data-i18n="contact.form.serviceOther">기타</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message" data-i18n="contact.form.message">문의 내용 <span class="required">*</span></label>
|
||||
<textarea id="message" name="message" required rows="5" placeholder="프로젝트 내용, 희망 일정 등을 자유롭게 작성해주세요" data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
|
||||
<p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ 주민등록번호, 계좌번호 등 민감한 개인정보를 입력하지 마세요.</p>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="privacyConsent" name="privacyConsent" required>
|
||||
<span class="checkmark"></span>
|
||||
<span data-i18n="contact.form.privacyAgree">개인정보 수집 및 이용에 동의합니다. (필수)</span>
|
||||
</label>
|
||||
<a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">개인정보 처리방침 보기</a>
|
||||
</div>
|
||||
|
||||
<div class="privacy-summary">
|
||||
<ul>
|
||||
<li data-i18n="contact.form.privacyPurpose">수집 목적: 문의 접수 및 답변</li>
|
||||
<li data-i18n="contact.form.privacyItems">수집 항목: 이름, 이메일, 전화번호, 문의 내용</li>
|
||||
<li data-i18n="contact.form.privacyPeriod">보유 기간: 7일 후 자동 파기</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="form-submit">
|
||||
<button type="submit" id="submitBtn" class="btn btn-primary btn-lg btn-submit-disabled" disabled data-i18n="contact.form.submit">문의 보내기</button>
|
||||
<button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">초기화</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 개인정보처리방침 모달 -->
|
||||
<div id="privacyModal" class="modal" onclick="if(event.target===this)closePrivacyModal()" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="privacyModalTitle">개인정보 수집 및 이용 동의서</h3>
|
||||
<button class="modal-close" onclick="closePrivacyModal()" aria-label="닫기">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>밍글 스튜디오(이하 "회사")는 「개인정보 보호법」에 따라 고객의 개인정보를 보호하고 이와 관련한 고충을 신속하게 처리하기 위하여 다음과 같이 개인정보 수집 및 이용에 대한 동의를 구합니다.</p>
|
||||
<h4>1. 개인정보의 수집 및 이용 목적</h4>
|
||||
<p>회사는 다음의 목적을 위하여 개인정보를 처리합니다.</p>
|
||||
<ul><li>고객 문의 접수 및 답변 제공</li><li>서비스 상담 및 견적 안내</li><li>문의 처리 결과 통보</li></ul>
|
||||
<h4>2. 수집하는 개인정보의 항목</h4>
|
||||
<ul><li><strong>필수 항목:</strong> 이름, 이메일 주소, 문의 유형, 문의 내용</li><li><strong>선택 항목:</strong> 전화번호</li></ul>
|
||||
<p style="color: #ef4444; font-size: 0.85rem;">※ 문의 내용에 주민등록번호, 계좌번호 등 민감한 개인정보가 포함되지 않도록 유의해 주시기 바랍니다.</p>
|
||||
<h4>3. 개인정보의 보유 및 이용 기간</h4>
|
||||
<p>수집된 개인정보는 <strong>문의 접수일로부터 7일간</strong> 보유하며, 보유 기간 경과 후 자동으로 파기됩니다.</p>
|
||||
<h4>4. 개인정보의 파기 절차 및 방법</h4>
|
||||
<ul><li><strong>파기 절차:</strong> 보유 기간이 경과한 개인정보는 자동 삭제 시스템에 의해 지체 없이 파기됩니다.</li><li><strong>파기 방법:</strong> 전자적 파일 형태의 정보는 복구 및 재생할 수 없도록 완전 삭제합니다.</li></ul>
|
||||
<h4>5. 개인정보의 제3자 제공 및 국외 이전</h4>
|
||||
<p>회사는 원칙적으로 이용자의 개인정보를 제3자에게 제공하지 않습니다. 다만, 문의 처리를 위해 다음과 같이 개인정보가 국외로 이전됩니다. (「개인정보 보호법」 제28조의8)</p>
|
||||
<ul><li><strong>이전되는 국가 및 수신자:</strong> 미국 / Discord Inc.</li><li><strong>이전 일시 및 방법:</strong> 문의 접수 시 전용 API(인터넷 망)를 통해 실시간 전송</li><li><strong>이전 항목:</strong> 이름, 이메일, 전화번호(선택), 문의 유형, 문의 내용</li><li><strong>이전 목적:</strong> 업무용 협업 툴(Discord)을 이용한 신속한 문의 확인 및 응대</li><li><strong>보유 및 이용 기간:</strong> 전송 후 7일간 보관 후 자동 파기</li></ul>
|
||||
<h4>6. 정보주체의 권리·의무</h4>
|
||||
<p>이용자는 개인정보 주체로서 다음과 같은 권리를 행사할 수 있습니다.</p>
|
||||
<ul><li>개인정보 열람 요구</li><li>오류 등이 있을 경우 정정 요구</li><li>삭제 요구</li><li>처리정지 요구</li></ul>
|
||||
<h4>7. 개인정보의 안전성 확보 조치</h4>
|
||||
<ul><li>전송 데이터 암호화 (HTTPS/TLS)</li><li>접근 권한 제한 (지정된 관리자만 열람 가능)</li><li>자동 삭제 시스템 운영 (7일 후 파기)</li></ul>
|
||||
<h4>8. 동의 거부 권리 및 불이익</h4>
|
||||
<p>이용자는 개인정보 수집 및 이용에 대한 동의를 거부할 권리가 있습니다. 다만, 필수 항목에 대한 동의를 거부하실 경우 문의 접수 서비스 이용이 제한됩니다.</p>
|
||||
<h4>9. 개인정보 보호책임자</h4>
|
||||
<ul><li><strong>성명:</strong> 김희진</li><li><strong>직위:</strong> 대표</li><li><strong>이메일:</strong> minglestudio@minglestudio.co.kr</li><li><strong>전화:</strong> 010-9288-9190</li></ul>
|
||||
<h4>10. 개인정보처리방침의 변경</h4>
|
||||
<p>이 개인정보처리방침은 2026년 3월 4일부터 적용됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openPrivacyModal() {
|
||||
var m = document.getElementById('privacyModal');
|
||||
if (!m) return;
|
||||
m.classList.add('active');
|
||||
m.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
function closePrivacyModal() {
|
||||
var m = document.getElementById('privacyModal');
|
||||
if (!m) return;
|
||||
m.classList.remove('active');
|
||||
m.style.display = '';
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var cb = document.getElementById('privacyConsent');
|
||||
var btn = document.getElementById('submitBtn');
|
||||
if (cb && btn) {
|
||||
cb.addEventListener('change', function() {
|
||||
btn.disabled = !cb.checked;
|
||||
btn.classList.toggle('btn-submit-disabled', !cb.checked);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- CTA 섹션 -->
|
||||
<section class="cta-section">
|
||||
<div class="cta-bg"></div>
|
||||
@ -871,10 +1006,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-quick-item">
|
||||
<span class="info-quick-icon"><i class="fa-solid fa-location-dot" aria-hidden="true"></i></span>
|
||||
<span class="info-quick-icon"><i class="fa-solid fa-comment" aria-hidden="true"></i></span>
|
||||
<div>
|
||||
<span class="info-quick-label" data-i18n="index.cta.infoDirections">오시는 길</span>
|
||||
<span class="info-quick-value" data-i18n="index.cta.infoAddress">인천 부평구 주부토로 236, 인천테크노밸리</span>
|
||||
<span class="info-quick-label" data-i18n="index.cta.infoKakao">카카오톡</span>
|
||||
<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener noreferrer" class="info-quick-value" data-i18n="index.cta.infoKakaoDesc">오픈채팅 상담하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -959,6 +1094,7 @@
|
||||
<!-- JavaScript -->
|
||||
<script src="js/i18n.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/contact.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/popup.js"></script>
|
||||
|
||||
|
||||
50
js/common.js
50
js/common.js
@ -28,6 +28,7 @@ document.addEventListener('DOMContentLoaded', async function() {
|
||||
initLazyLoading();
|
||||
initRevealAnimations();
|
||||
createFloatingSNS();
|
||||
createFloatingCTA();
|
||||
hidePageLoading();
|
||||
// 컴포넌트 로드 후 스크롤 위치 보정
|
||||
if (window.scrollY > 0 && !window.location.hash) {
|
||||
@ -385,6 +386,55 @@ function createFloatingSNS() {
|
||||
document.body.appendChild(snsContainer);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 플로팅 CTA (문의하기) 버튼
|
||||
// ========================================
|
||||
function createFloatingCTA() {
|
||||
if (document.querySelector('.floating-cta')) return;
|
||||
// contact 페이지에서는 표시하지 않음
|
||||
if (window.location.pathname.includes('contact')) return;
|
||||
|
||||
var _t = function(key, fallback) {
|
||||
return (window.i18n && window.i18n.t) ? window.i18n.t(key, fallback) : fallback;
|
||||
};
|
||||
|
||||
var cta = document.createElement('div');
|
||||
cta.className = 'floating-cta';
|
||||
cta.innerHTML =
|
||||
'<div class="cta-options">' +
|
||||
'<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener noreferrer" class="cta-option cta-kakao" title="' + _t('common.floatingKakao', '카카오톡 상담') + '">' +
|
||||
'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C6.477 3 2 6.463 2 10.691c0 2.724 1.8 5.113 4.508 6.457-.2.744-.723 2.694-.828 3.112-.13.517.19.51.399.371.164-.109 2.61-1.774 3.67-2.496.727.104 1.478.159 2.251.159 5.523 0 10-3.463 10-7.603C22 6.463 17.523 3 12 3z"/></svg>' +
|
||||
'<span>' + _t('common.floatingKakao', '카카오톡 상담') + '</span>' +
|
||||
'</a>' +
|
||||
'<a href="tel:+82-10-9288-9190" class="cta-option cta-phone" title="' + _t('common.floatingPhone', '전화 문의') + '">' +
|
||||
'<i class="fa-solid fa-phone"></i>' +
|
||||
'<span>' + _t('common.floatingPhone', '전화 문의') + '</span>' +
|
||||
'</a>' +
|
||||
'<a href="/contact" class="cta-option cta-contact" title="' + _t('common.floatingContact', '문의 페이지') + '">' +
|
||||
'<i class="fa-solid fa-envelope"></i>' +
|
||||
'<span>' + _t('common.floatingContact', '문의 페이지') + '</span>' +
|
||||
'</a>' +
|
||||
'</div>' +
|
||||
'<button class="cta-main-btn" aria-label="' + _t('common.floatingCTA', '문의하기') + '">' +
|
||||
'<i class="fa-solid fa-headset cta-icon-open"></i>' +
|
||||
'<i class="fa-solid fa-xmark cta-icon-close"></i>' +
|
||||
'</button>';
|
||||
|
||||
document.body.appendChild(cta);
|
||||
|
||||
var mainBtn = cta.querySelector('.cta-main-btn');
|
||||
mainBtn.addEventListener('click', function() {
|
||||
cta.classList.toggle('active');
|
||||
});
|
||||
|
||||
// 외부 클릭 시 닫기
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!cta.contains(e.target)) {
|
||||
cta.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 다크모드 토글
|
||||
// ========================================
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user