Ping9gu/my-diary

1document.addEventListener('DOMContentLoaded', function() {2    const diaryForm = document.querySelector('form');3    const keywordsInput = document.querySelector('textarea');4    const resultDiv = document.querySelector('#result');5    const generateButton = document.querySelector('button');6    const loadingContainer = document.querySelector('#loading-container');7    const progressBar = document.querySelector('.progress-bar');8 9    diaryForm.addEventListener('submit', async function(e) {10        e.preventDefault();11        12        const keywords = keywordsInput.value.trim();13        if (!keywords) {14            resultDiv.textContent = "키워드를 입력해주세요";15            return;16        }17 18        try {19            generateButton.disabled = true;20            resultDiv.textContent = "";21            loadingContainer.style.display = 'block';22            progressBar.style.width = '0%';23            24            // 프로그레스 바 애니메이션 시작 (60초에서 30초로 변경)25            progressBar.style.animation = 'progress 30s linear';26            27            const API_URL = 'http://your-ec2-instance-ip:5000';28 29            const response = await fetch(`${API_URL}/api/generate-diary`, {30                method: 'POST',31                headers: {32                    'Content-Type': 'application/json',33                    'Accept': 'application/json'34                },35                body: JSON.stringify({36                    keywords: keywords37                })38            });39 40            if (!response.ok) {41                const errorText = await response.text();42                throw new Error(`서버 응답 오류: ${response.status}`);43            }44 45            const data = await response.json();46            47            if (data.error) {48                resultDiv.textContent = `오류: ${data.error}`;49            } else {50                resultDiv.textContent = data.diary || '일기 생성에 실패했습니다.';51            }52        } catch (error) {53            resultDiv.textContent = `오류가 발생했습니다: ${error.message}`;54        } finally {55            generateButton.disabled = false;56            loadingContainer.style.display = 'none';57            progressBar.style.animation = 'none';58        }59    });60});61