[4주차 기본/심화/공유 과제] 취미 마이페이지 만들기 (TypeScript, Axios)

[bykbyk0401]

✨ 구현 기능 명세

💡 기본 과제

• 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글자 넘어가는 것에 대해 에러메시지 출력

공유과제

제목: [React] 왜 TypeScript?? 그리고 interface VS type

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

❗️ 내가 새로 알게 된 점

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

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

• 다른 사람의 취미를 가져올 때, 검색 버튼을 누르지 않아도 userNo는 변하는 문제를 변수를 하나 더 사용해서 디벨롭하려고 했는데 우선은 PR 먼저 날립니당😅
• TypeScript와 Axios를 처음 써봐서 구조나 사용법이 맞는지 정확하게 잘 모르겠어요! 혹시 잘못되었거나 더 좋은 방법이 있다면 많이많이 알려주세욥🙌

🥲 소요 시간

• 2~3 Days

🖼️ 구현 결과물

• 회원가입(성공)

signup1.mov

• 회원가입(실패)

signup2.mov

• 로그인

login.mov

• 마이페이지

mypage.mov