🐛 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);
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;