DMUMC · LastSim · Sep 18, 2025 · Sep 24, 2025 · Sep 24, 2025 · Sep 25, 2025
diff --git a/week01/GuSer/dist/index.js b/week01/GuSer/dist/index.js
@@ -0,0 +1,3 @@
+"use strict";
+const msg = 'Hello TypeScript!';
+console.log(msg);
diff --git a/week01/GuSer/dist/script.js b/week01/GuSer/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 renderTasks = () => {
+    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 = '';
+    renderTasks();
+};
+const completeTask = (todo) => {
+    todos = todos.filter((t) => t.id !== todo.id);
+    doneTasks.push(todo);
+    renderTasks();
+};
+const deleteTodo = (todo) => {
+    doneTasks = doneTasks.filter((t) => t.id !== todo.id);
+    renderTasks();
+};
+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.type = '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) {
+            deleteTodo(todo);
+        }
+        else {
+            completeTask(todo);
+        }
+    });
+    li.appendChild(button);
+    return li;
+};
+todoForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const text = getTodoText();
+    if (text) {
+        addTodo(text);
+    }
+});
+renderTasks();
diff --git a/week01/GuSer/src/index.html b/week01/GuSer/src/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">
+
+  <link rel = "stylesheet" href = "./style.css" />
+  <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/week01/GuSer/src/package-lock.json b/week01/GuSer/src/package-lock.json
diff --git a/week01/GuSer/src/package.json b/week01/GuSer/src/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "guser",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^5.9.2"
+  }
+}
diff --git a/week01/GuSer/src/script.ts b/week01/GuSer/src/script.ts
@@ -0,0 +1,95 @@
+//1. 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;
+
+// 2. 할 일이 어떻게 생긴 애인지 Type을 정의
+type Todo = {
+  id: number;
+  text: string;
+
+};
+
+let todos: Todo[] = [];
+let doneTasks: Todo[] = [];
+
+const renderTasks = (): 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);
+    });
+};
+
+// 3. 할 일 텍스트 입력처리 함수(공백 잘라짐)
+const getTodoText = (): string => {
+  return todoInput.value.trim();
+};
+
+// 4. 할 일 추가 처리 함수
+const addTodo = (text: string): void => {
+  todos.push({id: Date.now(), text});
+  todoInput.value = '';
+  renderTasks();
+};
+
+
+// 5. 할 일 상태변경(완료로 이동)
+const completeTask = (todo: Todo): void => {
+  todos = todos.filter((t) : boolean => t.id !== todo.id);
+  doneTasks.push(todo);
+  renderTasks();
+};
+
+//6. 완료된 할 일 삭제 함수
+const deleteTodo = (todo: Todo): void => {
+  doneTasks = doneTasks.filter((t): boolean => t.id !== todo.id)
+  renderTasks();
+};
+
+// 7. 할 일 아이템 생성 함수
+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.type = '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', (): void => {
+    if(isDone){
+      deleteTodo(todo);
+    } else{
+      completeTask(todo);
+    }
+  });
+  li.appendChild(button);
+  return li;
+};
+
+
+// 8. 폼 제출 이벤트 리스너
+todoForm.addEventListener('submit', (event: Event): void => {
+  event.preventDefault();
+  const text = getTodoText();
+  if(text){
+    addTodo(text);
+  }
+});
+renderTasks();
diff --git a/week01/GuSer/src/style.css b/week01/GuSer/src/style.css
@@ -0,0 +1,119 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body{
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f1f1f1;
+}
+
+.todo-container{
+  background-color: white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.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__title{
+  font-size: 18px;
+  margin-bottom: 10px;
+
+  display: flex;
+  flex-direction: row;
+  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;
+}
+
+.render-container__item-button:hover{
+  background-color: #c82333;
+}
diff --git a/week01/GuSer/tsconfig.json b/week01/GuSer/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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}