+ {isEditing ? (
+ // --- 수정 모드 UI ---
+ <>
+
+ {/* TextComponent가 있다면 사용, 없다면 일반 span/p 태그 사용 */}
+ {TextComponent ? : New name for {task.name}}
+
+
+
+
+ Cancel
+
+
+ Save
+
+
+
+ ) : (
+ // --- 일반 모드 UI ---
+ <>
+
+ {/* CheckboxComponent가 있다고 가정 */}
+ toggleTask(task.id)} // App.jsx의 toggleTask 호출
+ />
+ !isEditing && toggleTask(task.id)} // 텍스트 클릭으로도 토글 (수정 중 아닐 때만)
+ >
+ {/* TextComponent가 있다면 사용, 없다면 그냥 텍스트 표시 */}
+ {TextComponent ? : task.name}
+
+
+
+
+ Edit
+
+ deleteTask(task.id)} className="delete-button">
+ Delete
+
+
+
+ )}
);
}
-export default Todo;
+export default TodoComponent;
\ No newline at end of file
diff --git a/src/component/TodoList.jsx b/src/component/TodoList.jsx
index 7341a74..a009fe9 100644
--- a/src/component/TodoList.jsx
+++ b/src/component/TodoList.jsx
@@ -1,22 +1,47 @@
-// src/components/TodoList.jsx
-import TextComponent from "./TextComponent";
-import Todo from "./Todo";
+// src/component/TodoList.jsx
+import React from 'react'; // useState는 TodoComponent로 이동했으므로 여기선 필요 없을 수 있음
+import TodoComponent from './TodoComponent'; // 방금 만든 TodoComponent를 import
+import TextComponent from './TextComponent';
+
+import '../App.css';
+
+function TodoList({ filteredTasks, toggleTask, editTask, deleteTask, activeCount }) {
+ // TodoList 내의 편집 관련 상태는 TodoComponent로 이동했습니다.
+ // const [editingTaskId, setEditingTaskId] = useState(null);
+ // const [editingTextValue, setEditingTextValue] = useState("");
+
+ // 핸들러 함수들도 TodoComponent로 이동했습니다.
+ // const handleEditClick = (task) => { ... };
+ // const handleSaveClick = (id) => { ... };
+ // const handleCancelClick = () => { ... };
+
+ // 만약 filteredTasks가 비어있을 때 메시지를 표시하고 싶다면
+ if (!filteredTasks || filteredTasks.length === 0) {
+ return (
+
+ );
+ }
-function TodoList({ filteredTasks, toggleTask, editTask, deleteTask }) {
return (
-
+
- {filteredTasks.map((task, index) => (
- (
+ // 각 task에 대해 TodoComponent를 렌더링하고 필요한 props 전달
+
))}
@@ -24,5 +49,4 @@ function TodoList({ filteredTasks, toggleTask, editTask, deleteTask }) {
);
}
-export default TodoList;
-
+export default TodoList;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index e69de29..08a3ac9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..13c4dfe
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function HomePage() {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+ );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..b256de3
--- /dev/null
+++ b/src/pages/LoginPage.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function LoginPage() {
+ const [id, setId] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+ const navigate = useNavigate();
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ setError('');
+ console.log('Login attempt:', { id, password });
+ if (id === 'abcde' && password === '1234') { // 임시 로그인 성공 조건
+ alert('로그인 성공!');
+ navigate('/todo');
+ } else {
+ setError('•');
+ }
+ };
+
+ return (
+
+
로그인
+
+
+
+ );
+}
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/pages/SignupPage.jsx b/src/pages/SignupPage.jsx
new file mode 100644
index 0000000..b4486af
--- /dev/null
+++ b/src/pages/SignupPage.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function SignupPage() {
+ const [name, setName] = useState('');
+ const [id, setId] = useState('');
+ const [password, setPassword] = useState('');
+ const navigate = useNavigate();
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ console.log('Signup attempt:', { name, id, password });
+ alert('회원가입 요청이 전송되었습니다.');
+ navigate('/login');
+ };
+
+ return (
+
+ );
+}
+
+export default SignupPage;
\ No newline at end of file
diff --git a/src/pages/TodoPage.jsx b/src/pages/TodoPage.jsx
new file mode 100644
index 0000000..b138f9d
--- /dev/null
+++ b/src/pages/TodoPage.jsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import Header from "../component/Header";
+import AddTodo from "../component/AddTodo";
+import Category from "../component/Category";
+import TodoList from "../component/TodoList";
+import "../App.css";
+
+const LOCAL_STORAGE_KEY = "react-todo-app.tasks";
+
+function App() {
+ const [tasks, setTasks] = useState(() => {
+ try {
+ const storedTasks = localStorage.getItem(LOCAL_STORAGE_KEY);
+ return storedTasks ? JSON.parse(storedTasks) : [];
+ } catch (error) {
+ console.error("Failed to load tasks from localStorage:", error);
+ return [];
+ }
+ });
+
+ const [inputValue, setInputValue] = useState("");
+ const [filter, setFilter] = useState("all");
+
+ const [displayTaskCount, setDisplayTaskCount] = useState(tasks.length);
+
+ useEffect(() => {
+ try {
+ localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(tasks));
+ } catch (error) {
+ console.error("Failed to save tasks to localStorage:", error);
+ }
+ }, [tasks]);
+
+ const addTask = () => {
+ if (inputValue.trim()) {
+ const newTask = {
+ id: Date.now() + Math.random(),
+ name: inputValue.trim(),
+ completed: false,
+ };
+ setTasks([...tasks, newTask]);
+ setDisplayTaskCount(prevCount => prevCount + 1);
+ setInputValue("");
+ }
+ };
+
+ const toggleTask = (id) => {
+ const updatedTasks = tasks.map(task =>
+ task.id === id ? { ...task, completed: !task.completed } : task
+ );
+ setTasks(updatedTasks);
+ };
+
+ const deleteTask = (id) => {
+ console.log("App.jsx: deleteTask, id:", id);
+ const updatedTasks = tasks.filter(task => task.id !== id);
+ setTasks(updatedTasks);
+ setDisplayTaskCount(prevCount => prevCount - 1);
+ };
+
+ const editTask = (id, newName) => {
+ if (newName && newName.trim()) {
+ const updatedTasks = tasks.map(task =>
+ task.id === id ? { ...task, name: newName.trim() } : task
+ );
+ setTasks(updatedTasks);
+ }
+ };
+
+ const filteredTasks = tasks.filter((task) => {
+ if (filter === "all") return true;
+ if (filter === "active") return !task.completed;
+ if (filter === "completed") return task.completed;
+ return true;
+ });
+
+ return (
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 0891f5f..f661291 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,4 +1,4 @@
- import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react";
import { resolve } from "node:path";
import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
},
},
server: {
-
+ // 로컬호스트 변경
+ host: "localhost",
port: 3000,
},
build: {