프로젝트 초기 환경 세팅
- eslint, prettier 설정
- redux, styled-components
- GlobalStyle 설정
- 폰트 bold, medium, regular 설정
- css reset 처리
- 반응형을 위한 device
프로젝트 초기 세팅 추가
- react-router-dom
- eslintrc.js 파일추가, packge.json에서 관리하지 않고 eslintrc.js 파일에서 관리
- App.js에 기본 세팅
- 404, 500일 때 페이지 처리 및 로딩 중일 경우 Suspense로 처리
- 기본적으로는 Login 페이지
로그인, 메인 - 홈 퍼블리싱
- DefaultLayout.js의 경우 이후 모달관련 추가예정
- AppContent.js에 기본 레이아웃 및 routes 추가
- 로그인, 메인, 설정 페이지에서 공통적으로 사용되는 레이아웃 따로 뺀 후 AppContent.js에 추가
- 로그인페이지 퍼블리싱
- 아이디, 비밀번호 입력 시 로그인 버튼 활성화
- 아이디, 비밀번호 에러 메세지 -> 이후 api 연동 후 구체화 예정
- 아이디, 비밀번호 입력창 마우스 오버, 클릭 시 테두리 효과
- 메인 - 홈 퍼블리싱
- 메인 - 홈 기본적인 레이아웃
- 할일 카드, 미니 메모 컴포넌트화
- 할일 카드, 미니 메모의 경우 이후 api 연동 후 map 이용해서 수정 예정
모달 기본세팅 및 미니메모 추가 모달 퍼블리싱
- 모달 관련 기본 세팅
- ModalControl, store>actions>modal, store>reducers>modal 추가
- DefaultLayout.js에 모달 추가(ModalControl)
- 미니메모 추가 모달 퍼블리싱
- 플러스 미니메모 클릭 시 보여질 모달
- 빨간 버튼 클릭 시 모달 닫힘
- 모달 내부에 textarea 사용 -> 메모 작성 가능/지정해준 높이 이상일 경우 내부에서 스크롤생김
- 작성 완료 후 저장하기버튼 클릭시 저장예정
- 저장하기 버튼의 레이아웃의 경우 다른 컴포넌트, 페이지 등에서 사용될 예정이므로 styled.js에 DefaultBtn으로 기본 레이아웃 정의해줌
마이페이지 퍼블리싱/ 할일 추가 페이지 및 마감기한 설정 모달 퍼블리싱
- 마이페이지 퍼블리싱
- 메인페이지의 톱니바퀴 아이콘 클릭시 보여질 모달
- 빨간 버튼 클릭 시 모달 닫힘
- 이름, 마감 기한 사용자가 수정 가능
- 로그아웃, 회원탈퇴 -> 이후 기능 가능하게 수정 예정
- 사용자가 수정 후 수정완료 버튼 클릭 시 수정 후 메인 홈으로 이동 예정
- 할일 추가 페이지 및 마감기한 설정 모달 퍼블리싱
- 할일 추가 페이지
- 메인페이지 오른쪽 상단 플러스 아이콘 클릭시 보여질 페이지
- 메인페이지에 보여지는 할일 추가할 수 있는 페이지
- 사이드바에 미니메모가 보여짐
- 제목, 내용 모두 입력 시 상단 저장하기 버튼 활성화
- 저장하기 버튼 클릭 시 마감기한 설정 모달이 보여짐
- 마감기한 설정 모달
- 캘린더에서 날짜 선택 후 등록하기 버튼 클릭 시 최종 추가 완료
- 캘린더는 react-calendar 사용
- 할일 추가 페이지
회원가입페이지 퍼블리싱
- 처음 로그인페이지에서 회원가입 하러가기 클릭 시 이동하는 페이지
- 아이디, 비밀번호 입력
- 비밀번호는 영문, 숫자, 특수문자를 포함한 8자 이상일 경우만 가능
- 아이디, 비밀번호, 비밀번호 확인 입력 완료되면 다음 버튼 활성화
- 비밀번호 규칙에 맞지 않거나 비밀번호와 비밀번호 확인 문자가 일치하지 않는 경우 에러메세지 출력
- 이름, 핸드폰 인증
- 핸드폰 번호는 -을 제외하고 입력 , 입력 시 자동 하이픈 추가
- 이름, 핸드폰 번호 입력 완료 시 인증요청 버튼 활성화
- 인증요청 버튼 클릭 시 인증번호 입력할 수 있는 입력창, 인증확인 버튼이 보여짐
- 인증번호 입력 시 인증확인 버튼 활성화
- 인증확인 버튼 클릭
- 인증번호가 일치할 경우 인증완료 메세지 박스가 보여짐
- 인증번호가 잘못된 경우 에러 메세지 박스가 보여짐
- 현재는 인증번호 입력한 경우 인증완료 메세지 박스가 보여짐 추후 핸드폰 인증단계 작업 진행하면서 수정 예정
- 모든 단계가 마무리되면 ToDo List와 함께하기 버튼 클릭 시 메인페이지 - 홈으로 이동
- 하단에는 로그인 페이지로 이동할 수 있는 문구
- 로그인 글씨 클릭 시 로그인 페이지로 이동됨
메인페이지 할일 상세 모달 퍼블리싱
- 할일 카드 클릭 시 보여지는 모달
- 각 할일 카드의 상세 페이지를 보여줌
- 제목, 내용, 마감일
- 제목, 내용 수정 가능
- 마감일 수정 추가 예정
- 마감일 클릭 시 마감 기한 설정 모달을 보여준 후 마감 기한 선택 가능
- 수정완료 클릭 시 수정 후 메인페이지로 이동할 예정
메인페이지 할일 카드 드래그 앤 드롭 구현
- React-beautiful-dnd 라이브러리
- 미진행, 진행중, 완료 카드 섹션 내부 이동 가능 및 섹션 간 이동 가능
- 우선 데이터는 더미데이터로 넣어둠 -> 이후 수정 예정
- 객체의 key값(ready, proceeding, complete)으로 구분함