Skip to content

Commit efb6270

Browse files
ZUITOPIAZUITOPIA
committed
refactor: <Header>와 <TaskWrapper> 부분 컴포넌트로 분리함과 동시에 Task를 Todo라는 이름으로 통일
1 parent 9f9d6fc commit efb6270

8 files changed

Lines changed: 118 additions & 81 deletions

File tree

‎src/App.jsx‎

Lines changed: 2 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,4 @@
1-
import TaskSection from "./components/shared/TaskSection";
2-
import useLocalStorage from "./components/hooks/useLocalStorage";
3-
import Input from "./components/shared/Input";
4-
import { Text } from "./components/shared/UI";
5-
import { Style } from "./components/styles/App.styles";
6-
1+
import Todo from "./components/pages/Todo";
72
export default function App() {
8-
const [todos, setTodos] = useLocalStorage("todos", []);
9-
const [completed, setCompleted] = useLocalStorage("completed", []);
10-
11-
const handleAddTodo = (todo) => {
12-
setTodos([todo, ...todos]);
13-
};
14-
15-
const handleToggleTodo = (index, isCompleted) => {
16-
if (isCompleted) {
17-
const newCompleted = completed.filter((_, i) => i !== index);
18-
const todoToMove = completed[index];
19-
setCompleted(newCompleted);
20-
setTodos([todoToMove, ...todos]);
21-
} else {
22-
const newTodos = todos.filter((_, i) => i !== index);
23-
const completedTodo = todos[index];
24-
setTodos(newTodos);
25-
setCompleted([completedTodo, ...completed]);
26-
}
27-
};
28-
29-
const deleteTodo = (index) => {
30-
const newTodos = todos.filter((_, i) => i !== index);
31-
setTodos(newTodos);
32-
};
33-
34-
const deleteDone = (index) => {
35-
const newCompleted = completed.filter((_, i) => i !== index);
36-
setCompleted(newCompleted);
37-
};
38-
39-
return (
40-
<Style.AppWrapper>
41-
<Style.Header>
42-
<Style.TitleWrapper>
43-
<Style.GameIcon src="game2.png" alt="game" />
44-
<Text.Title>SCHEDULE</Text.Title>
45-
</Style.TitleWrapper>
46-
47-
<Input addTodo={handleAddTodo} />
48-
</Style.Header>
49-
50-
<Style.TaskSectionWrapper>
51-
<TaskSection
52-
title="IN PROGRESS"
53-
items={todos}
54-
onToggle={handleToggleTodo}
55-
onDelete={deleteTodo}
56-
isCompleted={false}
57-
/>
58-
59-
<TaskSection
60-
title="COMPLETED"
61-
items={completed}
62-
onToggle={handleToggleTodo}
63-
onDelete={deleteDone}
64-
isCompleted={true}
65-
/>
66-
</Style.TaskSectionWrapper>
67-
</Style.AppWrapper>
68-
);
3+
return <Todo />;
694
}

‎src/components/Header.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Input from "./shared/Input";
2+
import { Text } from "./shared/UI";
3+
import { Style } from "./styles/Todo.styles";
4+
5+
const Header = ({ addTodo }) => (
6+
<Style.Header>
7+
<Style.TitleWrapper>
8+
<Style.GameIcon src="game2.png" alt="game" />
9+
<Text.Title>SCHEDULE</Text.Title>
10+
</Style.TitleWrapper>
11+
<Input addTodo={addTodo} />
12+
</Style.Header>
13+
);
14+
15+
export default Header;

‎src/components/TodoWrapper.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import TodoSection from "./shared/TodoSection";
2+
import { Style } from "./styles/Todo.styles";
3+
4+
export default function TodoWrapper({
5+
todos,
6+
completed,
7+
handleToggleTodo,
8+
deleteTodo,
9+
deleteDone,
10+
}) {
11+
return (
12+
<>
13+
<Style.TodoSectionWrapper>
14+
<TodoSection
15+
title="IN PROGRESS"
16+
items={todos}
17+
onToggle={handleToggleTodo}
18+
onDelete={deleteTodo}
19+
isCompleted={false}
20+
/>
21+
22+
<TodoSection
23+
title="COMPLETED"
24+
items={completed}
25+
onToggle={handleToggleTodo}
26+
onDelete={deleteDone}
27+
isCompleted={true}
28+
/>
29+
</Style.TodoSectionWrapper>
30+
</>
31+
);
32+
}

‎src/components/pages/TodoMainPage.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Header from "../Header";
2+
import TodoWrapper from "../TodoWrapper";
3+
4+
import useLocalStorage from "../hooks/useLocalStorage";
5+
import { Style } from "../styles/Todo.styles";
6+
7+
export default function TodoMainPage() {
8+
const [todos, setTodos] = useLocalStorage("todos", []);
9+
const [completed, setCompleted] = useLocalStorage("completed", []);
10+
11+
const handleAddTodo = (todo) => {
12+
setTodos((prevTodos) => [todo, ...prevTodos]);
13+
};
14+
15+
const handleToggleTodo = (index, isCompleted) => {
16+
setTodos((prevTodos) => {
17+
if (isCompleted) {
18+
const newCompleted = completed.filter((_, i) => i !== index);
19+
const todoToMove = completed[index];
20+
setCompleted(newCompleted);
21+
return [todoToMove, ...prevTodos];
22+
} else {
23+
const newTodos = prevTodos.filter((_, i) => i !== index);
24+
const completedTodo = prevTodos[index];
25+
setCompleted((prevCompleted) => [completedTodo, ...prevCompleted]);
26+
return newTodos;
27+
}
28+
});
29+
};
30+
31+
const deleteTodo = (index) => {
32+
setTodos((prevTodos) => prevTodos.filter((_, i) => i !== index));
33+
};
34+
35+
const deleteDone = (index) => {
36+
setCompleted((prevCompleted) =>
37+
prevCompleted.filter((_, i) => i !== index)
38+
);
39+
};
40+
41+
return (
42+
<>
43+
<Style.AppWrapper>
44+
<Header addTodo={handleAddTodo} />
45+
<TodoWrapper
46+
todos={todos}
47+
completed={completed}
48+
handleToggleTodo={handleToggleTodo}
49+
deleteTodo={deleteTodo}
50+
deleteDone={deleteDone}
51+
/>
52+
</Style.AppWrapper>
53+
</>
54+
);
55+
}

src/components/shared/Task.jsx renamed to src/components/shared/Todo.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import TaskItem from "./TaskItem";
2-
import { Style } from "../styles/Task.styles";
1+
import TodoItem from "./TodoItem";
2+
import { Style } from "../styles/Todo.styles";
33

4-
export default function Task({ items, onToggle, onDelete, isCompleted }) {
4+
export default function Todo({ items, onToggle, onDelete, isCompleted }) {
55
return (
66
<Style.Wrapper>
77
{items.map((todo, index) => (
8-
<TaskItem
8+
<TodoItem
99
key={index}
1010
todo={todo}
1111
isCompleted={isCompleted}

src/components/shared/TaskItem.jsx renamed to src/components/shared/TodoItem.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Text, Button } from "./UI";
2-
import { Style } from "../styles/Task.styles";
2+
import { Style } from "../styles/Todo.styles";
33

4-
export default function TaskItem({ todo, isCompleted, onToggle, onDelete }) {
4+
export default function TodoItem({ todo, isCompleted, onToggle, onDelete }) {
55
return (
66
<Style.ItemWrapper>
77
{isCompleted ? (

src/components/shared/TaskSection.jsx renamed to src/components/shared/TodoSection.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import Task from "./Task";
1+
import Todo from "./Todo";
22
import { Text } from "./UI";
3-
import { Style } from "../styles/App.styles";
3+
import { Style } from "../styles/Todo.styles";
44

5-
export default function TaskSection({
5+
export default function TodoSection({
66
title,
77
items,
88
onToggle,
99
onDelete,
1010
isCompleted,
1111
}) {
1212
return (
13-
<Style.TaskWrapper>
13+
<Style.TodoWrapper>
1414
<Text.MiniTitle>
1515
{title} ({items.length})
1616
</Text.MiniTitle>
17-
<Task
17+
<Todo
1818
items={items}
1919
onToggle={onToggle}
2020
onDelete={onDelete}
2121
isCompleted={isCompleted}
2222
/>
23-
</Style.TaskWrapper>
23+
</Style.TodoWrapper>
2424
);
2525
}

src/components/styles/App.styles.js renamed to src/components/styles/Todo.styles.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export const Style = {
2424
width: 35px;
2525
margin-right: 10px;
2626
`,
27-
TaskSectionWrapper: styled.div`
27+
TodoSectionWrapper: styled.div`
2828
display: flex;
2929
justify-content: center;
3030
align-items: center;
3131
`,
32-
TaskWrapper: styled.section`
32+
TodoWrapper: styled.section`
3333
width: 100%;
3434
display: flex;
3535
flex-direction: column;

0 commit comments

Comments
 (0)