CEOS-Developers · BeanMouse · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/asset/fonts/Cafe24Supermagic-Bold-v1.0.otf b/asset/fonts/Cafe24Supermagic-Bold-v1.0.otf
diff --git a/asset/fonts/Cafe24Supermagic-Bold-v1.0.ttf b/asset/fonts/Cafe24Supermagic-Bold-v1.0.ttf
diff --git a/asset/fonts/Cafe24Supermagic-Regular-v1.0.otf b/asset/fonts/Cafe24Supermagic-Regular-v1.0.otf
diff --git a/asset/fonts/Cafe24Supermagic-Regular-v1.0.ttf b/asset/fonts/Cafe24Supermagic-Regular-v1.0.ttf
diff --git a/calendar.js b/calendar.js
@@ -0,0 +1,115 @@
+import { loadData } from "./storage.js";
+import { renderModal } from "./modal.js";
+//캘린더에서 사용할 데이터 날짜
+const date = new Date();
+//캘린더 렌더링 함수
+export const renderCalendar = () => {
+  //데이터 로드
+  const todoData = loadData();
+
+  const currentYear = date.getFullYear();
+  const currentMonth = date.getMonth();
+
+  //현 캘린더 년월 표시
+  document.querySelector(".currentYearMonth").textContent = `${currentYear}년 ${
+    currentMonth + 1
+  }월`;
+
+  //이전 달 마지막 날, 현재 달 마지막 날 날짜 및 요일
+  const prevLast = new Date(currentYear, currentMonth, 0);
+  const currentLast = new Date(currentYear, currentMonth + 1, 0);
+
+  const prevLastDay = prevLast.getDay();
+  const currentLastDay = currentLast.getDay();
+
+  //이전 달, 현재 달, 다음 달 날짜 배열 생성
+  const prevDates = [];
+  const currentDates = Array.from(
+    { length: currentLast.getDate() },
+    (_, i) => i + 1
+  );
+  const nextDates = [];
+
+  //현재 달 캘린더에서 보이는 전후 달 날짜 배열 생성
+  if (prevLastDay !== 6) {
+    for (let i = 0; i < prevLastDay + 1; i++) {
+      prevDates.unshift(prevLast.getDate() - i);
+    }
+  }
+
+  for (let i = 1; i < 7 - currentLastDay; i++) {
+    nextDates.push(i);
+  }
+
+  const dates = prevDates.concat(currentDates, nextDates);
+  const dateHTML = dates.forEach((eachDate, i) => {
+    const firstDate = prevDates.length;
+    const lastDateIndex = prevDates.length + currentDates.length - 1;
+    let year = currentYear;
+    let month = currentMonth + 1;
+    //전후 달과 현 달 구분
+    if (i < firstDate) {
+      month = currentMonth === 0 ? 12 : currentMonth;
+      if (currentMonth === 0) {
+        year = currentYear - 1;
+      }
+    } else if (i > lastDateIndex) {
+      month = currentMonth === 11 ? 1 : currentMonth + 2;
+      if (currentMonth === 11) {
+        year = currentYear + 1;
+      }
+    }
+    //날짜별 데이터 할당
+    const selectedDate = `${year}/${month}/${eachDate}`;
+    const isTodo = todoData[selectedDate] && todoData[selectedDate].length > 0;
+    const isTodoClass = isTodo ? "isTodo" : "";
+    const todo = isTodo
+      ? `<p class="todo">할일 ${todoData[selectedDate].length}개 !</p>`
+      : "";
+    const condition =
+      i >= firstDate && i < lastDateIndex + 1 ? `current` : `other`;
+    if (
+      eachDate === new Date().getDate() &&
+      date.getMonth() === new Date().getMonth()
+    ) {
+      dates[
+        i
+      ] = `<div class="date openModalClass " data-date="${selectedDate}"><span class="today ${isTodoClass}" >오늘</span>${todo}</div>`;
+    } else {
+      dates[
+        i
+      ] = `<div class="date openModalClass " data-date="${selectedDate}"><span class="${condition} ${isTodoClass}">${eachDate}일</span>${todo}</div>`;
+    }
+  });
+
+  //캘린더 렌더링
+  document.querySelector(".dates").innerHTML = dates.join("");
+
+  //버블링을 사용하여 이벤트 위임
+};
+document.querySelector(".dates").addEventListener("click", (e) => {
+  const openModalEl = e.target.closest(".openModalClass");
+  if (openModalEl) {
+    const selectedDate = openModalEl.dataset.date;
+    renderModal(selectedDate);
+  }
+});
+renderCalendar();
+
+//캘린더 달 이동 네브 함수
+const prevMonth = () => {
+  date.setMonth(date.getMonth() - 1);
+  renderCalendar();
+};
+const nextMonth = () => {
+  date.setMonth(date.getMonth() + 1);
+  renderCalendar();
+};
+const goCurrentYearMonth = () => {
+  date.setMonth(new Date().getMonth());
+  renderCalendar();
+};
+//전역 함수화 (모듈화를 했기 때문에)
+window.prevMonth = prevMonth;
+window.nextMonth = nextMonth;
+window.goCurrentYearMonth = goCurrentYearMonth;
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>todoList</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <p class="main-title">투두 리스트</p>
+      <main class="calendar">
+        <nav class="header">
+          <button class="nav" id="prev" onClick="prevMonth()">이전</button>
+          <button
+            class="currentYearMonth"
+            onClick="goCurrentYearMonth()"
+          ></button>
+          <button class="nav" id="next" onClick="nextMonth()">다음</button>
+        </nav>
+        <div class="main">
+          <div class="days">
+            <div class="day">일</div>
+            <div class="day">월</div>
+            <div class="day">화</div>
+            <div class="day">수</div>
+            <div class="day">목</div>
+            <div class="day">금</div>
+            <div class="day">토</div>
+          </div>
+          <div class="dates"></div>
+        </div>
+      </main>
+      <!-- react 포탈과 비슷하게 활용 -->
+      <div id="modal-root"></div>
+      <!-- import export를 활용하기 위해 모듈화 -->
+      <script type="module" src="modal.js"></script>
+      <script type="module" src="calendar.js"></script>
+      <script src="script.js"></script>
+    </div>
+  </body>
+</html>
diff --git a/modal.js b/modal.js
@@ -0,0 +1,104 @@
+import { renderCalendar } from "./calendar.js";
+import { loadData, addData, deleteData, saveData } from "./storage.js";
+
+// 선택 날짜 해당 모달 렌더링 함수
+export const renderModal = (selectedDate) => {
+  const modalRoot = document.querySelector("#modal-root");
+  // 모달 렌더링 전 기존 모달 삭제
+  const existingModal = modalRoot.querySelector(".modal-overlay");
+  if (existingModal) {
+    modalRoot.removeChild(existingModal);
+  }
+  //데이터 로드
+  const todoData = loadData();
+  const todos = todoData[selectedDate] || [];
+
+  //배경 레이어 생성
+  const modalOverlay = document.createElement("div");
+  modalOverlay.classList.add("modal-overlay");
+
+  //모달 생성
+  const updateTodo = (selectedDate, todos) => {
+    const clikedDate = new Date(selectedDate);
+    const viewDate =
+      clikedDate.getDate() === new Date().getDate() &&
+      clikedDate.getMonth() === new Date().getMonth()
+        ? "오늘"
+        : `${clikedDate.getMonth() + 1}월 ${clikedDate.getDate()}일`;
+    //모달 내용
+    modalOverlay.innerHTML = `
+      <div class="modal">
+        <div class="modal-header">
+          <p class="modal-title">${viewDate}의 할 일</p>
+        <div class="modal-body">
+          <ul id="todoList">
+            ${todos
+              .map(
+                (todoItem, index) =>
+                  `<li class="todoItem">
+                    <input type="checkbox" id="todoChk-${index}" ${
+                    todoItem.isDone ? "checked" : ""
+                  } />
+                    <label for="todoChk-${index}">${todoItem.text}</label>
+                    <button class="deleteTodo" data-index="${index}">삭제</button>
+                  </li>`
+              )
+              .join("")}
+          </ul>
+          <input type="text" id="todoInput" placeholder="할 일을 입력하세요" />
+          <button id="addTodo">할 일 추가</button>
+        </div>
+      </div>
+    `;
+    //이벤트 리스너 추가
+    //엔터 입력시 할 일 추가
+    modalOverlay
+      .querySelector("#todoInput")
+      .addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
+          modalOverlay.querySelector("#addTodo").click();
+        }
+      });
+    //할 일 삭제
+    modalOverlay.querySelectorAll(".deleteTodo").forEach((deleteTodo) => {
+      deleteTodo.addEventListener("click", (e) => {
+        const index = e.target.dataset.index;
+        deleteData(selectedDate, index, todoData);
+        updateTodo(selectedDate, todoData[selectedDate] || []);
+        renderCalendar();
+      });
+    });
+    //체크박스 체크시 상태 저장
+    modalOverlay
+      .querySelectorAll("input[type='checkbox']")
+      .forEach((checkbox, index) => {
+        checkbox.addEventListener("change", (e) => {
+          todos[index].isDone = e.target.checked;
+          saveData(todoData);
+        });
+      });
+    //할 일 추가
+    modalOverlay.querySelector("#addTodo").addEventListener("click", () => {
+      const todoInput = modalOverlay.querySelector("#todoInput");
+      const newTodoText = todoInput.value;
+      if (newTodoText.trim() === "") {
+        alert("할 일을 입력하세요");
+        return;
+      }
+      const newTodo = { text: newTodoText, isDone: false };
+      addData(selectedDate, newTodo, todoData);
+      updateTodo(selectedDate, todoData[selectedDate] || []);
+      renderCalendar();
+    });
+  };
+
+  updateTodo(selectedDate, todos);
+  //모달 렌더링
+  modalRoot.appendChild(modalOverlay);
+  //모달 이외 창 눌럿을 시 모달 닫기
+  modalOverlay.addEventListener("click", (e) => {
+    if (e.target === modalOverlay) {
+      modalRoot.removeChild(modalOverlay);
+    }
+  });
+};
diff --git a/script.js b/script.js
diff --git a/storage.js b/storage.js
@@ -0,0 +1,26 @@
+const StorageKey = "todoData";
+//데이터 저장
+export const saveData = (todoData) => {
+  localStorage.setItem(StorageKey, JSON.stringify(todoData));
+};
+//데이터 로드
+export const loadData = () => {
+  const localStorageData = localStorage.getItem(StorageKey);
+  if (localStorageData) {
+    return JSON.parse(localStorageData);
+  }
+  return {};
+};
+//데이터 추가
+export const addData = (date, todo, todoData) => {
+  if (!todoData[date]) {
+    todoData[date] = [];
+  }
+  todoData[date].push(todo);
+  saveData(todoData);
+};
+//데이터 삭제
+export const deleteData = (date, index, todoData) => {
+  todoData[date].splice(index, 1);
+  saveData(todoData);
+};