[4주차 과제] API 통신

[Sohyunnnn]

👽 과제 명세

💡 기본 과제

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

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

공유과제

제목: 폰트 최적화

링크 첨부 : https://peach-shadow-378.notion.site/2b0d94ad82bb80818138dc6b59dd87d8

🔧 구현 요약 및 새로 배운 점

1. react-hook-form + zod로 회원가입·로그인 폼 구축
2. 로그인 성공 시 userId를 localStorage에 저장
3. Context API + useContext를 이용한 사용자 전역 상태 관리
4. 로그인 직후 사용자 정보를 바로 컨텍스트에 반영하는 흐름 구현
5. 회원 정보 수정 기능 구현
6. 회원 조회 기능 구현
7. 모달 UI 기본 기능 구현

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

먼저 form을 재사용 높은 컴포넌트를 만들기 위해 고민했습니다. 기본 버튼이나 하단 로그인하러가기 버튼, 뒤로가기 버튼 등 어떻게하면 재사용 높은 컴포넌트가 될지 고민하고 구현했습니다.

react-hook-form 과 zod를 사용해서 유효성 검사를 했는데 쉽지 않았습니다! 유효성 검사 시점과 비밀번호 및 비밀번호 확인 비교 로직 등이 꼬여 시간을 많이 할애했었습니다.

🔭 리뷰 요청 포인트 & 질문

현재는 user의 정보를 전역으로 관리하고 있는데 이 방법이 맞을지, 더 좋은 방법이 있는지 궁금합니다! 처음에는 마이페이지 헤더에서만 사용되는 줄 알고 헤더로 연결했었는데, 마이페이지 내 내 정보를 불러오기 때문에 전역으로 저장해서 사용하는 것이 더 합리적 방안이라고 생각했습니다. 하지만 다른 분들은 어떤 생각을 가지고 구현하셨는지 궁금합니다!

또한 이번 과제에서는 재사용 높은 컴포넌트 만들기(label, authform)에 신경을 썼는데, 그 부분에 보완점이 있을지 피드백 부탁드립니다!

📷 결과물

회원가입

2025-11-19.8.43.57.mov

로그인

2025-11-19.8.59.30.mov

마이페이지

2025-11-19.9.00.17.mov

마이페이지 멤버 조회

2025-11-19.9.00.57.mov

로그아웃 및 탈퇴

2025-11-19.9.01.21.mov