diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..46f2372
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false
+}
\ No newline at end of file
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..8c9ff47
--- /dev/null
+++ b/app.js
@@ -0,0 +1,261 @@
+// 전역 변수
+let todosByDate = {};
+let currentDate = new Date();
+let nextId = 1;
+
+// 페이지 로드 완료 시 실행
+window.addEventListener('load', function () {
+  // 기존 데이터 삭제 (새 구조로 변경)
+  localStorage.removeItem('todoList');
+
+  initializeApp();
+  this.getSelection;
+});
+
+// 앱 초기화
+function initializeApp() {
+  loadTodosFromStorage();
+  updateDateDisplay();
+  setupEventListeners();
+  renderTodoList();
+  updateProgress();
+}
+
+// 이벤트 리스너 설정
+function setupEventListeners() {
+  // 이전 날짜 버튼
+  const prevBtn = document.getElementById('prevDay');
+  if (prevBtn) {
+    prevBtn.onclick = function () {
+      moveToDate(-1);
+    };
+  }
+
+  // 다음 날짜 버튼
+  const nextBtn = document.getElementById('nextDay');
+  if (nextBtn) {
+    nextBtn.onclick = function () {
+      moveToDate(1);
+    };
+  }
+
+  // 날짜 입력 필드
+  const dateInput = document.getElementById('dateInput');
+  if (dateInput) {
+    dateInput.onchange = function () {
+      selectDate(this.value);
+    };
+  }
+
+  // 할일 추가 폼
+  const todoForm = document.getElementById('todoForm');
+  if (todoForm) {
+    todoForm.onsubmit = function (e) {
+      e.preventDefault();
+      const input = document.getElementById('todoInput');
+      const text = input.value.trim();
+      if (text) {
+        addTodo(text);
+        input.value = '';
+      } else {
+        alert('할일을 입력해주세요!');
+      }
+    };
+  }
+}
+
+// 날짜 이동 (-1: 어제, 1: 내일)
+function moveToDate(direction) {
+  currentDate.setDate(currentDate.getDate() + direction);
+  updateDateDisplay();
+  renderTodoList();
+  updateProgress();
+}
+
+// 특정 날짜 선택
+function selectDate(dateString) {
+  const newDate = new Date(dateString + 'T00:00:00');
+  if (!isNaN(newDate.getTime())) {
+    currentDate = newDate;
+    updateDateDisplay();
+    renderTodoList();
+    updateProgress();
+  }
+}
+
+// 현재 날짜 문자열 반환
+function getCurrentDateString() {
+  const year = currentDate.getFullYear();
+  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
+  const day = String(currentDate.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+// 날짜 표시 업데이트
+function updateDateDisplay() {
+  const dateInfo = document.getElementById('dateInfo');
+  const dateInput = document.getElementById('dateInput');
+
+  if (!dateInfo || !dateInput) return;
+
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth() + 1;
+  const date = currentDate.getDate();
+
+  const days = [
+    '일요일',
+    '월요일',
+    '화요일',
+    '수요일',
+    '목요일',
+    '금요일',
+    '토요일',
+  ];
+  const dayName = days[currentDate.getDay()];
+
+  const displayText = `${year}년 ${month}월 ${date}일 ${dayName}`;
+  const dateValue = getCurrentDateString();
+
+  dateInfo.textContent = displayText;
+  dateInput.value = dateValue;
+}
+
+// 현재 날짜의 할일 목록 가져오기
+function getCurrentTodoList() {
+  const dateStr = getCurrentDateString();
+  if (!todosByDate[dateStr]) {
+    todosByDate[dateStr] = [];
+  }
+  return todosByDate[dateStr];
+}
+
+// 할일 추가
+function addTodo(text) {
+  const newTodo = {
+    id: nextId++,
+    text: text,
+    completed: false,
+    date: getCurrentDateString(),
+  };
+
+  const todos = getCurrentTodoList();
+  todos.push(newTodo);
+
+  saveTodosToStorage();
+  renderTodoList();
+  updateProgress();
+}
+
+// 할일 완료 토글
+function toggleTodo(id) {
+  const todos = getCurrentTodoList();
+  const todo = todos.find((t) => t.id === id);
+
+  if (todo) {
+    todo.completed = !todo.completed;
+    saveTodosToStorage();
+    renderTodoList();
+    updateProgress();
+  }
+}
+
+// 할일 삭제
+function deleteTodo(id) {
+  const dateStr = getCurrentDateString();
+  const todos = getCurrentTodoList();
+  const filteredTodos = todos.filter((t) => t.id !== id);
+
+  todosByDate[dateStr] = filteredTodos;
+
+  saveTodosToStorage();
+  renderTodoList();
+  updateProgress();
+}
+
+// 할일 목록 렌더링
+function renderTodoList() {
+  const todoList = document.getElementById('todoList');
+  const emptyState = document.getElementById('emptyState');
+
+  if (!todoList) return;
+
+  const todos = getCurrentTodoList();
+
+  // 기존 목록 지우기
+  todoList.innerHTML = '';
+
+  if (todos.length === 0) {
+    if (emptyState) emptyState.style.display = 'block';
+    return;
+  }
+
+  if (emptyState) emptyState.style.display = 'none';
+
+  // 할일 항목들 생성
+  todos.forEach((todo) => {
+    const li = document.createElement('li');
+    li.className = `todoItem ${todo.completed ? 'completed' : ''}`;
+
+    li.innerHTML = `
+      <label class="todoLabel">
+        <input type="checkbox" class="todoCheckbox" ${
+          todo.completed ? 'checked' : ''
+        } 
+               onchange="toggleTodo(${todo.id})">
+        <span class="todoText">${todo.text}</span>
+      </label>
+      <button class="deleteBtn" onclick="deleteTodo(${todo.id})">🗑️</button>
+    `;
+
+    todoList.appendChild(li);
+  });
+}
+
+// 진행상황 업데이트
+function updateProgress() {
+  const progressText = document.getElementById('progressText');
+
+  if (!progressText) return;
+
+  const todos = getCurrentTodoList();
+  const totalCount = todos.length;
+  const completedCount = todos.filter((t) => t.completed).length;
+
+  const dateStr = getCurrentDateString();
+  const today = new Date().toISOString().split('T')[0];
+  const isToday = dateStr === today;
+  const prefix = isToday ? '오늘' : dateStr;
+
+  const text = `${prefix} 할일 ${totalCount}개 중 ${completedCount}개 완료`;
+  progressText.textContent = text;
+}
+
+// 데이터 저장
+function saveTodosToStorage() {
+  try {
+    localStorage.setItem('todosByDate', JSON.stringify(todosByDate));
+    localStorage.setItem('nextId', nextId.toString());
+  } catch (error) {
+    console.error('저장 오류:', error);
+  }
+}
+
+// 데이터 불러오기
+function loadTodosFromStorage() {
+  try {
+    const saved = localStorage.getItem('todosByDate');
+    const savedId = localStorage.getItem('nextId');
+
+    if (saved) {
+      todosByDate = JSON.parse(saved);
+    }
+
+    if (savedId) {
+      nextId = parseInt(savedId);
+    }
+  } catch (error) {
+    console.error('불러오기 오류:', error);
+    todosByDate = {};
+    nextId = 1;
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..362bcd2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>todo list</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <main class="appContainer">
+      <header class="appHeader">
+        <h1 class="appTitle">✔️TO DO LIST✔️</h1>
+        <div class="dateSelector">
+          <button class="dateNavBtn" id="prevDay">◀</button>
+          <div class="dateDisplay">
+            <input type="date" class="dateInput" id="dateInput" />
+            <p class="dateInfo" id="dateInfo">2024년 12월 19일 목요일</p>
+          </div>
+          <button class="dateNavBtn" id="nextDay">▶</button>
+        </div>
+      </header>
+
+      <section class="todoInputSection">
+        <form class="todoForm" id="todoForm">
+          <input
+            type="text"
+            class="todoInput"
+            id="todoInput"
+            placeholder="할일을 입력하세요"
+            maxlength="100"
+            required
+          />
+          <button type="submit" class="addButton">➕ 추가</button>
+        </form>
+      </section>
+
+      <section class="todoProgress">
+        <p class="progressText" id="progressText">오늘 할일 0개 중 0개 완료</p>
+      </section>
+
+      <section class="todoListSection">
+        <ul class="todoList" id="todoList"></ul>
+        <div class="emptyState" id="emptyState">
+          <p>📝 할일을 추가해보세요 📝</p>
+        </div>
+      </section>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3e2eb58
--- /dev/null
+++ b/style.css
@@ -0,0 +1,174 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: #f5f7fa;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* 메인 */
+.appContainer {
+  max-width: 500px;
+  margin: 20px auto;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+/* 헤더 */
+.appHeader {
+  background: linear-gradient(135deg, #e0f1c8 0%, #e8f1be 100%);
+  color: rgb(40, 40, 40);
+  padding: 20px;
+  text-align: center;
+}
+
+.appTitle {
+  font-size: 24px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.dateSelector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+.dateInfo {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+/* 입력 */
+.todoInputSection {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.todoForm {
+  display: flex;
+  gap: 10px;
+}
+
+.todoInput {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.todoInput:focus {
+  border-color: #e1f0c0;
+}
+
+.addButton {
+  padding: 12px 20px;
+  background: #eff3ca;
+  color: rgb(41, 41, 41);
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.addButton:hover {
+  background: #5a6fd8;
+}
+
+/* 진행상황 */
+.todoProgress {
+  padding: 15px 20px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #eee;
+}
+
+.progressText {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+/* 목록 */
+.todoListSection {
+  min-height: 200px;
+}
+
+.todoList {
+  list-style: none;
+  padding: 0;
+}
+
+.todoItem {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s;
+}
+
+.todoItem:hover {
+  background-color: #f8f9fa;
+}
+
+.todoLabel {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+}
+
+.todoCheckbox {
+  width: 18px;
+  height: 18px;
+  margin-right: 12px;
+  cursor: pointer;
+}
+
+.todoText {
+  font-size: 14px;
+  line-height: 1.4;
+  transition: all 0.2s;
+}
+
+/* 완료된 일 */
+.todoItem.completed .todoText {
+  text-decoration: line-through;
+  color: #999;
+}
+
+.deleteBtn {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.deleteBtn:hover {
+  background-color: #fee;
+}
+
+/* 빈 상태 */
+.emptyState {
+  padding: 40px 20px;
+  text-align: center;
+  color: #999;
+}
+
+.hidden {
+  display: none;
+}