[3주차] 강태이/컴포넌트 모듈화 수정 및 주요 기능 구현 #48
Conversation
yezzan9
left a comment
yezzan9
left a comment
There was a problem hiding this comment.
3주차 과제도 수고하셨습니다!
코멘트 몇가지 남겨드렸으니 태이님 생각도 공유해주세요🙌
There was a problem hiding this comment.
혹시 체크박스 컴포넌트가 왜 삭제되었는지 알 수 있을까용?-?
| const HeaderContainer = styled.text` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| `; | ||
|
|
||
| const Header = () => { | ||
| return ( | ||
| <HeaderContainer> | ||
| <h1>TodoMatic</h1> | ||
| </HeaderContainer> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
내부에 단일 태그만 있는 경우에는
const HeaderContainer = styled.h1`
//...이하생략
h1태그에 바로 스타일링을 주도록 이렇게 작성할 수 있습니다!
그러면 사용하는 부분에서도
<HeaderContainer>TodoMatic</HeaderContainer>
이렇게 사용할 수 있겠죠?🙌
| <TaskItem key={todo.id}> | ||
| <TaskTop> | ||
| <StyledCheckbox | ||
| checked={todo.completed} | ||
| onChange={() => handleToggleComplete(todo.id)} | ||
| /> | ||
| <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}> | ||
| {todo.text} | ||
| </span> | ||
| </TaskTop> | ||
| <TaskActions> | ||
| <EditButton>Edit</EditButton> | ||
| <DeleteButton onClick={() => handleDelete(todo.id)}>Delete</DeleteButton> | ||
| </TaskActions> |
There was a problem hiding this comment.
해당 부분이 Todo라는 컴포넌트로 분리되어있어야합니다!🥺
There was a problem hiding this comment.
해당 파일에 들여쓰기가 4 space로 되어있는 것 같아요
혹시 prettier 설정이 제대로 안 되어있는 걸까요..?!🥺
해당 파일 들여쓰기 2 space로 수정해주세요!
|
제가 잘못보고 어제 잘못 알려드렸더라구요 ..😂 죄송해요🥹 
|
One-HyeWon
left a comment
One-HyeWon
left a comment
There was a problem hiding this comment.
3주차도 고생하셨어요 태이님!!
파일 중에 들여쓰기가 안 맞는 부분이 있어서, prettier 확인 부탁드릴게용
| const StyledInput = styled.input` | ||
| width: 500px; | ||
| padding: 14px; | ||
| border-radius: 0px; | ||
| margin-bottom: 8px; | ||
| `; |
There was a problem hiding this comment.
Input 컴포넌트를 사용하지 않으시고, 새로 생성하셨네요!
Input, Button, Text와 같이 공통 컴포넌트를 만드셨으니, 해당 컴포넌트들을 활용하는 것이 좋을 것 같아요!
| width: 532px; | ||
| padding: 9px; | ||
| border: none; | ||
| border-radius: 0px; |
There was a problem hiding this comment.
0px로 주시는 건, 아무것도 지정하지 않은 상태와 동일하기 때문에 굳이 명시하실 필요 없습니다!
3 participants
1. 무슨 이유로 코드를 변경했나요?
2주차 스타일링 체크박스 수정이 필요해 수정하고 디자인 가이드에 맞게 전체 UI를 styled-components 기반으로 다시 스타일링 했습니다.
2. 어떤 작업을 했나요?
-할일 Add, Delete, Completed 체크 박스 기능 구현
-필터링 기능 구현( All/Active/Completed)
3. 구현 영상
Uploading Vite + React 외 페이지 2개 - 회사 - Microsoft Edge 2025-04-08 16-40-22.zip…