Skip to content

feat: 1주차 미션 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
soyun0318 wants to merge 1 commit into
base: week1/sori
Choose a base branch
from
Open

feat: 1주차 미션 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions dist/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 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 completeTask = (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 = '#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);
}
});
renderTask();
37 changes: 37 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<!-- JS 파일 업로드 -->
<script type="module" src="./dist/script.js" defer></script>
<title>Document</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>
95 changes: 95 additions & 0 deletions src/script.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
// 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을 정의
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 completeTask = (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): HTMLElement => {
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 {
completeTask(todo);
}
});

li.appendChild(button);
return li;
};

// 폼 제출 이벤트 리스너
todoForm.addEventListener('submit', (event: Event): void => {
event.preventDefault();
const text = getTodoText();
if (text) {
addTodo(text);
}
});

renderTask();
112 changes: 112 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
* {
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);
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;
}

.render-container__title {
font-size: 10px;
margin-bottom: 10px;

display: flex;
justify-content: center;
}

.render-container__section {
width: 100%;
text-align: left;
}

.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 {
Copy link
Copy Markdown
Collaborator

@yewon20804 yewon20804 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.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;
}
20 changes: 20 additions & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"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, // 컴파일 에러 발생 시 파일 생성 안 함
Copy link
Copy Markdown
Collaborator

@yewon20804 yewon20804 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noEmitOnError 설정 설명이 반대로 적혀있는 것 같습니다 !
false는 에러가 있어도 파일이 생성되는 옵션이라 주석 또는 설정을 수정해주시면 좋을 것 같습니다 :)

"noUnusedLocals": true, // 사용하지 않는 지역 변수에 대해 에러 발생
"noUnusedParameters": true, // 사용하지 않는 매개변수에 대해 에러 발생
"noImplicitReturns": true, // 함수에서 명시적으로 값을 반환하지 않는 경우 에러 발생
"noFallthroughCasesInSwitch": true, // switch 문에서 fallthrough 방지
"noUncheckedIndexedAccess": true // 인덱스 접근 시 체크되지 않은 경우 에러 발생
}
}