[부산대 FE 송지혁] 미션 제출합니다. #42
Open
Conversation
This file contains 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
00306
commented
Jun 9, 2024
00306
commented
본격적인 구현 전 구현해야할 기능들을 분류했습니다. 분류한 기능 별로 브랜치를 파서 세부 내용을 구현할 예정입니다.
TextField Component를 구현했습니다. - useState를 통해 Enter 키 입력 감지 - useEffect를 통해 state 값 관리
TextField에 push 클래스 추가 시 shadow에 animation 적용
- React 애플리케이션을 초기화하는 createApp 함수 작성 - React 18의 새로운 Root API를 지원하기 위해 ReactDOM.createRoot 사용 - root DOM 요소에 App 컴포넌트를 렌더링
- Title, TextField, FilterButton, TodoList 컴포넌트 임포트 및 사용 - Title, TextField, FilterButton, TodoList 컴포넌트 임포트 배치 - TextField에서 새로운 태스크 입력 시 tasks 배열에 추가하는 handleEnter 함수 구현 - 필터 버튼 클릭 시 selectedRole 상태를 업데이트하는 handleFilterClick 함수 구현 - 필터 버튼 클릭 시 선택된 버튼 스타일 적용
- TODO 리스트의 제목을 표시하는 Title 컴포넌트 구현
- top을 170px로 설정하여 제목의 위치 고정 - user-select: none을 사용하여 제목 텍스트 선택 불가 처리
- 역할에 따라 필터링을 수행하는 FilterButton 컴포넌트 구현 - 선택된 역할에 따라 버튼의 스타일을 변경하는 isSelected 상태 관리
- TextField 컴포넌트 생성하여 텍스트 입력 필드 구현 - useRef를 사용하여 컴포넌트 마운트 시 자동으로 입력 필드에 포커스 설정
- TodoList 컴포넌트 생성하여 태스크 목록을 렌더링하는 기능 구현 - tasks 배열을 받아 각 태스크를 Task 컴포넌트로 렌더링
- createApp 함수를 호출하여 애플리케이션을 초기화
task <li> 요소의 key 값을 index로 지정했을 시 배열이 변경되면서 생기는 문제점들을 개선하기 위해 task 오브젝트의 id 값을 추가했습니다 - generateId 함수로 id 생성 - task 객체 id key 추가
- 입력 값 앞뒤 공백 제거를 위해 trim() 사용
할 일이 길어질 경우 UI가 깨지는 현상을 수정했습니다
할 일의 완료 여부를 변경할 수 있는 기능을 추가했습니다
등록된 할 일을 제거할 수 있는 기능을 추가했습니다
할 일의 완료 여부에 따라 list를 업데이트하는 필터 기능을 추가했습니다
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.