script.js

document.addEventListener('DOMContentLoaded', () => {
    const titleInput = document.getElementById('todo-title');
    const detailsInput = document.getElementById('todo-details');
    const saveButton = document.getElementById('save-button');
    const todoList = document.getElementById('todo-list');

    let todos = JSON.parse(localStorage.getItem('todos')) || [];

    const saveTodos = () => {
        localStorage.setItem('todos', JSON.stringify(todos));
    };

    const renderTodos = () => {
        todoList.innerHTML = '';
        todos.forEach((todo, index) => {
            const li = document.createElement('li');
            li.innerHTML = `
                <div class="todo-item">
                    <span class="todo-title">${todo.title}</span>
                    <p class="todo-details-view" style="display: none;">${todo.details}</p>
                </div>
                <button class="delete-button" data-index="${index}">삭제</button>
            `;
            const titleElement = li.querySelector('.todo-title');
            titleElement.addEventListener('click', () => {
                const detailsView = li.querySelector('.todo-details-view');
                if (detailsView) {
                    detailsView.style.display = detailsView.style.display === 'none' ? 'block' : 'none';
                }
            });
            todoList.appendChild(li);
        });
    };

    saveButton.addEventListener('click', () => {
        const title = titleInput.value.trim();
        const details = detailsInput.value.trim();

        if (title) {
            todos.push({ title, details });
            saveTodos();
            renderTodos();
            titleInput.value = '';
            detailsInput.value = '';
        } else {
            alert('제목을 입력해주세요.');
        }
    });

    todoList.addEventListener('click', (e) => {
        if (e.target.classList.contains('delete-button')) {
            const index = e.target.getAttribute('data-index');
            todos.splice(index, 1);
            saveTodos();
            renderTodos();
        }
    });

    renderTodos();
});