아웃

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>심플라이너 (SimpLiner)</title>
    <style>
        :root { --bg-color: #f7f9fc; --primary: #4a90e2; --text: #333; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg-color); color: var(--text); margin: 0; padding: 20px; display: flex; justify-content: center; }
        .app-container { width: 100%; max-width: 600px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        
        /* 헤더 & 입력창 */
        h1 { font-size: 20px; margin-bottom: 20px; text-align: center; color: var(--primary); }
        .input-group { display: flex; gap: 10px; margin-bottom: 20px; }
        select { padding: 10px; border: 1px solid #ddd; border-radius: 6px; outline: none; }
        input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; outline: none; }
        button.add-btn { padding: 10px 20px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
        button.add-btn:hover { background: #357abd; }

        /* 필터(카테고리 보기) */
        .filter-group { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; gap: 10px; align-items: center; font-size: 14px; }
        
        /* 리스트 아이템 */
        ul { list-style: none; padding: 0; margin: 0; }
        li { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; transition: all 0.2s; }
        li.completed span { text-decoration: line-through; color: #aaa; }
        
        /* 아웃라이너 들여쓰기 스타일 */
        .indent-1 { margin-left: 20px; border-left: 2px solid #eee; padding-left: 10px; }
        .indent-2 { margin-left: 40px; border-left: 2px solid #eee; padding-left: 10px; }
        .indent-3 { margin-left: 60px; border-left: 2px solid #eee; padding-left: 10px; }

        .checkbox { margin-right: 10px; cursor: pointer; width: 18px; height: 18px; }
        .content { flex-grow: 1; font-size: 16px; }
        .category-tag { font-size: 11px; padding: 2px 6px; background: #eee; border-radius: 4px; margin-right: 8px; color: #666; }
        
        /* 조작 버튼들 */
        .actions { display: flex; gap: 4px; opacity: 0.3; transition: opacity 0.2s; }
        li:hover .actions { opacity: 1; }
        .btn-small { background: none; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 12px; padding: 2px 6px; }
        .btn-del { color: red; border-color: #ffcccc; }
    </style>
</head>
<body>

<div class="app-container">
    <h1>📝 SimpLiner</h1>
    
    <div class="input-group">
        <select id="categorySelect">
            <option value="기본">기본</option>
            <option value="업무">업무</option>
            <option value="아이디어">아이디어</option>
            <option value="일정">일정</option>
        </select>
        <input type="text" id="taskInput" placeholder="할 일을 입력하고 Enter..." onkeypress="handleEnter(event)">
        <button class="add-btn" onclick="addTask()">추가</button>
    </div>

    <div class="filter-group">
        <strong>📂 폴더 보기:</strong>
        <select id="filterSelect" onchange="renderList()">
            <option value="all">전체 보기</option>
            <option value="기본">기본</option>
            <option value="업무">업무</option>
            <option value="아이디어">아이디어</option>
            <option value="일정">일정</option>
        </select>
    </div>

    <ul id="taskList"></ul>
</div>

<script>
    // 초기 데이터 로드 (로컬 스토리지)
    let tasks = JSON.parse(localStorage.getItem('simplerTasks')) || [];

    function saveTasks() {
        localStorage.setItem('simplerTasks', JSON.stringify(tasks));
        renderList();
    }

    function handleEnter(e) {
        if (e.key === 'Enter') addTask();
    }

    function addTask() {
        const input = document.getElementById('taskInput');
        const category = document.getElementById('categorySelect').value;
        const text = input.value.trim();
        
        if (text === '') return;

        tasks.push({
            id: Date.now(),
            text: text,
            category: category,
            completed: false,
            indent: 0 // 들여쓰기 레벨 (0~3)
        });

        input.value = '';
        saveTasks();
    }

    function toggleComplete(id) {
        tasks = tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t);
        saveTasks();
    }

    function deleteTask(id) {
        tasks = tasks.filter(t => t.id !== id);
        saveTasks();
    }

    function changeIndent(id, direction) {
        tasks = tasks.map(t => {
            if (t.id === id) {
                let newIndent = t.indent + direction;
                if (newIndent < 0) newIndent = 0;
                if (newIndent > 3) newIndent = 3;
                return { ...t, indent: newIndent };
            }
            return t;
        });
        saveTasks();
    }

    function renderList() {
        const list = document.getElementById('taskList');
        const filter = document.getElementById('filterSelect').value;
        list.innerHTML = '';

        tasks.forEach(task => {
            // 필터링 로직
            if (filter !== 'all' && task.category !== filter) return;

            const li = document.createElement('li');
            // 아웃라이너 들여쓰기 클래스 적용
            li.className = `indent-${task.indent} ${task.completed ? 'completed' : ''}`;
            
            li.innerHTML = `
                <input type="checkbox" class="checkbox" ${task.completed ? 'checked' : ''} onclick="toggleComplete(${task.id})">
                <span class="category-tag">${task.category}</span>
                <span class="content">${task.text}</span>
                <div class="actions">
                    <button class="btn-small" onclick="changeIndent(${task.id}, -1)">◀</button>
                    <button class="btn-small" onclick="changeIndent(${task.id}, 1)">▶</button>
                    <button class="btn-small btn-del" onclick="deleteTask(${task.id})">삭제</button>
                </div>
            `;
            list.appendChild(li);
        });
    }

    // 초기 렌더링
    renderList();
</script>

</body>
</html>

댓글

댓글 쓰기