문의 emailJs 수정

src/main/resources/templates/kr/iotdoor/comn/site/layout/cmmnFooter.html

@@ -89,10 +89,100 @@
 					</div>
 				</div>
 			</div>
+			<div class="col-lg-3 col-md-6">
+				<h5 class="text-white mb-4">고객 안내</h5>
+				<p class="mb-3">
+					문의 접수 전 개인정보 처리방침과 이용약관을 확인하실 수 있습니다.
+				</p>
+				<div class="d-grid gap-2">
+					<button
+							type="button"
+							class="btn btn-outline-light rounded-pill"
+							data-coreui-toggle="modal"
+							data-coreui-target="#privacyPolicyModal"
+					>
+						개인정보 처리방침
+					</button>
+					<button
+							type="button"
+							class="btn btn-outline-light rounded-pill"
+							data-coreui-toggle="modal"
+							data-coreui-target="#termsOfUseModal"
+					>
+						이용약관
+					</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
 <!-- Footer End -->
 
+<div class="modal fade" id="privacyPolicyModal" tabindex="-1" aria-labelledby="privacyPolicyModalLabel" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-scrollable modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="privacyPolicyModalLabel">개인정보 처리방침</h5>
+				<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="닫기"></button>
+			</div>
+			<div class="modal-body">
+				<p class="mb-3">
+					<span th:text="${siteInfo.name}">국제오토텍</span>은 문의 접수 및 상담 응대를 위해 최소한의 개인정보만 수집합니다.
+				</p>
+				<h6 class="fw-bold">1. 수집 항목</h6>
+				<p>이름, 이메일 주소, 연락처, 문의 제목, 문의 내용, 접수 일시</p>
+
+				<h6 class="fw-bold mt-4">2. 수집 및 이용 목적</h6>
+				<p>문의 확인, 상담 진행, 답변 제공, 서비스 및 시공 관련 안내를 위해 사용합니다.</p>
+
+				<h6 class="fw-bold mt-4">3. 보관 기간</h6>
+				<p>문의 처리 완료 후 최대 1년간 보관하며, 관련 법령에 따라 별도 보관이 필요한 경우 해당 기간 동안 보관할 수 있습니다.</p>
+
+				<h6 class="fw-bold mt-4">4. 제3자 제공 및 외부 서비스 이용</h6>
+				<p>수집한 개인정보는 법령에 근거한 경우를 제외하고 외부에 제공하지 않습니다. 다만 문의 알림 메일 발송을 위해 EmailJS 등 외부 메일 전송 서비스를 이용할 수 있습니다.</p>
+
+				<h6 class="fw-bold mt-4">5. 동의 거부 권리</h6>
+				<p class="mb-0">이용자는 개인정보 수집 및 이용에 대한 동의를 거부할 수 있으나, 이 경우 온라인 문의 접수가 제한될 수 있습니다.</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-primary rounded-pill px-4" data-coreui-dismiss="modal">확인</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="modal fade" id="termsOfUseModal" tabindex="-1" aria-labelledby="termsOfUseModalLabel" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-scrollable modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="termsOfUseModalLabel">이용약관</h5>
+				<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="닫기"></button>
+			</div>
+			<div class="modal-body">
+				<p class="mb-3">
+					본 문의 서비스는 <span th:text="${siteInfo.name}">국제오토텍</span>의 상담 및 시공 문의 접수를 위한 서비스입니다.
+				</p>
+				<h6 class="fw-bold">1. 서비스 목적</h6>
+				<p>이용자는 온라인 문의 폼을 통해 상담, 견적, 시공 및 A/S 관련 문의를 접수할 수 있습니다.</p>
+
+				<h6 class="fw-bold mt-4">2. 작성 정보의 책임</h6>
+				<p>이용자는 본인이 입력한 이름, 이메일, 연락처, 문의 제목 및 내용의 정확성에 대해 책임을 집니다.</p>
+
+				<h6 class="fw-bold mt-4">3. 제한 사항</h6>
+				<p>허위 정보, 타인의 개인정보 도용, 광고성 내용, 불법 또는 부적절한 내용이 포함된 문의는 처리되지 않거나 삭제될 수 있습니다.</p>
+
+				<h6 class="fw-bold mt-4">4. 답변 및 처리</h6>
+				<p>문의는 접수 순서와 업무 상황에 따라 순차적으로 확인되며, 모든 문의에 대해 즉시 답변이 보장되지는 않습니다.</p>
+
+				<h6 class="fw-bold mt-4">5. 약관 변경</h6>
+				<p class="mb-0">본 약관은 서비스 운영상 필요에 따라 변경될 수 있으며, 주요 변경 사항은 사이트 내에 반영됩니다.</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-primary rounded-pill px-4" data-coreui-dismiss="modal">확인</button>
+			</div>
+		</div>
+	</div>
+</div>
+
 <!-- Back to Top -->
 <a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>

src/main/resources/templates/kr/iotdoor/comn/site/mainPge.html

@@ -339,17 +339,18 @@
                     <div class="p-lg-5 ps-lg-0">
                         <h6 class="text-primary">Contact Us</h6>
                         <p class="mb-4">내용을 자세하게 입력해주시면 상담진행시에 좀 더 원활하게 상담이 가능합니다. 연중무휴 24시간 주저말고 남겨주세요. </p>
-                        <form>
+                        <form id="contactForm">
+                            <input type="hidden" name="title" value="국제오토텍 문의 접수">
                             <div class="row g-3">
                                 <div class="col-md-6">
                                     <div class="form-floating">
-                                        <input type="text" class="form-control" id="name" placeholder="Your Name">
+                                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" value="김찬솔">
                                         <label for="name">Name</label>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-floating">
-                                        <input type="email" class="form-control" id="email" placeholder="Your Email" >
+                                        <input type="email" class="form-control" id="email" name="email" placeholder="Your Email" value="so__l91@naver.com">
                                         <label for="email">Email</label>
                                     </div>
                                     <div id="emailError" style="color:red; font-size:13px; display:none;">
@@ -358,7 +359,7 @@
                                 </div>
                                 <div class="col-12">
                                     <div class="form-floating">
-                                        <input type="text" class="form-control" id="phone" placeholder="Phone" >
+                                        <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" value="010-7722-0709">
                                         <label for="subject">Phone</label>
                                     </div>
                                     <div id="phoneError" style="color:red; font-size:13px; display:none;">
@@ -367,18 +368,18 @@
                                 </div>
                                 <div class="col-12">
                                     <div class="form-floating">
-                                        <input type="text" class="form-control" id="subject" placeholder="Subject">
+                                        <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" value="제목324">
                                         <label for="subject">Subject</label>
                                     </div>
                                 </div>
                                 <div class="col-12">
                                     <div class="form-floating">
-                                        <textarea class="form-control" placeholder="Leave a message here" id="message" style="height: 100px"></textarea>
+                                        <textarea class="form-control" placeholder="Leave a message here" id="message" name="message" style="height: 100px">내용324234</textarea>
                                         <label for="message">Message</label>
                                     </div>
                                 </div>
                                 <div class="col-12">
-                                    <button id="btnSendMail" class="btn btn-primary rounded-pill py-3 px-5" type="button">Send Message</button>
+                                    <button id="btnSendMail" class="btn btn-primary rounded-pill py-3 px-5" type="submit">Send Message</button>
                                 </div>
                             </div>
                         </form>
@@ -396,6 +397,7 @@
 
 <th:block layout:fragment="script">
     <script th:src="@{|https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${siteInfo.mapClientId}|}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
     <script th:inline="javascript">
         var map = null;
         const mapLatitude = /*[[${siteInfo.mapLatitude}]]*/ 36.2980733;