DMUMC · programingA · Mar 17, 2026
diff --git a/week01/week01_Plat_01/dist/script.js b/week01/week01_Plat_01/dist/script.js
@@ -0,0 +1,72 @@
+"use strict";
+const todoInput = document.getElementById('todo-input');
+const todoFrom = document.getElementById('todo-form');
+const todoList = document.getElementById('todo-list');
+const doneList = document.getElementById('done-list');
+let todos = [];
+let doneTasks = [];
+const renderTask = () => {
+    todoList.innerHTML = '';
+    doneList.innerHTML = '';
+    todos.forEach((todo) => {
+        const li = createTodoElement(todo, false);
+        todoList.appendChild(li);
+    });
+    doneTasks.forEach((todo) => {
+        const li = createTodoElement(todo, true);
+        doneList.appendChild(li);
+    });
+};
+const getTodoText = () => {
+    return todoInput.value.trim();
+};
+const addTodo = (text) => {
+    todos.push({
+        id: Date.now(),
+        text,
+    });
+    todoInput.value = '';
+    renderTask();
+};
+const compleTodo = (todo) => {
+    todos = todos.filter((t) => t.id !== todo.id);
+    doneTasks.push(todo);
+    renderTask();
+};
+const deleteTodo = (todo) => {
+    doneTasks = doneTasks.filter((t) => t.id !== todo.id);
+    renderTask();
+};
+const createTodoElement = (todo, isDone) => {
+    const li = document.createElement('li');
+    li.classList.add('render-container__item');
+    li.textContent = todo.text;
+    const button = document.createElement('button');
+    button.classList.add('render-container__item-button');
+    if (isDone) {
+        button.textContent = '삭제';
+        button.style.backgroundColor = 'red';
+    }
+    else {
+        button.textContent = '완료';
+        button.style.backgroundColor = 'green';
+    }
+    button.addEventListener('click', () => {
+        if (isDone) {
+            deleteTodo(todo);
+        }
+        else {
+            compleTodo(todo);
+        }
+    });
+    li.appendChild(button);
+    return li;
+};
+todoFrom.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const text = getTodoText();
+    if (text) {
+        addTodo(text);
+    }
+});
+renderTask();
diff --git a/week01/week01_Plat_01/index.html b/week01/week01_Plat_01/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS 파일 업로드-->
+    <link rel="stylesheet" href="./style.css">
+    <!-- JavaScript 파일 업로드-->
+    <script type="module" src="./dist/script.js" defer></script>
+    <title>UMC TODO</title>
+</head>
+<body>
+    <div class="todo-container">
+        <h1 class="todo-container__header">PARK TODO</h1>
+        <form id="todo-form" class="todo-container__form">
+            <input 
+                type="text" 
+                id="todo-input" 
+                class="todo-container__input"
+                placeholder="할 일을 입력해주세요." 
+                required
+            />
+            <button type="submit" class="todo-container__button">할일 추가</button>
+        </form>
+        <div class="render-container">
+            <div class="render-container__sections">
+                <h2 class="render-container__title">할 일</h2>
+                <ul id="todo-list" class="render-container__list"></ul>
+            </div>
+            <div class="render-container__sections">
+                <h2 class="render-container__title">완료</h2>
+                <ul id="done-list" class="render-container__list">
+                    <li class="render-container__item">
+                        <p class="render-container__item-text">123</p>
+                        <button class="render-container__item-button">삭제</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/week01/week01_Plat_01/src/script.ts b/week01/week01_Plat_01/src/script.ts
@@ -0,0 +1,89 @@
+const todoInput = document.getElementById('todo-input') as HTMLInputElement;
+const todoFrom = document.getElementById('todo-form') as HTMLFormElement;
+const todoList = document.getElementById('todo-list') as HTMLUListElement;
+const doneList = document.getElementById('done-list') as HTMLUListElement;
+
+type Todo = {
+     id: number;
+     text: string;
+};
+
+let todos: Todo[] = [];
+let doneTasks: Todo[] = [];
+
+const renderTask = () : void => {
+     todoList.innerHTML = '';
+     doneList.innerHTML = '';
+
+     todos.forEach((todo): void => {
+          const li =createTodoElement(todo, false);
+          todoList.appendChild(li);
+     });
+
+     doneTasks.forEach((todo): void => {
+          const li = createTodoElement(todo, true);
+          doneList.appendChild(li);
+     });
+
+}
+
+const getTodoText = (): string => {
+     return todoInput.value.trim();
+};
+
+const addTodo = (text: string): void => {
+     todos.push({
+          id: Date.now(),
+          text,
+     });
+     todoInput.value = '';
+     renderTask();
+}
+
+const compleTodo = (todo: Todo): void => {  
+     todos = todos.filter((t):boolean => t.id !== todo.id);
+     doneTasks.push(todo);
+     renderTask();
+}
+
+
+const deleteTodo = (todo: Todo): void => {
+     doneTasks = doneTasks.filter((t):boolean => t.id !== todo.id);
+     renderTask();
+}
+
+const createTodoElement = (todo: Todo, isDone: boolean): HTMLLIElement => {
+     const li = document.createElement('li');
+     li.classList.add('render-container__item');
+     li.textContent = todo.text;
+
+     const button = document.createElement('button');
+     button.classList.add('render-container__item-button');
+     if (isDone) {
+          button.textContent = '삭제';
+          button.style.backgroundColor = 'red';
+     } else {
+          button.textContent = '완료';
+          button.style.backgroundColor = 'green';
+     }
+
+     button.addEventListener('click', () : void => {
+          if (isDone) {
+               deleteTodo(todo);
+          } else {
+               compleTodo(todo);
+          }
+     });
+
+     li.appendChild(button);
+     return li;
+};
+
+todoFrom.addEventListener('submit', (e: Event) => {
+     e.preventDefault();
+     const text = getTodoText();
+     if (text) {
+          addTodo(text);
+     }
+});
+renderTask();
diff --git a/week01/week01_Plat_01/style.css b/week01/week01_Plat_01/style.css
@@ -0,0 +1,117 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.todo-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    width: 350px;
+    text-align: center;
+}
+
+.todo-container__header {
+    font-size: 24px;
+    margin-bottom: 16px;
+}
+
+.todo-container__form {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.todo-container__input {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 14px;
+}
+
+.todo-container__button {
+    padding: 8px 12px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.todo-container__button:hover {
+    background-color: #218838;
+}
+
+.render-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.render-container__title {
+    justify-content: center;
+}
+
+.render-container__section {
+    width: 100%;
+    text-align: left;
+}
+
+.render-container__title {
+    font-size: 18px;
+    margin-bottom: 10px;
+
+    display: flex;
+    justify-content: center;
+}
+
+.render-container__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.render-container__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 8px;
+    border-bottom: 1px solid #ddd;
+    background-color: #f9f9f9;
+    border-radius: 6px;
+    margin-bottom: 6px;
+    width: 100%;
+}
+
+.render-container__item-text {
+    flex: 1;
+}
+
+.render-container__item-button {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    padding: 6px 10px;
+    cursor: pointer;
+    border-radius: 6px;
+    font-size: 12px;
+    transition: background-color 0.3s ease;
+}
+
+.render-container__item-button:hover {
+    background-color: #c82333;
+}
diff --git a/week01/week01_Plat_01/tsconfig.json b/week01/week01_Plat_01/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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}