SWU-UMC · yewon20804 · Apr 2, 2026 · Mar 26, 2026 · Mar 26, 2026 · yewon20804
diff --git a/week1/todo-ts/dist/script.js b/week1/todo-ts/dist/script.js
@@ -0,0 +1,70 @@
+"use strict";
+const todoInput = document.getElementById('todo-input');
+const todoForm = document.getElementById('todo-form');
+const todoList = document.getElementById('todo-list');
+const doneList = document.getElementById('done-list');
+let todos = [];
+let doneTasks = [];
+const getTodoText = () => {
+    return todoInput.value.trim();
+};
+const addTodo = (text) => {
+    todos.push({ id: Date.now(), text });
+    console.log(todos);
+    todoInput.value = '';
+    renderTasks();
+};
+const completeTask = (task) => {
+    todos = todos.filter((t) => t.id !== task.id);
+    doneTasks.push(task);
+    renderTasks();
+};
+const deleteTask = (task) => {
+    doneTasks = doneTasks.filter((t) => t.id !== task.id);
+    renderTasks();
+};
+const createTaskElement = (task, isDone) => {
+    const li = document.createElement('li');
+    li.classList.add('render-container__item');
+    li.textContent = task.text;
+    const button = document.createElement('button');
+    button.classList.add('render-container__item-button');
+    if (isDone) {
+        button.textContent = '삭제';
+        button.style.backgroundColor = '#dc3545';
+    }
+    else {
+        button.textContent = '완료';
+        button.style.backgroundColor = '#28a745';
+    }
+    button.addEventListener('click', () => {
+        if (isDone) {
+            deleteTask(task);
+        }
+        else {
+            completeTask(task);
+        }
+    });
+    li.appendChild(button);
+    return li;
+};
+const renderTasks = () => {
+    todoList.innerHTML = '';
+    doneList.innerHTML = '';
+    todos.forEach((task) => {
+        const li = createTaskElement(task, false);
+        todoList.appendChild(li);
+    });
+    doneTasks.forEach((task) => {
+        const li = createTaskElement(task, true);
+        doneList.appendChild(li);
+    });
+};
+todoForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const text = getTodoText();
+    if (text) {
+        addTodo(text);
+    }
+});
+renderTasks();
diff --git a/week1/todo-ts/index.html b/week1/todo-ts/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- css 파일 임포드 -->
+    <link rel="stylesheet" href="./style.css" />
+    <!-- JS 파일 임포트 -->
+    <script type="module" src="./dist/script.js" defer></script>
+    <title>UMC TODO</title>
+  </head>
+  <body>
+    <div class="todo-container">
+      <h1 class="todo-container__header">YONG 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__section">
+          <h2 class="render-container__title">할 일</h2>
+          <ul id="todo-list" class="render-container__list"></ul>
+        </div>
+        <div class="render-container__section">
+          <h2 class="render-container__title">완료</h2>
+          <ul id="done-list" class="render-container__list"></ul>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/week1/todo-ts/src/script.ts b/week1/todo-ts/src/script.ts
@@ -0,0 +1,98 @@
+// HTML 요소 선택
+const todoInput = document.getElementById('todo-input') as HTMLInputElement;
+const todoForm = document.getElementById('todo-form') as HTMLFormElement;
+const todoList = document.getElementById('todo-list') as HTMLUListElement;
+const doneList = document.getElementById('done-list') as HTMLUListElement;
+
+// 할 일 및 완료된 작업을 저장할 배열
+type Task = {
+  id: number;
+  text: string;
+};
+
+let todos: Task[] = [];
+let doneTasks: Task[] = [];
+
+// 할 일 텍스트 입력 처리 함수
+const getTodoText = (): string => {
+  return todoInput.value.trim();
+};
+
+// 할 일 추가 함수
+const addTodo = (text: string): void => {
+  todos.push({ id: Date.now(), text });
+  console.log(todos);
+  todoInput.value = '';
+  renderTasks();
+};
+
+// 할 일 상태 변경 (완료로 이동)
+const completeTask = (task: Task): void => {
+  todos = todos.filter((t) => t.id !== task.id);
+  doneTasks.push(task);
+  renderTasks();
+};
+
+// 완료된 할 일 삭제 함수
+const deleteTask = (task: Task): void => {
+  doneTasks = doneTasks.filter((t) => t.id !== task.id);
+  renderTasks();
+};
+
+// 할 일 아이템 생성 함수
+const createTaskElement = (task: Task, isDone: boolean): HTMLLIElement => {
+  const li = document.createElement('li');
+  li.classList.add('render-container__item');
+  li.textContent = task.text;
+
+  const button = document.createElement('button');
+  button.classList.add('render-container__item-button');
+
+  // 완료 여부에 따른 버튼 텍스트 및 색상 설정
+  if (isDone) {
+    button.textContent = '삭제';
+    button.style.backgroundColor = '#dc3545'; // 빨간색 (삭제)
+  } else {
+    button.textContent = '완료';
+    button.style.backgroundColor = '#28a745'; // 초록색 (완료)
+  }
+
+  button.addEventListener('click', () => {
+    if (isDone) {
+      deleteTask(task);
+    } else {
+      completeTask(task);
+    }
+  });
+
+  li.appendChild(button);
+  return li;
+};
+
+// 할 일 목록 렌더링 함수
+const renderTasks = (): void => {
+  todoList.innerHTML = '';
+  doneList.innerHTML = '';
+
+  todos.forEach((task) => {
+    const li = createTaskElement(task, false);
+    todoList.appendChild(li);
+  });
+
+  doneTasks.forEach((task) => {
+    const li = createTaskElement(task, true);
+    doneList.appendChild(li);
+  });
+};
+
+// 폼 제출 이벤트 리스너
+todoForm.addEventListener('submit', (event: Event) => {
+  event.preventDefault();
+  const text = getTodoText();
+  if (text) {
+    addTodo(text);
+  }
+});
+
+// 초기 렌더링
+renderTasks();
diff --git a/week1/todo-ts/style.css b/week1/todo-ts/style.css
@@ -0,0 +1,121 @@
+/* ===== 기본 스타일 ===== */
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #eef2f3;
+  margin: 0;
+}
+
+/* ===== Todo 컨테이너 ===== */
+.todo-container {
+  background: white;
+  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 {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 6px;
+  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__section {
+  width: 100%;
+  text-align: left;
+}
+
+.render-container__title {
+  font-size: 18px;
+  margin-bottom: 10px;
+
+  display: flex;
+  flex-direction: row;
+  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: #f9f9f9;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  width: 100%; /* Make sure the item takes full available width */
+}
+
+.render-container__item-text {
+  flex: 1;
+
+  white-space: nowrap; /* Prevent text from wrapping */
+  overflow: hidden; /* Hide any overflow */
+  text-overflow: ellipsis; /* Add '...' when text overflows */
+  display: block; /* Ensure it's treated as a block for the overflow to work */
+}
+
+.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/week1/todo-ts/tsconfig.json b/week1/todo-ts/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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}