Conversation
bk-git-hub
left a comment
bk-git-hub
left a comment
There was a problem hiding this comment.
기성님 수고 많으셨습니다!
이번주 핵심 내용들은 전반적으로 잘 구현을 해주셨습니다
그러나 지난주 언급했던 부분들 중 적용되지 않은 부분들이 몇 가지 있어서 조금 아쉬웠어요.
다듬어볼 부분들은 코멘트로 언급해 두었으니 차근차근 살펴보시기 바랍니다.
이번주에는 꼭 커밋 가이드 한번 읽어보시고 작업단위 커밋을 하는 연습을 해보시면 좋겠습니다.
https://www.notion.so/Git-Commit-Guide-327793efb80180bcb8f9c357c580a48d
질문 주신 “실제로 체크해서 취소선이 그어지도록 하는 것”은 보통 상태(state)를 배우고 난 뒤에 자연스럽게 이어지는 구현입니다. 그래서 일단은 week4 배치를 해두었으나 미리 구현 시도를 해보셔도 상관없습니다 :)
| ]; | ||
|
|
||
| // 2. 아래쪽에 보여줄 데이터 (텅 빈 배열) | ||
| const emptyTodos: any[] = []; |
There was a problem hiding this comment.
현재 emptyTodos를 any[]로 선언해서 빈 배열을 처리하고 있는데, 이런 방식은 TypeScript 타입 체크를 우회하게 됩니다. Todo 타입을 공용으로 빼거나 같은 타입으로 명시해두면 빈 배열도 더 안전하게 다룰 수 있습니다.
| {/* ========================================= */} | ||
| {/* 첫 번째 화면: 데이터가 있을 때 (체크박스 토글) */} | ||
| {/* ========================================= */} | ||
| <div className="section"> | ||
| <TodoHeader /> | ||
| <TodoList todos={populatedTodos} /> | ||
| </div> | ||
|
|
||
| {/* ========================================= */} | ||
| {/* 두 번째 화면: 데이터가 없을 때 (빈 상태) */} | ||
| {/* ========================================= */} | ||
| <div className="section" style={{ marginTop: '96px' }}> | ||
|
|
||
| <TodoHeader /> | ||
| <TodoList todos={emptyTodos} /> | ||
| </div> |
There was a problem hiding this comment.
다음주에는 이 부분을 조건부 렌더링으로 처리해보면 좋을 것 같아요
| <div className="todo-list"> | ||
| {todos.map((todo) => ( | ||
| <TodoCard | ||
| key={todo.id} | ||
| content={todo.content} | ||
| isDone={todo.isDone} | ||
| /> | ||
| ))} | ||
| </div> |
There was a problem hiding this comment.
현재 목록 구조가 div 기반이라서 실제 “리스트” 의미는 조금 약하게 전달됩니다. 같은 속성의 아이템을 나열하는 구조라면 ul / li를 쓰는 쪽이 더 자연스럽습니다.
| @@ -1,15 +1,31 @@ | |||
| // src/components/TodoCard.tsx | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
React import가 현재 코드에서는 직접 사용되지 않는 것으로 보여서, 최종 제출 전에는 사용하지 않는 import를 한 번 더 정리해두는 습관을 들이면 좋겠습니다.
There was a problem hiding this comment.
이 파일이 현재 import 되는 곳이 보이지 않아서 한번 점검 해보시면 좋을 것같아요
2 participants
✅ 제출 정보
✅ 체크리스트 (필수)
main이 아니라 내 GitHub 핸들 브랜치(<handle>)다<handle>-week-xx형식이다🧩 구현 내용 요약
❓ 궁금한 점