사업제휴 스타일 적용
This commit is contained in:
현성필
@@ -1,99 +1,95 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
|
||||
|
||||
<body>
|
||||
|
||||
<section class="content" layout:fragment="contentFragment">
|
||||
<div class="content_wrap">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="page-header-content">
|
||||
<h1 class="page-title">
|
||||
<i class="fas fa-handshake"></i>
|
||||
사업 제휴 신청
|
||||
</h1>
|
||||
<p class="page-description">
|
||||
광주은행은 온라인 비즈니스 혁신을 위한 <span class="highlight">사업 제안을 환영</span>합니다.
|
||||
</p>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image" alt="타이틀 배경">
|
||||
<h1>사업 제휴</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="inquiry-form-container">
|
||||
|
||||
<!-- Title Bar -->
|
||||
<div class="register-title-bar">
|
||||
<h2 class="register-title">사업 제휴 신청</h2>
|
||||
<span class="register-subtitle">광주은행은 온라인 비즈니스 혁신을 위한 사업 제안을 환영합니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- Partnership Form Card -->
|
||||
<div class="partnership-form-container">
|
||||
<div class="card partnership-card">
|
||||
<!-- Form Content -->
|
||||
<div class="register-form-container">
|
||||
<form name="partnershipForm" id="partnershipForm" th:action="@{/partnership}" th:object="${partnership}"
|
||||
enctype="multipart/form-data" method="post">
|
||||
enctype="multipart/form-data" method="post" class="register-form">
|
||||
|
||||
<!-- 사업 제목 -->
|
||||
<div class="form-group">
|
||||
<label for="bizSubject">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
사업 제목
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<!-- 사업 제목 Field -->
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper label-offset">
|
||||
<span class="form-label-text">사업 제목</span>
|
||||
<span class="required-badge">필수</span>
|
||||
</div>
|
||||
<div class="form-field-wrapper">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="bizSubject"
|
||||
th:field="*{bizSubject}"
|
||||
class="form-input"
|
||||
placeholder="제안하고자 하시는 사업 제목을 입력해 주세요"
|
||||
required>
|
||||
<div class="form-error" th:if="${#fields.hasErrors('bizSubject')}" th:errors="*{bizSubject}">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
<span></span>
|
||||
required
|
||||
maxlength="200">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 사업 내용 -->
|
||||
<div class="form-group">
|
||||
<label for="bizDetail">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
사업 내용
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<textarea class="form-control"
|
||||
id="bizDetail"
|
||||
<!-- 사업 내용 Field -->
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper">
|
||||
<span class="form-label-text">사업 내용</span>
|
||||
<span class="required-badge">필수</span>
|
||||
</div>
|
||||
<div class="form-field-wrapper">
|
||||
<textarea id="bizDetail"
|
||||
th:field="*{bizDetail}"
|
||||
rows="8"
|
||||
placeholder="제안하고자 하시는 사업 내용을 상세히 입력해 주세요"
|
||||
required></textarea>
|
||||
<div class="form-hint">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
사업의 목적, 내용, 기대 효과 등을 구체적으로 작성해 주세요
|
||||
</div>
|
||||
<div class="form-error" th:if="${#fields.hasErrors('bizDetail')}" th:errors="*{bizDetail}">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
<span></span>
|
||||
class="form-textarea"
|
||||
rows="10"
|
||||
placeholder="제안하고자 하시는 사업 내용을 상세히 입력해 주세요 (사업의 목적, 내용, 기대 효과 등)"
|
||||
required
|
||||
maxlength="4000"></textarea>
|
||||
<small class="char-counter-wrapper">
|
||||
<span class="char-counter">0 / 4000</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 첨부파일 -->
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<i class="fas fa-paperclip"></i>
|
||||
첨부파일
|
||||
</label>
|
||||
<div class="file-upload-wrapper">
|
||||
<input type="text"
|
||||
class="file-name-display"
|
||||
value="첨부파일을 등록해 주세요"
|
||||
readonly>
|
||||
<label for="file" class="btn btn-primary">
|
||||
<i class="fas fa-upload"></i>
|
||||
파일 선택
|
||||
</label>
|
||||
<button type="button" class="file-remove-btn" style="display: none;">
|
||||
<i class="fas fa-times"></i>
|
||||
<!-- File Upload Field - Figma Design (node 1029-1507) -->
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper label-offset">
|
||||
<span class="form-label-text">첨부파일</span>
|
||||
</div>
|
||||
<div class="form-field-wrapper">
|
||||
<div class="file-upload-inline">
|
||||
<div class="file-input-display" id="fileInputDisplay">
|
||||
<span class="file-display-text" id="fileDisplayText">선택된 파일이 없습니다</span>
|
||||
<button type="button" class="btn-remove-file-inline" id="btnRemoveFile" title="파일 삭제" style="display: none;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn-file-attach" onclick="document.getElementById('file').click()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
파일첨부
|
||||
</button>
|
||||
<input type="file"
|
||||
id="file"
|
||||
name="files"
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.hwp,.gif,.jpg,.png">
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.hwp,.gif,.jpg,.jpeg,.png"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<div class="form-help-text">
|
||||
<!-- <p><i class="fas fa-check-circle"></i> 첨부파일은 10MB 이내로 등록해 주세요</p>-->
|
||||
<!-- <p><i class="fas fa-check-circle"></i> 문서파일과 이미지 파일만 등록 가능합니다 (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png)</p>-->
|
||||
|
||||
<p><i class="fas fa-check-circle"></i>
|
||||
<span th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</span>
|
||||
</p>
|
||||
@@ -103,33 +99,28 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 버튼 영역 -->
|
||||
<div class="form-actions">
|
||||
<a th:href="@{/}" id="cancelButton" class="action-btn-secondary">
|
||||
<i class="fas fa-times"></i>
|
||||
취소
|
||||
</a>
|
||||
<button type="button" class="btn btn-primary btn_register">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
제휴 신청
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
|
||||
<button type="button" class="btn btn-submit btn-primary btn-submit-form">
|
||||
<span>제휴 신청</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</th:block>
|
||||
</body>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:if="${error}" th:inline="javascript">
|
||||
$(document).ready(function () {
|
||||
const errorMsg = [[${error}]];
|
||||
const formattedMsg = errorMsg.replace(/\n/g,'<br>');
|
||||
$('#customAlertMessage').html(formattedMsg);
|
||||
$('#customAlert').css('display','flex');
|
||||
customPopups.showAlert(errorMsg);
|
||||
});
|
||||
</script>
|
||||
<script th:if="${success}" th:inline="javascript">
|
||||
@@ -139,28 +130,50 @@
|
||||
</script>
|
||||
<script th:inline="javascript">
|
||||
$(function () {
|
||||
const fnRegister = document.querySelector('.btn_register');
|
||||
const btnSubmit = document.querySelector('.btn-submit-form');
|
||||
const fileInput = document.getElementById('file');
|
||||
const fileNameInput = document.querySelector('.file-name-display');
|
||||
const fileRemoveBtn = document.querySelector('.file-remove-btn');
|
||||
const allowFileExtention = ['pdf','doc','docx','xls','xlsx','ppt','pptx','hwp','gif','jpg','png'];
|
||||
const fileDisplayText = document.getElementById('fileDisplayText');
|
||||
const fileInputDisplay = document.getElementById('fileInputDisplay');
|
||||
const btnRemoveFile = document.getElementById('btnRemoveFile');
|
||||
const bizDetailTextarea = document.getElementById('bizDetail');
|
||||
const charCounter = document.querySelector('.char-counter');
|
||||
|
||||
// Form submission
|
||||
fnRegister.addEventListener('click', function (event) {
|
||||
// Initialize character counter
|
||||
if (bizDetailTextarea && charCounter) {
|
||||
const currentLength = bizDetailTextarea.value.length;
|
||||
const maxLength = bizDetailTextarea.getAttribute('maxlength');
|
||||
charCounter.textContent = currentLength + ' / ' + maxLength;
|
||||
|
||||
// Character counter for textarea
|
||||
bizDetailTextarea.addEventListener('input', function() {
|
||||
const currentLength = this.value.length;
|
||||
const maxLength = this.getAttribute('maxlength');
|
||||
charCounter.textContent = currentLength + ' / ' + maxLength;
|
||||
|
||||
// Change color when near limit
|
||||
if (currentLength > maxLength * 0.9) {
|
||||
charCounter.style.color = '#FF6B6B';
|
||||
} else {
|
||||
charCounter.style.color = '#94A3B8';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
btnSubmit.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = document.getElementById('partnershipForm');
|
||||
const bizSubject = document.getElementById('bizSubject').value.trim();
|
||||
const bizDetail = document.getElementById('bizDetail').value.trim();
|
||||
const bizDetail = document.getElementById('bizDetail').value;
|
||||
|
||||
// Validation
|
||||
if (!bizSubject) {
|
||||
customPopups.showAlert('사업 제목을 작성해 주세요.');
|
||||
document.getElementById('bizSubject').focus();
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!bizDetail) {
|
||||
if (!bizDetail.trim()) {
|
||||
customPopups.showAlert('사업 내용을 작성해 주세요.');
|
||||
document.getElementById('bizDetail').focus();
|
||||
return false;
|
||||
@@ -169,57 +182,41 @@
|
||||
form.submit();
|
||||
});
|
||||
|
||||
// Auto focus on first field
|
||||
document.getElementById('bizSubject').focus();
|
||||
|
||||
// File validation functions
|
||||
function isValidFileExtention(filename) {
|
||||
const extention = filename.split('.').pop().toLowerCase();
|
||||
return allowFileExtention.includes(extention);
|
||||
}
|
||||
|
||||
function isValidFileSize(filesize) {
|
||||
const maxSize = 10 * 1024 * 1024; // 10MB
|
||||
return filesize <= maxSize;
|
||||
}
|
||||
|
||||
// File input change event
|
||||
// File input change handler
|
||||
fileInput.addEventListener('change', function () {
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (file) {
|
||||
// Validate file extension
|
||||
if (!isValidFileExtention(file.name)) {
|
||||
const errorMsg = '허용된 파일 형식이 아닙니다.<br>문서파일과 이미지 파일만 등록 가능합니다.<br>(pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png)';
|
||||
$('#customAlertMessage').html(errorMsg);
|
||||
$('#customAlert').css('display','flex');
|
||||
const allowedExtensions = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.hwp', '.gif', '.jpg', '.jpeg', '.png'];
|
||||
const fileExt = '.' + file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (!allowedExtensions.includes(fileExt)) {
|
||||
customPopups.showAlert("허용된 파일 형식이 아닙니다.\n문서파일(pdf, doc, docx, xls, xlsx, ppt, pptx, hwp)과 이미지 파일(gif, jpg, png)만 등록 가능합니다.");
|
||||
fileInput.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size
|
||||
if (!isValidFileSize(file.size)) {
|
||||
customPopups.showAlert('첨부파일은 10MB 이내로 등록해 주세요.');
|
||||
fileInput.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Update UI
|
||||
fileNameInput.value = file.name;
|
||||
fileNameInput.classList.add('has-file');
|
||||
fileRemoveBtn.style.display = 'inline-flex';
|
||||
// Show file name in display
|
||||
fileDisplayText.textContent = file.name;
|
||||
fileDisplayText.classList.add('has-file');
|
||||
fileInputDisplay.classList.add('has-file');
|
||||
btnRemoveFile.style.display = 'flex';
|
||||
}
|
||||
});
|
||||
|
||||
// File remove button click event
|
||||
fileRemoveBtn.addEventListener('click', function () {
|
||||
// File remove handler
|
||||
btnRemoveFile.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
fileInput.value = '';
|
||||
fileNameInput.value = '첨부파일을 등록해 주세요';
|
||||
fileNameInput.classList.remove('has-file');
|
||||
fileRemoveBtn.style.display = 'none';
|
||||
fileDisplayText.textContent = '선택된 파일이 없습니다';
|
||||
fileDisplayText.classList.remove('has-file');
|
||||
fileInputDisplay.classList.remove('has-file');
|
||||
btnRemoveFile.style.display = 'none';
|
||||
});
|
||||
|
||||
// Focus on subject field
|
||||
document.getElementById('bizSubject').focus();
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user