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

[bongtta]

✨ 구현 기능 명세

💡 기본 과제

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

공유과제

제목: Emotion CSS와 JSX Pragma

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

❗️ 내가 새로 알게 된 점

• emotion css를 처음 사용해보았습니다!!! 스타일컴포넌트보다 개인적으로 더 좋아보여서 사용했는데 실제로도 저는 더 좋았던 것 같습니다!

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

• 처음에 reset.css를 글로벌 스타일에 설정하지 않고 시작해서 결국 이번엔 따로 추가하지 않았는데, 줄일 수 있는 부분이 있다면 피드백 주시면 너무 감사할 것 같습니다..!
• API를 받아오고 그것을 저장/삭제하는 로직을 이해하는 데에 조금 어려움이 있었습니다..ㅜ

🥲 소요 시간

• 4days

🖼️ 구현 결과물

서버닫힘 이슈로....(아마..) 캡쳐본으로 제출합니다ㅜㅜㅜ

[imddoy]

채은님 안녕하세요!!! 계속 과제를 열심히 하시더니 이렇게 잘 구현해내셨네요!!!!!!!!!!!!!! 칭찬 박수 드립니다.👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 과제하느라 너무 고생많았구, 저는 emotion을 사용하지 않았어서 도움이 많이 되었던 코드였습니다!!ㅎㅎ 최고입니당

[imddoy]

response는 이미 AxiosResponse로 자동으로 타입이 추론되고 있기 때문에, any로 타입을 명시하기보다는 typescript의 타입 추론을 활용하는 것이 더 좋을 것 같습니다! ㅎㅎ

혹시 더 정확하고 안정적으로 타입을 관리하고 싶으시다면, 서버에서 주는 명세서를 보고, 타입을 따로 선언한 다음 Axios의 제네릭으로 타입(AxiosResponse<LoginResponseType>)을 명시해주는 방법도 추천드립니다. 이렇게 하면 코드의 가독성과 안정성이 더 높아질 것 같아요! ㅎㅎ