[4주차 기본/심화/공유 과제] 회원가입 페이지

[chaeneey]

✨ 구현 기능 명세

💡 기본 과제

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

공유과제

제목:

링크 첨부 :

❗️ 내가 새로 알게 된 점

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

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

• ~ 부분이 잘 구현한건지 잘 모르겠어요!
• ~부분 다른 방법이 있는지 궁금해요!

🥲 소요 시간

• 10h

🖼️ 구현 결과물

[hansoojeongsj]

요즘 잘하는 다른 사람들의 코드를 보면서 배우는 게 정말 많다고 느끼고 있어요. 리드님 4주차 과제의 코드가 잘 나누어지고 깔끔하게 작성된 것을 보고 이렇게 나누어 거구나, 이렇게 코드 짜는 거구나 싶었습니다. 작은 것도 많이 배웠어요 !
합세 같은 조가 되어 기쁘고, 앞으로 파이팅 !! 합세에서도 많이 찾아보고 배우겠습니다 !
리드님의 공유 과제도 보고싶어요ꉂꉂ(ᵔᗜᵔ*)

[hansoojeongsj]

매번 ${theme => theme.color.white} 이런 식으로 썼었는데, 이렇게 바로 접근할 수 있으면 더 깔끔하고 편리한 것 같아요.

[hansoojeongsj]

오.. 회원가입과 로그인에 필요한 타입들을 깔끔하게 분리해서 관리하는 방식 정말 잘 배웠습니다👍👍

[hansoojeongsj]

이렇게 잘 구성된 theme을 보니 정말 많이 배웁니다 ! 그동안 색상만 몇 개 넣고 사용했었는데, 이 코드와 합세 코드를 보면서 theme 활용에 대해 많이 배웠어요. 앞으로 많이 성장할 것 같아요 ! 감사합니다 😊

[hansoojeongsj]

합세에서 reset.ts와 global.ts를 나누는 걸 보고 배웠는데, 여기서도 리셋 스타일을 분리하고 기본 스타일을 한 곳에 모아둔 걸 보니 관리가 더 편하고 일관성 있는 디자인을 유지할 수 있겠구나 싶어요. 많이 배웁니다!

[hansoojeongsj]

오.. 경로와 라우트를 분리해서 관리할 수도 있네요 ! 이렇게 하면 코드가 더 깔끔하고 유지보수도 편할 것 같아요. 정말정말 많이 배웁니다.