[React,ReactNative] Schedule 추가하기

 

 

오늘은 todo 어플리케이션에 스케쥴을 추가하여

todo 및 데일리 스케쥴을 함께 관리할 수 있는 어플리케이션을 개발해보았다.

 

이전 todo 리스트 구현 내용 링크를 첨부한다.

https://mingnol2.tistory.com/207

[React Native] 반려동물 케어 Todo 어플리케이션 개발

 

 

홈화면 >

 

오늘의 날짜와

오늘 해야할 스케쥴을 보여준다.

또한 하단부에는 기한이 없는 투두리스트를 생성하거나, 수정, 삭제 및 체크를 하여 관리할 수 있다.

 

 

하단부 Add the Text 텍스트를 클릭시

할일을 추가할 수 있는 모델이 팝업 되며,

할일 작성 후 '+' 버튼을 터치하여 할일 리스트에 목록을 추가할 수 있다.

추가된 리스트는 체크 표시로 완료, 혹은 미완료 상태를 표시해 줄 수 있다.

 

 

추가로 스케쥴 추가 모달 및 todolist 쓸어 넘겨 삭제하는 기능을 개발 중이다.

 

모달은 아래 위젯을 참고하였다.

https://github.com/GSTJ/react-native-magic-modal

GitHub - GSTJ/react-native-magic-modal: 🦄 A modal library that can be called imperatively from anywhere!

 

사용법이 궁금하실 경우 아래 댓글로 남겨주시면 추후 게시글로 안내드리겠습니다!

 

실제 적용해보니, 색상이나 스타일 적용 부분에서 수정할 부분이 생겨 이부분도 커스텀 하여 이용중이다.

 

TaskModal.css

buttonContainer: {
      fontSize: 16,
      fontWeight: 'bold',
      marginTop: 25,
      backgroundColor: '#6830CF',
      color: '#FFFFFF',
      padding: 10,
      borderRadius: 10,
      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      fontSize: 16,
      fontWeight: 'bold',
      color: '#ffffff',
    },