CEOS-Developers · youdame · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true
+}
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 # 서론
 
+##
+
 안녕하세요 🙌🏻 19기 프론트엔드 운영진 **변지혜**입니다.
 
 이번 미션은 개발 환경 구축과 스터디 진행 방식에 익숙해지실 수 있도록 간단한 **to-do list** 만들기를 진행합니다. 무작정 첫 스터디부터 React를 다루는 것보다는 왜 React가 필요한지, React가 없으면 무엇이 불편한지 느껴 보고 본격적인 스터디에 들어가는 것이 React를 이해하는 데 더 많은 도움이 될 것이라 생각합니다.

diff --git a/index.html b/index.html
@@ -4,11 +4,40 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vanilla Todo</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./style/style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
+    <meta property="og:title" content="TODO-LIST" />
+    <meta property="og:url" content="https://vanilla-todo-19th-navy.vercel.app/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="오늘의 일정을 관리해보세요." />
   </head>
 
   <body>
-    <div class="container"></div>
+    <header class="flex-center">
+      <p class="date flex-center" />
+      <h1><span class="userName"></span>TODO-LIST</h1>
+    </header>
+    <main>
+      <form class="input-form flex-center">
+        <div class="input-container">
+          <div class="input-wrapper">
+            <input class="input" placeholder="할 일 입력" />
+            <button class="input-button">입력</button>
+          </div>
+          <p class="error"></p>
+        </div>
+      </form>
+      <div class="list-container flex-center">
+        <div class="list-wrapper">
+          <h2 class="label">Todo <span class="todo-count"> / 0개</span></h2>
+          <ul class="list todo-list"></ul>
+        </div>
+        <div class="list-wrapper">
+          <h2 class="label">Done <span class="done-count"> / 0개</span></h2>
+          <ul class="list done-list"></ul>
+        </div>
+      </div>
+    </main>
   </body>
-  <script src="script.js"></script>
+  <script src="./js/index.js" type="module"></script>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,196 @@
+import { $, $all } from './util.js';
+
+// 오늘 날짜 문자열 반환
+const getTodayDate = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = (today.getMonth() + 1).toString().padStart(2, '0');
+  const date = today.getDate().toString().padStart(2, '0');
+
+  const dayToString = ['일', '월', '화', '수', '목', '금', '토'];
+  const day = dayToString[today.getDay()];
+
+  return `${year}년 ${month}월 ${date}일 ${day}요일`;
+};
+
+// 할 일 아이템 생성
+const createItem = (text, isDone = false) => {
+  const newItem = document.createElement('li');
+
+  // draggable 속성 추가
+  newItem.setAttribute('draggable', true);
+  newItem.classList.add('draggable');
+
+  // 동그라미 아이콘
+  const circleIcon = document.createElement('i');
+  circleIcon.classList.add('fa-regular', 'fa-circle', 'cursor-pointer');
+
+  if (isDone) {
+    circleIcon.classList.add('fa-check-circle');
+  }
+  // 누르면 done으로 이동하는 이벤트 리스너 등록
+  circleIcon.addEventListener('click', moveItem);
+  newItem.append(circleIcon);
+
+  // 입력받은 Text
+  const todoText = document.createTextNode(text);
+  newItem.append(todoText);
+
+  // 쓰레기통 아이콘
+  const trashIcon = document.createElement('i');
+  trashIcon.classList.add('fa-solid', 'fa-trash-can', 'cursor-pointer');
+
+  // 누르면 삭제
+  trashIcon.addEventListener('click', deleteItem);
+  newItem.append(trashIcon);
+
+  return newItem;
+};
+
+// 할 일 추가 이벤트 핸들러
+const addItem = (e) => {
+  e.preventDefault();
+
+  // 빈 값 입력시 에러 처리
+  const inputValue = $('.input').value.trim();
+  if (!inputValue) {
+    $('.error').textContent = '내용을 입력해주세요';
+    return;
+  }
+  $('.error').textContent = '';
-  const inputValue = $('.input').value.trim();
-  if (!inputValue) {
-    $('.error').textContent = '내용을 입력해주세요';
-    return;
-  }
-  $('.error').textContent = '';
+  const inputValue = document.querySelector('.input');
+  if (!inputValue.value.trim()) {
+    alert = ('내용을 입력해주세요');
+  }
-  const inputValue = $('.input').value.trim();
-  if (!inputValue) {
-    $('.error').textContent = '내용을 입력해주세요';
-    return;
-  }
-  $('.error').textContent = '';
+  const inputValue = document.querySelector('.input');
+  if (!inputValue.value.trim()) {
+    alert = ('내용을 입력해주세요');
+  }
+
+  // 새로운 list 아이템  만들기
+  const newItem = createItem(inputValue);
+
+  // list에 추가
+  $('.todo-list').append(newItem);
+
+  // 인풋 비워주기
+  $('.input').value = '';
+
+  updateListCount();
+  saveToLocalStorage();
+};
+
+// 할 일 이동 이벤트 핸들러
+const moveItem = (e) => {
+  const circleIcon = e.target;
+
+  // 부모 요소 찾기 (아이콘의 부모 요소가 li)
+  const clickedItem = circleIcon.parentNode;
+
+  // 이동할 리스트 정하기
+  const targetList = clickedItem.closest('.todo-list') ? '.done-list' : '.todo-list';
+
+  // 동그라미 <-> 체크 동그라미
+  circleIcon.classList.toggle('fa-circle');
+  circleIcon.classList.toggle('fa-check-circle');
+  $(targetList).append(clickedItem);
+
+  updateListCount();
+  saveToLocalStorage();
+};
+
+// 할 일 삭제 이벤트 핸들러
+const deleteItem = (e) => {
+  // 쓰레기통 아이콘의 부모 요소 찾기
+  const clickedItem = e.target.closest('li');
+  clickedItem.remove();
+
+  updateListCount();
+  saveToLocalStorage();
+};
+
+// 할 일 리스트 개수 업데이트
+const updateListCount = () => {
+  $('.todo-count').textContent = `/ ${$('.todo-list').childElementCount}개`;
+  $('.done-count').textContent = `/ ${$('.done-list').childElementCount}개`;
+};
+
+// Local Storage에 저장
+const saveToLocalStorage = () => {
+  const todoListItems = Array.from($('.todo-list').children).map((item) => item.textContent);
+  const doneListItems = Array.from($('.done-list').children).map((item) => item.textContent);
+
+  localStorage.setItem('todoList', JSON.stringify(todoListItems));
+  localStorage.setItem('doneList', JSON.stringify(doneListItems));
+};
+
+// Local Storage에서 할 일 목록 불러오기
+const loadFromLocalStorage = () => {
+  const todoList = JSON.parse(localStorage.getItem('todoList')) || [];
+  todoList.forEach((item) => $('.todo-list').append(createItem(item)));
+
+  const doneList = JSON.parse(localStorage.getItem('doneList')) || [];
+  doneList.forEach((item) => $('.done-list').append(createItem(item, true)));
+
+  updateListCount();
+};
+
+// 사용자 이름 설정
+const showUserName = () => {
+  const savedUserName = localStorage.getItem('userName');
+  if (savedUserName) {
+    $('.userName').textContent = `${savedUserName}의 `;
+    return;
+  }
+  const userName = prompt('이름을 알려주세요!');
+  if (userName) {
+    $('.userName').textContent = `${userName}의 `;
+    localStorage.setItem('userName', userName);
+  }
+};
+
+const addDragDropEvents = () => {
+  const draggableItems = $all('.draggable');
+  const containers = $all('.list');
+
+  draggableItems.forEach((el) => {
+    el.addEventListener('dragstart', () => {
+      el.classList.add('dragging');
+    });
+
+    el.addEventListener('dragend', () => {
+      el.classList.remove('dragging');
+    });
+  });
+
+  function getDragAfterElement(container, y) {
+    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
+
+    return draggableElements.reduce(
+      (closest, child) => {
+        const box = child.getBoundingClientRect();
+        const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+          return { offset: offset, element: child };
+        } else {
+          return closest;
+        }
+      },
+      { offset: Number.NEGATIVE_INFINITY },
+    ).element;
+  }
+
+  containers.forEach((container) => {
+    container.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      const afterElement = getDragAfterElement(container, e.clientY);
+      const draggable = document.querySelector('.dragging');
+      container.insertBefore(draggable, afterElement);
+    });
+  });
+};
+
+// 초기 실행 함수
+const init = () => {
+  showUserName();
+  $('.date').textContent = getTodayDate();
+  $('.input-form').addEventListener('submit', addItem);
+
+  loadFromLocalStorage();
+  addDragDropEvents();
+};
+
+// 초기 실행
+init();
diff --git a/js/util.js b/js/util.js
@@ -0,0 +1,9 @@
+function $(selector) {
+  return document.querySelector(selector);
+}
+
+function $all(selector) {
+  return document.querySelectorAll(selector);
+}
+
+export { $, $all };
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
diff --git a/style/common.css b/style/common.css
@@ -0,0 +1,9 @@
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
diff --git a/style/global.css b/style/global.css
@@ -0,0 +1,40 @@
+@font-face {
+  font-family: 'Ownglyph_meetme-Rg';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Ownglyph_meetme-Rg.woff2')
+    format('woff2');
+}
+
+html {
+  font-size: 62.5%;
+  font-family: 'Ownglyph_meetme-Rg';
+}
+
+html,
+body,
+button,
+input,
+h1,
+h2 {
+  line-height: normal;
+  font-style: normal;
+  font-weight: 400;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+#__next {
+  height: 100%;
+}
+
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content {
+  flex: 1;
+}