[#4][#5] 투투 리스트 페이지 요구사항 구현

src/components/feature/TodoInputForm/index.tsx

@@ -0,0 +1,24 @@
+import * as S from './styled';
+import { Input, Button } from '../../';
+import useTodoInputForm from './useTodoInputForm';
+
+type Props = {
+	onCreateNewTodoSubmit: (newTodo: string) => void;
+};
+
+const TodoInputForm = (props: Props) => {
+	const { newTodo, handleNewTodoInput, handleCreateNewTodoSubmit } = useTodoInputForm({
+		onCreateNewTodoSubmit: props.onCreateNewTodoSubmit,
+	});
+
+	return (
+		<S.TodoInputForm onSubmit={handleCreateNewTodoSubmit}>
+			<Input type="text" placeholder="할 일을 입력하세요." value={newTodo} onChange={handleNewTodoInput} />
+			<Button type="submit" disabled={!newTodo}>
+				추가
+			</Button>
+		</S.TodoInputForm>
+	);
+};
+
+export default TodoInputForm;

src/components/feature/TodoInputForm/styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const TodoInputForm = styled.form`
+	display: flex;
+
+	& > input {
+		flex: 11;
+	}
+
+	& > button {
+		flex: 1;
+		padding: 0 2em;
+	}
+`;

src/components/feature/TodoInputForm/useTodoInputForm.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+type Props = {
+	onCreateNewTodoSubmit: (newTodo: string) => void;
+};
+
+const useTodoInputForm = (props: Props) => {
+	const [newTodo, setNewTodo] = useState('');
+
+	const handleNewTodoInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		setNewTodo(event.currentTarget.value);
+	};
+
+	const handleCreateNewTodoSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		props.onCreateNewTodoSubmit(newTodo);
+		setNewTodo('');
+	};
+
+	return { newTodo, handleNewTodoInput, handleCreateNewTodoSubmit };
+};
+
+export default useTodoInputForm;

src/components/feature/TodoItem/index.tsx

@@ -0,0 +1,69 @@
+import * as S from './styled';
+import { Button, Input } from '../../';
+import { theme } from '../../../styles';
+import { Todo } from '../../../types/todo';
+import useTodoItem from './useTodoItem';
+
+type Props = {
+	todo: Todo;
+	onTodoCompletedToggle: (targetTodo: Todo) => void;
+	onTodoItemEdit: (targetTodo: Todo, newTodo: string) => void;
+	onTodoItemDelete: (targetTodo: Todo) => void;
+};
+
+const TodoItem = (props: Props) => {
+	const {
+		isEditMode,
+		todo,
+		onTodoItemCompletedButtonClick,
+		onIsEditModeToggle,
+		onTodoItemChange,
+		onTodoItemEditSubmitClick,
+		onTodoItemDeleteButtonClick,
+	} = useTodoItem({
+		todo: props.todo,
+		onTodoCompletedToggle: props.onTodoCompletedToggle,
+		onTodoItemEdit: props.onTodoItemEdit,
+		onTodoItemDelete: props.onTodoItemDelete,
+	});
+
+	return (
+		<S.Container isEditMode={isEditMode}>
+			{!isEditMode && (
+				<S.TodoItemCompletedWrapper>
+					<Button type="button" backgroundColor={theme.colors.yellow} onClick={onTodoItemCompletedButtonClick}>
+						{props.todo.isCompleted ? '✅' : '🚴🏻‍♂️'}
+					</Button>
+				</S.TodoItemCompletedWrapper>
+			)}
+			{isEditMode ? (
+				<S.TodoItemContentWrapper>
+					<Input type="text" placeholder="할 일을 채워주세요." value={todo} onChange={onTodoItemChange} />
+				</S.TodoItemContentWrapper>
+			) : (
+				<S.TodoItemContentWrapper>{props.todo.todo}</S.TodoItemContentWrapper>
+			)}
+			{isEditMode ? (
+				<S.TodoItemButtonWrapper>
+					<Button type="button" onClick={onIsEditModeToggle}>
+						취소
+					</Button>
+					<Button type="button" backgroundColor={theme.colors.green} onClick={onTodoItemEditSubmitClick}>
+						제출
+					</Button>
+				</S.TodoItemButtonWrapper>
+			) : (
+				<S.TodoItemButtonWrapper>
+					<Button type="button" onClick={onIsEditModeToggle}>
+						수정
+					</Button>
+					<Button type="button" backgroundColor={theme.colors.red} onClick={onTodoItemDeleteButtonClick}>
+						삭제
+					</Button>
+				</S.TodoItemButtonWrapper>
+			)}
+		</S.Container>
+	);
+};
+
+export default TodoItem;

src/components/feature/TodoItem/styled.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+export const Container = styled.li<{ isEditMode: boolean }>`
+	display: flex;
+	border: 1px solid ${({ theme }) => theme.colors.black};
+
+	& > div:nth-of-type(1) {
+		flex: ${({ isEditMode }) => (isEditMode ? 10 : 1)};
+	}
+
+	& > div:nth-of-type(2) {
+		flex: ${({ isEditMode }) => (isEditMode ? 2 : 9)};
+		margin-left: ${({ isEditMode }) => !isEditMode && '0.75em'};
+	}
+
+	& > div:nth-of-type(3) {
+		flex: ${({ isEditMode }) => !isEditMode && 2};
+	}
+`;
+
+export const TodoItemCompletedWrapper = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	& > button {
+		flex: 1;
+	}
+`;
+
+export const TodoItemContentWrapper = styled.div`
+	display: flex;
+	align-items: center;
+	width: 100%;
+`;
+
+export const TodoItemButtonWrapper = styled.div`
+	display: flex;
+
+	& > button {
+		flex: 1;
+	}
+`;

src/components/feature/TodoItem/useTodoItem.ts

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Todo } from '../../../types/todo';
+
+type Props = {
+	todo: Todo;
+	onTodoCompletedToggle: (targetTodo: Todo) => void;
+	onTodoItemEdit: (targetTodo: Todo, newTodo: string) => void;
+	onTodoItemDelete: (targetTodo: Todo) => void;
+};
+
+const useTodoItem = (props: Props) => {
+	const [isEditMode, setIsEditMode] = useState(false);
+	const [todo, setTodo] = useState(props.todo.todo);
+
+	const onTodoItemCompletedButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		props.onTodoCompletedToggle(props.todo);
+	};
+
+	const onIsEditModeToggle = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setIsEditMode(!isEditMode);
+	};
+
+	const onTodoItemChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setTodo(event.currentTarget.value);
+	};
+
+	const onTodoItemEditSubmitClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		props.onTodoItemEdit(props.todo, todo);
+		setIsEditMode(!isEditMode);
+	};
+
+	const onTodoItemDeleteButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		props.onTodoItemDelete(props.todo);
+	};
+
+	return {
+		isEditMode,
+		todo,
+		onTodoItemCompletedButtonClick,
+		onIsEditModeToggle,
+		onTodoItemChange,
+		onTodoItemEditSubmitClick,
+		onTodoItemDeleteButtonClick,
+	};
+};
+
+export default useTodoItem;

src/pages/Todo/index.tsx

@@ -1,5 +1,31 @@
-const Todo = () => {
-	return <div>Todo Page</div>;
+import * as S from './styled';
+import Layout from '../../components/layout';
+import { TodoInputForm, TodoItem } from '../../components';
+import useTodos from './useTodos';
+
+const TodoApp = () => {
+	const { todos, onCreateNewTodoSubmit, onTodoCompletedToggle, onTodoItemEdit, onTodoItemDelete } = useTodos();
+
+	return (
+		<Layout>
+			<S.Container>
+				<TodoInputForm onCreateNewTodoSubmit={onCreateNewTodoSubmit} />
+				{todos.length >= 0 && (
+					<S.TodoList>
+						{todos.map((todo) => (
+							<TodoItem
+								key={todo.id}
+								todo={todo}
+								onTodoCompletedToggle={onTodoCompletedToggle}
+								onTodoItemEdit={onTodoItemEdit}
+								onTodoItemDelete={onTodoItemDelete}
+							/>
+						))}
+					</S.TodoList>
+				)}
+			</S.Container>
+		</Layout>
+	);
 };
 
-export default Todo;
+export default TodoApp;

src/pages/Todo/styled.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const Container = styled.main`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 100vh;
+	padding: 0 2em;
+`;
+
+export const TodoList = styled.ul`
+	display: flex;
+	flex-direction: column;
+	gap: 0.1em;
+	max-height: 77vh;
+	margin-top: 0.5em;
+	overflow: scroll;
+`;

src/pages/Todo/useTodos.ts

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createTodo, deleteTodo, getTodos, updateTodo } from '../../apis/todo';
+import { Todo } from '../../types/todo';
+import { getLocalStorageItem, KEYS } from '../../utils/storage';
+
+const useTodos = () => {
+	const navigator = useNavigate();
+	const [todos, setTodos] = useState<Todo[]>([]);
+
+	const onGetTodos = async () => {
+		try {
+			const { data: todos } = await getTodos();
+			setTodos(todos);
+		} catch (error) {
+			console.error('Get Todos Error !');
+		}
+	};
+
+	const onCreateNewTodoSubmit = async (newTodo: string) => {
+		try {
+			await createTodo(newTodo);
+			await onGetTodos();
+		} catch (error) {
+			console.error('Create Todo Error !');
+		}
+	};
+
+	const onTodoCompletedToggle = async (targetTodo: Todo) => {
+		try {
+			await updateTodo(targetTodo);
+			await onGetTodos();
+		} catch (error) {
+			console.error('Update Todo Completed Error !');
+		}
+	};
+
+	const onTodoItemEdit = async (targetTodo: Todo, newTodo: string) => {
+		try {
+			await updateTodo(targetTodo, newTodo);
+			await onGetTodos();
+		} catch (error) {
+			console.error('Update Todo Content Error !');
+		}
+	};
+
+	const onTodoItemDelete = async (targetTodo: Todo) => {
+		try {
+			await deleteTodo(targetTodo);
+			await onGetTodos();
+		} catch (error) {
+			console.error('Delete Todo Error !');
+		}
+	};
+
+	useEffect(() => {
+		if (!getLocalStorageItem(KEYS.WANTED_ACCESS_TOKEN)) {
+			navigator('/');
+		} else {
+			onGetTodos();
+		}
+	}, []);
+
+	return { todos, onCreateNewTodoSubmit, onTodoCompletedToggle, onTodoItemEdit, onTodoItemDelete };
+};
+
+export default useTodos;