SSUMC-8th · qowldud · Mar 18, 2025 · Mar 19, 2025 · Mar 25, 2025 · Mar 25, 2025
diff --git a/judy/Week1/ToDoList/dist/script.js b/judy/Week1/ToDoList/dist/script.js
@@ -0,0 +1,72 @@
+"use strict";
+let index = 0;
+let startTodo = [];
+let completeTodo = [];
+const addTodoButton = document.querySelector(".todo_button");
+const todoStartContainer = document.querySelector(".todo_start");
+const todoCompleteContainer = document.querySelector(".todo_complete");
+const renderTodo = () => {
+    if (todoStartContainer) {
+        let todoHTML = "";
+        startTodo.map((todo) => {
+            todoHTML += `
+      <div class="todo_content">
+        ${todo.content}
+        <div class="todo_complete_button" data-id="${todo.id}">완료</div>
+      </div>
+        `;
+        });
+        todoStartContainer.innerHTML = todoHTML;
+    }
+};
+const completeRender = () => {
+    if (todoCompleteContainer) {
+        let todoHTML = "";
+        completeTodo.map((todo) => {
+            todoHTML += `
+      <div class="todo_content">
+    ${todo.content}
+    <div class="todo_delete_button" data-id="${todo.id}">삭제</div>
+  </div>
+  `;
+        });
+        todoCompleteContainer.innerHTML = todoHTML;
+    }
+};
+const addTodo = () => {
+    const todoInput = document.querySelector(".todo_input");
+    const todoContent = todoInput.value;
+    if (todoContent) {
+        startTodo.push({ id: index++, content: todoContent });
+        todoInput.value = "";
+        renderTodo();
+    }
+};
+const complete = (targetNum) => {
+    const findIndex = startTodo.findIndex((todo) => todo.id === targetNum);
+    const newTodo = startTodo.filter((todo) => todo.id !== targetNum);
+    if (startTodo[findIndex]) {
+        completeTodo.push(startTodo[findIndex]);
+        completeRender();
+    }
+    startTodo = newTodo;
+    renderTodo();
+};
+const deleteTodo = (targetNum) => {
+    const newTodo = completeTodo.filter((todo) => todo.id !== targetNum);
+    completeTodo = newTodo;
+    completeRender();
+};
+addTodoButton === null || addTodoButton === void 0 ? void 0 : addTodoButton.addEventListener("click", addTodo);
+todoStartContainer === null || todoStartContainer === void 0 ? void 0 : todoStartContainer.addEventListener("click", (event) => {
+    const target = event.target;
+    if (target.dataset.id) {
+        complete(parseInt(target.dataset.id));
+    }
+});
+todoCompleteContainer === null || todoCompleteContainer === void 0 ? void 0 : todoCompleteContainer.addEventListener("click", (event) => {
+    const target = event.target;
+    if (target.dataset.id) {
+        deleteTodo(parseInt(target.dataset.id));
+    }
+});
diff --git a/judy/Week1/ToDoList/index.html b/judy/Week1/ToDoList/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Judy Todo</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script type="module" src="./dist/script.js" defer></script>
+  </head>
+  <body>
+    <div class="todo_container">
+      <header class="todo_header">Jiyoung Todo</header>
+      <div class="todo_form">
+        <input class="todo_input" type="text" placeholder="할 일 입력" />
+        <div class="todo_button">할 일 추가</div>
+      </div>
+
+      <div class="todo_contents">
+        <div class="todo_list">
+          <div class="todo_title">할 일</div>
+          <div class="todo_start">
+          </div>
+        </div>
+        <div class="todo_list">
+          <div class="todo_title">완료</div>
+          <div class="todo_complete">
+          </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="/src/script.ts"></script>
+  </body>
+</html>
diff --git a/judy/Week1/ToDoList/src/script.ts b/judy/Week1/ToDoList/src/script.ts
@@ -0,0 +1,91 @@
+interface Todo {
+  id: number;
+  content: string;
+}
+
+let index: number = 0;
+let startTodo: Todo[] = [];
+let completeTodo: Todo[] = [];
+
+const addTodoButton = document.querySelector(".todo_button");
+const todoStartContainer = document.querySelector(".todo_start");
+const todoCompleteContainer = document.querySelector(".todo_complete");
+
+// 할 일 목록 렌더링
+const renderTodo = () => {
+  if (todoStartContainer) {
+    let todoHTML: string = "";
+    startTodo.map((todo: Todo) => {
+      todoHTML += `
+      <div class="todo_content">
+        ${todo.content}
+        <div class="todo_complete_button" data-id="${todo.id}">완료</div>
+      </div>
+        `;
+    });
+    todoStartContainer.innerHTML = todoHTML;
+  }
+};
+
+// 완료 목록 렌더링
+const completeRender = () => {
+  if (todoCompleteContainer) {
+    let todoHTML: string = "";
+    completeTodo.map((todo: Todo) => {
+      todoHTML += `
+      <div class="todo_content">
+    ${todo.content}
+    <div class="todo_delete_button" data-id="${todo.id}">삭제</div>
+  </div>
+  `;
+    });
+    todoCompleteContainer.innerHTML = todoHTML;
+  }
+};
+
+// 할 일 추가
+const addTodo = () => {
+  const todoInput = document.querySelector(".todo_input") as HTMLInputElement;
+  const todoContent = todoInput.value;
+  if (todoContent) {
+    startTodo.push({ id: index++, content: todoContent });
+    todoInput.value = "";
+    renderTodo();
+  }
+};
+
+// 할 일 완료
+const complete = (targetNum: number) => {
+  const findIndex = startTodo.findIndex((todo: Todo) => todo.id === targetNum);
+  const newTodo = startTodo.filter((todo: Todo) => todo.id !== targetNum);
+  if (startTodo[findIndex]) {
+    completeTodo.push(startTodo[findIndex]);
+    completeRender();
+  }
+  startTodo = newTodo;
+  renderTodo();
+};
+
+// 할 일 삭제
+const deleteTodo = (targetNum: number) => {
+  const newTodo = completeTodo.filter((todo: Todo) => todo.id !== targetNum);
+  completeTodo = newTodo;
+  completeRender();
+};
+
+// 할 일 추가 버튼 addEventListener
+addTodoButton?.addEventListener("click", addTodo);
+// 할 일 완료 버튼 addEventListner
+todoStartContainer?.addEventListener("click", (event) => {
+  const target = event.target as HTMLElement;
+  if (target.dataset.id) {
+    complete(parseInt(target.dataset.id));
+  }
+});
+// 완료 삭제 버튼 addEventListener
+todoCompleteContainer?.addEventListener("click", (event) => {
+  const target = event.target as HTMLElement;
+  if (target.dataset.id) {
+    deleteTodo(parseInt(target.dataset.id));
+  }
+});
diff --git a/judy/Week1/ToDoList/style.css b/judy/Week1/ToDoList/style.css
@@ -0,0 +1,114 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  background-color: lightgray;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.todo_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  padding: 30px 20px;
+  border-radius: 5px;
+}
+.todo_header {
+  font-size: 30px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+.todo_form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.todo_input {
+  width: 250px;
+  height: 35px;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 1px solid lightgray;
+  outline: none;
+}
+
+.todo_button {
+  background-color: green;
+  padding: 10px;
+  border-radius: 5px;
+
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+}
+
+.todo_contents {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.todo_list {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.todo_title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.todo_start {
+  width: 100%;
+}
+.todo_complete {
+  width: 100%;
+}
+
+.todo_content {
+  width: 100%;
+  padding: 5px 8px;
+  background-color: rgb(239, 238, 238);
+  border-radius: 5px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  font-size: 17px;
+  margin-bottom: 8px;
+}
+
+.todo_complete_button {
+  padding: 8px 12px;
+  color: white;
+  font-size: 12px;
+
+  background-color: green;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.todo_delete_button {
+  padding: 8px 12px;
+  color: white;
+  font-size: 12px;
+
+  background-color: red;
+  border-radius: 8px;
+  cursor: pointer;
+}
diff --git a/judy/Week1/ToDoList/tsconfig.json b/judy/Week1/ToDoList/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2016", // ECMAScript 2016으로 컴파일
+    "module": "ES2015", // ES2015 모듈 시스템 사용
+    "rootDir": "./src", // 소스 파일의 루트 디렉토리
+    "outDir": "./dist", // 컴파일된 파일이 저장될 디렉토리
+    "esModuleInterop": true, // ES 모듈 호환성 설정
+    "forceConsistentCasingInFileNames": true, // 파일 이름의 대소문자 일관성 강제
+    "strict": true, // 엄격한 타입 검사
+    "skipLibCheck": true, // 라이브러리 파일 검사 건너뜀
+    "removeComments": true, // 컴파일된 코드에서 주석 제거
+    "noEmitOnError": false, // 컴파일 에러 발생 시 파일 생성 안 함
+    "noUnusedLocals": true, // 사용하지 않는 지역 변수에 대해 에러 발생
+    "noUnusedParameters": true, // 사용하지 않는 매개변수에 대해 에러 발생
+    "noImplicitReturns": true, // 함수에서 명시적으로 값을 반환하지 않는 경우 에러 발생
+    "noFallthroughCasesInSwitch": true, // switch 문에서 fallthrough 방지
+    "noUncheckedIndexedAccess": true // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}
diff --git a/judy/Week2/Dark-mode/.gitignore b/judy/Week2/Dark-mode/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?