import React, { useState, useEffect, useRef } from "react"; import { Play, Pause, RotateCcw, Clock, FileText, Check, Trash2, Edit } from "lucide-react"; // 기본 포모도로 설정 (25분 집중+5분 휴식) const FOCUS_MIN = 25; const BREAK_MIN = 5; const CYCLE = [ { label: "집중", minutes: FOCUS_MIN }, { label: "휴식", minutes: BREAK_MIN } ]; function pad(n) { return n < 10 ? `0${n}` : `${n}`; } export default function App() { // 타이머 상태 및 흐름 const [cycleIdx, setCycleIdx] = useState(0); // 현재 단계 (집중/휴식) const [secondsLeft, setSecondsLeft] = useState(CYCLE[0].minutes * 60); const [isRunning, setIsRunning] = useState(false); const [completedSessions, setCompletedSessions] = useState(() => { return parseInt(window.localStorage.getItem("pomodoro_sessions") || "0"); }); const intervalRef = useRef(null); // 노트 (아이디어/공식) 빠른 메모 const [notes, setNotes] = useSharedStorage("study_notes", []); const [input, setInput] = useState(""); const [isEditingId, setIsEditingId] = useState(null); const [editValue, setEditValue] = useState(""); // 타이머 작동 useEffect(() => { if (isRunning) { intervalRef.current = setInterval(() => { setSecondsLeft(prev => { if (prev === 1) { clearInterval(intervalRef.current); handleFinish(); return 0; } return prev - 1; }); }, 1000); } else if (intervalRef.current) { clearInterval(intervalRef.current); } return () => clearInterval(intervalRef.current); // eslint-disable-next-line }, [isRunning]); // 스프린트 단계 변경 function handleFinish() { if (cycleIdx === 0) { setCompletedSessions(c => { window.localStorage.setItem("pomodoro_sessions", c + 1); return c + 1; }); } // 인터벌 변경 (집중→휴식, 휴식→집중) const nextIdx = (cycleIdx + 1) % CYCLE.length; setCycleIdx(nextIdx); setSecondsLeft(CYCLE[nextIdx].minutes * 60); setIsRunning(false); } // 새 스프린트 시작/리셋 function resetTimer() { setIsRunning(false); setCycleIdx(0); setSecondsLeft(CYCLE[0].minutes * 60); } // 타이머 진행 퍼센트 const total = CYCLE[cycleIdx].minutes * 60; const percent = Math.round(((total - secondsLeft) / total) * 100); const mm = pad(Math.floor(secondsLeft / 60)); const ss = pad(secondsLeft % 60); // 노트 등록 function handleAddNote(e) { e.preventDefault(); const value = input.trim(); if (!value) return; setNotes([ { id: Date.now(), text: value }, ...notes, ]); setInput(""); } // 노트 삭제 function handleDeleteNote(id) { setNotes(notes.filter(n => n.id !== id)); } // 노트 편집 저장 function handleEditSave(id) { setNotes(notes.map(n => n.id === id ? { ...n, text: editValue } : n)); setIsEditingId(null); setEditValue(""); } // 에디팅 진입 function handleEdit(id, text) { setIsEditingId(id); setEditValue(text); } // 오늘 날짜 const today = new Date(); const todayStr = today.toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit", weekday: "short" }); return (

{/* 헤더 */}

Study Sprint

{todayStr} · 집중 세션 {completedSessions}

{/* 메인 */}

{/* 타이머 카드 */}

{cycleIdx === 0 ? "🧑‍🎓 집중" : "☕ 휴식"}

{mm}:{ss}

{isRunning ? ( ) : ( )}

{cycleIdx === 0 ? ( 집중 세션이 끝나면 자동으로 휴식이 시작됩니다 ) : ( 휴식 후 집중 단계로 전환됩니다 )}

{/* 빠른노트 카드 */}

빠른 노트 (아이디어/공식)

아직 노트가 없습니다
{isEditingId === n.id ? ( <> setEditValue(e.target.value)} autoFocus /> ) : ( <> {n.text} )}

{/* 완료 세션/팁 */}

오늘 집중 세션: {completedSessions}

Tip: 집중 시간이 끝나면 짧게 일어나서 스트레칭 해 보세요. 효율적으로 공부하고, 노트에 '암기'할 점을 바로 저장해 두세요.

{/* 데이터 출처(오프라인 앱이라 불필요), 디자인 시스템 적용 안내 */}

⏱️ Study Sprint 타이머 · 빠른 노트 · 디자인 시스템 적용

); }