[0/1주차/눈송이]워크북 제출합니다.

[wooojin401]

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
• 핵심 키워드에 대해 완벽히 이해하셨나요?
• 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
• 미션을 수행하셨나요?
• 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

• 디렉토리 구조 컨벤션을 잘 지켰나요?
• pr 제목을 컨벤션에 맞게 작성하였나요?
• pr에 해당되는 이슈를 연결하였나요?(중요)
• 적절한 라벨을 설정하였나요?
• 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
• 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

[sunnyinha]

LGTM! 눈송이 수고많으셨습니다~
한 가지 수정할 사항이 있어서 피드백 드립니다.

node_modules 안에는 프로젝트 실행에 필요한 모든 라이브러리가 포함되어 있어 굉장히 용량이 큽니다.
그러나 package.json과 package-lock.json에 필요한 라이브러리가 적혀있고
pnpm install 만 실행한다면 해당 node_modules를 똑같이 생성할 수 있기 때문에 큰용량의 파일을 깃허브에 올릴 필요가 없습니다.
따라서 node_modules나 dist 디렉토리(src 소스 코드 빌드 산출물로 이것 또한 생성 가능합니다)는 삭제해주시기 바랍니다!

일반적으로 협업 시에는 .gitignore 파일을 생성하여 **/node_modules/ , **/dist/ 를 적어 자동으로 제거되도록 하는 방법을 사용할 수 있고 지금은 직접 해당 디렉토리들을 삭제 하셔도 됩니다!

그리고 이건 tip인데 keyword 디렉토리 안에 넣을 markdown 파일 생성을 노션에서도 md 파일 생성이 가능합니다.
현재 줄 글로 작성해주셔서 markdown 문법을 넣어준다면 더 가독성 좋은 정리 파일이 될 수 있을 것 같아요!
[노션 마크다운 생성] https://haebom.notion.site/04dd4cdc21a844589aec9c9bf3b9f3f9#23440e19d27f4bd29c722a99d3fcf416

[sunnyinha]

그리고 2주차부터는 commit을 keyword, practice, mission로 각각 구분해서 올려주세요!
commit 메시지를 '하나의 기능 단위'로 나누어 작성하는 것이 협업에 큰 도움이 됩니다👍

[sunnyinha]

다음엔 마크다운 문법을 쓰면 좋을 것 같아요!

[wooojin401]

옙 그렇게 해보겠습니다.

[aeongiing]

사이드바를 transform으로 숨겼다가 클래스 토글로 열고 닫게 구현한 점이 깔끔해서 좋은 것 같습니당

[aeongiing]

button.addEventListener('click', ():void=>{
    if(isDone){
        deleteTodo(todo);
    }
    else{
        completeTodo(todo);
    }
});
으로 영상에서는 보여지던데, 혹시 나누어서 올린 이유가 있을까요??

[wooojin401]

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 Todo = {
id: number;
text: string;
};

let todos: Todo[] = [];
let doneTasks: Todo[] = [];

// 할 일 & 완료된 일 렌더링
const renderTask = (): void => {
todoList.innerHTML = '';
doneList.innerHTML = '';

todos.forEach((todo: Todo): void => {
const li = createTodoElement(todo, false);
todoList.appendChild(li);
});

doneTasks.forEach((todo: Todo): void => {
const li = createTodoElement(todo, true);
doneList.appendChild(li);
});
};

// input 값 가져오기
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 deleteTask = (todo: Todo): void => {
doneTasks = doneTasks.filter((t): boolean => t.id !== todo.id);
renderTask();
};

// 공통 li 생성 함수
const createTodoElement = (todo: Todo, isDone: boolean): HTMLLIElement => {
const li = document.createElement('li');
li.classList.add('todo-item');
li.textContent = todo.text;

const button = document.createElement('button');
button.classList.add('render-container__item-button');

// 버튼 모양은 조건으로 나눔
if (isDone) {
button.textContent = '삭제';
button.style.backgroundColor = 'red';
} else {
button.textContent = '완료';
button.style.backgroundColor = 'green';
}

// 클릭 이벤트는 한 번만 등록, 내부에서 분기
button.addEventListener('click', (): void => {
if (isDone) {
deleteTask(todo);
} else {
completeTask(todo);
}
});

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

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

renderTask();
말씀하신대로 수정해서 적용했습니다!

[sunnyinha]

LGTM~ 눈송이 수고하셨습니다! 머지해주세요~
가능하다면 node_modules 디렉토리는 삭제하고 머지하시면 좋을 것 같습니다!
[merge 방법]

merge pull request
"merge: [0,1주차/닉네임] 워크북 제출합니다."의 형식으로 커밋메시지 작성
머지해주세요!

[wooojin401]

옙 머지했습니다!