기본적인 디자인과 어떻게 만들지는 미리 만들었던 투두리스트를 가져갈거고 좀 더 좋은 코드를 위해 대략적인 각 페이지 별 들어갈 함수나 디렉토리를 간단하게 정리해 봤다

각 페이지 기능정리

메인페이지 (home)

가운데 타이틀

로그인 하기 버튼 - 마우스 hover 색 변함

• 버튼 누를시 로그인 signin 페이지로 이동

회원가입 하기 버튼 - 마우스 hover 색 변함

• 버튼 누를시 회원가입 signup페이지로 이동

필요함수

• 페이지 이동 함수

로그인 페이지 (signin)

로그인 타이틀

이메일 input - 유효성 검사(@ 포함하도록)

• placeholder = 이메일
• state를 통한 유효성 실시간 검사
• 유효성 검사가 통과될 시 버튼disable속성

비밀번호 input - 유효성 검사(8자 이상)

• placeholder = 비밀번호
• state를 통한 유효성 실시간 검사
• 이메일 , 비밀번호 유효성 검사가 모두 통과할 시 버튼 disable속성 false

로그인하기 버튼

• 로그인 api 보내기
• api응답 오기 전까지 loading circle 표시
• 유효성 통과 전까지 disable=true

취소 버튼

• home 페이지로 돌아가기

필요 함수

• 이메일 유효성 검사
• 비밀번호 유효성 검사
• 로그인 버튼 누를 시 동작할 함수(api통신)
• 취소 버튼 누를시 돌아갈 함수

필요 상태

• 이메일 input값
• 비밀번호 input값
• 이메일 유효성 검사 통과
• 비밀번호 유효성 검사 통과
• 로그인 현재 api통신 상태

회원가입 페이지 (signup)

회원가입 타이틀

이메일 input - 유효성 검사(@ 포함하도록)

• placeholder = 이메일
• state를 통한 유효성 실시간 검사
• 유효성 검사가 통과될 시 버튼disable속성

비밀번호 input - 유효성 검사(8자 이상)

• placeholder = 비밀번호
• state를 통한 유효성 실시간 검사
• 이메일 , 비밀번호 유효성 검사가 모두 통과할 시 버튼 disable속성 false

회원가입하기 버튼

• 회원가입 api 보내기
• api응답 오기 전까지 loading circle 표시
• 유효성 통과 전까지는 disable=true

취소 버튼

• home 페이지로 돌아가기

필요 함수

• 이메일 유효성 검사
• 비밀번호 유효성 검사
• 회원가입 버튼 누를 시 동작할 함수(api통신)
• 취소 버튼 누를시 돌아갈 함수

필요 상태

• 이메일 input값
• 비밀번호 input값
• 이메일 유효성 검사 통과
• 비밀번호 유효성 검사 통과
• 회원가입 현재 api통신 상태

분리할 컴포넌트 및 함수

공용 컴포넌트

• 버튼 컴포넌트
• input 컴포넌트
• checkbox컴포넌트

메인페이지

• 로그인,회원가입 버튼(공용)

로그인 페이지

• 이메일input, 비밀번호input (공용)
• 로그인 버튼, 취소 버튼(공용)

회원가입 페이지

• 이메일 input, 비밀번호 input(공용)
• 회원가입 버튼, 취소 버튼(공용)

투두리스트 페이지

• 새로운 투두 입력
  • 입력 input(공용)
  • 추가하기 버튼(공용)
• 투두 리스트
  • 개별 투두
  • 개별 투두의 체크박스(공용)
  • 개별 투두의 수정 모드
    • 제출,취소 버튼(공용)
    • 수정,삭제 버튼(공용)
    • 수정 input(공용)

공용 함수

• util
  • 회원가입, 로그인 유효성 검사 함수
  • 데이터 형식 변경시 함수(필요 없을수도 있음)
  • api통신 함수
  • 데이터 처리(sort나 필터링등 혹시 필요한 함수들)
• hooks
  • 커스텀 훅 필요하다면 제작

리스트 페이지 (todo)

가장 위 todolist 타이틀

모든 상태 변경값들은 새로고침시에도유지 되어야 함

새로운 todo 입력하기

• 입력값 input
• 유효성 검사가 없으니 useRef로 비제어 컴포넌트화

새로운 todo를 추가할 button

• 다른유효성 검사는 제한에 없으니 추가하지 X
• 클릭시 input의 입력값을 새로운 리스트에 추가(api통신)
• input값의 value는 초기화 시켜주자
• 투두리스트 컴포넌트에 현재 리스트 state값에 새로운 리스트 추가해주기

투두리스트

• 페이지가 로드될 때 리스트들이 뜨도록하기(api통신)

투두 체크박스

• 각 투두들은 체크박스를 가지고 있음
• label로 투두의 내용과 체크박스 둘러쌓여 있음
• 체크박스 체크할 때마다 체크 완료 여부를 수정
• 체크 변경시 완료 상태를 업데이트 (api통신)

투두 수정 버튼

• 버튼을 누를경우 수정 모드로 변경
• 투두 내용 부분을 input입력창으로 변경시킴
• 수정 상태일 땐 제출 버튼으로 변경

투두 제출 버튼

• 수정 버튼을 눌러 생긴 input 입력창 값으로 todo 내용 업데이트
• 제출이 완료될 시 수정 버튼으로 변경

투두 수정 Input

• 수정 버튼을 누를 경우 투두 내용 부분에서 input창 등장
• input창의 기본 값으로 기존의 투두 내용을 가지고 있음

투두 삭제 버튼

• 삭제 버튼을 누를 경우 투두 삭제(api통신)
• 수정 버튼을 눌렀을 때의 수정모드에선 삭제버튼은 취소 버튼으로 변경

투두 취소 버튼

• 버튼 누를시 수정하려고 했던 내용은 초기화 되고 수정모드 비활성화
• 다시 삭제버튼으로 바뀜

필요함수

• 새로운 투두를 추가시킬 함수(api)
• 투두 리스트를 불러올 함수(api)
• 체크박스 클릭시 체크상태 업데이트 함수(api)
• 투두 내용 수정시 업데이트 함수(api)
• 투두 삭제 함수(api)

필요 상태

• 수정모드 상태를 체크할 상태
• 투두 리스트 목록 상태