[4주차 과제] API 통신

[jstar000]

👽 과제 명세

💡 기본 과제

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

1. 로그인

• 로그인 타이틀
• 아이디 입력 Input
• 비밀번호 입력 Input
• 회원가입 페이지로 이동 가능한 버튼
• 로그인 버튼 (hover시 배경색 바꾸기 (transition 적용))
• 로그인 성공시 마이페이지로 이동 및 userId 저장
  (userId 저장 위치는 자유. localStorage, SessionStorage, ...)
• 로그인 실패 처리(UI)

2. 회원가입

• 회원가입 타이틀
• 한 페이지에서 아래 모든 필수 항목 입력(url은 그대로)
  (username(아이디), password, name(이름), email(이메일), age(나이))
• 로그인 페이지로 이동 가능한 버튼

3. 회원가입(아이디)

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

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

• 비밀번호 입력 Input
• 비밀번호 확인 Input
• 둘 중 하나라도 비어있으면 버튼 비활성화
• 두 비밀번호가 다르면 버튼 비활성화
• 다음 버튼을 누르면 추가 정보 입력 폼(name/email/age)이 나옴

5. 회원가입(이름/이메일/나이)

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

6. 마이페이지(헤더)

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

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

• 새 이름, 이메일, 나이 입력 Input
• 저장 버튼
• 저장 오류시 alert 출력
• 저장 성공시 화면의 표시 정보 갱신 및 alert 출력

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

• 회원 ID 입력 Input(숫자)
• 확인 버튼
• 조회 성공 시 상세 정보(단건) 출력
• Input이 비어있는 상태에서는 확인 버튼 비활성화

9. 회원 탈퇴

• 회원탈퇴 버튼 클릭 시 확인 모달 노출 → 확인 시 탈퇴 진행
• 회원탈퇴 실패 시 에러메시지 alert 출력
• 회원탈퇴 성공 시 alert 출력 후 login 페이지로 이동

---

🔥 심화 과제

• any 사용하지 않기

1. 회원가입 (아이디)

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

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

• 비밀번호 보이기 토글 버튼 추가
• 비밀번호 불일치 에러 메시지 출력
• 비밀번호 검증 및 정책 불일치 시 에러 메시지 출력 및 버튼 비활성화
  1. 길이 8~64자
  2. 대문자/소문자/숫자/특수문자 각각 1자 이상 포함
  3. 공백 불허

3. 회원가입 (이름)

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

4. 마이페이지(헤더)

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

공유과제

제목:

링크 첨부 :

🔧 구현 요약 및 새로 배운 점

• ~ 부분을 적용해서 ~ 이렇게 구현했어요!
• ~ 부분 새로 배웠어요!

🥲 구현 과정에서 어려웠던 & 고민했던 부분

• ~ 부분을 어떻게 하면 좋을지 고민했어요!
• ~ 부분 어려웠어요!

🔭 리뷰 요청 포인트 & 질문

• ~ 부분 다른 방법이 있는지 궁금해요!
• ~ 부분이 잘 구현한 건지 잘 모르겠어요!
• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

📷 결과물

• 회원가입, 로그인

2025-11-17.10.mp4

• 회원 정보 조회, 수정, 로그아웃, 회원탈퇴

2025-11-17.10.1.mp4