hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
345 lines
12 KiB
PHP
345 lines
12 KiB
PHP
<?php
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Drawing Module Test - 그리기 모듈 테스트</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
|
|
<!-- Drawing Module CSS -->
|
|
<link href="css/drawingModule.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
.test-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.result-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-top: 20px;
|
|
min-height: 200px;
|
|
}
|
|
.result-image {
|
|
max-width: 100%;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
.info-box {
|
|
background: #e9ecef;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.demo-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
pre {
|
|
background: #f4f4f4;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
.feature-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
.feature-list li {
|
|
padding: 5px 0;
|
|
}
|
|
.feature-list li:before {
|
|
content: "✓ ";
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1 class="mb-4">
|
|
<i class="bi bi-brush"></i> Drawing Module Test
|
|
</h1>
|
|
|
|
<div class="info-box">
|
|
<h4>그리기 모듈 테스트 페이지</h4>
|
|
<p>이 페이지는 독립적인 그리기 모듈(DrawingModule)의 기능을 테스트하기 위한 페이지입니다.</p>
|
|
<p class="mb-0">아래 버튼들을 클릭하여 다양한 설정으로 그리기 모듈을 실행해보세요.</p>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">테스트 버튼</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="demo-buttons">
|
|
<button type="button" class="btn btn-primary" onclick="openBasicDrawing()">
|
|
<i class="bi bi-pencil"></i> 기본 그리기
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-success" onclick="openLargeCanvas()">
|
|
<i class="bi bi-arrows-fullscreen"></i> 큰 캔버스 (640x480)
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-info" onclick="openWithImage()">
|
|
<i class="bi bi-image"></i> 이미지 포함
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-warning" onclick="openCustomCallback()">
|
|
<i class="bi bi-gear"></i> 커스텀 콜백
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-secondary" onclick="openMultiple()">
|
|
<i class="bi bi-layers"></i> 다중 인스턴스
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">주요 기능</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="feature-list">
|
|
<li>점연결(Polyline), 직선(Line), 자유선(Free) 그리기 모드</li>
|
|
<li>직각 모드 지원 (수평/수직선 자동 정렬)</li>
|
|
<li>색상 선택 및 선 굵기 조절</li>
|
|
<li>지우개 기능 (크기 조절 가능)</li>
|
|
<li>텍스트 추가 기능</li>
|
|
<li>실행취소(Undo) 기능</li>
|
|
<li>초기화 기능</li>
|
|
<li>이미지 저장 및 다운로드</li>
|
|
<li>터치 디바이스 지원 (모바일/태블릿)</li>
|
|
<li>반응형 디자인</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">사용 예제 코드</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre><code>// 기본 사용법
|
|
const drawer = new DrawingModule({
|
|
container: 'body',
|
|
onSave: (data) => {
|
|
console.log('저장된 이미지:', data.imageData);
|
|
console.log('저장 시간:', data.timestamp);
|
|
}
|
|
});
|
|
drawer.show();
|
|
|
|
// 고급 설정
|
|
const advancedDrawer = new DrawingModule({
|
|
container: '#myContainer',
|
|
width: 1000,
|
|
height: 700,
|
|
canvasWidth: 640,
|
|
canvasHeight: 480,
|
|
title: '나의 그리기 도구',
|
|
initialImage: 'path/to/image.png',
|
|
onSave: (data) => {
|
|
// 서버로 이미지 전송
|
|
sendToServer(data.imageData);
|
|
},
|
|
onCancel: () => {
|
|
console.log('그리기 취소됨');
|
|
}
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-container">
|
|
<h4>결과 표시 영역</h4>
|
|
<div id="resultArea">
|
|
<p class="text-muted">그리기를 완료하면 여기에 결과가 표시됩니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Drawing Module JS -->
|
|
<script src="js/drawingModule.js"></script>
|
|
|
|
<script>
|
|
// 기본 그리기
|
|
function openBasicDrawing() {
|
|
const drawer = new DrawingModule({
|
|
container: 'body',
|
|
onSave: (data) => {
|
|
displayResult(data, '기본 그리기');
|
|
}
|
|
});
|
|
drawer.show();
|
|
}
|
|
|
|
// 큰 캔버스
|
|
function openLargeCanvas() {
|
|
const drawer = new DrawingModule({
|
|
container: 'body',
|
|
canvasWidth: 640,
|
|
canvasHeight: 480,
|
|
title: '큰 캔버스 그리기 (640x480)',
|
|
onSave: (data) => {
|
|
displayResult(data, '큰 캔버스');
|
|
}
|
|
});
|
|
drawer.show();
|
|
}
|
|
|
|
// 이미지 포함
|
|
function openWithImage() {
|
|
// 샘플 이미지 데이터 URL (1x1 투명 픽셀)
|
|
const sampleImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
|
|
|
|
const drawer = new DrawingModule({
|
|
container: 'body',
|
|
initialImage: sampleImage,
|
|
title: '이미지 편집',
|
|
onSave: (data) => {
|
|
displayResult(data, '이미지 편집');
|
|
}
|
|
});
|
|
drawer.show();
|
|
}
|
|
|
|
// 커스텀 콜백
|
|
function openCustomCallback() {
|
|
const drawer = new DrawingModule({
|
|
container: 'body',
|
|
title: '커스텀 콜백 테스트',
|
|
onSave: (data) => {
|
|
// 커스텀 처리
|
|
const confirmSave = confirm('이미지를 저장하시겠습니까?');
|
|
if (confirmSave) {
|
|
displayResult(data, '커스텀 콜백');
|
|
|
|
// 다운로드 옵션
|
|
if (confirm('이미지를 다운로드하시겠습니까?')) {
|
|
downloadImage(data.imageData, 'drawing_' + Date.now() + '.jpg');
|
|
}
|
|
}
|
|
},
|
|
onCancel: () => {
|
|
alert('그리기가 취소되었습니다.');
|
|
}
|
|
});
|
|
drawer.show();
|
|
}
|
|
|
|
// 다중 인스턴스
|
|
function openMultiple() {
|
|
// 첫 번째 인스턴스
|
|
const drawer1 = new DrawingModule({
|
|
container: 'body',
|
|
title: '그리기 1',
|
|
canvasWidth: 200,
|
|
canvasHeight: 200,
|
|
onSave: (data) => {
|
|
displayResult(data, '그리기 1');
|
|
}
|
|
});
|
|
|
|
// 두 번째 인스턴스 (1초 후)
|
|
setTimeout(() => {
|
|
const drawer2 = new DrawingModule({
|
|
container: 'body',
|
|
title: '그리기 2',
|
|
canvasWidth: 300,
|
|
canvasHeight: 200,
|
|
onSave: (data) => {
|
|
displayResult(data, '그리기 2');
|
|
}
|
|
});
|
|
drawer2.show();
|
|
}, 100);
|
|
|
|
drawer1.show();
|
|
}
|
|
|
|
// 결과 표시
|
|
function displayResult(data, title) {
|
|
const resultHtml = `
|
|
<div class="alert alert-success">
|
|
<h5>${title} 완료!</h5>
|
|
<p>저장 시간: ${new Date(data.timestamp).toLocaleString()}</p>
|
|
<p>캔버스 크기: ${data.width} x ${data.height}px</p>
|
|
</div>
|
|
<img src="${data.imageData}" class="result-image" alt="그리기 결과">
|
|
<div class="mt-3">
|
|
<button class="btn btn-sm btn-primary" onclick="downloadImage('${data.imageData}', 'drawing.jpg')">
|
|
<i class="bi bi-download"></i> JPG 다운로드
|
|
</button>
|
|
<button class="btn btn-sm btn-secondary" onclick="downloadImage('${data.imageData}', 'drawing.png')">
|
|
<i class="bi bi-download"></i> PNG 다운로드
|
|
</button>
|
|
<button class="btn btn-sm btn-success" onclick="saveToServer('${data.imageData}')">
|
|
<i class="bi bi-cloud-upload"></i> 서버에 저장
|
|
</button>
|
|
</div>
|
|
`;
|
|
document.getElementById('resultArea').innerHTML = resultHtml;
|
|
}
|
|
|
|
// 이미지 다운로드
|
|
function downloadImage(dataUrl, filename) {
|
|
const link = document.createElement('a');
|
|
link.download = filename;
|
|
link.href = dataUrl;
|
|
link.click();
|
|
}
|
|
|
|
// 서버에 저장 (예제)
|
|
function saveToServer(imageData) {
|
|
// 실제 구현시 AJAX로 서버에 전송
|
|
console.log('서버에 저장할 이미지 데이터:', imageData.substring(0, 50) + '...');
|
|
alert('서버 저장 기능은 실제 구현이 필요합니다.\n콘솔에서 데이터를 확인하세요.');
|
|
|
|
// 예제: jQuery AJAX
|
|
/*
|
|
$.ajax({
|
|
url: '/api/save-image',
|
|
method: 'POST',
|
|
data: {
|
|
image: imageData,
|
|
timestamp: new Date().toISOString()
|
|
},
|
|
success: function(response) {
|
|
alert('저장 성공!');
|
|
},
|
|
error: function(error) {
|
|
alert('저장 실패: ' + error.responseText);
|
|
}
|
|
});
|
|
*/
|
|
}
|
|
|
|
// 페이지 로드 시 안내
|
|
$(document).ready(function() {
|
|
console.log('Drawing Module Test Page Ready');
|
|
console.log('DrawingModule 버전: 1.0.0');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|