✍️ TodoList

학습 목적으로 백엔드 동료과 함께 TodoList 구현

배포링크

프로젝트 팀 구성

FRONT END 1명

BACK END 1명

📆 구현 목록 & 구현 영상

1. SignIn / SignUp

• localStorage를 이용한 회원가입, 로그인 구현
• 폼 입력시 유효성 검사
• 로그인, 회원가입 실패시 에러 메세지 모달 구현

2. TodoList

• TodoList 추가 / 수정 / 삭제 기능 구현
• 해당 todo 체크시 밑줄
• todoList 길어질 시 스크롤 생성
• header에 로그아웃 기능 구현

🌈 사용 라이브러리

---

📦 폴더 구조

📂 src
│  ├─ App.tsx
│  ├─ 📂 components
│  │  ├─ 📂 auths
│  │  │  ├─ 📂 api
│  │  │  │  └─ authAxios.ts
│  │  │  ├─ 📂 auth
│  │  │  │  ├─ AuthForm.tsx
│  │  │  │  └─ 📂 input
│  │  │  │     ├─ BirthInput.tsx
│  │  │  │     ├─ EmailInput.tsx
│  │  │  │     ├─ ImageInput.tsx
│  │  │  │     ├─ NameInput.tsx
│  │  │  │     └─ PasswordInput.tsx
│  │  │  ├─ 📂 dropBox
│  │  │  │  ├─ DropBox.tsx
│  │  │  │  └─ Style.ts
│  │  │  ├─ 📂 hooks
│  │  │  │  └─ useAuth.ts
│  │  │  └─ 📂 modal
│  │  │     ├─ Errormodal.tsx
│  │  │     └─ Style.ts
│  │  ├─ 📂 common
│  │  │  └─ Style.ts
│  │  ├─ 📂 header
│  │  │  ├─ Header.tsx
│  │  │  └─ Style.ts
│  │  └─ 📂 todos
│  │     ├─ TodoPage.tsx
│  │     ├─ Todos.tsx
│  │     └─ 📂 api
│  │        ├─ handleQueryTodos.ts
│  │        └─ todoAxios.ts
│  ├─ 📂 constants
│  │  ├─ authErrors.ts
│  │  └─ types.ts
│  ├─ index.tsx
│  ├─ 📂 pages
│  │  ├─ Auth.tsx
│  │  └─ Todo.tsx
│  └─ styles
│     ├─ GlobalStyle.ts
│     └─ theme.ts

회원가입 폼 구현

// src/components/auths/auth/input/EmailInput.tsx


...

  <>
    {errors.email && <S.ErrorMessage> {errors.email?.message} </S.ErrorMessage>}
    <S.IdInput
      {...register("email", {
        pattern: {
          message: ERROR_MESSAGE.EMAIL,
          value: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
        },
      })}
      placeholder=" 이메일을 입력하세요"
    />
  </>

...

// src/constants/authErrors.ts

export const ERROR_MESSAGE = {
  FILE: "❗️ 사진 업로드는 필수입니다",
  NAME_MAX: "이름은 10글자 이상 입력할 수 없습니다",
  NAME_MIN: "2글자 이상 입력하세요",
  EMAIL: " 이메일 형식 영문자, 숫자, '@' 와 '.'이 필요합니다",
  PASSWORD: "비밀번호는 영문/숫자 혼합, 8자 이상 20자 이하입니다.",
};

react-hook-form 의 register, error를 사용해 유효성 검사와 에러 메세지를 띄우도록 했고 이는 모달로 구현했습니다. 또한 후에 에러 메세지를 쉽게 수정할 수 있도록 constants/authErrors.ts 파일에 모아두었습니다.

TodoList 구현

// src/components/todos/auth/api/handleQueryTodos.ts


...

 export const GetTodoQuery = () => {
  return useQuery({
    queryKey: ["getTodoListDatas"],
    queryFn: getDataAxios,
  });
};

export const GetTodoUserQuery = () => {
  return useQuery({
    queryKey: ["getTodoUserData"],
    queryFn: getUserDataAxios,
  });
};

...

useQuery 를 사용해 header, todoList 정보를 불러왔습니다.