import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
// [삭제] import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    // [추가] Tailwind CSS v4 Vite 플러그인
    tailwindcss(),
  ],

  // [추가] JSX 변환을 리믹스 컴포넌트 기준으로 설정
  esbuild: {
    jsx: 'automatic',
    jsxImportSource: '@remix-run/component',
  },
})

{
  "compilerOptions": {
    ...
    ...
    /* 다른 부분은 나두고 아래 부분만 수정 */
    "jsx": "react-jsx",
    "jsxImportSource": "@remix-run/component"
  },
  "include": ["src"]
}

import js from "@eslint/js";
import globals from "globals";
// import reactHooks from 'eslint-plugin-react-hooks'
// import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from "typescript-eslint";
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      // reactHooks.configs.flat.recommended,
      // reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
]);

@import "tailwindcss";

src/
├── main.tsx                # 진입점
├── types.ts                # 공통 타입
├── App.tsx                 # 메인 로직
└── components/
    ├── TaskInput.tsx       # 입력창
    ├── TaskList.tsx        # 목록 (삭제 버튼 포함)
    └── TaskFilter.tsx      # 필터 버튼

export interface Task {
  id: number
  title: string
  completed: boolean
}

export type FilterType = 'all' | 'active' | 'completed'

import type { Handle } from "@remix-run/component";

interface TaskInputProps {
  onAdd: (title: string) => void;
}

export function TaskInput(this: Handle, { onAdd }: TaskInputProps) {
  let inputEl: HTMLInputElement | null = null;

  const handleSubmit = () => {
    if (inputEl?.value.trim()) {
      onAdd(inputEl.value.trim());
      inputEl.value = "";
      inputEl.focus();
    }
  };

  return () => (
    <div class="flex gap-2 mb-6">
      <input
        class="flex-1 p-3 border border-gray-300 rounded-lg
               focus:outline-none focus:ring-2 focus-ring-blue-500
               shadow-sm transition"
        connect={(el: HTMLInputElement) => (inputEl = el)}
        type="text"
        placeholder="Todo 리스트를 입력하세요..."
        on={{
          keydown: (e: KeyboardEvent) => {
            if (e.key === "Enter" && !e.isComposing) handleSubmit();
          },
        }}
      />
      <button
        class="px-5 py-3 bg-blue-600 text-white font-semibold rounded-lg
               hover:bg-blue-700 active:transform active:scale-95 transition
               shadow-md cursor-pointer"
        on={{ click: handleSubmit }}
      >
        Add
      </button>
    </div>
  );
}

import type { Handle } from "@remix-run/component";
import type { Task, FilterType } from "../types";

interface TaskListProps {
  tasks: Task[];
  filter: FilterType;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

export function TaskList(this: Handle) {
  return ({ tasks, filter, onToggle, onDelete }: TaskListProps) => {
    const filteredTasks = tasks.filter((t) => {
      if (filter === "active") return !t.completed;
      if (filter === "completed") return t.completed;
      return true;
    });
    if (filteredTasks.length === 0) {
      return <p class="text-center text-gray-500 py-4">No Todos</p>;
    }

    return (
      <ul class="space-py-3">
        {filteredTasks.map((task) => (
          <li
            key={task.id}
            class="flex items-center justify-between p-4
                   bg-white border border-gray-100 rounded-lg shadow-sm
                   hover:shadow-md transition group"
          >
            <div class="flex items-center gap-3 overflow-hidden">
              <input
                type="checkbox"
                checked={task.completed}
                class="w-5 h-5 accent-blue-600 cursor-pointer"
                on={{ change: () => onToggle(task.id) }}
              />
              <span
                class={`truncate select-none transition-colors duration-200
               ${
                 task.completed ? "text-gray-400 line-through" : "text-gray-800"
               }
               `}
              >
                {task.title}
              </span>
            </div>

            <button
              class="opacity-0 group-hover:opacity-100 px-3 py-1 text-xs font-medium
                     text-red-500 border border-red-200 rounded hover:bg-red-500
                     transition-all cursor-pointer"
              on={{ click: () => onDelete(task.id) }}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    );
  };
}

import type { Handle } from "@remix-run/component";
import type { FilterType } from "../types";

interface TaskFilterProps {
  current: FilterType;
  onChange: (filter: FilterType) => void;
}

export function TaskFilter(this: Handle) {
  const renderButton = (
    label: string,
    value: FilterType,
    current: FilterType,
    onChange: any
  ) => {
    const isActive = current === value;

    return (
      <button
        class={`px-4 py-2 text-sm font-medium rounded-md transition-colors cursor-pointer ${
          isActive
            ? "bg-gray-800 text-white shadow"
            : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"
        }`}
        on={{ click: () => onChange(value) }}
      >
        {label}
      </button>
    );
  };

  return ({ current, onChange }: TaskFilterProps) => (
    <div>
      {renderButton("All", "all", current, onChange)}
      {renderButton("Active", "active", current, onChange)}
      {renderButton("Completed", "completed", current, onChange)}
    </div>
  );
}

import type { Handle } from "@remix-run/component";
import type { Task, FilterType } from "./types";
import { TaskInput } from "./components/TaskInput";
import { TaskFilter } from "./components/TaskFilter";
import { TaskList } from "./components/TaskList";

export default function App(this: Handle) {
  // [Setup Phase] 상태 초기화 (단 1회 실행)
  let tasks: Task[] = [];
  let nextId = 1;
  let filter: FilterType = "all";

  // 할 일 추가 로직
  const addTask = (title: string) => {
    tasks.push({ id: nextId++, title, completed: false });
    // 할 일을 추가했으니 화면 업데이트가 필요하죠
    // 아래와 같이 this.update()로 간단하게 구현합니다.
    this.update();
  };

  // 할 일 토글
  const toggleTask = (id: number) => {
    const task = tasks.find((t) => t.id === id);
    if (task) {
      task.completed = !task.completed;
      this.update();
    }
  };

  // 할 일 삭제
  const deleteTask = (id: number) => {
    tasks = tasks.filter((t) => t.id !== id);
    this.update();
  };

  // 필터 변경
  const setFilter = (newFilter: FilterType) => {
    filter = newFilter;
    this.update();
  };

  // [Render Phase] 화면 렌더링
  return () => (
    <div class="min-h-screen bg-gray-50 py-10 px-4 font-sans">
      <div
        class="max-w-lg mx-auto bg-white p-8 rounded-xl
               shadow-xl border border-gray-100"
      >
        <h1
          class="text-3xl font-bold text-center
                 text-gray-800 mb-8 tracking-tight"
        >
          Remix 3 Todo List
        </h1>

        <TaskInput onAdd={addTask} />
        <TaskFilter current={filter} onChange={setFilter} />
        <TaskList
          tasks={tasks}
          filter={filter}
          onToggle={toggleTask}
          onDelete={deleteTask}
        />
      </div>
    </div>
  );
}

import { createRoot } from '@remix-run/component'
import App from './App'
import './index.css' // Tailwind가 포함된 CSS

createRoot(document.getElementById('root')!).render(<App />)