import React, { useState, useRef, useEffect } from "react"; import { Plus, Clock, ArrowUp, PauseCircle, ListChecks } from "lucide-react"; function sumTimes(tasks) { return tasks.reduce((sum, t) => sum + (typeof t.time === 'number' ? t.time : 0), 0); } // Greedy auto-arrange + break insert function compressAndArrange(tasks) { // Sort by priority DESC, then by estimated time ASC const sorted = [...tasks].sort((a, b) => { if (b.priority !== a.priority) return b.priority - a.priority; return a.time - b.time; }); // Insert break after every 90 min of work chunks if >2 tasks let arranged = [], chunk = [], chunkTime = 0; for (let i = 0; i < sorted.length; i++) { const t = sorted[i]; chunk.push(t); chunkTime += t.time; // If chunkTime>=90 or last task, push chunk + break if more tasks after const nextTime = sorted[i+1]?.time || 0; if (chunkTime >= 90 || i === sorted.length-1) { arranged.push(...chunk); chunk = []; chunkTime = 0; if (i < sorted.length-1) { // Suggest break, 10 min arranged.push({id: `break-${i}`, isBreak: true, time: 10}); } } } return arranged; } function guessPriority(title) { // Simple heuristic const lowwords = ['정리', '청소', '메일', '응답', '알림', '확인', '정돈']; const upwords = ['보고서', '마감', '중요', '회의', '프레젠테이션', '제출', '기획', '상담', '피드백', '면접']; if (upwords.some((w) => title.includes(w))) return 3; if (lowwords.some((w) => title.includes(w))) return 1; return 2; } const priorityColor = [ 'border-slate-300', // 0/unused 'border-sky-400', // 1 - 낮음 'border-amber-400', // 2 - 보통 'border-rose-500', // 3 - 높음 ]; const priorityLabel = ['','낮음','보통','높음']; export default function App() { // STORAGE: tasks array [{id, title, time, priority}] const [tasks, setTasks] = useSharedStorage("taskcompressor.tasks", []); const [arranged, setArranged] = useState([]); const [input, setInput] = useState(""); const [inputTime, setInputTime] = useState(30); const [inputPrio, setInputPrio] = useState(2); const [showAll, setShowAll] = useState(true); const inputRef = useRef(); // Update arranged when tasks change useEffect(() => { setArranged(compressAndArrange(tasks)); }, [tasks]); // Add new task function handleAddTask() { const title = input.trim(); if (!title || !(inputTime > 0)) return; setTasks([ ...tasks, { id: Date.now().toString(), title, time: inputTime, priority: inputPrio, }, ]); setInput(""); setInputTime(30); setInputPrio(guessPriority(title)); setTimeout(() => inputRef.current?.focus(), 100); } function handleDeleteTask(id) { setTasks(tasks.filter((t) => t.id !== id)); } function handlePrioClick(id, dir=1) { setTasks(tasks.map(t=>t.id===id? {...t, priority: Math.max(1, Math.min(3, t.priority+dir))}:t)); } // Show only today's packed plan, or all const busyDay = sumTimes(tasks) > 240; // 4시간 초과: packed // Editing controls (drag-reorder): skip for minimalism // UI color: deep blue background, glass cards, sky-rose accent return (

Task Compressor

하루의 할일을 효율적으로 자동 정렬하고, 집중 타임과 휴게시간을 추천합니다

{/* 입력 섹션 */}

{ setInput(e.target.value); setInputPrio(guessPriority(e.target.value)); }} onKeyDown={e => { if(e.key==='Enter') handleAddTask(); }} aria-label="할 일 입력" maxLength={60} /> setInputTime(Math.max(5, Math.min(240, Number(e.target.value))))} className="w-16 bg-white/80 text-sm rounded-lg px-2 py-2 border border-gray-200 text-gray-700" aria-label="예상 소요(분)" /> 분

우선순위 :

{[1,2,3].map(n=> )}

(자동 추천: 중요 단어 감지)

{/* 오늘 일정 표시 */}

오늘({tasks.length}건) 총 {sumTimes(tasks)}분 {busyDay? 시간이 빡빡해요! : 여유 있음}

{/* 일정 압축 결과 표시 */}

{arranged.length===0 && (

오늘의 할 일을 입력해보세요

시간 추정과 함께 할 일을 추가하면 자동으로 정렬·휴게 계획이 만들어져요

)} {arranged.map((item, i)=>item.isBreak?(

잠시 휴식(10분, 스트레칭!)

):(

{item.title}

예상 {item.time}분 · 우선 {priorityLabel[item.priority]}

))}

{/* break - plan guide */} {arranged.length > 2 && (

집중 유지 TIP: 한 번에 90분 넘게 작업하면 머리가 쉽게 피로해져요. 압축 일정에 자동으로 휴식타임을 제안해드렸어요. 휴게시간에는 가벼운 산책이나 스트레칭을 해보세요!

)} {/* 데이터 최신/출처 */}

{new Date().toLocaleTimeString()} 기준 · TaskCompressor 로컬 데이터

); }