[2주차] 이효린 미션 제출합니다. #7
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,7 @@ body { | |
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
| import { css } from '@emotion/react'; | ||
| import { deleteFromLocalStorage } from '../utils/deleteFromLocalStorage'; | ||
| import { getLocalStorage } from '../utils/getLocalStorage'; | ||
|
|
||
| export const DeleteButton = ({ id, setTodoList }) => { | ||
| return ( | ||
| <div | ||
| css={css({ cursor: 'pointer' })} | ||
| onClick={() => { | ||
| deleteFromLocalStorage(id); | ||
| setTodoList(getLocalStorage()); | ||
| }} | ||
| > | ||
|
There was a problem hiding this comment. uills부분 한번 더 배우고갑니다! onClick이벤트 핸들러를 통해로컬 스토리지 적용한 부분 정말 간결하고 저도 이렇게 작성하고싶어요! |
||
| 🗑️ | ||
| </div> | ||
| ); | ||
| }; | ||
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** @jsxImportSource @emotion/react */ | ||
| import { css } from '@emotion/react'; | ||
| import { DeleteButton } from './DeleteButton'; | ||
| import { updateFromLocalStorage } from '../utils/updateFromLocalStorage'; | ||
| import { getLocalStorage } from '../utils/getLocalStorage'; | ||
| export const TodoItem = ({ todoList, setTodoList }) => | ||
| todoList.map((todo, index) => ( | ||
|
Comment on lines
+7
to
+8
There was a problem hiding this comment. 위에서 이어서, todo를 받고 todo에 대한 UI를 렌더링 하는 역할을 하는 것이 적절해보입니다. |
||
| <div | ||
| key={index} | ||
| css={css({ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| height: '20px', | ||
| width: '100%', | ||
| })} | ||
| > | ||
| <div | ||
| css={css({ | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| textAlign: 'center', | ||
| alignItems: 'center', | ||
| width: '100%', | ||
| justifyContent: 'space-between', | ||
| })} | ||
| > | ||
| <div | ||
| css={css({ | ||
| cursor: 'pointer', | ||
| textDecoration: todo.done ? 'line-through' : 'none', | ||
|
Comment on lines
+29
to
+32
There was a problem hiding this comment. 할 일 항목 완료여부에 따라 동적으로 설정하신 부분도 명확하게 보여서 너무 좋아요!!!!! |
||
| color: todo.done ? '#D3D3D3' : '#000', | ||
| textAlign: 'center', | ||
| })} | ||
| onClick={() => { | ||
| updateFromLocalStorage(todo.id); | ||
| setTodoList(getLocalStorage()); | ||
|
Comment on lines
+37
to
+38
There was a problem hiding this comment. 현재 순서가 |
||
| }} | ||
| > | ||
| • {todo.todo} | ||
| </div> | ||
| <DeleteButton id={todo.id} setTodoList={setTodoList} /> | ||
| </div> | ||
| </div> | ||
| )); | ||
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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LocalStorage를 왜 사용하는지 생각해보셨으면 좋겠습니다. LocalStorage를 데이터 원본 저장소처럼 활용하고 있는데요. 성능 면이나 관리 면에서 그냥 메모리에 있는 상태를 원본으로 두고 LocalStorage는 백업 용도로 사용하는 것이 좋겠습니다.
저라면 Todo State를 변경하고 그에 대한 Effect로 LocalStorage에 상태를 저장할 것 같네요.
그렇게 되면 여기서는 위에서 말한 deleteTodo 함수만 호출하면 됩니다.