DMUMC · sisihhy · Sep 18, 2025 · Sep 18, 2025 · Sep 24, 2025 · Sep 24, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# macOS 관련 파일
+.DS_Store
+
+# 종속성 폴더
+node_modules/
diff --git a/week01/.DS_Store b/week01/.DS_Store
diff --git a/week01/hyun/.DS_Store b/week01/hyun/.DS_Store
diff --git a/week01/hyun/todo-ts/.gitignore b/week01/hyun/todo-ts/.gitignore
diff --git a/week01/hyun/todo-ts/README.md b/week01/hyun/todo-ts/README.md
@@ -0,0 +1 @@
+# UMC_9th_Study
diff --git a/week01/hyun/todo-ts/dist/script.js b/week01/hyun/todo-ts/dist/script.js
@@ -0,0 +1,69 @@
+"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 todoElement = createTodoElement(todo, false);
+        todoList.appendChild(todoElement);
+    });
+    doneTasks.forEach(todo => {
+        const doneElement = createTodoElement(todo, true);
+        doneList.appendChild(doneElement);
+    });
+};
+const getTodoText = () => {
+    return todoInput.value.trim();
+};
+const addTodo = (text) => {
+    todos.push({ id: Date.now(), text });
+    todoInput.value = '';
+    renderTasks();
+};
+const completeTodo = (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.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 {
+            completeTodo(todo);
+        }
+    });
+    li.appendChild(button);
+    return li;
+};
+todoForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const text = getTodoText();
+    if (text) {
+        addTodo(text);
+    }
+});
+renderTasks();
diff --git a/week01/hyun/todo-ts/index.html b/week01/hyun/todo-ts/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/hyun/todo-ts/src/script.ts b/week01/hyun/todo-ts/src/script.ts
@@ -0,0 +1,97 @@
+// 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 => {
+        const todoElement = createTodoElement(todo, false);
+        todoList.appendChild(todoElement);
+    });
+
+    // 완료된 할 일 목록 렌더링
+    doneTasks.forEach(todo => {
+        const doneElement = createTodoElement(todo, true);
+        doneList.appendChild(doneElement);
+    });
+};
+
+// 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 completeTodo = (todo: Todo): void => {
+    todos = todos.filter((t): boolean => t.id !== todo.id);
+    doneTasks.push(todo);
+    renderTasks();
+};
+
+// 6. 완료된 할 일 삭제 함수
+const deleteTodo = (todo : Todo): void =>{
+    // doneTasks 배열에서 해당 할 일 삭제
+    doneTasks = doneTasks.filter((t): boolean => t.id !== todo.id);
+    renderTasks();
+}
+
+// 7. HTML 요소 생성 함수 (반환 타입 수정)
+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 = "#dc3545"
+    }else{
+        button.textContent= "완료";
+        button.style.backgroundColor = "#28a745"
+    }
+    button.addEventListener('click',():void=>{
+        if(isDone){
+            deleteTodo(todo);
+        }else{
+            completeTodo(todo);
+        }
+    })
+    li.appendChild(button);
+    return li;
+}
+
+
+// 8. 폼 제출 이벤트 리스너
+todoForm.addEventListener('submit',(event: Event)=>{
+    event.preventDefault();
+    const text = getTodoText();
+    if(text){
+        addTodo(text);
+    }
+})
+
+renderTasks();
diff --git a/week01/hyun/todo-ts/style.css b/week01/hyun/todo-ts/style.css
@@ -0,0 +1,118 @@
+* {
+    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: 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__title {
+    font-size: 18px;
+    margin-bottom: 10px;
+    display: flex;
+    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/hyun/todo-ts/temp1.txt b/week01/hyun/todo-ts/temp1.txt
diff --git a/week01/hyun/todo-ts/temp2.txt b/week01/hyun/todo-ts/temp2.txt
diff --git a/week01/hyun/todo-ts/tsconfig.json b/week01/hyun/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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}
diff --git a/week02/.DS_Store b/week02/.DS_Store
diff --git a/week02/hyun_02/.DS_Store b/week02/hyun_02/.DS_Store
diff --git a/week02/hyun_02/DarkMode/.gitignore b/week02/hyun_02/DarkMode/.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?