[4주차 과제] SOPT 회원 정보 조회

[hansoojeongsj]

🤙🏻 구현 기능 명세

💡 기본 과제

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

1. 로그인

• 로그인 타이틀
• 아이디 입력 Input
• 비밀번호 입력 Input
• 회원가입 페이지로 이동 가능한 버튼
• 로그인 버튼
• 로그인 성공시 마이페이지로 이동 및 userId(토큰) 저장 (userId 저장 위치는 자유. localStorage, SessionStorage, Cookie, ...)

2. 회원가입

• 회원가입 타이틀
• 아이디, 비밀번호, 닉네임 입력이 한 페이지에서 일어남(url은 그대로)
• 로그인 페이지로 이동 가능한 버튼

3. 회원가입(아이디)

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

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

• 비밀번호 입력 Input
• 비밀번호 확인 Input
• 둘 중 하나라도 비어있으면 버튼 비활성화
• 두 비밀번호가 다르면 버튼 비활성화
• 다음 버튼을 누르면 닉네임 입력창이 나옴

5. 회원가입(닉네임)

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

6. 마이페이지(헤더)

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

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

• 새 닉네임 입력 Input
• 저장 버튼
• 저장 오류시 alert 출력
• 저장 성공시 닉네임 변경 및 alert 출력

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

• 회원 검색 Input
• 확인 버튼
• 검색 성공시 리스트 출력
• Input이 비어있는 상태로 확인 버튼 클릭하면 전체 회원 조회

---

🔥 심화 과제

• any 사용하지 않기

1. 회원가입 (아이디)

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

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

• 비밀번호 보이기 버튼 추가
• 20글자 넘어가는 것에 대해 에러메시지 출력, 버튼 비활성화
• 비밀번호 불일치 에러 메시지 출력

3. 회원가입 (닉네임)

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

4. 마이페이지(헤더)

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

공유과제

제목: 커밋 메시지 컨벤션을 지키는 방법

링크 첨부 : https://sweeb.tistory.com/116

🚀 내가 새로 알게 된 점

• 공통 컴포넌트 적극 사용했습니다.

• header, head, input(label 포함/미포함, 아이콘 포함/미포함), 버튼, 오류 메시지로 나눴습니다.

• 다 못했어요오....

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

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

⏳ 소요 시간

• 6h

🤳🏻 구현 결과물