Neon Postgres를 사용한 Todo 앱

"use client";
import { ChangeEvent, FC, useState } from "react";
import { todoType } from "@/types/todoType";

interface Props {
  todo: todoType;
  changeTodoText: (id: number, text: string) => void;
  toggleIsTodoDone: (id: number, done: boolean) => void;
  deleteTodoItem: (id: number) => void;
}

const Todo: FC = ({
  todo,
  changeTodoText,
  toggleIsTodoDone,
  deleteTodoItem,
}) => {
  // 편집 모드를 관리하는 상태
  const [editing, setEditing] = useState(false);

  // 텍스트 입력을 관리하는 상태
  const [text, setText] = useState(todo.text);

  // 완료 상태를 관리하는 상태
  const [isDone, setIsDone] = useState(todo.done);

  // 텍스트 입력 변경 이벤트 핸들러
  const handleTextChange = (e: ChangeEvent) => {
    setText(e.target.value);
  };

  // 완료 상태 토글 이벤트 핸들러
  const handleIsDone = async () => {
    toggleIsTodoDone(todo.id, !isDone);
    setIsDone((prev) => !prev);
  };

  // 편집 모드 시작 이벤트 핸들러
  const handleEdit = () => {
    setEditing(true);
  };

  // 편집된 텍스트 저장 이벤트 핸들러
  const handleSave = async () => {
    changeTodoText(todo.id, text);
    setEditing(false);
  };

  // 편집 모드 취소 이벤트 핸들러
  const handleCancel = () => {
    setEditing(false);
    setText(todo.text);
  };

  // 할 일 항목 삭제 이벤트 핸들러
  const handleDelete = () => {
    if (confirm("이 할 일을 삭제하시겠습니까?")) {
      deleteTodoItem(todo.id);
    }
  };

  // Todo 컴포넌트 렌더링
  return (
    <div>
      {/* 완료 상태를 표시하는 체크박스 */}
      <input
        type="checkbox"
        className="text-blue-200 rounded-sm h-4 w-4"
        checked={isDone}
        onChange={handleIsDone}
      />
      {/* 할 일 텍스트 입력 필드 */}
      <input
        type="text"
        value={text}
        onChange={handleTextChange}
        readOnly={!editing}
        className={`${
          todo.done ? "line-through" : ""
        } outline-none read-only:border-transparent focus:border border-gray-200 rounded px-2 py-1 w-full`}
      />
      {/* 편집, 저장, 취소, 삭제 버튼 */}
      <div>
        {editing ? (
          <button
            onClick={handleSave}
            className="bg-green-600 text-green-50 rounded px-2 w-14 py-1"
          >
            저장
          </button>
        ) : (
          <button
            onClick={handleEdit}
            className="bg-blue-400 text-blue-50 rounded w-14 px-2 py-1"
          >
            편집
          </button>
        )}
        {editing ? (
          <button
            onClick={handleCancel}
            className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
          >
            닫기
          </button>
        ) : (
          <button
            onClick={handleDelete}
            className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
          >
            삭제
          </button>
        )}
      </div>
    </div>
  );
};

export default Todo;