{"id":2187,"date":"2025-08-21T18:45:35","date_gmt":"2025-08-21T18:45:35","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2187"},"modified":"2025-08-22T04:01:58","modified_gmt":"2025-08-22T04:01:58","slug":"%ec%8b%a0%ec%84%b1%ed%95%99-%ec%9d%bc%ec%a0%95-%ec%9e%85%eb%a0%a5","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/%ec%8b%a0%ec%84%b1%ed%95%99-%ec%9d%bc%ec%a0%95-%ec%9e%85%eb%a0%a5\/","title":{"rendered":"\uc2e0\uc131\ud559 \uc77c\uc815 \uc785\ub825"},"content":{"rendered":"\n\n\n \n \n \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac – Firebase \uc5f0\ub3d9<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f5f7fa;\n margin: 0;\n padding: 20px;\n line-height: 1.6;\n }\n \n .container {\n max-width: 900px;\n margin: 0 auto;\n background: white;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n overflow: hidden;\n }\n \n .header {\n background: #4a90e2;\n color: white;\n padding: 20px;\n text-align: center;\n position: relative;\n }\n \n .header h1 {\n margin: 0 0 5px 0;\n font-size: 1.8rem;\n }\n \n .header p {\n margin: 0 0 15px 0;\n opacity: 0.9;\n }\n\n .sync-status {\n position: absolute;\n top: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n background: rgba(255,255,255,0.2);\n padding: 6px 12px;\n border-radius: 20px;\n }\n\n .sync-indicator {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #28a745;\n animation: pulse 2s infinite;\n }\n\n .sync-indicator.syncing {\n background: #ffc107;\n animation: pulse 0.5s infinite;\n }\n\n .sync-indicator.offline {\n background: #dc3545;\n animation: none;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; }\n }\n \n .header-controls {\n display: flex;\n justify-content: center;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .header-btn {\n background: rgba(255,255,255,0.2);\n color: white;\n border: 1px solid rgba(255,255,255,0.3);\n padding: 8px 16px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 13px;\n transition: all 0.3s;\n }\n \n .header-btn:hover {\n background: rgba(255,255,255,0.3);\n border-color: rgba(255,255,255,0.5);\n }\n\n .share-url {\n display: none;\n background: rgba(255,255,255,0.9);\n color: #333;\n padding: 10px;\n border-radius: 5px;\n margin-top: 10px;\n font-size: 12px;\n word-break: break-all;\n }\n\n .firebase-setup {\n background: #fff3cd;\n border: 1px solid #ffeaa7;\n color: #856404;\n padding: 15px;\n margin: 20px;\n border-radius: 5px;\n font-size: 14px;\n line-height: 1.5;\n }\n\n .firebase-setup h3 {\n margin: 0 0 10px 0;\n color: #d63031;\n }\n\n .firebase-setup code {\n background: #f8f9fa;\n padding: 2px 4px;\n border-radius: 3px;\n font-family: monospace;\n }\n \n .day-row {\n border-bottom: 1px solid #eee;\n padding: 20px;\n }\n \n .day-row:last-child {\n border-bottom: none;\n }\n \n .day-header {\n margin-bottom: 15px;\n padding-bottom: 10px;\n border-bottom: 2px solid #e3f2fd;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .day-title-section {\n display: flex;\n align-items: center;\n gap: 15px;\n flex: 1;\n }\n \n .day-title {\n font-size: 1.2rem;\n font-weight: bold;\n color: #333;\n }\n\n .day-subtitle {\n font-size: 0.9rem;\n color: #666;\n font-weight: normal;\n }\n\n .day-subtitle input {\n border: none;\n background: transparent;\n color: #666;\n font-size: 0.9rem;\n padding: 2px 8px;\n border-radius: 3px;\n transition: all 0.3s;\n }\n\n .day-subtitle input:hover {\n background: rgba(74, 144, 226, 0.1);\n }\n\n .day-subtitle input:focus {\n outline: 1px solid #4a90e2;\n background: white;\n }\n \n .day-controls {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%) translateX(15px);\n opacity: 0;\n transition: all 0.3s ease;\n pointer-events: none;\n }\n \n .day-header:hover .day-controls {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n pointer-events: auto;\n }\n \n .delete-day-btn {\n background: linear-gradient(135deg, #dc3545, #c82333);\n color: white;\n border: none;\n padding: 0;\n border-radius: 50%;\n cursor: pointer;\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n transition: all 0.3s ease;\n box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);\n position: relative;\n overflow: hidden;\n }\n \n .delete-day-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);\n border-radius: 50%;\n transition: all 0.3s ease;\n }\n \n .delete-day-btn:hover {\n background: linear-gradient(135deg, #c82333, #a71e2a);\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);\n }\n \n .delete-day-btn:hover::before {\n background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent);\n }\n \n .delete-day-btn:active {\n transform: scale(0.95) rotate(-2deg);\n box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);\n }\n \n .trash-icon {\n font-size: 16px;\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\n transition: all 0.3s ease;\n position: relative;\n z-index: 1;\n }\n \n .delete-day-btn:hover .trash-icon {\n transform: scale(1.1);\n filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));\n }\n\n \/* \ub0a0\uc9dc \uc815\ubcf4 \uc139\uc158 *\/\n .day-info {\n margin-bottom: 15px;\n }\n\n .info-block {\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border: 1px solid #dee2e6;\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 12px;\n position: relative;\n overflow: hidden;\n }\n\n .info-block:last-child {\n margin-bottom: 0;\n }\n\n .accommodation-block::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, #4a90e2, #20c997);\n border-radius: 12px 12px 0 0;\n }\n\n .meals-block::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, #ffc107, #fd7e14);\n border-radius: 12px 12px 0 0;\n }\n\n .block-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-weight: 600;\n color: #555;\n font-size: 14px;\n }\n\n .block-content {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n align-items: center;\n min-height: 20px;\n }\n\n .info-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: rgba(255, 255, 255, 0.8);\n padding: 8px 14px;\n border-radius: 25px;\n border: 1px solid rgba(74, 144, 226, 0.1);\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n }\n\n .info-item:hover {\n background: rgba(255, 255, 255, 0.95);\n border-color: rgba(74, 144, 226, 0.3);\n transform: translateY(-1px);\n box-shadow: 0 3px 12px rgba(0,0,0,0.1);\n }\n\n .info-item.editing {\n background: white;\n border-color: #4a90e2;\n box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);\n }\n\n .info-label {\n font-size: 16px;\n }\n\n .info-text {\n font-size: 14px;\n color: #333;\n font-weight: 500;\n min-width: 60px;\n }\n\n .info-input {\n border: none;\n background: transparent;\n font-size: 14px;\n color: #333;\n font-weight: 500;\n padding: 0;\n outline: none;\n min-width: 120px;\n width: auto;\n }\n\n .info-input::placeholder {\n color: #999;\n font-weight: normal;\n font-style: italic;\n }\n\n .add-info-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: rgba(74, 144, 226, 0.1);\n color: #4a90e2;\n padding: 8px 14px;\n border-radius: 25px;\n border: 1px dashed #4a90e2;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.3s ease;\n opacity: 0.8;\n }\n\n .add-info-btn:hover {\n background: rgba(74, 144, 226, 0.2);\n opacity: 1;\n transform: translateY(-1px);\n }\n\n .empty-block {\n color: #999;\n font-style: italic;\n font-size: 13px;\n padding: 8px 0;\n text-align: center;\n }\n \n .schedule-divider {\n position: relative;\n height: 2px;\n margin: 5px 0;\n background: transparent;\n cursor: pointer;\n transition: all 0.3s;\n }\n \n .schedule-divider:hover {\n background: #e3f2fd;\n height: 6px;\n margin: 8px 0;\n }\n \n .add-btn {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background: #4a90e2;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 15px;\n cursor: pointer;\n font-size: 12px;\n opacity: 0;\n transition: all 0.3s;\n z-index: 10;\n white-space: nowrap;\n }\n \n .schedule-divider:hover .add-btn {\n opacity: 1;\n }\n \n .add-btn:hover {\n background: #357abd;\n transform: translate(-50%, -50%) scale(1.05);\n }\n \n .schedule-item {\n background: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 15px;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 15px;\n position: relative;\n }\n\n .schedule-actions {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%) translateX(15px);\n opacity: 0;\n transition: all 0.3s ease;\n pointer-events: none;\n }\n\n .schedule-item:hover .schedule-actions {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n pointer-events: auto;\n }\n\n .schedule-delete-btn {\n background: linear-gradient(135deg, #dc3545, #c82333);\n color: white;\n border: none;\n padding: 0;\n border-radius: 50%;\n cursor: pointer;\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n transition: all 0.3s ease;\n box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);\n position: relative;\n overflow: hidden;\n }\n\n .schedule-delete-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);\n border-radius: 50%;\n transition: all 0.3s ease;\n }\n\n .schedule-delete-btn:hover {\n background: linear-gradient(135deg, #c82333, #a71e2a);\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);\n }\n\n .schedule-delete-btn:hover::before {\n background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent);\n }\n\n .schedule-delete-btn:active {\n transform: scale(0.95) rotate(-2deg);\n box-shadow: 0 2px 6px rgba(220, 53, 69, 0.5);\n }\n\n .schedule-trash-icon {\n font-size: 14px;\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\n transition: all 0.3s ease;\n position: relative;\n z-index: 1;\n }\n\n .schedule-delete-btn:hover .schedule-trash-icon {\n transform: scale(1.1);\n filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));\n }\n\n \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c \uae38\uac8c \ud130\uce58 \uc2dc \uc0ad\uc81c \ubc84\ud2bc \ud45c\uc2dc *\/\n .schedule-item.long-press .schedule-actions {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n pointer-events: auto;\n }\n \n .schedule-time {\n min-width: 80px;\n }\n \n .schedule-time select {\n border: none;\n background: transparent;\n font-size: 14px;\n font-weight: bold;\n color: #4a90e2;\n cursor: pointer;\n padding: 2px;\n }\n \n .schedule-content {\n flex: 1;\n }\n \n .schedule-title input {\n border: none;\n background: transparent;\n font-weight: bold;\n font-size: 14px;\n width: 100%;\n padding: 2px;\n }\n \n .schedule-title input:focus {\n outline: 1px solid #4a90e2;\n border-radius: 3px;\n background: white;\n }\n \n .schedule-description textarea {\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n width: 100%;\n resize: none;\n padding: 2px;\n height: 20px;\n }\n \n .schedule-description textarea:focus {\n outline: 1px solid #4a90e2;\n border-radius: 3px;\n background: white;\n height: 60px;\n }\n \n .delete-btn {\n background: #dc3545;\n color: white;\n border: none;\n padding: 5px 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n display: none; \/* \uae30\ubcf8\uc801\uc73c\ub85c \uc228\uae40 *\/\n }\n \n .delete-btn:hover {\n background: #c82333;\n }\n \n \/* \ub0a0\uc9dc \ucd94\uac00 \uc601\uc5ed *\/\n .add-date-section {\n padding: 30px 20px;\n text-align: center;\n background: #f8f9fa;\n border-top: 1px solid #eee;\n }\n \n .add-date-btn {\n background: linear-gradient(135deg, #28a745, #20c997);\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 25px;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);\n }\n \n .add-date-btn:hover {\n background: linear-gradient(135deg, #218838, #1e7e34);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);\n }\n \n .add-date-btn:active {\n transform: translateY(0);\n }\n \n \/* \ubaa8\ub2ec \uc2a4\ud0c0\uc77c *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.5);\n }\n \n .modal-content {\n background-color: #fefefe;\n margin: 15% auto;\n padding: 20px;\n border-radius: 10px;\n width: 90%;\n max-width: 400px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n }\n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 10px;\n border-bottom: 1px solid #eee;\n }\n \n .close {\n color: #aaa;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n }\n \n .close:hover {\n color: #333;\n }\n \n .form-group {\n margin-bottom: 20px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n }\n \n .form-group input {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n box-sizing: border-box;\n }\n \n .modal-actions {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n }\n \n .btn {\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s;\n }\n \n .btn-primary {\n background: #4a90e2;\n color: white;\n }\n \n .btn-primary:hover {\n background: #357abd;\n }\n \n .btn-secondary {\n background: #6c757d;\n color: white;\n }\n \n .btn-secondary:hover {\n background: #5a6268;\n }\n \n @media (max-width: 600px) {\n .header {\n padding: 15px;\n }\n\n .sync-status {\n position: static;\n justify-content: center;\n margin-top: 10px;\n }\n\n .day-header {\n position: relative;\n padding-right: 50px;\n }\n\n .day-title-section {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .day-controls {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 1;\n pointer-events: auto;\n }\n \n .delete-day-btn {\n width: 32px;\n height: 32px;\n font-size: 14px;\n }\n \n .trash-icon {\n font-size: 14px;\n }\n \n .schedule-item {\n flex-direction: column;\n align-items: stretch;\n gap: 10px;\n padding-right: 15px;\n }\n\n .schedule-actions {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s ease;\n }\n\n .schedule-item.long-press .schedule-actions {\n opacity: 1;\n pointer-events: auto;\n }\n\n .schedule-delete-btn {\n width: 28px;\n height: 28px;\n font-size: 12px;\n }\n\n .schedule-trash-icon {\n font-size: 12px;\n }\n\n .block-content {\n flex-direction: column;\n align-items: stretch;\n gap: 8px;\n }\n\n .info-item, .add-info-btn {\n justify-content: center;\n text-align: center;\n }\n\n .empty-block {\n padding: 8px 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"sync-status\" id=\"syncStatus\">\n <div class=\"sync-indicator\" id=\"syncIndicator\"><\/div>\n <span id=\"syncText\">Firebase \uc5f0\uacb0 \ub300\uae30\uc911…<\/span>\n <\/div>\n \n <h1>\uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac<\/h1>\n <p>2024\ub144 8\uc6d4 28\uc77c ~ 9\uc6d4 18\uc77c<\/p>\n \n <div class=\"header-controls\">\n <button class=\"header-btn\" id=\"shareBtn\">\ud83d\udd17 \uacf5\uc720\ub9c1\ud06c \uc0dd\uc131<\/button>\n <button class=\"header-btn\" id=\"exportBtn\">\ud83d\udcc4 \ub0b4\ubcf4\ub0b4\uae30<\/button>\n <\/div>\n \n <div class=\"share-url\" id=\"shareUrl\">\n <strong>\uacf5\uc720 \ub9c1\ud06c:<\/strong><br>\n <span id=\"shareUrlText\"><\/span><br>\n <small>\uc774 \ub9c1\ud06c\ub97c \ubcf5\uc0ac\ud558\uc5ec \ub2e4\ub978 \uc0ac\ub78c\uacfc \uacf5\uc720\ud558\uc138\uc694!<\/small>\n <\/div>\n <\/div>\n\n <!-- Firebase \uc124\uc815 \uc548\ub0b4 -->\n <div class=\"firebase-setup\" id=\"firebaseSetup\" style=\"display: none;\">\n <h3>\ud83d\udd25 Firebase \uc124\uc815\uc774 \ud544\uc694\ud569\ub2c8\ub2e4<\/h3>\n <p>\uc2e4\uc2dc\uac04 \ub3d9\uae30\ud654\ub97c \uc704\ud574 Firebase \ud504\ub85c\uc81d\ud2b8 \uc124\uc815\uc774 \ud544\uc694\ud569\ub2c8\ub2e4:<\/p>\n <ol>\n <li><a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">Firebase Console<\/a>\uc5d0\uc11c \uc0c8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/li>\n <li>Realtime Database \ud65c\uc131\ud654 (\ud14c\uc2a4\ud2b8 \ubaa8\ub4dc\ub85c \uc2dc\uc791)<\/li>\n <li>\uc6f9 \uc571 \ucd94\uac00 \ud6c4 \uc124\uc815 \uc815\ubcf4\ub97c \uc544\ub798 <code>firebaseConfig<\/code>\uc5d0 \uc785\ub825<\/li>\n <li>\ud398\uc774\uc9c0 \uc0c8\ub85c\uace0\uce68<\/li>\n <\/ol>\n <p><strong>\ud604\uc7ac\ub294 \ub85c\uceec \uc800\uc7a5\uc18c\ub9cc \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/strong><\/p>\n <\/div>\n \n <div id=\"calendar\">\n <!-- \ub0b4\uc6a9\uc774 \uc5ec\uae30\uc5d0 \uc0dd\uc131\ub429\ub2c8\ub2e4 -->\n <\/div>\n \n <!-- \ub0a0\uc9dc \ucd94\uac00 \uc139\uc158 -->\n <div class=\"add-date-section\">\n <button class=\"add-date-btn\" id=\"addDateBtn\">\n <span>\ud83d\udcc5<\/span>\n <span>\ub2e4\uc74c \ub0a0\uc9dc \ucd94\uac00<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- \ub0a0\uc9dc \ucd94\uac00 \ubaa8\ub2ec -->\n <div id=\"addDateModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>\ud2b9\uc815 \ub0a0\uc9dc \ucd94\uac00<\/h2>\n <span class=\"close\" id=\"closeModal\">×<\/span>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"newDate\">\ub0a0\uc9dc:<\/label>\n <input type=\"date\" id=\"newDate\">\n <\/div>\n \n <div class=\"modal-actions\">\n <button class=\"btn btn-secondary\" id=\"cancelBtn\">\ucde8\uc18c<\/button>\n <button class=\"btn btn-primary\" id=\"confirmBtn\">\ucd94\uac00<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Firebase SDK -->\n <script type=\"module\">\n \/\/ Firebase \uc124\uc815 - \uc2e4\uc81c Firebase \ud504\ub85c\uc81d\ud2b8 \uc124\uc815\uc73c\ub85c \uad50\uccb4\ud558\uc138\uc694\n const firebaseConfig = {\n apiKey: \"AIzaSyBZuBFuiUvXZbU8-Htbcs-oONTmmLl5KyM\",\n authDomain: \"sshvt-f1422.firebaseapp.com\",\n databaseURL: \"https:\/\/sshvt-f1422-default-rtdb.firebaseio.com\",\n projectId: \"sshvt-f1422\",\n storageBucket: \"sshvt-f1422.firebasestorage.app\",\n messagingSenderId: \"333217459948\",\n appId: \"1:333217459948:web:57ff8075c55da475a27fc9\",\n measurementId: \"G-2ECL15X2N7\" \n };\n\n \/\/ Firebase \uc124\uc815\uc774 \uae30\ubcf8\uac12\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\n function isFirebaseConfigValid(config) {\n return config.apiKey !== \"your-api-key\" && \n config.databaseURL !== \"your-database-url\" &&\n config.projectId !== \"your-project-id\";\n }\n\n \/\/ Firebase \uc124\uc815 \ud655\uc778\n const isFirebaseConfigured = isFirebaseConfigValid(firebaseConfig);\n \n let db = null;\n let isOnline = navigator.onLine;\n let isUpdatingFromLocal = false;\n\n \/\/ \uc804\uc5ed \ubcc0\uc218\n let schedules = {};\n let dayInfo = {};\n let timeOptions = [];\n let customDates = [];\n\n \/\/ Firebase \ucd08\uae30\ud654 (\uc124\uc815\uc774 \uc788\ub294 \uacbd\uc6b0\uc5d0\ub9cc)\n async function initializeFirebase() {\n if (!isFirebaseConfigured) {\n console.log('Firebase \uc124\uc815\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. \ub85c\uceec \ubaa8\ub4dc\ub85c \uc2e4\ud589\ud569\ub2c8\ub2e4.');\n updateSyncStatus('offline', 'Firebase \ubbf8\uc124\uc815');\n document.getElementById('firebaseSetup').style.display = 'block';\n return false;\n }\n\n try {\n \/\/ Firebase \ubaa8\ub4c8 \ub3d9\uc801 \ub85c\ub4dc\n const { initializeApp } = await import('https:\/\/www.gstatic.com\/firebasejs\/12.1.0\/firebase-app.js');\n const { getDatabase, ref, set, get, onValue, off } = await import('https:\/\/www.gstatic.com\/firebasejs\/12.1.0\/firebase-database.js');\n \n const app = initializeApp(firebaseConfig);\n db = getDatabase(app);\n \n \/\/ Firebase \uc5f0\uacb0 \uc131\uacf5\n document.getElementById('firebaseSetup').style.display = 'none';\n updateSyncStatus('connected', 'Firebase \uc5f0\uacb0\ub428');\n \n \/\/ \uc2e4\uc2dc\uac04 \ub9ac\uc2a4\ub108 \uc124\uc815\n const planRef = ref(db, 'travelPlan');\n onValue(planRef, (snapshot) => {\n const data = snapshot.val();\n if (data && !isUpdatingFromLocal) {\n loadDataFromFirebase(data);\n updateSyncStatus('synced', '\ub3d9\uae30\ud654 \uc644\ub8cc');\n }\n });\n \n \/\/ \ub124\ud2b8\uc6cc\ud06c \uc0c1\ud0dc \ubaa8\ub2c8\ud130\ub9c1\n window.addEventListener('online', () => {\n isOnline = true;\n updateSyncStatus('connected', 'Firebase \uc5f0\uacb0\ub428');\n });\n \n window.addEventListener('offline', () => {\n isOnline = false;\n updateSyncStatus('offline', '\uc624\ud504\ub77c\uc778');\n });\n \n return true;\n \n } catch (error) {\n console.error('Firebase \ucd08\uae30\ud654 \uc2e4\ud328:', error);\n updateSyncStatus('offline', 'Firebase \uc5f0\uacb0 \uc2e4\ud328');\n document.getElementById('firebaseSetup').style.display = 'block';\n return false;\n }\n }\n\n \/\/ \ub3d9\uae30\ud654 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\n function updateSyncStatus(status, text) {\n const indicator = document.getElementById('syncIndicator');\n const statusText = document.getElementById('syncText');\n \n if (indicator && statusText) {\n indicator.className = 'sync-indicator ' + status;\n statusText.textContent = text;\n }\n }\n\n \/\/ Firebase\uc5d0 \uc800\uc7a5\n async function saveToFirebase() {\n if (!db || !isOnline) {\n console.log('Firebase \uc0ac\uc6a9 \ubd88\uac00 - \ub85c\uceec \uc800\uc7a5\ub9cc \uc218\ud589');\n return false;\n }\n\n try {\n isUpdatingFromLocal = true;\n updateSyncStatus('syncing', '\uc800\uc7a5 \uc911...');\n \n const data = {\n schedules: schedules,\n dayInfo: dayInfo,\n customDates: customDates,\n lastUpdated: Date.now(),\n planId: getPlanId()\n };\n \n const { ref, set } = await import('https:\/\/www.gstatic.com\/firebasejs\/12.1.0\/firebase-database.js');\n await set(ref(db, 'travelPlan'), data);\n \n updateSyncStatus('synced', '\ub3d9\uae30\ud654 \uc644\ub8cc');\n setTimeout(() => {\n if (isOnline) {\n updateSyncStatus('connected', 'Firebase \uc5f0\uacb0\ub428');\n }\n }, 2000);\n \n return true;\n } catch (error) {\n console.error('Firebase \uc800\uc7a5 \uc2e4\ud328:', error);\n updateSyncStatus('offline', '\uc800\uc7a5 \uc2e4\ud328');\n return false;\n } finally {\n setTimeout(() => { isUpdatingFromLocal = false; }, 1000);\n }\n }\n\n \/\/ Firebase\uc5d0\uc11c \ub85c\ub4dc\n async function loadFromFirebase() {\n if (!db || !isOnline) return null;\n\n try {\n const { ref, get } = await import('https:\/\/www.gstatic.com\/firebasejs\/12.1.0\/firebase-database.js');\n const snapshot = await get(ref(db, 'travelPlan'));\n return snapshot.val();\n } catch (error) {\n console.error('Firebase \ub85c\ub4dc \uc2e4\ud328:', error);\n return null;\n }\n }\n\n \/\/ Firebase \ub370\uc774\ud130\ub85c UI \uc5c5\ub370\uc774\ud2b8\n function loadDataFromFirebase(data) {\n if (data && data.schedules && data.dayInfo && data.customDates) {\n schedules = data.schedules;\n dayInfo = data.dayInfo;\n customDates = data.customDates;\n renderCalendar();\n saveToLocalStorage(); \/\/ \ub85c\uceec \ubc31\uc5c5\n }\n }\n\n \/\/ \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \uc800\uc7a5\n function saveToLocalStorage() {\n try {\n const data = {\n schedules: schedules,\n dayInfo: dayInfo,\n customDates: customDates,\n lastUpdated: Date.now()\n };\n localStorage.setItem('travelPlan', JSON.stringify(data));\n } catch (error) {\n console.error('\ub85c\uceec \uc800\uc7a5 \uc2e4\ud328:', error);\n }\n }\n\n \/\/ \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0\uc11c \ub85c\ub4dc\n function loadFromLocalStorage() {\n try {\n const data = localStorage.getItem('travelPlan');\n return data ? JSON.parse(data) : null;\n } catch (error) {\n console.error('\ub85c\uceec \ub85c\ub4dc \uc2e4\ud328:', error);\n return null;\n }\n }\n\n \/\/ \ud50c\ub79c ID \uc0dd\uc131\/\uc870\ud68c\n function getPlanId() {\n let planId = localStorage.getItem('travelPlanId');\n if (!planId) {\n planId = 'plan_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);\n localStorage.setItem('travelPlanId', planId);\n }\n return planId;\n }\n\n \/\/ \ud1b5\ud569 \uc800\uc7a5 \ud568\uc218\n async function saveData() {\n \/\/ \ub85c\uceec \uc800\uc7a5 (\uc989\uc2dc)\n saveToLocalStorage();\n \n \/\/ Firebase \uc800\uc7a5 (\ube44\ub3d9\uae30)\n if (isFirebaseConfigured) {\n await saveToFirebase();\n }\n }\n\n \/\/ \ud1b5\ud569 \ub85c\ub4dc \ud568\uc218\n async function loadData() {\n let data = null;\n \n \/\/ Firebase\uc5d0\uc11c \uba3c\uc800 \uc2dc\ub3c4 (\uc124\uc815\uc774 \uc788\ub294 \uacbd\uc6b0\uc5d0\ub9cc)\n if (isFirebaseConfigured && isOnline && db) {\n data = await loadFromFirebase();\n if (data) {\n console.log('Firebase\uc5d0\uc11c \ub85c\ub4dc\ub41c \ub370\uc774\ud130:', data);\n }\n }\n \n \/\/ Firebase \uc2e4\ud328 \uc2dc \ub85c\uceec\uc5d0\uc11c \ub85c\ub4dc\n if (!data) {\n data = loadFromLocalStorage();\n if (data) {\n console.log('\ub85c\uceec\uc5d0\uc11c \ub85c\ub4dc\ub41c \ub370\uc774\ud130:', data);\n }\n }\n \n if (data && data.schedules && data.dayInfo && data.customDates) {\n schedules = data.schedules;\n dayInfo = data.dayInfo;\n customDates = data.customDates;\n console.log('\ub370\uc774\ud130 \ub85c\ub4dc \uc131\uacf5');\n return true;\n }\n \n console.log('\ub85c\ub4dc\ud560 \ub370\uc774\ud130\uac00 \uc5c6\uc74c - \uae30\ubcf8 \ub370\uc774\ud130 \uc0ac\uc6a9');\n return false;\n }\n\n \/\/ \uae30\ubcf8 \ub370\uc774\ud130 \ucd08\uae30\ud654\n function initializeDefaultData() {\n console.log('\uae30\ubcf8 \ub370\uc774\ud130 \ucd08\uae30\ud654 \uc2dc\uc791');\n \n schedules = {\n '2024-08-28': [\n { id: '1', time: '09:00', title: '\uc778\ucc9c\uacf5\ud56d \ucd9c\ubc1c', description: '\uccb4\ud06c\uc778 2\uc2dc\uac04 \uc804 \ub3c4\ucc29' },\n { id: '2', time: '15:30', title: '\ud604\uc9c0 \ub3c4\ucc29', description: '\uacf5\ud56d\uc5d0\uc11c \ud638\ud154\ub85c \uc774\ub3d9' }\n ],\n '2024-08-29': [\n { id: '3', time: '10:00', title: '\uc2dc\ub0b4 \uad00\uad11', description: '\uc8fc\uc694 \uba85\uc18c \ub458\ub7ec\ubcf4\uae30' }\n ]\n };\n\n dayInfo = {\n '2024-08-28': {\n title: '\ucd9c\ubc1c\uc77c',\n accommodation: '\uc11c\uc6b8 \ucd9c\ubc1c',\n lunch: '\uacf5\ud56d \uc2dd\ub2f9',\n dinner: '\ud604\uc9c0 \ub3c4\ucc29 \ud6c4'\n },\n '2024-08-29': {\n title: '\uad00\uad11 \uccab\ub0a0',\n accommodation: '\uc2dc\ub0b4 \ud638\ud154',\n lunch: '\ud604\uc9c0 \ub9db\uc9d1',\n dinner: '\ud638\ud154 \uadfc\ucc98'\n }\n };\n \n customDates = [];\n \n console.log('\uae30\ubcf8 \ub370\uc774\ud130 \ucd08\uae30\ud654 \uc644\ub8cc:', { schedules, dayInfo, customDates });\n }\n\n \/\/ \ub514\ubc14\uc6b4\uc2a4\ub41c \uc800\uc7a5\n let saveTimeout = null;\n function debouncedSave() {\n if (saveTimeout) {\n clearTimeout(saveTimeout);\n }\n saveTimeout = setTimeout(saveData, 1000);\n }\n\n \/\/ padStart \ud638\ud658 \ud568\uc218\n function padStart(str, targetLength, padString) {\n str = String(str);\n if (str.length >= targetLength) return str;\n \n padString = padString || ' ';\n var padLength = targetLength - str.length;\n var pad = '';\n \n for (var i = 0; i < padLength; i++) {\n pad += padString;\n }\n \n return pad + str;\n }\n\n \/\/ \uc2dc\uac04 \uc635\uc158 \uc0dd\uc131\n function generateTimeOptions() {\n timeOptions = [];\n for (var hour = 0; hour < 24; hour++) {\n for (var minute = 0; minute < 60; minute += 30) {\n var hourStr = padStart(hour, 2, '0');\n var minuteStr = padStart(minute, 2, '0');\n timeOptions.push(hourStr + ':' + minuteStr);\n }\n }\n }\n\n \/\/ DOM \uc694\uc18c \uc0dd\uc131 \ud5ec\ud37c\n function createElement(tag, className, content) {\n var element = document.createElement(tag);\n if (className) element.className = className;\n if (content) element.textContent = content;\n return element;\n }\n\n \/\/ \ub0a0\uc9dc \uc815\ubcf4 \uc139\uc158 \uc0dd\uc131\n function createDayInfoSection(dateStr) {\n var info = dayInfo[dateStr] || {\n title: '',\n accommodation: '',\n lunch: '',\n dinner: ''\n };\n\n var section = createElement('div', 'day-info');\n var grid = createElement('div', 'day-info-grid');\n\n \/\/ \uc219\uc18c\n var accommodationItem = createElement('div', 'info-item');\n var accommodationLabel = createElement('div', 'info-label', '\ud83c\udfe8');\n var accommodationInput = createElement('input', 'info-input');\n accommodationInput.type = 'text';\n accommodationInput.placeholder = '\uc219\uc18c';\n accommodationInput.value = info.accommodation || '';\n \n accommodationInput.addEventListener('blur', function() {\n updateDayInfo(dateStr, 'accommodation', this.value);\n debouncedSave();\n });\n\n accommodationItem.appendChild(accommodationLabel);\n accommodationItem.appendChild(accommodationInput);\n grid.appendChild(accommodationItem);\n\n \/\/ \uc810\uc2ec\n var lunchItem = createElement('div', 'info-item');\n var lunchLabel = createElement('div', 'info-label', '\ud83c\udf7d\ufe0f');\n var lunchInput = createElement('input', 'info-input');\n lunchInput.type = 'text';\n lunchInput.placeholder = '\uc810\uc2ec';\n lunchInput.value = info.lunch || '';\n \n lunchInput.addEventListener('blur', function() {\n updateDayInfo(dateStr, 'lunch', this.value);\n debouncedSave();\n });\n\n lunchItem.appendChild(lunchLabel);\n lunchItem.appendChild(lunchInput);\n grid.appendChild(lunchItem);\n\n \/\/ \uc800\ub141\n var dinnerItem = createElement('div', 'info-item');\n var dinnerLabel = createElement('div', 'info-label', '\ud83c\udf77');\n var dinnerInput = createElement('input', 'info-input');\n dinnerInput.type = 'text';\n dinnerInput.placeholder = '\uc800\ub141';\n dinnerInput.value = info.dinner || '';\n \n dinnerInput.addEventListener('blur', function() {\n updateDayInfo(dateStr, 'dinner', this.value);\n debouncedSave();\n });\n\n dinnerItem.appendChild(dinnerLabel);\n dinnerItem.appendChild(dinnerInput);\n grid.appendChild(dinnerItem);\n\n section.appendChild(grid);\n return section;\n }\n\n \/\/ \ub0a0\uc9dc \ud589 \uc0dd\uc131\n function createDayRow(date, dateStr) {\n var row = createElement('div', 'day-row');\n \n \/\/ \ub0a0\uc9dc \ud5e4\ub354\n var header = createElement('div', 'day-header');\n var titleSection = createElement('div', 'day-title-section');\n var title = createElement('div', 'day-title');\n \n var month = date.getMonth() + 1;\n var day = date.getDate();\n var weekdays = ['\uc77c', '\uc6d4', '\ud654', '\uc218', '\ubaa9', '\uae08', '\ud1a0'];\n var weekday = weekdays[date.getDay()];\n \n title.textContent = month + '\uc6d4 ' + day + '\uc77c (' + weekday + ')';\n titleSection.appendChild(title);\n\n \/\/ \uc81c\ubaa9 \uc785\ub825 (\ub0a0\uc9dc \uc606\uc5d0)\n var subtitleDiv = createElement('div', 'day-subtitle');\n var subtitleInput = createElement('input');\n subtitleInput.type = 'text';\n subtitleInput.placeholder = '\uc81c\ubaa9 \uc785\ub825';\n \n var info = dayInfo[dateStr] || {};\n subtitleInput.value = info.title || '';\n \n subtitleInput.addEventListener('blur', function() {\n updateDayInfo(dateStr, 'title', this.value);\n debouncedSave();\n });\n\n subtitleDiv.appendChild(subtitleInput);\n titleSection.appendChild(subtitleDiv);\n \n header.appendChild(titleSection);\n \n \/\/ \uc0ad\uc81c \ubc84\ud2bc\n var controls = createElement('div', 'day-controls');\n var deleteBtn = createElement('button', 'delete-day-btn');\n deleteBtn.title = '\uc774 \ub0a0\uc9dc \uc0ad\uc81c';\n \n var trashIcon = createElement('span', 'trash-icon', '\ud83d\uddd1\ufe0f');\n deleteBtn.appendChild(trashIcon);\n \n deleteBtn.addEventListener('click', function(e) {\n e.stopPropagation();\n deleteDate(dateStr);\n });\n \n controls.appendChild(deleteBtn);\n header.appendChild(controls);\n \n row.appendChild(header);\n row.appendChild(createDayInfoSection(dateStr));\n \n \/\/ \uc77c\uc815 \ubaa9\ub85d\n var schedulesList = createElement('div', 'schedules-list');\n schedulesList.id = 'schedules-' + dateStr;\n \n refreshDaySchedules(dateStr, schedulesList);\n row.appendChild(schedulesList);\n \n return row;\n }\n\n \/\/ \uc77c\uc815 \uc544\uc774\ud15c \uc0dd\uc131\n function createScheduleItem(schedule, dateStr) {\n var item = createElement('div', 'schedule-item');\n item.setAttribute('data-id', schedule.id);\n \n \/\/ \uae38\uac8c \ud130\uce58 \uc774\ubca4\ud2b8 \ucc98\ub9ac (\ubaa8\ubc14\uc77c)\n var longPressTimer = null;\n var isLongPress = false;\n \n function startLongPress(e) {\n isLongPress = false;\n longPressTimer = setTimeout(function() {\n isLongPress = true;\n item.classList.add('long-press');\n setTimeout(function() {\n item.classList.remove('long-press');\n }, 3000);\n }, 800);\n }\n \n function endLongPress(e) {\n if (longPressTimer) {\n clearTimeout(longPressTimer);\n longPressTimer = null;\n }\n }\n \n function handleClick(e) {\n if (isLongPress) {\n e.preventDefault();\n e.stopPropagation();\n isLongPress = false;\n }\n }\n \n \/\/ \ud130\uce58 \uc774\ubca4\ud2b8\n item.addEventListener('touchstart', startLongPress, { passive: true });\n item.addEventListener('touchend', endLongPress);\n item.addEventListener('touchcancel', endLongPress);\n item.addEventListener('touchmove', endLongPress);\n item.addEventListener('click', handleClick);\n \n \/\/ \uc2dc\uac04 \uc120\ud0dd\n var timeDiv = createElement('div', 'schedule-time');\n var timeSelect = createElement('select');\n \n for (var i = 0; i < timeOptions.length; i++) {\n var option = createElement('option');\n option.value = timeOptions[i];\n option.textContent = timeOptions[i];\n if (timeOptions[i] === schedule.time) {\n option.selected = true;\n }\n timeSelect.appendChild(option);\n }\n \n timeSelect.addEventListener('change', function() {\n updateScheduleTime(dateStr, schedule.id, this.value);\n debouncedSave();\n });\n \n timeDiv.appendChild(timeSelect);\n item.appendChild(timeDiv);\n \n \/\/ \ub0b4\uc6a9\n var content = createElement('div', 'schedule-content');\n \n var titleDiv = createElement('div', 'schedule-title');\n var titleInput = createElement('input');\n titleInput.type = 'text';\n titleInput.value = schedule.title;\n titleInput.placeholder = '\uc77c\uc815 \uc81c\ubaa9';\n \n titleInput.addEventListener('blur', function() {\n updateScheduleTitle(dateStr, schedule.id, this.value);\n debouncedSave();\n });\n \n titleDiv.appendChild(titleInput);\n content.appendChild(titleDiv);\n \n var descDiv = createElement('div', 'schedule-description');\n var descTextarea = createElement('textarea');\n descTextarea.placeholder = '\uc124\uba85 \ucd94\uac00...';\n descTextarea.value = schedule.description || '';\n \n descTextarea.addEventListener('blur', function() {\n updateScheduleDescription(dateStr, schedule.id, this.value);\n debouncedSave();\n });\n \n descDiv.appendChild(descTextarea);\n content.appendChild(descDiv);\n \n item.appendChild(content);\n \n \/\/ \uc0ad\uc81c \ubc84\ud2bc (\ud734\uc9c0\ud1b5 \uc544\uc774\ucf58)\n var actions = createElement('div', 'schedule-actions');\n var deleteBtn = createElement('button', 'schedule-delete-btn');\n deleteBtn.title = '\uc77c\uc815 \uc0ad\uc81c';\n \n var trashIcon = createElement('span', 'schedule-trash-icon', '\ud83d\uddd1\ufe0f');\n deleteBtn.appendChild(trashIcon);\n \n deleteBtn.addEventListener('click', function(e) {\n e.stopPropagation();\n deleteSchedule(dateStr, schedule.id);\n });\n \n actions.appendChild(deleteBtn);\n item.appendChild(actions);\n \n return item;\n }\n\n \/\/ \uad6c\ubd84\uc120 \uc0dd\uc131 (\uc77c\uc815 \ucd94\uac00\uc6a9)\n function createDivider(dateStr, position) {\n var divider = createElement('div', 'schedule-divider');\n var addBtn = createElement('button', 'add-btn', '+ \uc5ec\uae30\uc5d0 \uc77c\uc815 \ucd94\uac00');\n \n divider.addEventListener('click', function() {\n addNewScheduleAtPosition(dateStr, position);\n });\n \n divider.appendChild(addBtn);\n return divider;\n }\n\n \/\/ \ub0a0\uc9dc \uc815\ubcf4 \uc5c5\ub370\uc774\ud2b8\n function updateDayInfo(dateStr, field, value) {\n if (!dayInfo[dateStr]) {\n dayInfo[dateStr] = {\n title: '',\n accommodation: '',\n lunch: '',\n dinner: ''\n };\n }\n dayInfo[dateStr][field] = value;\n }\n\n \/\/ \ud2b9\uc815 \ub0a0\uc9dc\uc758 \uc77c\uc815\ub9cc \uc0c8\ub85c\uace0\uce68\n function refreshDaySchedules(dateStr, container) {\n if (!container) {\n container = document.getElementById('schedules-' + dateStr);\n }\n if (!container) return;\n \n container.innerHTML = '';\n \n var daySchedules = schedules[dateStr] || [];\n daySchedules.sort(function(a, b) {\n return a.time.localeCompare(b.time);\n });\n \n \/\/ \uccab \ubc88\uc9f8 \uad6c\ubd84\uc120\n container.appendChild(createDivider(dateStr, 0));\n \n \/\/ \uc77c\uc815\ub4e4\uacfc \uad6c\ubd84\uc120\ub4e4\n for (var i = 0; i < daySchedules.length; i++) {\n container.appendChild(createScheduleItem(daySchedules[i], dateStr));\n container.appendChild(createDivider(dateStr, i + 1));\n }\n }\n\n \/\/ \uce98\ub9b0\ub354 \ub80c\ub354\ub9c1\n function renderCalendar() {\n console.log('renderCalendar \uc2dc\uc791, schedules:', schedules);\n console.log('dayInfo:', dayInfo);\n console.log('customDates:', customDates);\n \n var calendar = document.getElementById('calendar');\n if (!calendar) {\n console.error('calendar \uc694\uc18c\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4');\n return;\n }\n \n calendar.innerHTML = '';\n \n var allDates = [];\n var startDate = new Date('2024-08-28');\n var endDate = new Date('2024-09-18');\n var currentDate = new Date(startDate);\n \n \/\/ \uae30\ubcf8 \ub0a0\uc9dc \ubc94\uc704\n while (currentDate <= endDate) {\n allDates.push(new Date(currentDate));\n currentDate.setDate(currentDate.getDate() + 1);\n }\n \n \/\/ \uc0ac\uc6a9\uc790 \ucd94\uac00 \ub0a0\uc9dc\n for (var i = 0; i < customDates.length; i++) {\n var customDate = new Date(customDates[i]);\n var exists = false;\n for (var j = 0; j < allDates.length; j++) {\n if (allDates[j].getTime() === customDate.getTime()) {\n exists = true;\n break;\n }\n }\n if (!exists) {\n allDates.push(customDate);\n }\n }\n \n \/\/ \uc815\ub82c\n allDates.sort(function(a, b) {\n return a.getTime() - b.getTime();\n });\n \n console.log('\uc0dd\uc131\ud560 \ub0a0\uc9dc \uc218:', allDates.length);\n \n \/\/ \ub0a0\uc9dc \ud589\ub4e4 \uc0dd\uc131\n for (var i = 0; i < allDates.length; i++) {\n var dateStr = allDates[i].toISOString().split('T')[0];\n console.log('\ub0a0\uc9dc \ud589 \uc0dd\uc131:', dateStr);\n var dayRow = createDayRow(allDates[i], dateStr);\n calendar.appendChild(dayRow);\n }\n \n console.log('\uce98\ub9b0\ub354 \ub80c\ub354\ub9c1 \uc644\ub8cc');\n }\n\n \/\/ \uc0c8 \uc77c\uc815 \ucd94\uac00\n function addNewScheduleAtPosition(dateStr, position) {\n var daySchedules = schedules[dateStr] || [];\n var defaultTime = '09:00';\n \n if (daySchedules.length > 0) {\n if (position === 0) {\n var firstTime = daySchedules[0].time;\n var hour = parseInt(firstTime.split(':')[0]);\n defaultTime = hour > 0 ? padStart(hour - 1, 2, '0') + ':00' : '23:30';\n } else if (position >= daySchedules.length) {\n var lastTime = daySchedules[daySchedules.length - 1].time;\n var hour = parseInt(lastTime.split(':')[0]);\n var minute = parseInt(lastTime.split(':')[1]);\n if (hour < 23 || minute < 30) {\n defaultTime = minute === 30 ? \n padStart(hour + 1, 2, '0') + ':00' : \n padStart(hour, 2, '0') + ':30';\n } else {\n defaultTime = '00:00';\n }\n }\n }\n \n var newSchedule = {\n id: Date.now().toString(),\n time: defaultTime,\n title: '\uc0c8 \uc77c\uc815',\n description: ''\n };\n \n if (!schedules[dateStr]) {\n schedules[dateStr] = [];\n }\n \n schedules[dateStr].push(newSchedule);\n refreshDaySchedules(dateStr);\n debouncedSave();\n }\n\n \/\/ \uc77c\uc815 \uc5c5\ub370\uc774\ud2b8 \ud568\uc218\ub4e4\n function updateScheduleTime(dateStr, scheduleId, newTime) {\n if (!schedules[dateStr]) return;\n \n for (var i = 0; i < schedules[dateStr].length; i++) {\n if (schedules[dateStr][i].id === scheduleId) {\n schedules[dateStr][i].time = newTime;\n break;\n }\n }\n refreshDaySchedules(dateStr);\n }\n\n function updateScheduleTitle(dateStr, scheduleId, newTitle) {\n if (!schedules[dateStr]) return;\n \n for (var i = 0; i < schedules[dateStr].length; i++) {\n if (schedules[dateStr][i].id === scheduleId) {\n schedules[dateStr][i].title = newTitle || '\uc0c8 \uc77c\uc815';\n break;\n }\n }\n }\n\n function updateScheduleDescription(dateStr, scheduleId, newDescription) {\n if (!schedules[dateStr]) return;\n \n for (var i = 0; i < schedules[dateStr].length; i++) {\n if (schedules[dateStr][i].id === scheduleId) {\n schedules[dateStr][i].description = newDescription;\n break;\n }\n }\n }\n\n function deleteSchedule(dateStr, scheduleId) {\n if (!confirm('\uc815\ub9d0\ub85c \uc774 \uc77c\uc815\uc744 \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) return;\n \n if (!schedules[dateStr]) return;\n \n schedules[dateStr] = schedules[dateStr].filter(function(schedule) {\n return schedule.id !== scheduleId;\n });\n \n if (schedules[dateStr].length === 0) {\n delete schedules[dateStr];\n }\n \n refreshDaySchedules(dateStr);\n debouncedSave();\n }\n\n function deleteDate(dateStr) {\n if (!confirm('\uc774 \ub0a0\uc9dc\uc640 \ubaa8\ub4e0 \uc77c\uc815\uc744 \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) return;\n \n delete schedules[dateStr];\n delete dayInfo[dateStr];\n \n customDates = customDates.filter(function(date) {\n return date !== dateStr;\n });\n \n renderCalendar();\n debouncedSave();\n }\n\n \/\/ \uac00\uc7a5 \ub9c8\uc9c0\ub9c9 \ub0a0\uc9dc \ucc3e\uae30\n function getLastDate() {\n var allDates = [];\n var startDate = new Date('2024-08-28');\n var endDate = new Date('2024-09-18');\n var currentDate = new Date(startDate);\n \n while (currentDate <= endDate) {\n allDates.push(new Date(currentDate));\n currentDate.setDate(currentDate.getDate() + 1);\n }\n \n for (var i = 0; i < customDates.length; i++) {\n var customDate = new Date(customDates[i]);\n var exists = false;\n for (var j = 0; j < allDates.length; j++) {\n if (allDates[j].getTime() === customDate.getTime()) {\n exists = true;\n break;\n }\n }\n if (!exists) {\n allDates.push(customDate);\n }\n }\n \n allDates.sort(function(a, b) {\n return a.getTime() - b.getTime();\n });\n \n return allDates.length > 0 ? allDates[allDates.length - 1] : new Date('2024-09-18');\n }\n\n \/\/ \ub2e4\uc74c \ub0a0\uc9dc \uc790\ub3d9 \ucd94\uac00\n function addNextDate() {\n var lastDate = getLastDate();\n var nextDate = new Date(lastDate);\n nextDate.setDate(nextDate.getDate() + 1);\n \n var nextDateStr = nextDate.toISOString().split('T')[0];\n \n if (customDates.indexOf(nextDateStr) !== -1) {\n alert('\uc774\ubbf8 \ucd94\uac00\ub41c \ub0a0\uc9dc\uc785\ub2c8\ub2e4.');\n return;\n }\n \n var startDate = new Date('2024-08-28');\n var endDate = new Date('2024-09-18');\n var isInBasicRange = nextDate >= startDate && nextDate <= endDate;\n \n if (!isInBasicRange) {\n customDates.push(nextDateStr);\n }\n \n renderCalendar();\n debouncedSave();\n \n setTimeout(function() {\n var allRows = document.querySelectorAll('.day-row');\n var targetRow = null;\n \n for (var i = 0; i < allRows.length; i++) {\n var titleElement = allRows[i].querySelector('.day-title');\n if (titleElement) {\n var month = nextDate.getMonth() + 1;\n var day = nextDate.getDate();\n var weekdays = ['\uc77c', '\uc6d4', '\ud654', '\uc218', '\ubaa9', '\uae08', '\ud1a0'];\n var weekday = weekdays[nextDate.getDay()];\n var expectedText = month + '\uc6d4 ' + day + '\uc77c (' + weekday + ')';\n \n if (titleElement.textContent === expectedText) {\n targetRow = allRows[i];\n break;\n }\n }\n }\n \n if (targetRow) {\n targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }, 100);\n }\n\n \/\/ \ubaa8\ub2ec \uad00\ub828\n function showAddDateModal() {\n document.getElementById('addDateModal').style.display = 'block';\n }\n\n function closeAddDateModal() {\n document.getElementById('addDateModal').style.display = 'none';\n document.getElementById('newDate').value = '';\n }\n\n function addNewDate() {\n var newDateStr = document.getElementById('newDate').value;\n \n if (!newDateStr) {\n alert('\ub0a0\uc9dc\ub97c \uc120\ud0dd\ud574\uc8fc\uc138\uc694.');\n return;\n }\n \n if (customDates.indexOf(newDateStr) !== -1) {\n alert('\uc774\ubbf8 \ucd94\uac00\ub41c \ub0a0\uc9dc\uc785\ub2c8\ub2e4.');\n return;\n }\n \n customDates.push(newDateStr);\n renderCalendar();\n closeAddDateModal();\n debouncedSave();\n }\n\n \/\/ \uacf5\uc720 \ub9c1\ud06c \uc0dd\uc131\n function generateShareLink() {\n const planId = getPlanId();\n const currentUrl = window.location.origin + window.location.pathname;\n const shareUrl = `${currentUrl}?plan=${planId}`;\n \n document.getElementById('shareUrlText').textContent = shareUrl;\n document.getElementById('shareUrl').style.display = 'block';\n \n \/\/ \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\n navigator.clipboard.writeText(shareUrl).then(() => {\n alert('\uacf5\uc720 \ub9c1\ud06c\uac00 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4!');\n }).catch(() => {\n alert('\ub9c1\ud06c\ub97c \uc218\ub3d9\uc73c\ub85c \ubcf5\uc0ac\ud574\uc8fc\uc138\uc694.');\n });\n }\n\n \/\/ URL\uc5d0\uc11c \ud50c\ub79c ID \ud655\uc778\n function checkUrlForPlanId() {\n const urlParams = new URLSearchParams(window.location.search);\n const planId = urlParams.get('plan');\n \n if (planId) {\n localStorage.setItem('travelPlanId', planId);\n \/\/ URL \uc815\ub9ac\n window.history.replaceState({}, document.title, window.location.pathname);\n return planId;\n }\n \n return null;\n }\n\n \/\/ \ub0b4\ubcf4\ub0b4\uae30\n function exportToTxt() {\n var content = '\uc5ec\ud589 \uc77c\uc815\\n===================\\n\\n';\n \n var allDates = [];\n var startDate = new Date('2024-08-28');\n var endDate = new Date('2024-09-18');\n var currentDate = new Date(startDate);\n \n while (currentDate <= endDate) {\n allDates.push(new Date(currentDate));\n currentDate.setDate(currentDate.getDate() + 1);\n }\n \n for (var i = 0; i < customDates.length; i++) {\n var customDate = new Date(customDates[i]);\n var exists = false;\n for (var j = 0; j < allDates.length; j++) {\n if (allDates[j].getTime() === customDate.getTime()) {\n exists = true;\n break;\n }\n }\n if (!exists) {\n allDates.push(customDate);\n }\n }\n \n allDates.sort(function(a, b) {\n return a.getTime() - b.getTime();\n });\n \n for (var i = 0; i < allDates.length; i++) {\n var date = allDates[i];\n var dateStr = date.toISOString().split('T')[0];\n var month = date.getMonth() + 1;\n var day = date.getDate();\n var weekdays = ['\uc77c', '\uc6d4', '\ud654', '\uc218', '\ubaa9', '\uae08', '\ud1a0'];\n var weekday = weekdays[date.getDay()];\n \n content += month + '\uc6d4 ' + day + '\uc77c (' + weekday + ')\\n';\n content += '-------------------\\n';\n \n var info = dayInfo[dateStr];\n if (info) {\n if (info.title) content += '\ud83d\udccb ' + info.title + '\\n';\n if (info.accommodation) content += '\ud83c\udfe8 \uc219\uc18c: ' + info.accommodation + '\\n';\n if (info.lunch) content += '\ud83c\udf7d\ufe0f \uc810\uc2ec: ' + info.lunch + '\\n';\n if (info.dinner) content += '\ud83c\udf77 \uc800\ub141: ' + info.dinner + '\\n';\n if (info.title || info.accommodation || info.lunch || info.dinner) {\n content += '\\n';\n }\n }\n \n var daySchedules = schedules[dateStr] || [];\n if (daySchedules.length === 0) {\n content += '\uc77c\uc815\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.\\n\\n';\n } else {\n daySchedules.sort(function(a, b) {\n return a.time.localeCompare(b.time);\n });\n \n for (var j = 0; j < daySchedules.length; j++) {\n var schedule = daySchedules[j];\n content += schedule.time + ' - ' + schedule.title;\n if (schedule.description) {\n content += '\\n ' + schedule.description;\n }\n content += '\\n\\n';\n }\n }\n }\n \n var blob = new Blob([content], { type: 'text\/plain;charset=utf-8' });\n var link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = '\uc5ec\ud589\uc77c\uc815_' + new Date().toISOString().split('T')[0] + '.txt';\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n }\n\n \/\/ \ucd08\uae30\ud654\n async function initialize() {\n console.log('\ucd08\uae30\ud654 \uc2dc\uc791...');\n \n \/\/ \uae30\ubcf8 \uc124\uc815\n generateTimeOptions();\n \n \/\/ URL\uc5d0\uc11c \ud50c\ub79c ID \ud655\uc778\n checkUrlForPlanId();\n \n \/\/ Firebase \ucd08\uae30\ud654 \uc2dc\ub3c4\n const firebaseInitialized = await initializeFirebase();\n \n \/\/ \ub370\uc774\ud130 \ub85c\ub4dc \uc2dc\ub3c4\n const dataLoaded = await loadData();\n \n if (!dataLoaded) {\n console.log('\uae30\ubcf8 \ub370\uc774\ud130\ub85c \ucd08\uae30\ud654 \uc2dc\uc791');\n initializeDefaultData();\n console.log('\uae30\ubcf8 \ub370\uc774\ud130 \uc124\uc815 \uc644\ub8cc:', schedules);\n \n \/\/ \uae30\ubcf8 \ub370\uc774\ud130\ub97c \uc989\uc2dc \uc800\uc7a5\n await saveData();\n } else {\n console.log('\uc800\uc7a5\ub41c \ub370\uc774\ud130 \ub85c\ub4dc \uc644\ub8cc');\n }\n \n \/\/ \uce98\ub9b0\ub354 \ub80c\ub354\ub9c1\n console.log('\uce98\ub9b0\ub354 \ub80c\ub354\ub9c1 \uc2dc\uc791...');\n renderCalendar();\n console.log('\uce98\ub9b0\ub354 \ub80c\ub354\ub9c1 \uc644\ub8cc');\n }\n\n \/\/ \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ub4f1\ub85d\n document.addEventListener('DOMContentLoaded', function() {\n console.log('\ud398\uc774\uc9c0 \ub85c\ub4dc \uc644\ub8cc, \ucd08\uae30\ud654 \uc2dc\uc791');\n \n \/\/ \ucd08\uae30\ud654 \uc2e4\ud589\n initialize().catch(error => {\n console.error('\ucd08\uae30\ud654 \uc911 \uc624\ub958:', error);\n \/\/ \uc624\ub958\uac00 \ubc1c\uc0dd\ud574\ub3c4 \uae30\ubcf8 \ub370\uc774\ud130\ub85c \uacc4\uc18d \uc9c4\ud589\n initializeDefaultData();\n renderCalendar();\n });\n \n \/\/ \ud398\uc774\uc9c0 \uc885\ub8cc \uc804 \uc790\ub3d9 \uc800\uc7a5\n window.addEventListener('beforeunload', function() {\n saveData();\n });\n \n \/\/ \uc8fc\uae30\uc801 \uc790\ub3d9 \uc800\uc7a5 (5\ubd84\ub9c8\ub2e4)\n setInterval(function() {\n if (isFirebaseConfigured) {\n saveData();\n }\n }, 300000);\n \n \/\/ \ubc84\ud2bc \uc774\ubca4\ud2b8\n document.getElementById('addDateBtn').addEventListener('click', addNextDate);\n document.getElementById('shareBtn').addEventListener('click', generateShareLink);\n document.getElementById('exportBtn').addEventListener('click', exportToTxt);\n document.getElementById('closeModal').addEventListener('click', closeAddDateModal);\n document.getElementById('cancelBtn').addEventListener('click', closeAddDateModal);\n document.getElementById('confirmBtn').addEventListener('click', addNewDate);\n \n \/\/ \ubaa8\ub2ec \uc678\ubd80 \ud074\ub9ad\uc2dc \ub2eb\uae30\n document.getElementById('addDateModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeAddDateModal();\n }\n });\n \n console.log('\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ub4f1\ub85d \uc644\ub8cc');\n });\n\n \/\/ \uc804\uc5ed \ud568\uc218\ub85c \ub178\ucd9c (\ub514\ubc84\uae45\uc6a9)\n window.travelPlan = {\n saveData,\n loadData,\n exportToTxt,\n generateShareLink,\n schedules,\n dayInfo,\n customDates,\n renderCalendar,\n initializeDefaultData\n };\n\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac – Firebase \uc5f0\ub3d9 Firebase \uc5f0\uacb0 \ub300\uae30\uc911… \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac 2024\ub144 8\uc6d4 28\uc77c ~ 9\uc6d4 18\uc77c \ud83d\udd17 \uacf5\uc720\ub9c1\ud06c \uc0dd\uc131 \ud83d\udcc4 \ub0b4\ubcf4\ub0b4\uae30 \uacf5\uc720 \ub9c1\ud06c: \uc774 \ub9c1\ud06c\ub97c \ubcf5\uc0ac\ud558\uc5ec \ub2e4\ub978 \uc0ac\ub78c\uacfc…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2187","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2187"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2187\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}