tui grid 드롭다운 버튼 기능 추가
박성영
4 months ago
parent
069d7c3fd1
commit
72bc009be7
File diff suppressed because it is too large
Load Diff
@ -1,74 +0,0 @@
|
||||
$.fn.dataTable.render.moment = function ( fmt ) {
|
||||
return function(d, type, row, meta) {
|
||||
if ( !d ) return '';
|
||||
return moment(d).format(fmt);
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.comma = function ( val ) {
|
||||
return function(d, type, row, meta) {
|
||||
var str = '';
|
||||
if ( !d ) return 0;
|
||||
str += numberWithCommas(d);
|
||||
|
||||
if ( val ) {
|
||||
str += val;
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.numbering = function ( orderType, totalCount ) {
|
||||
return function(d, type, row, meta) {
|
||||
var num = 0;
|
||||
if ( !orderType ) orderType = 'asc';
|
||||
console.log('totalCount : ', totalCount);
|
||||
if ( orderType == 'asc' ) {
|
||||
num = meta.row + 1;
|
||||
} else if ( orderType == 'desc' ) {
|
||||
num = totalCount - meta.row;
|
||||
} else {
|
||||
num = meta.row + 1;
|
||||
}
|
||||
|
||||
return num;
|
||||
}
|
||||
};
|
||||
|
||||
var numbering = function(pagingInfo, meta) {
|
||||
var no = 0;
|
||||
|
||||
var currentPageNo = 0;
|
||||
var recordCountPerPage = 0;
|
||||
var totalRecordCount = 0;
|
||||
|
||||
if ( pagingInfo ) {
|
||||
currentPageNo = nvl(pagingInfo.currentPageNo, 0);
|
||||
recordCountPerPage = nvl(pagingInfo.recordCountPerPage, 0);
|
||||
totalRecordCount = nvl(pagingInfo.totalRecordCount, 0);
|
||||
}
|
||||
|
||||
no = totalRecordCount - (((currentPageNo - 1) * recordCountPerPage) + meta.row);
|
||||
|
||||
var rtnHtml;
|
||||
rtnHtml = numberWithCommas(no);
|
||||
|
||||
return rtnHtml;
|
||||
}
|
||||
|
||||
var datatablesNumbering = function(meta, orderType, totalCount) {
|
||||
var num = 0;
|
||||
if ( !orderType ) orderType = 'asc';
|
||||
|
||||
if ( orderType == 'asc' ) {
|
||||
num = meta.row + 1;
|
||||
} else if ( orderType == 'desc' ) {
|
||||
num = totalCount - meta.row;
|
||||
} else {
|
||||
num = meta.row + 1;
|
||||
}
|
||||
|
||||
return numberWithCommas(num);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,246 +0,0 @@
|
||||
/**
|
||||
* 댓글 관리 모듈
|
||||
* 댓글 등록, 수정, 삭제 및 답글 기능을 제공합니다.
|
||||
*/
|
||||
(function(window, $) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* 댓글 관리 네임스페이스
|
||||
*/
|
||||
var CommentManager = {
|
||||
/**
|
||||
* 이벤트 핸들러 설정
|
||||
*/
|
||||
eventBindEvents: function() {
|
||||
var self = this;
|
||||
|
||||
// 댓글 등록 버튼 클릭 이벤트
|
||||
$('#btnCommentRegister').on('click', function() {
|
||||
self.registerComment();
|
||||
});
|
||||
|
||||
// 댓글/답글 수정 버튼 클릭 이벤트 (수정)
|
||||
$(document).on('click', '.xit-comment-edit', function() {
|
||||
var $commentItem = $(this).closest('.xit-comment-item');
|
||||
var $commentBody = $commentItem.find('> .xit-comment-body'); // 직접 자식 요소만 선택
|
||||
var $editForm = $commentItem.find('> .xit-comment-edit-form'); // 직접 자식 요소만 선택
|
||||
|
||||
$commentBody.hide();
|
||||
$editForm.show();
|
||||
});
|
||||
|
||||
// 댓글/답글 수정 취소 버튼 클릭 이벤트 (수정)
|
||||
$(document).on('click', '.xit-btn-cancel', function() {
|
||||
var $commentItem = $(this).closest('.xit-comment-item');
|
||||
var $commentBody = $commentItem.find('> .xit-comment-body'); // 직접 자식 요소만 선택
|
||||
var $editForm = $commentItem.find('> .xit-comment-edit-form'); // 직접 자식 요소만 선택
|
||||
var $replyForm = $commentItem.find('> .xit-comment-reply-form'); // 직접 자식 요소만 선택
|
||||
|
||||
$editForm.hide();
|
||||
$replyForm.hide();
|
||||
$commentBody.show();
|
||||
});
|
||||
|
||||
// 댓글/답글 수정 저장 버튼 클릭 이벤트 (수정)
|
||||
$(document).on('click', '.xit-btn-register', function() {
|
||||
var $commentItem = $(this).closest('.xit-comment-item');
|
||||
var $editForm = $commentItem.find('.xit-comment-edit-form');
|
||||
|
||||
// 수정 폼이 있는 경우에만 수정 처리
|
||||
if ($editForm.length > 0 && $editForm.is(':visible')) {
|
||||
var commentId = $commentItem.data('comment-id');
|
||||
var content = $commentItem.find('.xit-comment-edit-textarea').val();
|
||||
self.updateComment(commentId, content);
|
||||
}
|
||||
// 답글 폼이 있는 경우 답글 등록 처리
|
||||
else if ($commentItem.find('.xit-comment-reply-form').is(':visible')) {
|
||||
var parentCommentId = $commentItem.data('comment-id');
|
||||
var content = $commentItem.find('.xit-comment-reply-textarea').val();
|
||||
self.registerChildComment(parentCommentId, content);
|
||||
}
|
||||
});
|
||||
|
||||
// 댓글/답글 삭제 버튼 클릭 이벤트
|
||||
$(document).on('click', '.xit-comment-delete', function() {
|
||||
var $commentItem = $(this).closest('.xit-comment-item');
|
||||
var commentId = $commentItem.data('comment-id');
|
||||
self.deleteComment(commentId);
|
||||
});
|
||||
|
||||
// 댓글 답글 버튼 클릭 이벤트
|
||||
$(document).on('click', '.xit-comment-reply', function() {
|
||||
var $commentItem = $(this).closest('.xit-comment-item');
|
||||
$commentItem.find('.xit-comment-reply-form').toggle();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* URL 경로 생성 (관리자/사용자 구분)
|
||||
*/
|
||||
getUrlPrefix: function() {
|
||||
// 현재 경로에서 관리자/사용자 구분
|
||||
var currentPath = window.location.pathname;
|
||||
return currentPath.includes('/bbs/manage/') ? '/bbs/manage/post/' : '/bbs/user/post/';
|
||||
},
|
||||
|
||||
/**
|
||||
* 댓글 등록
|
||||
*/
|
||||
registerComment: function() {
|
||||
var self = this;
|
||||
var content = $('#commentContent').val();
|
||||
|
||||
if (!content) {
|
||||
alert('댓글 내용을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 페이지에서 설정된 데이터 가져오기
|
||||
var bbsId = $('#commentArea').data('bbs-id');
|
||||
var postId = $('#commentArea').data('post-id');
|
||||
var urlPrefix = this.getUrlPrefix();
|
||||
|
||||
$.ajax({
|
||||
url: urlPrefix + bbsId + '/comment/register.ajax',
|
||||
type: 'POST',
|
||||
data: {
|
||||
postId: postId,
|
||||
content: content
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.result) {
|
||||
alert('댓글이 성공적으로 등록되었습니다.');
|
||||
location.reload();
|
||||
} else {
|
||||
alert(response.message || '댓글 등록에 실패했습니다.');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// 에러 처리는 xit-common.js의 ajaxError에서 처리됨
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 댓글 수정
|
||||
*/
|
||||
updateComment: function(commentId, content) {
|
||||
var self = this;
|
||||
|
||||
if (!content) {
|
||||
alert('댓글 내용을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 페이지에서 설정된 데이터 가져오기
|
||||
var bbsId = $('#commentArea').data('bbs-id');
|
||||
var urlPrefix = this.getUrlPrefix();
|
||||
|
||||
$.ajax({
|
||||
url: urlPrefix + bbsId + '/comment/edit.ajax',
|
||||
type: 'POST',
|
||||
data: {
|
||||
commentId: commentId,
|
||||
content: content
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.result) {
|
||||
alert('댓글이 성공적으로 수정되었습니다.');
|
||||
location.reload();
|
||||
} else {
|
||||
alert(response.message || '댓글 수정에 실패했습니다.');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// 에러 처리는 xit-common.js의 ajaxError에서 처리됨
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 댓글 삭제
|
||||
*/
|
||||
deleteComment: function(commentId) {
|
||||
var self = this;
|
||||
|
||||
if (confirm('댓글을 삭제하시겠습니까?')) {
|
||||
// 페이지에서 설정된 데이터 가져오기
|
||||
var bbsId = $('#commentArea').data('bbs-id');
|
||||
var urlPrefix = this.getUrlPrefix();
|
||||
|
||||
$.ajax({
|
||||
url: urlPrefix + bbsId + '/comment/delete.ajax',
|
||||
type: 'POST',
|
||||
data: { commentId: commentId },
|
||||
success: function(response) {
|
||||
if (response.result) {
|
||||
alert('댓글이 성공적으로 삭제되었습니다.');
|
||||
location.reload();
|
||||
} else {
|
||||
alert(response.message || '댓글 삭제에 실패했습니다.');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// 에러 처리는 xit-common.js의 ajaxError에서 처리됨
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 대댓글 등록
|
||||
*/
|
||||
registerChildComment: function(parentCommentId, content) {
|
||||
var self = this;
|
||||
|
||||
if (!content) {
|
||||
alert('댓글 내용을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 페이지에서 설정된 데이터 가져오기
|
||||
var bbsId = $('#commentArea').data('bbs-id');
|
||||
var postId = $('#commentArea').data('post-id');
|
||||
var urlPrefix = this.getUrlPrefix();
|
||||
|
||||
$.ajax({
|
||||
url: urlPrefix + bbsId + '/comment/register.ajax',
|
||||
type: 'POST',
|
||||
data: {
|
||||
postId: postId,
|
||||
parentCommentId: parentCommentId,
|
||||
content: content
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.result) {
|
||||
alert('답글이 성공적으로 등록되었습니다.');
|
||||
location.reload();
|
||||
} else {
|
||||
alert(response.message || '답글 등록에 실패했습니다.');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// 에러 처리는 xit-common.js의 ajaxError에서 처리됨
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 모듈 초기화
|
||||
*/
|
||||
init: function() {
|
||||
// 이벤트 핸들러 설정
|
||||
this.eventBindEvents();
|
||||
}
|
||||
};
|
||||
|
||||
// 페이지 로드 시 댓글 관리 모듈 초기화
|
||||
$(function() {
|
||||
CommentManager.init();
|
||||
});
|
||||
|
||||
// 전역 네임스페이스에 모듈 노출
|
||||
window.CommentManager = CommentManager;
|
||||
|
||||
})(window, jQuery);
|
||||
@ -1,582 +0,0 @@
|
||||
/* imageModify.jsp에서 분리된 스타일 */
|
||||
.img-container {
|
||||
max-height: 500px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 상단 도구 영역 */
|
||||
.top-toolbar {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: #ecf0f1;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.top-toolbar h3 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.toolbar-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tool-section {
|
||||
background: rgba(255,255,255,0.08);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.tool-section h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.tool-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tool-buttons button {
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: #ecf0f1;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tool-buttons button:hover {
|
||||
background: rgba(255,255,255,0.18);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.tool-buttons button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tool-buttons button.active {
|
||||
background: rgba(255,255,255,0.22);
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
min-width: 50px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.input-group input, .input-group select {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: #ecf0f1;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
width: 80px;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: rgba(236, 240, 241, 0.6);
|
||||
}
|
||||
|
||||
.input-group input:focus, .input-group select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255,255,255,0.4);
|
||||
background: rgba(255,255,255,0.15);
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.input-group button {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
color: #ecf0f1;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input-group button:hover {
|
||||
background: rgba(255,255,255,0.22);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.ratio-label {
|
||||
font-size: 12px;
|
||||
color: #ecf0f1;
|
||||
opacity: 0.9;
|
||||
margin-left: 5px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.input-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 메인 편집 영역 */
|
||||
.main-edit-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.edit-canvas {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.edit-sidebar {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.edit-sidebar h4 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.size-info {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.size-info p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 결과 영역 */
|
||||
.result-container {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
margin-top: 25px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.result-container h4 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-image {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.result-image:focus {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.result-image:hover {
|
||||
transform: scale(1.02);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-actions .newbtn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.result-actions .newbtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* 상태 메시지 */
|
||||
.status-message {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: #d4edda;
|
||||
border-color: #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status-message.processing {
|
||||
background: #fff3cd;
|
||||
border-color: #ffeaa7;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* 업로드 섹션 */
|
||||
.upload-section {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.upload-section h3 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upload-section .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.upload-section .input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-section .input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.upload-section .help-text {
|
||||
color: #6c757d;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.main-edit-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.input-group input, .input-group select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tool-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.result-actions .newbtn {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.top-toolbar {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.tool-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 모바일에서 결과 이미지 크기 조정 */
|
||||
.result-image {
|
||||
max-height: 400px; /* 모바일에서는 더 작게 */
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cropper.js 기본 선택영역 스타일 오버라이드 */
|
||||
.cropper-view-box {
|
||||
outline: 2px solid #667eea;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cropper-face {
|
||||
background-color: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* gs_b_top 업로드 영역 스타일 */
|
||||
.gs_b_top {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.gs_b_top ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gs_b_top li {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gs_b_top .th {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.gs_b_top .input {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
background: #ffffff;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.gs_b_top .input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.gs_b_top .help-text {
|
||||
color: #6c757d;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
padding: 4px 8px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border-left: 2px solid #667eea;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 파일 입력 필드 스타일 */
|
||||
.gs_b_top input[type="file"] {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 250px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.gs_b_top input[type="file"]:hover {
|
||||
border-color: #667eea;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.gs_b_top input[type="file"]:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 파일 입력 필드 내부 텍스트 스타일 */
|
||||
.gs_b_top input[type="file"]::file-selector-button {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #202342;
|
||||
border-radius: 3px;
|
||||
background: #202342;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.gs_b_top input[type="file"]::file-selector-button:hover {
|
||||
background: #1a1d35;
|
||||
border-color: #1a1d35;
|
||||
}
|
||||
|
||||
/* 유효성 검사 스타일 */
|
||||
.input-error {
|
||||
border-color: #dc3545 !important;
|
||||
background-color: #fff5f5 !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.input-error:focus {
|
||||
border-color: #dc3545 !important;
|
||||
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.input-error::placeholder {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
color: #dc3545;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
padding: 2px 6px;
|
||||
background: #fff5f5;
|
||||
border: 1px solid #feb2b2;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 입력 그룹 내 validation 메시지 위치 조정 */
|
||||
.input-group .validation-message {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 결과 헤더 스타일 */
|
||||
.result-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result-header h4 {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-header .newbtn {
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@ -1,582 +0,0 @@
|
||||
/* imageModify.jsp에서 분리된 스타일 */
|
||||
.img-container {
|
||||
max-height: 500px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 상단 도구 영역 */
|
||||
.top-toolbar {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
color: #ecf0f1;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.top-toolbar h3 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.toolbar-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tool-section {
|
||||
background: rgba(255,255,255,0.08);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.tool-section h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.tool-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tool-buttons button {
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: #ecf0f1;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tool-buttons button:hover {
|
||||
background: rgba(255,255,255,0.18);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.tool-buttons button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tool-buttons button.active {
|
||||
background: rgba(255,255,255,0.22);
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
min-width: 50px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.input-group input, .input-group select {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: #ecf0f1;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
width: 80px;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: rgba(236, 240, 241, 0.6);
|
||||
}
|
||||
|
||||
.input-group input:focus, .input-group select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255,255,255,0.4);
|
||||
background: rgba(255,255,255,0.15);
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.input-group button {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
color: #ecf0f1;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input-group button:hover {
|
||||
background: rgba(255,255,255,0.22);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.ratio-label {
|
||||
font-size: 12px;
|
||||
color: #ecf0f1;
|
||||
opacity: 0.9;
|
||||
margin-left: 5px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.input-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 메인 편집 영역 */
|
||||
.main-edit-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.edit-canvas {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.edit-sidebar {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.edit-sidebar h4 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.size-info {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.size-info p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 결과 영역 */
|
||||
.result-container {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
margin-top: 25px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.result-container h4 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-image {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.result-image:focus {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.result-image:hover {
|
||||
transform: scale(1.02);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-actions .newbtn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.result-actions .newbtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* 상태 메시지 */
|
||||
.status-message {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: #d4edda;
|
||||
border-color: #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status-message.processing {
|
||||
background: #fff3cd;
|
||||
border-color: #ffeaa7;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* 업로드 섹션 */
|
||||
.upload-section {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.upload-section h3 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upload-section .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.upload-section .input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-section .input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.upload-section .help-text {
|
||||
color: #6c757d;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.main-edit-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.input-group input, .input-group select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tool-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.result-actions .newbtn {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.top-toolbar {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.tool-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 모바일에서 결과 이미지 크기 조정 */
|
||||
.result-image {
|
||||
max-height: 400px; /* 모바일에서는 더 작게 */
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cropper.js 기본 선택영역 스타일 오버라이드 */
|
||||
.cropper-view-box {
|
||||
outline: 2px solid #667eea;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cropper-face {
|
||||
background-color: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* gs_b_top 업로드 영역 스타일 */
|
||||
.gs_b_top {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.gs_b_top ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gs_b_top li {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gs_b_top .th {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.gs_b_top .input {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
background: #ffffff;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.gs_b_top .input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.gs_b_top .help-text {
|
||||
color: #6c757d;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
padding: 4px 8px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border-left: 2px solid #667eea;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 파일 입력 필드 스타일 */
|
||||
.gs_b_top input[type="file"] {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 250px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.gs_b_top input[type="file"]:hover {
|
||||
border-color: #667eea;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.gs_b_top input[type="file"]:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 파일 입력 필드 내부 텍스트 스타일 */
|
||||
.gs_b_top input[type="file"]::file-selector-button {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #202342;
|
||||
border-radius: 3px;
|
||||
background: #202342;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.gs_b_top input[type="file"]::file-selector-button:hover {
|
||||
background: #1a1d35;
|
||||
border-color: #1a1d35;
|
||||
}
|
||||
|
||||
/* 유효성 검사 스타일 */
|
||||
.input-error {
|
||||
border-color: #dc3545 !important;
|
||||
background-color: #fff5f5 !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.input-error:focus {
|
||||
border-color: #dc3545 !important;
|
||||
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.input-error::placeholder {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
color: #dc3545;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
padding: 2px 6px;
|
||||
background: #fff5f5;
|
||||
border: 1px solid #feb2b2;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 입력 그룹 내 validation 메시지 위치 조정 */
|
||||
.input-group .validation-message {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 결과 헤더 스타일 */
|
||||
.result-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result-header h4 {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-header .newbtn {
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@ -1,266 +0,0 @@
|
||||
/* 전체 페이지 레벨에서 스크롤 방지 */
|
||||
.main_body {
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.main_bars {
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.bgs-main {
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Fabric.js 이미지 편집기 스타일 */
|
||||
.image-editor-container {
|
||||
width: 100% !important;
|
||||
height: 780px;
|
||||
border: 1px solid #ddd;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
cursor: default;
|
||||
max-width: none !important;
|
||||
min-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* 상위 객체들의 제한 해제 */
|
||||
.box_column {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.gs_booking {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.contants_body {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
max-width: none !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.canvas-container canvas {
|
||||
cursor: crosshair;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Fabric.js 캔버스 요소들에 대한 스타일 */
|
||||
.canvas-container .upper-canvas,
|
||||
.canvas-container .lower-canvas {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
margin: 2px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
background: #f8f9fa;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toolbar button:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.toolbar button.active {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.toolbar button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.toolbar-group:last-child {
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
background: #28a745 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
background: #218838 !important;
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.zoom-controls button {
|
||||
margin: 2px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ddd;
|
||||
background: #f8f9fa;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.zoom-controls button:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mosaic-controls {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mosaic-controls input[type="range"] {
|
||||
width: 100px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.mosaic-controls label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mosaic-controls {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.tui-image-editor-header-logo {
|
||||
display: none !important;
|
||||
}
|
||||
Loading…
Reference in New Issue