diff --git a/app.js b/app.js
new file mode 100644
index 0000000..b13b668
--- /dev/null
+++ b/app.js
@@ -0,0 +1,86 @@
+import { todoActions, todos, currentDate } from "./todoLogic.js";
+
+const dateElement = document.getElementById("today-date");
+const prevBtn = document.getElementById("prev-day");
+const nextBtn = document.getElementById("next-day");
+const todoForm = document.getElementById("todo-form");
+const todoInput = document.getElementById("todo-input");
+const todoList = document.getElementById("todo-list");
+const todoCount = document.getElementById("todo-count");
+
+//날짜
+function formatDate(date) {
+ return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
+}
+
+function getDateKey(date) {
+ return date.toISOString().split("T")[0];
+}
+
+// 렌더링
+function render() {
+ //날짜 관련
+ dateElement.innerText = formatDate(currentDate);
+ const currentKey = getDateKey(currentDate);
+ const filteredTodos = todos.filter((todo) => todo.date === currentKey);
+
+ todoList.innerHTML = "";
+
+ // map 함수 느낌
+ filteredTodos.forEach((todo) => {
+ const li = document.createElement("li");
+ li.className = `todo-item ${todo.completed ? "completed" : ""}`;
+
+ li.innerHTML = `
+
+ ${todo.text}
+
+ `;
+
+ // 체크박스 클릭 이벤트
+ li.querySelector(".todo-checkbox").addEventListener("change", () => {
+ todoActions.toggleTodo(todo.id);
+ render();
+ });
+
+ // 삭제 버튼 클릭 이벤트
+ li.querySelector(".delete-button").addEventListener("click", () => {
+ todoActions.deleteTodo(todo.id);
+ render();
+ });
+
+ todoList.appendChild(li);
+ });
+
+ const remaining = filteredTodos.filter((todo) => !todo.completed).length;
+ todoCount.innerText = `${remaining}개`;
+}
+
+// 날짜 이동
+prevBtn.addEventListener("click", () => {
+ todoActions.changeDate(-1); // 전날
+ render();
+});
+
+nextBtn.addEventListener("click", () => {
+ todoActions.changeDate(1); // 다음날
+ render();
+});
+
+//투두 등록
+todoForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+ const text = todoInput.value.trim();
+ if (text) {
+ todoActions.addTodo(text, getDateKey(currentDate));
+ todoInput.value = "";
+ render();
+ }
+});
+
+render();
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..32fc513
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ TodoList
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6ec1371
--- /dev/null
+++ b/style.css
@@ -0,0 +1,154 @@
+/* body */
+body {
+ background-color: #9bbbd4;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* header */
+header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ gap: 20px;
+}
+
+header span {
+ font-size: 32px;
+ font-weight: bold;
+ color: #3a1d1d;
+ margin-bottom: 20px;
+}
+
+.date-controller {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+#today-date {
+ font-size: 20px;
+ font-weight: 600;
+ color: #3a1d1d;
+}
+
+.date-controller button {
+ background: none;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ color: #3a1d1d;
+ transition: transform 0.2s;
+}
+
+.date-controller button:hover {
+ transform: scale(1.2);
+}
+
+/* todo form */
+#todo-form {
+ display: flex;
+ align-items: center;
+ background: white;
+ border-radius: 15px;
+ padding: 10px 20px;
+ gap: 20px;
+ width: 300px;
+ box-sizing: border-box;
+ margin: 0 auto;
+}
+
+/* todo input */
+#todo-input {
+ flex-grow: 1;
+ border: 0;
+}
+
+#submit-button {
+ background-color: #f7e600;
+ color: #3a1d1d;
+ border: 0;
+ border-radius: 10px;
+ padding: 5px 10px;
+ font-weight: 500;
+}
+
+/* todo item */
+#todo-list {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+/* ul 안의 li들은 기본적으로 paddiing left 40px을 가짐.. 이걸 없애줘야 가운데 정렬됨 */
+
+.todo-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #f7e600;
+ color: #3a1d1d;
+ border-radius: 15px;
+ margin-top: 15px;
+ padding: 10px;
+ width: 300px;
+ box-sizing: border-box;
+}
+
+.todo-item.completed .todo-text {
+ text-decoration: line-through;
+ color: gray;
+}
+
+.todo-checkbox {
+ display: none;
+}
+
+.checkmark {
+ width: 25px;
+ height: 25px;
+ background-color: white;
+ border-radius: 8px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ margin-right: 15px;
+ position: relative;
+}
+
+.todo-checkbox:checked + .checkmark {
+ background-color: #5bd15f;
+}
+
+.todo-checkbox:checked + .checkmark::after {
+ content: "✔";
+ color: white;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.todo-text {
+ flex-grow: 1;
+ text-align: center;
+ margin: 0 10px;
+ word-break: break-all;
+}
+
+.delete-button {
+ background-color: #3a1d1d;
+ color: #f7e600;
+ border: none;
+ border-radius: 12px;
+ padding: 8px 15px;
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.delete-button:hover {
+ background-color: black;
+}
+
+/* deploy용 한줄.... */
diff --git a/todoLogic.js b/todoLogic.js
new file mode 100644
index 0000000..db4565f
--- /dev/null
+++ b/todoLogic.js
@@ -0,0 +1,34 @@
+export let todos = [];
+export let currentDate = new Date();
+
+export const todoActions = {
+ //날짜 변경
+ changeDate: (offset) => {
+ currentDate.setDate(currentDate.getDate() + offset);
+ return currentDate;
+ },
+
+ // 투두 추가
+ addTodo: (text, dateStr) => {
+ const newTodo = {
+ id: Date.now(),
+ text: text,
+ completed: false,
+ date: dateStr,
+ };
+ todos = [...todos, newTodo];
+ return todos;
+ },
+
+ deleteTodo: (id) => {
+ todos = todos.filter((todo) => todo.id !== id);
+ return todos;
+ },
+
+ toggleTodo: (id) => {
+ todos = todos.map((todo) =>
+ todo.id === id ? { ...todo, completed: !todo.completed } : todo
+ );
+ return todos;
+ },
+};