🐛 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:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user