feat: 1주차 미션 완료

week1/yoonTOdo/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 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 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();

week1/yoonTOdo/src/script.ts

@@ -0,0 +1,89 @@
+//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 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.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.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):void=>{
+    event.preventDefault();
+    const text = getTodoText();
+    if(text){
+        addTodo(text);
+    }
+});
+
+renderTasks();

week1/yoonTOdo/style.css

@@ -0,0 +1,100 @@
+*{
+    margin :0;
+    padding:0;
+    box-sizing : border-box;
+}
+body {
+    font-family: "Roboto", sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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__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;
+}

week1/yoonTOdo/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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}

week1/yoonTOdo/yoonTodo.html

@@ -0,0 +1,41 @@
+<!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="./script.js" defer></script>
+  <title>YOON TODO</title>
+</head>
+
+
+<body>
+  <div class = "todo-container">
+    <h1 class = "todo-container__header">Yoon 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">
+        <li class="render-container__item">
+          <p class="render-container__item-text">123</p>
+          <button class="render-container__item-button">삭제</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</body>
+</html>