+ {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..ca7f62d
--- /dev/null
+++ b/src/pages/TodoPage.jsx
@@ -0,0 +1,190 @@
+// src/pages/TodoPage.js
+import React, { useState, useEffect } from "react";
+import { useNavigate } from 'react-router-dom';
+
+
+import Header from '../component/Header1'; // .jsx 또는 .js 일 수 있음
+import AddTodo from '../component/AddTodo'; // .jsx 또는 .js 일 수 있음
+import Category from '../component/Category'; // .jsx 또는 .js 일 수 있음
+import TodoList from '../component/TodoList'; // .jsx 또는 .js 일 수 있음
+
+// TodoPage에서 직접 "../App.css"를 import 할 필요는 없습니다.
+// App.js에서 전역으로 import 하고 있기 때문입니다.
+
+const LOCAL_STORAGE_KEY_TODOS = "react-todo-app.tasks"; // 로그인 정보와 구분되는 키
+
+function TodoPage() {
+ const navigate = useNavigate();
+ const [currentUser, setCurrentUser] = useState(null);
+
+ const [tasks, setTasks] = useState(() => {
+ try {
+ const storedTasks = localStorage.getItem(LOCAL_STORAGE_KEY_TODOS);
+ // 저장된 tasks가 있다면, editing: false 기본값을 추가 (하위 호환성)
+ return storedTasks
+ ? JSON.parse(storedTasks).map(task => ({ ...task, editing: task.editing || false }))
+ : [];
+ } catch (error) {
+ console.error("Failed to load tasks from localStorage:", error);
+ return [];
+ }
+ });
+
+ const [inputValue, setInputValue] = useState("");
+ const [filter, setFilter] = useState("all"); // 필터 상태 (all, active, completed)
+
+ // 1. 로그인 상태 확인
+ useEffect(() => {
+ const loggedInUser = localStorage.getItem('loggedInUser');
+ if (loggedInUser) {
+ setCurrentUser(JSON.parse(loggedInUser));
+ } else {
+ alert('로그인이 필요합니다.');
+ navigate('/login'); // 로그인 안되어 있으면 로그인 페이지로 강제 이동
+ }
+ }, [navigate]);
+
+ // 2. tasks 배열 변경 시 localStorage에 저장
+ useEffect(() => {
+ try {
+ localStorage.setItem(LOCAL_STORAGE_KEY_TODOS, JSON.stringify(tasks));
+ } catch (error)
+ {
+ console.error("Failed to save tasks to localStorage:", error);
+ }
+ }, [tasks]);
+
+ // 로그아웃 처리
+ const handleLogout = () => {
+ localStorage.removeItem('loggedInUser');
+ setCurrentUser(null);
+ alert('로그아웃 되었습니다.');
+ navigate('/login'); // 로그아웃 후 로그인 페이지로 이동
+ };
+
+ // 새 할 일 추가
+ const addTask = () => {
+ if (inputValue.trim()) {
+ const newTask = {
+ // id: Date.now() + Math.random(), // 고유 ID 보장
+ id: crypto.randomUUID(), // 더 현대적이고 고유한 ID 생성 방식
+ name: inputValue.trim(),
+ completed: false,
+ editing: false, // 새로 추가된 작업은 편집 모드가 아님
+ };
+ setTasks(prevTasks => [...prevTasks, newTask]);
+ setInputValue(""); // 입력 필드 초기화
+ }
+ };
+
+ // 할 일 완료/미완료 토글
+ const toggleTask = (id) => {
+ setTasks(prevTasks =>
+ prevTasks.map(task =>
+ task.id === id ? { ...task, completed: !task.completed } : task
+ )
+ );
+ };
+
+ // 할 일 삭제
+ const deleteTask = (id) => {
+ setTasks(prevTasks => prevTasks.filter(task => task.id !== id));
+ };
+
+ // 할 일 편집 모드 시작
+ const startEditTask = (id) => {
+ setTasks(prevTasks =>
+ prevTasks.map(task =>
+ // 클릭된 task만 editing: true로, 나머지는 false로 설정 (한 번에 하나만 편집)
+ task.id === id ? { ...task, editing: true } : { ...task, editing: false }
+ )
+ );
+ };
+
+ // 할 일 편집 완료 (저장)
+ const finishEditTask = (id, newName) => {
+ if (newName && newName.trim()) {
+ setTasks(prevTasks =>
+ prevTasks.map(task =>
+ task.id === id ? { ...task, name: newName.trim(), editing: false } : task
+ )
+ );
+ } else {
+ // 새 이름이 비어있다면 편집 취소 (또는 사용자에게 알림)
+ cancelEditTask(id);
+ }
+ };
+
+ // 할 일 편집 취소
+ const cancelEditTask = (id) => {
+ setTasks(prevTasks =>
+ prevTasks.map(task =>
+ task.id === id ? { ...task, editing: false } : task // 해당 task의 editing만 false로
+ )
+ );
+ };
+
+ // 현재 필터에 따라 보여줄 할 일 목록
+ const filteredTasks = tasks.filter((task) => {
+ if (filter === "active") return !task.completed;
+ if (filter === "completed") return task.completed;
+ return true; // 'all' 또는 기본값
+ });
+
+ // 완료되지 않은 할 일의 수
+ const activeCount = tasks.filter(task => !task.completed).length;
+
+ // currentUser가 없을 경우 (로그인 정보 로딩 중 또는 비로그인 리다이렉트 전) 로딩 표시
+ if (!currentUser) {
+ return
Loading user data...
;
+ }
+
+ return (
+ // App.js의 .app-container가 이미 전체를 감싸고 있으므로,
+ // TodoPage의 최상위는 div가 아닌 React.Fragment (<> ) 여도 괜찮습니다.
+ // 여기서는 구조적 명확성을 위해 div를 유지합니다.
+
+ {/* Header 컴포넌트에 사용자 이름 등을 prop으로 전달 */}
+
+
+
+
+ {/* 할 일 추가 입력폼 컴포넌트 */}
+
+
+ {/* 필터 버튼 그룹 컴포넌트 */}
+
+
+ {/* 할 일 목록 표시 컴포넌트 */}
+
+
+ );
+}
+
+export default TodoPage;
\ 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: {