- 심플한 UI와 경계 없는 UX를 목표로 하고 있습니다!
- 새로운 기술을 익혔을 때의 테스트 배드도 겸하고 있습니다
최상위 경로로 이동 후 터미널에서
npx vite 입력 후 실행
📦src
┣ 📂api
┣ 📂assets
┣ 📂components
┃ ┣ 📂NavBar
┃ ┣ 📂styles
┃ ┗ 📂widgets
┃ ┃ ┣ 📂empty
┃ ┃ ┗ 📂form
┣ 📂contexts
┣ 📂data
┣ 📂features
┃ ┣ 📂auth
┃ ┃ ┗ 📂api
┃ ┣ 📂sign_up
┃ ┃ ┗ 📂api
┃ ┗ 📂todolist
┃ ┃ ┣ 📂api
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂TodoCard
┃ ┃ ┃ ┗ 📂TodoEditer
┃ ┃ ┣ 📂queries
┃ ┃ ┗ 📂types
┣ 📂hooks
┃ ┗ 📂auth
┣ 📂pages
┃ ┣ 📂LogIn
┃ ┣ 📂Root
┃ ┣ 📂SignUp
┃ ┗ 📂Todos
┣ 📂themes
┣ 📂types
┃ ┗ 📂form
┗ 📂utils- 새로운 기술을 익혔을 때 테스트 배드로 사용하기 위해 최대한 최소 기능 단위로 나누어 파일을 관리하고 있습니다.
- 적용해 보고 싶은 기술이 생겼을 때 필요한 부분만 바꿔서 사용할 수 있지 않을까 기대하고 있습니다.
로그인 폼
회원가입 폼
function FormInput<TForm extends FieldValues>({
label,
name,
error,
isError,
register,
options,
autoComplete = "off",
...rest
}: Props<TForm>) {
return (
<S.Label isError={isError}>
<S.LabelTitle>{label}</S.LabelTitle>
<S.Input
{...register(name, options)}
{...rest}
autoComplete={autoComplete}
/>
{error && <S.Error>{error}</S.Error>}
</S.Label>
);
}- 폼 관련 컴포넌트들을 공통 widget으로 만들어 디자인적인 통일감을 높이고 향후 폼의 확장성을 높였습니다.
- 에러 역시 FormInput widget에서 자체적으로 처리하게 하였습니다.
추가
수정
- Todo 추가 시 최대한 유저 경험에 경계가 없도록 UI를 동일하게 만들었습니다
- 수정 버튼을 눌렀을 때 수정 폼으로 자연스럽게 넘어가도록 구현하였습니다.
- React Suspense와 fallback으로 Skeleton UI를 적용하여 로딩 시에도 자연스럽게 넘어가게 하였습니다
- Skeleton UI에는 애니메이션을 추가하였습니다.
-
ReactQuery v4로 이동 -
Suspense 및 Skeleton UI 적용
- 상세 정보 모달창 추가
- Todo List에 완료 여부 추가 (BackEnd 공부 필요함)
- Error Boundary 사용해보기
- 수정 및 삭제 햄버거 메뉴로
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent