From 4e13b5338853a437b23238497b3dbf6291946b9e Mon Sep 17 00:00:00 2001
From: hyungi <hyungi@Hyungiui-Macmini.local>
Date: Thu, 25 Sep 2025 10:10:56 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20DOM=20safety=20issues=20in?=
 =?UTF-8?q?=20todo-list=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add null checks for all DOM element access in renderTodos()
- Fix todoCount element null reference errors
- Add safety checks for emptyState, todoList, todayDate elements
- Prevent TypeError when DOM elements are not found
- Improve modal DOM element access with null checks

Resolves:
- TypeError: null is not an object (evaluating 'todoCount.textContent')
- DOM element access errors on todo-list page
- Unhandled Promise Rejection errors

Tested: Todo list page now handles missing DOM elements gracefully
---
 frontend/todo-list.html | 49 ++++++++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/frontend/todo-list.html b/frontend/todo-list.html
index cc7c257..9aa5007 100644
--- a/frontend/todo-list.html
+++ b/frontend/todo-list.html
@@ -363,7 +363,10 @@
             };
             
             const todayString = today.toLocaleDateString('ko-KR', options);
-            document.getElementById('todayDate').textContent = todayString;
+            const todayElement = document.getElementById('todayDate');
+            if (todayElement) {
+                todayElement.textContent = todayString;
+            }
         }
 
         // Todo 목록 렌더링
@@ -372,14 +375,24 @@
             const emptyState = document.getElementById('emptyState');
             const todoCount = document.getElementById('todoCount');
 
-            todoCount.textContent = `${todos.length}개`;
+            // todoCount 요소가 존재하는 경우에만 업데이트
+            if (todoCount) {
+                todoCount.textContent = `${todos.length}개`;
+            }
 
             if (!todos || todos.length === 0) {
                 showEmptyState();
                 return;
             }
 
-            emptyState.classList.add('hidden');
+            if (emptyState) {
+                emptyState.classList.add('hidden');
+            }
+            
+            if (!todoList) {
+                console.error('todoList element not found');
+                return;
+            }
             
             // 서울 시간 기준 오늘 날짜 계산
             const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
@@ -474,9 +487,13 @@
 
         // 빈 상태 표시
         function showEmptyState() {
-            document.getElementById('todoList').innerHTML = '';
-            document.getElementById('emptyState').classList.remove('hidden');
-            document.getElementById('todoCount').textContent = '0개';
+            const todoList = document.getElementById('todoList');
+            const emptyState = document.getElementById('emptyState');
+            const todoCount = document.getElementById('todoCount');
+            
+            if (todoList) todoList.innerHTML = '';
+            if (emptyState) emptyState.classList.remove('hidden');
+            if (todoCount) todoCount.textContent = '0개';
         }
 
         // Todo 완료 처리
@@ -530,22 +547,34 @@
             if (todo) {
                 // 현재 날짜를 기본값으로 설정
                 const currentDate = new Date(todo.start_date);
-                document.getElementById('newDueDate').value = currentDate.toISOString().split('T')[0];
+                const newDueDateElement = document.getElementById('newDueDate');
+                if (newDueDateElement) {
+                    newDueDateElement.value = currentDate.toISOString().split('T')[0];
+                }
+            }
+            const dateModalElement = document.getElementById('dateModal');
+            if (dateModalElement) {
+                dateModalElement.classList.remove('hidden');
             }
-            document.getElementById('dateModal').classList.remove('hidden');
         }
 
         // 날짜 선택 모달 닫기
         function closeDateModal() {
             currentTodoId = null;
-            document.getElementById('dateModal').classList.add('hidden');
+            const dateModalElement = document.getElementById('dateModal');
+            if (dateModalElement) {
+                dateModalElement.classList.add('hidden');
+            }
         }
 
         // 날짜 변경 확인
         async function confirmDateChange() {
             if (!currentTodoId) return;
 
-            const newDate = document.getElementById('newDueDate').value;
+            const newDueDateElement = document.getElementById('newDueDate');
+            if (!newDueDateElement) return;
+            
+            const newDate = newDueDateElement.value;
             if (!newDate) {
                 alert('새로운 날짜를 선택해주세요.');
                 return;