[4주차 기본/심화/공유 과제] 회원가입 & 로그인 (Typescript)

[zzz-myam]

✨ 구현 기능 명세

💡 기본 과제

• React + TypeScript
• Axios 라이브러리 사용
• ThemeProvider, GlobalStyle 사용

1. 로그인

• 로그인 타이틀
• 아이디(이름) 입력 Input
• 비밀번호 입력 Input
• 로그인 버튼 (hover시 배경색 바꾸기 (transition 적용))
• 회원가입 버튼 (회원가입 페이지로 이동)

2. 회원가입

• 이름 - 비밀번호 - 취미 입력이 한 페이지에서 일어남 (컴포넌트만 갈아끼우기)
• 상단에 회원가입 타이틀
• 하단에는 로그인 페이지로 가는 링크

3. 회원가입(이름)

• 이름 입력 Input
• 다음 버튼 (비밀번호 입력 폼 나옴)
• Input 비어있을 때 버튼 비활성화

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

• 비밀번호 입력 Input
• 비밀번호 확인 Input
• 둘 중 하나라도 비어있으면 버튼 비활성화
• 두 비밀번호가 다르면 버튼 비활성화
• 다음 버튼 (취미 입력 폼 나옴)

5. 회원가입(취미)

• 취미 입력 Input
• 회원가입 버튼
• Input 비어있을 때 버튼 비활성화
• 회원가입 실패 시 에러메시지 alert 출력
• 회원가입 성공 시 회원번호 alert 출력하고, login 페이지로 이동

6. 마이페이지

• 헤더에 취미, 내 정보 메뉴 탭
• 헤더에 로그아웃 버튼
• 로그아웃 버튼 클릭 시 token 저장 정보 삭제하고 로그인 페이지로 이동 (token 저장 위치는 자율)
• 헤더 취미, 내 정보 취미 페이지, 내 정보 페이지 출력 (1개의 페이지로 구현해도 되고, url 달라도 됨)

7. 마이페이지(취미)

• 나의 취미 출력
• 사용자 번호 입력 Input
• 검색 버튼
• 검색 오류시 alert
• 검색된 취미 출력

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

• 비밀번호만 입력하면 비밀번호만 변경
• 취미만 입력하면 취미만 변경
• 둘 다 입력하면 둘다 변경
• 둘 다 비어있으면 alert

---

🔥 심화 과제

• any 사용하지 않기

1. 회원가입 (이름)

• 8글자 넘어가도 버튼 비활성화 처리
• 8글자 넘어가는 것에 대해 에러메시지 출력

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

• 비밀번호 보이기 버튼 추가
• 8글자 넘어가도 버튼 비활성화 처리
• 8글자 넘어가는 것에 대해 에러메시지 출력
• 비밀번호 불일치 에러 메시지 출력
• (선택) 에러메시지 한개만 출력해도 됨 (우선순위는 알아서)

3. 회원가입 (취미)

• 8글자 넘어가도 버튼 비활성화 처리
• 8글자 넘어가는 것에 대해 에러메시지 출력

공유과제

제목: TypeScript의 interface는 설계도다!

링크 첨부 : https://wave-web.tistory.com/140

❗️ 내가 새로 알게 된 점

• 타입을 지정하는 방법에 대해 알게 되었습니다.
• axios를 사용해서 api 연결하는 방법을 알았습니다! 중간에 base URL이 바뀌면서 오류가 난 부분이 있었는데, .env 파일을 만들어서 관리하면 이와 같은 오류가 반복되지 않을 수 있다는 것도 알게 되었습니다.
• 컴포넌트와 페이지, 스타일 파일을 각각 분리하여 작업하는 것도 처음 도전해봤습니다. 처음에는 복잡하고 어려웠지만, 하면 할 수록 훨씬 깔끔한 코드를 짤 수 있는 방법인 것 같아서, 다음에는 좀 더 정돈된 구성을 할 수 있도록 노력해보겠습니다.
• useState와 useEffect를 사용하면서 상태 관리에 대해 조금은 이해할 수 있는 계기가 되었습니다.

❓ 구현 과정에서의 어려웠던/고민했던 부분

• 구현 과정에서 가장 많이 고민했던 것은, 어떻게 하면 좀 더 누구나 알아보기 쉬운 코드가 될 수 있을까? 깔끔하게 작업할 수 있을까? 였습니다. 다음부터는 컴포넌트, 페이지, 스타일로 폴더 구분을 하지 않고, 각각의 컴포넌트별로 폴더를 나눠도 괜찮을 것 같다는 생각이 들었습니다.
• 가장 어려웠던 점은 상태 관리였습니다. 어떤 상태를 어디에 어떻게 주었을 때 원하는 결과가 나올 수 있는지 너무 어려웠습니다.

🥲 소요 시간

• 2week

🖼️ 구현 결과물

구현 영상 업로드 된 노션 링크:
https://cumbersome-cactus-843.notion.site/4-15342376b33e8095923acf132bdae537?pvs=4