이전에 만들어둔 파일 구조를 기반으로 다음의 컴포넌트들을 만들었다.
컴포넌트 구성
- BoardList
- SideForm: 보드를 추가할 때 사용하는 입력 폼
- ListContainer
- List: 각 리스트를 개별적으로 나타내는 컴포넌트
- Task: 리스트 내 작업 항목을 나타내는 컴포넌트
- ActionButton: 리스트 또는 작업 추가를 위한 액션 버튼
- DropDownForm: 리스트 또는 작업 추가를 위한 드롭다운 형태의 입력 폼
각 컴포넌트는 React 컴포넌트 파일(.tsx)과 스타일 파일(.css.ts)로 구성되어 모듈화하여 관리의 용이성을 높였다.
컴포넌트 작성 흐름
크게 BoardList와 ListContainer로 나뉠 수 있으며, 해당 컴포넌트를 구현하면서, 안에 들어가는 컴포넌트들을 잘게 쪼개어 구현하였다.
구현하는 큰 형식은 다음과 같다.
1. 기본적인 컴포넌트 구조를 작성 (.tsx파일에 작성하였다.)
2. Props의 타입을 명확히 정의하여 타입 안정성을 높임
3. 정의된 Props를 활용하여 동적인 UI를 구성
4. 하위 컴포넌트로 Props를 넘겨주면서 Redux를 통해 상태를 관리
5. Redux Slice를 작성하여 보드 추가, 삭제 등 액션을 관리
6. 그리고 컴포넌트의 기능들과 스타일을 구현하였다.(.css.ts파일스타일을 작성하였다.)
Redux를 사용하기에 상태관리를 이용하였고, 이는 store/Slice 폴더에서 진행되었다.
- boardsSlice.ts: 보드의 추가 및 삭제와 같은 상태 변화 관리
- loggerSlice.ts: 사용자의 추가, 삭제, 변경과 같은 모든 로그 상태 관리
- modalslice.ts: 모달의 on/off 상태 관리
해당 파일들에 만들어둔 Action으로 컴포넌트 내에서 Dispatch를 통해 Action을 발생시키고, useSelector로 상태를 가져와 UI에 반영되도록 하였다.
스타일링
App.css.ts 파일에 미리 작성해둔 vars를 통해 각 컴포넌트의 .css.ts 파일을 쉽게 스타일링할 수 있었다.
완성된 모습
