Update app.py

app.py

@@ -547,7 +547,7 @@ HTML_TEMPLATE = '''
             resize: none;
             outline: none;
             font-family: inherit;
-            font-size: 14px;
+            font-size: 22px;
             color: black;
             text-align: center;
             padding: 5px;
@@ -782,7 +782,7 @@ HTML_TEMPLATE = '''
                     </div>
                     <div class="property-group">
                         <label>글자 크기</label>
-                        <input type="number" id="fontSizeInput" value="14" min="8" max="72" onchange="updateSelectedComponent()">
+                        <input type="number" id="fontSizeInput" value="22" min="8" max="72" onchange="updateSelectedComponent()">
                     </div>
                     <div class="property-group">
                         <label>글자 굵기</label>
@@ -856,6 +856,63 @@ HTML_TEMPLATE = '''
         let selectedColor = 'black';
         let uploadedImages = [];
         let currentDragElement = null;
+        const DEFAULT_FONT_SIZE = 22; // 기본 글자 크기 상수
+
+        // 페이지 로드 시 기본 이미지 로드
+        window.addEventListener('DOMContentLoaded', function() {
+            loadDefaultImage();
+        });
+
+        // 기본 이미지 로드 함수
+        function loadDefaultImage() {
+            const canvas = document.getElementById('canvas');
+            
+            // 이미지 컨테이너 생성
+            const container = document.createElement('div');
+            container.className = 'image-container';
+            container.id = 'image-container-1';
+            
+            // 번호 라벨 생성
+            const numberLabel = document.createElement('div');
+            numberLabel.className = 'image-number';
+            numberLabel.textContent = '1';
+            
+            // 이미지 생성
+            const img = document.createElement('img');
+            img.src = 'webtoon.png';
+            img.className = 'webtoon-image';
+            img.alt = 'webtoon.png';
+            img.id = 'webtoon-image-1';
+            
+            // 이미지 로드 에러 처리
+            img.onerror = function() {
+                console.error('기본 이미지(webtoon.png)를 불러올 수 없습니다.');
+                // 에러 시 파일 리스트에 메시지 표시
+                const fileList = document.getElementById('fileList');
+                fileList.innerHTML = '<p style="font-size: 12px; color: #ff6b6b;">⚠️ webtoon.png 파일을 찾을 수 없습니다.</p>';
+            };
+            
+            // 이미지 로드 성공 시
+            img.onload = function() {
+                // 파일 리스트 업데이트
+                const fileList = document.getElementById('fileList');
+                fileList.innerHTML = '<p style="font-size: 12px; color: #4a9eff; margin-bottom: 10px;">✅ 기본 이미지 로드됨</p><div class="file-list"><div class="file-item">1. webtoon.png (기본)</div></div>';
+                
+                // uploadedImages 배열에 추가
+                uploadedImages.push({
+                    id: 1,
+                    name: 'webtoon.png',
+                    element: img
+                });
+                
+                // 이미지 간격 적용
+                updateImageSpacing();
+            };
+            
+            container.appendChild(numberLabel);
+            container.appendChild(img);
+            canvas.appendChild(container);
+        }
 
         // 자연스러운 정렬 함수
         function naturalSort(a, b) {
@@ -955,7 +1012,7 @@ HTML_TEMPLATE = '''
             });
         }
 
-        // 컴포넌트 추가
+        // 컴포넌트 추가 (기본 폰트 크기 수정)
         function addComponent(type) {
             const canvas = document.getElementById('canvas');
             const component = document.createElement('div');
@@ -976,14 +1033,14 @@ HTML_TEMPLATE = '''
                 case 'speech':
                     innerContent = `
                         <div class="speech-bubble">
-                            <textarea class="component-text" placeholder="대사 입력..."></textarea>
+                            <textarea class="component-text" placeholder="대사 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                             <div class="speech-bubble-tail"></div>
                         </div>`;
                     break;
                 case 'thought':
                     innerContent = `
                         <div class="thought-bubble">
-                            <textarea class="component-text" placeholder="생각 입력..."></textarea>
+                            <textarea class="component-text" placeholder="생각 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                             <div class="thought-bubble-dots">
                                 <div class="thought-dot large"></div>
                                 <div class="thought-dot small"></div>
@@ -993,49 +1050,49 @@ HTML_TEMPLATE = '''
                 case 'shout':
                     innerContent = `
                         <div class="shout-bubble">
-                            <textarea class="component-text" placeholder="외침!" style="font-weight: bold;"></textarea>
+                            <textarea class="component-text" placeholder="외침!" style="font-weight: bold; font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
                 case 'whisper':
                     innerContent = `
                         <div class="whisper-bubble">
-                            <textarea class="component-text" placeholder="속삭임..." style="font-style: italic;"></textarea>
+                            <textarea class="component-text" placeholder="속삭임..." style="font-style: italic; font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
                 case 'emotion':
                     innerContent = `
                         <div class="emotion-bubble">
-                            <textarea class="component-text" placeholder="♥ ♪ ★"></textarea>
+                            <textarea class="component-text" placeholder="♥ ♪ ★" style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
                 case 'action':
                     innerContent = `
                         <div class="action-effect">
-                            <textarea class="component-text" placeholder="쿵!" style="font-size: 24px; font-weight: bold;"></textarea>
+                            <textarea class="component-text" placeholder="쿵!" style="font-size: 28px; font-weight: bold;"></textarea>
                         </div>`;
                     break;
                 case 'narration':
                     innerContent = `
                         <div class="narration-box">
-                            <textarea class="component-text" placeholder="나레이션..."></textarea>
+                            <textarea class="component-text" placeholder="나레이션..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
                 case 'box':
                     innerContent = `
                         <div class="text-box">
-                            <textarea class="component-text" placeholder="텍스트 입력..."></textarea>
+                            <textarea class="component-text" placeholder="텍스트 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
                 case 'transparent':
                     innerContent = `
                         <div class="transparent-box">
-                            <textarea class="component-text" placeholder="텍스트 입력..."></textarea>
+                            <textarea class="component-text" placeholder="텍스트 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
                 case 'gradient':
                     innerContent = `
                         <div class="gradient-box">
-                            <textarea class="component-text" placeholder="특수 효과!"></textarea>
+                            <textarea class="component-text" placeholder="특수 효과!" style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
                         </div>`;
                     break;
             }
@@ -1084,13 +1141,13 @@ HTML_TEMPLATE = '''
             const textArea = component.querySelector('.component-text');
             if (textArea) {
                 document.getElementById('textInput').value = textArea.value;
-                document.getElementById('fontSizeInput').value = parseInt(textArea.style.fontSize) || 14;
+                document.getElementById('fontSizeInput').value = parseInt(textArea.style.fontSize) || DEFAULT_FONT_SIZE;
                 document.getElementById('fontSelect').value = textArea.style.fontFamily || "'Noto Sans KR'";
                 document.getElementById('fontWeightSelect').value = textArea.style.fontWeight || '400';
             }
         }
 
-        // 드래그 시작 (수정됨)
+        // 드래그 시작
         function startDrag(e) {
             if (e.target.classList.contains('resize-handle')) return;
             if (e.target.classList.contains('component-text')) return;
@@ -1116,7 +1173,7 @@ HTML_TEMPLATE = '''
             e.preventDefault();
         }
 
-        // 드래그 중 (수정됨)
+        // 드래그 중
         function drag(e) {
             if (!isDragging || !currentDragElement) return;
             
@@ -1137,7 +1194,7 @@ HTML_TEMPLATE = '''
             e.preventDefault();
         }
 
-        // 드래그 종료 (수정됨)
+        // 드래그 종료
         function stopDrag(e) {
             if (currentDragElement) {
                 currentDragElement.classList.remove('dragging');
@@ -1297,7 +1354,7 @@ HTML_TEMPLATE = '''
             tempContainer.style.left = '-9999px';
             document.body.appendChild(tempContainer);
             
-            // html2canvas 옵션 수정
+            // html2canvas 옵션
             html2canvas(tempContainer, {
                 backgroundColor: '#ffffff',
                 scale: 2,