[4주차 과제] 회원가입 & 로그인

[yooncandooit]

👽 과제 명세

💡 기본 과제

• React + TypeScript
• HTTP 클라이언트 라이브러리 사용 (axios, ky, ...)
• ThemeProvider, GlobalStyle 사용 (CSS 라이브러리 사용)

1. 로그인

• 로그인 타이틀
• 아이디 입력 Input
• 비밀번호 입력 Input
• 회원가입 페이지로 이동 가능한 버튼
• 로그인 버튼 (hover시 배경색 바꾸기 (transition 적용))
• 로그인 성공시 마이페이지로 이동 및 userId 저장
  (userId 저장 위치는 자유. localStorage, SessionStorage, ...)
• 로그인 실패 처리(UI)

2. 회원가입

• 회원가입 타이틀
• 한 페이지에서 아래 모든 필수 항목 입력(url은 그대로)
  (username(아이디), password, name(이름), email(이메일), age(나이))
• 로그인 페이지로 이동 가능한 버튼

3. 회원가입(아이디)

• 아이디 입력 Input
• 다음 버튼을 누르면 비밀번호 입력폼이 나옴
• Input 비어있을 때 버튼 비활성화

4. 회원가입(비밀번호)

• 비밀번호 입력 Input
• 비밀번호 확인 Input
• 둘 중 하나라도 비어있으면 버튼 비활성화
• 두 비밀번호가 다르면 버튼 비활성화
• 다음 버튼을 누르면 추가 정보 입력 폼(name/email/age)이 나옴

5. 회원가입(이름/이메일/나이)

• 이름 입력 Input
• 이메일 입력 Input
• 나이 입력 Input
• 회원가입 버튼
• Input 비어있을 때 버튼 비활성화
• 회원가입 실패 시 에러메시지 alert 출력
• 회원가입 성공 시 alert 출력 및 login 페이지로 이동

6. 마이페이지(헤더)

• 헤더에 '내 정보', '회원 조회', '로그아웃', '회원탈퇴' 탭 존재
• 헤더 좌측에는 본인의 이름 출력
• 로그아웃 버튼 클릭 시 userId 저장 정보 삭제하고 로그인 페이지로 이동
• 각 탭 클릭 시 해당 페이지로 이동 (라우트)

7. 마이페이지(내 정보)

• 새 이름, 이메일, 나이 입력 Input
• 저장 버튼
• 저장 오류시 alert 출력
• 저장 성공시 화면의 표시 정보 갱신 및 alert 출력

8. 마이페이지(회원 조회)

• 회원 ID 입력 Input(숫자)
• 확인 버튼
• 조회 성공 시 상세 정보(단건) 출력
• Input이 비어있는 상태에서는 확인 버튼 비활성화

9. 회원 탈퇴

• 회원탈퇴 버튼 클릭 시 확인 모달 노출 → 확인 시 탈퇴 진행
• 회원탈퇴 실패 시 에러메시지 alert 출력
• 회원탈퇴 성공 시 alert 출력 후 login 페이지로 이동

---

🔥 심화 과제

• any 사용하지 않기

1. 회원가입 (아이디)

• 50글자 넘어가는 것에 대해 에러메시지 출력 및 버튼 비활성화

2. 회원가입 (비밀번호)

• 비밀번호 보이기 토글 버튼 추가
• 비밀번호 불일치 에러 메시지 출력
• 비밀번호 검증 및 정책 불일치 시 에러 메시지 출력 및 버튼 비활성화
  1. 길이 8~64자
  2. 대문자/소문자/숫자/특수문자 각각 1자 이상 포함
  3. 공백 불허

3. 회원가입 (이름)

• 회원가입 성공 시 alert에 이름 출력 및 login 페이지로 이동

4. 마이페이지(헤더)

• 화면 크기가 작아지면 메뉴들이 사라지고 메뉴바 출력
• 메뉴바 클릭하면 위에서 아래로 사라졌던 메뉴들 출력
• 메뉴바 클릭시 자연스럽게 출력되게 애니메이션 적용

---

공유과제

제목: Tailwind CSS Deep Dive

링크 첨부 : https://velog.io/@dotsi0/Tailwind-CSS-Deep-Dive

🔧 구현 요약 및 새로 배운 점

• 아니 근데 4주차 과제에서만 추가된 코드가 +만줄..? 🥹
  이번 과제에서 글로벌스타일, cva, zod 등등 적용하려던게 많아서 많이 설치가 된 모양이예요 😭
• 저는 제가 tailwind에 익숙한 줄 알았는데 cn 함수를 모르고 있었어요. 합세 때도 해당 라이브러리 사용하기로 해서 더 익숙해지고 싶은 마음에 딥다이브 하기 위해 3주차 emotion에 이어 4주차엔 tailwind 라이브러리를 사용하기로 ㅎㅎ 이번에 그래서 블로그도 아예 tailwind 딥다이브 관련 내용으로 작성했습니다!
• +) cva와 storybook과의 호환성도 좋다고해서 내친김에 스토리북까지 적용해보려고 했는데, 생각해보니 4주차 과제엔 좀 투머치인 감이 있는 거 같아서..ㅎㅎ 앱잼 전에 개인 프로젝트에서 cva+storybook 조합 사용해 보겠습니다!!
• 제출에 의의를,,,,,, 너무 급하게 하느라.., 제출 마감이후에도 계속 리팩토링 하겠습니다 😭😭
• 유효성 검증을 선언적으로 관리할 수 있는 Zod 라이브러리를 사용했어요! react-hook-form만 사용하면 register의 옵션으로 검증 로직을 작성하게 되는데, 이러면 UI 로직과 검증 로직이 섞여서zod를 사용해서 검증 로직을 분리했습니다
• 추가로 타입 스크립트를 사용하니 HTMLAttributes(커스텀 props)도 활용해봤어요!

🥲 구현 과정에서 어려웠던 & 고민했던 부분

• passwordMismatch가 boolean | ""로 추론되어서 Button의 disabled에 할당이 안 됐어요. && 연산자 특성 때문이었는데, Boolean()으로 명시적 변환해서 해결했는데 다른 방법이 있을지 궁금하네요 .. 🤔
• 처음엔 모든 스타일을 인라인으로 작성했다가 반복이 너무 많아서 글로벌 클래스로 리팩토링했어요! 글로벌 스타일을 처음 적용해봤는데 btn-base, btn-primary 같은 클래스를 만드니 코드가 훨씬 깔끔해졌어요 👀👀👀

🔭 리뷰 요청 포인트 & 질문

• 회원가입 단계별 컴포넌트를 분리하면서 FirstStep, SecondStep, ThirdStep으로 나눴는데, form이 부모에 있어서 props drilling이 있는 거 같아요.. 어떻게 개선하면 좋을지 아니면 이정도는 괜찮을지..! 궁금합니다!

📷 결과물

https://drive.google.com/drive/folders/1PMKOJpdsWzkLARLf6fJ_UxZNj5WIIi0Z?usp=sharing