[4주차] 강태이/todolist Edit, localStorage 기능 구현 #60
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yezzan9
reviewed
Apr 30, 2025
Member
yezzan9
left a comment
yezzan9
left a comment
There was a problem hiding this comment.
수고하셨습니다 태이님!
현재 코드를 보니 prettier가 제대로 설정이 안 되어있는 것 같아요💦
확인 후 설정부탁드립니다 !!
Comment on lines
+85
to
+98
| const TodoList = ({ todos, setTodos, activeCategory }) => { | ||
| const [editTexts, setEditTexts] = useState({}); | ||
|
|
||
| const handleDelete = (id) => { | ||
| setTodos(todos.filter(todo => todo.id !== id)); | ||
| }; | ||
|
|
||
| const handleToggleComplete = (id) => { | ||
| setTodos( | ||
| todos.map(todo => | ||
| todo.id === id ? { ...todo, completed: !todo.completed } : todo | ||
| ) | ||
| ); | ||
| }; |
Member
There was a problem hiding this comment.
이 부분 들여쓰기가 4칸으로 되어있는 것 같아요 ! 2칸으로 수정해주세용👀
Comment on lines
+148
to
+190
| <TodoListContainer> | ||
| <StyledText>{todos.filter(todo => !todo.completed).length} tasks remaining</StyledText> | ||
| <div className="task-list"> | ||
| {filteredTodos.map(todo => ( | ||
| <TaskItem key={todo.id}> | ||
| {todo.isEditing ? ( | ||
| <> | ||
| <TaskTop style={{ flexDirection: "column", alignItems:"flex-start"}}> | ||
| <div style={{marginBottom: "8px", fontWeight:"bold"}}> | ||
| New name for <span style={{color: "#555"}}>{todo.text}</span> | ||
| </div> | ||
|
|
||
| <input | ||
| type="text" | ||
| value={editTexts[todo.id] || ''} | ||
| onChange={(e) => handleEditChange(todo.id, e.target.value)} | ||
| style={{ width: "400px", padding: "8px", fontSize: "16px" }} | ||
| /> | ||
| </TaskTop> | ||
|
|
||
| <TaskActions> | ||
| <CancelButton onClick={() => handleCancel(todo.id)}>Cancel</CancelButton> | ||
| <SaveButton onClick={() => handleSave(todo.id)}>Save</SaveButton> | ||
| </TaskActions> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <TaskTop> | ||
| <StyledCheckbox | ||
| checked={todo.completed} | ||
| onChange={() => handleToggleComplete(todo.id)} | ||
| /> | ||
| <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}> | ||
| {todo.text} | ||
| </span> | ||
| </TaskTop> | ||
| <TaskActions> | ||
| <EditButton onClick={() => handleEdit(todo.id, todo.text)}>Edit</EditButton> | ||
| <DeleteButton onClick={() => handleDelete(todo.id)}>Delete</DeleteButton> | ||
| </TaskActions> | ||
| </> | ||
| )} | ||
| </TaskItem> |
Comment on lines
+160
to
+165
| <input | ||
| type="text" | ||
| value={editTexts[todo.id] || ''} | ||
| onChange={(e) => handleEditChange(todo.id, e.target.value)} | ||
| style={{ width: "400px", padding: "8px", fontSize: "16px" }} | ||
| /> |
Member
There was a problem hiding this comment.
기존에 구현했던 Input 컴포넌트를 재사용하도록 수정하면 더 좋을 것 같아요!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
1. 무엇을??
기존 Todo List 구현하기 과제에서 Edit, Cancel, Save 기능을 구현하였습니다.
tasks 상태를 localStorage에 저장하여 브라우저를 닫았다가 다시 열어도 데이터가 유지되도록 하였습니다.
2. 어떤 작업을 하였나요??
todolist 컴포넌트에서 isEditing 상태를 추가하고 Edit 버튼 클릭시 cancel/save버튼 렌더링,
cancel 버튼 누르면 취소, save버튼 누르면 수정된 이름으로 반영
tasks 상태를 localStorage에 저장
3. 스크린샷