import React, { useState, useEffect, useRef } from "react"; import { Check, Plus, CalendarDays } from 'lucide-react'; // 오늘 날짜 문자열 (yyyy-mm-dd) function getToday() { const d = new Date(); d.setHours(0,0,0,0); return d.toISOString().split('T')[0]; } // 이번주 날짜 목록 (일~토, yyyy-mm-dd) function getWeekDates() { const today = new Date(); const day = today.getDay(); // 0 일, 1 월 ... 6 토 const start = new Date(today); start.setDate(today.getDate() - day); let arr = []; for (let i = 0; i < 7; i++) { const d = new Date(start); d.setDate(start.getDate() + i); arr.push(d.toISOString().split('T')[0]); } return arr; } const weekDay = ['일', '월', '화', '수', '목', '금', '토']; export default function App() { const [habits, setHabits] = useStorage('habits', []); const [history, setHistory] = useStorage('habitHistory', {}); const [input, setInput] = useState(''); const [adding, setAdding] = useState(false); const today = getToday(); const weekDates = getWeekDates(); // 습관 달성률 계산 const totalChecks = habits.length * 7; const doneChecks = habits.reduce((sum, h) => { return sum + weekDates.filter(d=>history?.[d]?.includes(h.id)).length; }, 0); const progress = totalChecks === 0 ? 0 : doneChecks / totalChecks; // 연속일 계산 function getStreak(hid) { let streak = 0; let cur = new Date(today); for(let i=0;i<365;i++){ const day = cur.toISOString().split('T')[0]; if(history?.[day]?.includes(hid)) streak++; else break; cur.setDate(cur.getDate()-1); } return streak; } // 체크 토글 const toggleCheck = (day, hid) => { setHistory(prev => { const arr = Array.isArray(prev[day]) ? [...prev[day]] : []; if(arr.includes(hid)) { return { ...prev, [day]: arr.filter(id=>id!==hid) }; } else { arr.push(hid); return { ...prev, [day]: arr }; } }); }; function handleAddHabit() { const name = input.trim(); if(!name) return; setHabits(prev=>[...prev,{id:Date.now().toString(),name}]); setInput(''); setAdding(false); } function handleDeleteHabit(id) { setHabits(prev=>prev.filter(h=>h.id!==id)); // 관련 기록도 삭제 setHistory(prev => { const next = {...prev}; for(const day in next) { next[day] = next[day]?.filter(hid=>hid!==id); } return next; }); } // 링차트 const R = 40, C = 2 * Math.PI * R; // 애니메이션용 const [displayProg, setDisplayProg] = useState(0); useEffect(()=>{ setTimeout(()=>setDisplayProg(progress), 250); },[progress]); return (

{/* 목표 달성률 링 차트 */}

{Math.round(progress*100)}% 이번주 목표 달성

{doneChecks} / {totalChecks}회 완료

{/* 습관 목록 + 추가 */}

오늘의 습관

{habits.length===0 && (

아직 등록된 습관이 없습니다

)} {habits.length>0 && (

{habit.name} {getStreak(habit.id)>1 && ( {getStreak(habit.id)}일 연속 )}

)}

{/* 습관 체크 히트맵 (주간) */} {habits.length>0 && (

주간 히트맵

{weekDates.map((d,idx)=>( ))} {habits.map(habit=>( {weekDates.map((d,idx)=>{ const checked = history?.[d]?.includes(habit.id); return ( ); })} ))}

습관	{weekDay[idx]}
{habit.name}

)}

{/* 습관 추가 모달 */} {adding && (

{setAdding(false); setInput('');}}/>

습관 추가

setInput(e.target.value)} onKeyDown={e=>{if(e.key==="Enter"){handleAddHabit();}}} autoFocus />

)}

); }

습관 트래커

습관 트래커

reviews