import { Plus, X, Check } from "lucide-react"; export default function App() { // Inter font 적용 useEffect(() => { const link = document.createElement('link'); link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'; link.rel = 'stylesheet'; document.head.appendChild(link); return () => { document.head.removeChild(link); }; }, []); // familyMembers: [{ id, name }] const [familyMembers, setFamilyMembers] = useSharedStorage("familyMembers", []); // tasks: [{ id, title, assigneeId, dueDate(YYYY-MM-DD), completed }] const [tasks, setTasks] = useSharedStorage("familyTasks", []); // Add task 모달 상태 const [showAdd, setShowAdd] = useState(false); // AddTask form 입력값 const initialForm = { title: "", assigneeId: "", assigneeName: "", dueDate: "" }; const [form, setForm] = useState(initialForm); const [formError, setFormError] = useState(""); const titleInputRef = useRef(null); // familyMembers 동적 추출: tasks의 담당자, 중복없는 이름 const memberIdToName = {}; (familyMembers || []).forEach((m) => { memberIdToName[m.id] = m.name; }); (tasks || []).forEach((t) => { if (t.assigneeId && t.assigneeName && !memberIdToName[t.assigneeId]) { memberIdToName[t.assigneeId] = t.assigneeName; } }); // 멤버 정렬: 이름순 const memberArr = Object.entries(memberIdToName).map(([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name, "ko")); // 멤버별로 할일 그룹 const groupedTasks = {}; (memberArr || []).forEach((m) => { groupedTasks[m.id] = []; }); (tasks || []).forEach((t) => { if (!groupedTasks[t.assigneeId]) groupedTasks[t.assigneeId] = []; groupedTasks[t.assigneeId].push(t); }); // 멤버별 미완료 개수 const pendingCount = {}; Object.keys(groupedTasks).forEach((id) => { pendingCount[id] = (groupedTasks[id] || []).filter((t) => !t.completed).length; }); // 할일 추가 const handleAddTask = (e) => { e && e.preventDefault(); setFormError(""); const { title, assigneeId, assigneeName, dueDate } = form; if (!title.trim()) { setFormError("할일 제목을 입력하세요"); titleInputRef.current?.focus(); return; } if (!assigneeName.trim()) { setFormError("담당자 이름을 입력하세요"); return; } if (!dueDate.trim()) { setFormError("마감일을 선택하세요"); return; } // 담당자 ID 지정 (신규면 새로 추가) let memberId = assigneeId; if (!memberId) { // 이름 중복 시 기존 사용 const found = (familyMembers || []).find((m) => m.name.trim() === assigneeName.trim()); if (found) memberId = found.id; else memberId = "f" + Date.now(); } // familyMembers에 없으면 등록 if (!(familyMembers || []).some((m) => m.id === memberId)) { setFamilyMembers([...familyMembers, { id: memberId, name: assigneeName.trim() }]); } // 새 할일 생성 const task = { id: "t" + Date.now() + Math.floor(Math.random() * 9999), title: title.trim(), assigneeId: memberId, assigneeName: assigneeName.trim(), dueDate: dueDate, completed: false, }; setTasks([...tasks, task]); setForm(initialForm); setShowAdd(false); }; // 할일 완료 토글 const handleToggleComplete = (taskId) => { setTasks((tasks || []).map((t) => t.id === taskId ? { ...t, completed: !t.completed } : t)); }; // 폼 오픈 시 입력창 포커스 useEffect(() => { if (showAdd && titleInputRef.current) { setTimeout(() => titleInputRef.current?.focus(), 200); } }, [showAdd]); // 오늘 이후 날짜 min값 const todayStr = new Date().toISOString().slice(0, 10); // 할일 없는 상태 const hasTasks = tasks && tasks.length > 0; // AddTaskForm 내부: 기존 멤버(자동완성 지원), 그 외 새 멤버 직접 입력(신규 담당자) const allNames = Array.from(new Set([...(familyMembers || []).map(m => m.name), ...Object.values(memberIdToName)])); // 담당자 선택 input 지원: 선택 or 직접입력 function handleAssigneeChange(e) { const name = e.target.value; const found = (familyMembers || []).find(m => m.name === name); setForm({ ...form, assigneeName: name, assigneeId: found ? found.id : "" }); } // 엔터로 제출 지원 function onFormKeyDown(e) { if (e.key === "Enter") handleAddTask(e); } // UI 렌더링 return (

{/* 헤더 */}

가족 할일

{/* 메인 내용 */}

{hasTasks ? ( memberArr.length === 0 ? null : (memberArr || []).map((m) => (

{m.name} {pendingCount[m.id] ?? 0}개 남음

{/* 체크박스 */}

{task.title}

마감: {task.dueDate}

)) ) : ( // 빈 상태 표시

👨‍👩‍👦

아직 할일이 없습니다

가족과 함께 첫 할일을 추가해보세요

)}

{/* Floating Add Task Button */} {/* Add Task Modal */} {showAdd && (

할일 추가

할일 제목 setForm({ ...form, title: e.target.value })} onKeyDown={onFormKeyDown} autoFocus required />

담당자 {(allNames || []).map((n) =>

마감일 setForm({ ...form, dueDate: e.target.value })} required />

{formError ?

{formError}

: null}

)}

); }