학습 목적으로 백엔드 동료과 함께 TodoList 구현
- localStorage를 이용한 회원가입, 로그인 구현
- 폼 입력시 유효성 검사
- 로그인, 회원가입 실패시 에러 메세지 모달 구현
- 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
파일에 모아두었습니다.
// 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 정보를 불러왔습니다.