🐛 Fix DOM safety issues in todo-list page

- 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
This commit is contained in:
hyungi
2025-09-25 10:10:56 +09:00
parent 03e6fe5b91
commit 4e13b53388

View File

@@ -363,7 +363,10 @@
}; };
const todayString = today.toLocaleDateString('ko-KR', options); const todayString = today.toLocaleDateString('ko-KR', options);
document.getElementById('todayDate').textContent = todayString; const todayElement = document.getElementById('todayDate');
if (todayElement) {
todayElement.textContent = todayString;
}
} }
// Todo 목록 렌더링 // Todo 목록 렌더링
@@ -372,14 +375,24 @@
const emptyState = document.getElementById('emptyState'); const emptyState = document.getElementById('emptyState');
const todoCount = document.getElementById('todoCount'); const todoCount = document.getElementById('todoCount');
todoCount.textContent = `${todos.length}`; // todoCount 요소가 존재하는 경우에만 업데이트
if (todoCount) {
todoCount.textContent = `${todos.length}`;
}
if (!todos || todos.length === 0) { if (!todos || todos.length === 0) {
showEmptyState(); showEmptyState();
return; 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"}); const seoulTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Seoul"});
@@ -474,9 +487,13 @@
// 빈 상태 표시 // 빈 상태 표시
function showEmptyState() { function showEmptyState() {
document.getElementById('todoList').innerHTML = ''; const todoList = document.getElementById('todoList');
document.getElementById('emptyState').classList.remove('hidden'); const emptyState = document.getElementById('emptyState');
document.getElementById('todoCount').textContent = '0개'; const todoCount = document.getElementById('todoCount');
if (todoList) todoList.innerHTML = '';
if (emptyState) emptyState.classList.remove('hidden');
if (todoCount) todoCount.textContent = '0개';
} }
// Todo 완료 처리 // Todo 완료 처리
@@ -530,22 +547,34 @@
if (todo) { if (todo) {
// 현재 날짜를 기본값으로 설정 // 현재 날짜를 기본값으로 설정
const currentDate = new Date(todo.start_date); 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() { function closeDateModal() {
currentTodoId = null; currentTodoId = null;
document.getElementById('dateModal').classList.add('hidden'); const dateModalElement = document.getElementById('dateModal');
if (dateModalElement) {
dateModalElement.classList.add('hidden');
}
} }
// 날짜 변경 확인 // 날짜 변경 확인
async function confirmDateChange() { async function confirmDateChange() {
if (!currentTodoId) return; if (!currentTodoId) return;
const newDate = document.getElementById('newDueDate').value; const newDueDateElement = document.getElementById('newDueDate');
if (!newDueDateElement) return;
const newDate = newDueDateElement.value;
if (!newDate) { if (!newDate) {
alert('새로운 날짜를 선택해주세요.'); alert('새로운 날짜를 선택해주세요.');
return; return;