[4주차 과제] API 통신

[yeonilil]

🤙🏻 구현 기능 명세

💡 기본 과제

• 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. 마이페이지(헤더)

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

공유과제

제목:

링크 첨부 :

🚀 내가 새로 알게 된 점

• 단계별로 로직을 구현할 때, 버튼 비활성화 조건이나 에러 메시지 처리 로직을 잘 구조화하면 유지보수가 쉬워진다는 걸 느꼈습니다.validation 함수는 추후 유틸로 분리해도 좋다는 것 또한 알게되었습니다.

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

• 회원가입 단계가 ID → 비밀번호 → 닉네임 순으로 넘어가는 구조에서, 각 단계별 유효성 검사를 어떻게 깔끔하게 나눌지 고민이 많았습니다. handleChange 안에서 단계와 name을 함께 조건 처리하다 보니 코드가 점점 길어졌고, 이걸 유틸 함수로 분리해 개선했습니다.

⏳ 소요 시간

• 6h

🤳🏻 구현 결과물