frontendschool5 / final-05-mandle_mandle Goto Github PK

• 기존 Modal 컴포넌트를 AlertModal로 변경 후, 하단바에서 생성되는 Modal 컴포넌트 세팅하기
• Modal 컴포넌트 button 부분 재활용할 수 있게 설정하기

이메일 입력 값이 기존 회원 이메일과 동일할 경우 에러 메세지 띄우기

클릭시 보이는 방식 변경

입력값이 유효성 검사를 통과했을 때 버튼 활성화

API 형식과 동일하게 데이터 받아서 저장한 다음 SetProfile에 넘기기
SetProfile Page로 이동

업로드 프로필 이미지 컴포넌트에서 post로 보내고 url 주소 받아서 그 주소를 다시 post

common

• 차다연: 홈
• 우경석: 클래스
• 윤서준: 게시물 / 채팅
• 김예지: 프로필

• Loading, Login : 다현님, 서준님

• Signup Page, SetProfile : 예지님, 경석님

다현님이 만들어두신 Component 사용

• 해당 프로필 유저의 팔로잉, 팔로워 목록
• 내가 팔로우 한 경우 취소버튼
• 내가 팔로우 하지 않은 경우 팔로우 버튼
• 이미지 클릭시 프로필로 이동

Login 선택 페이지로 이동

실습완료로 클로즈 합니다!

클릭시 해당 프로필 유저와 채팅 페이지로 이동

• 프로필 클릭시 해당 프로필로 이동
• 내가 팔로우 한 사람은 취소버튼 -> 클릭시 팔로우 취소
• 나를 팔로우 했지만 내가 팔로우 안한사람은 팔로우 버튼 -> 클릭시 팔로우

Recoil로 저장한 posts 데이터를 PostList에 불러온 후 하위 컴포넌트에 연결

• SetProfile 페이지와 기능은 동일

• 저장 버튼 누르면 값 API 전송

• 뒤로가기 버튼은 프로필 페이지로 이동

에러 처리

1. 중복된 값이 이미 있을 경우(아이디, 유저네임)
2. 조건에 맞지 않는 입력값을 받았을 경우(아이디, 소개)

버튼 클릭시 Login Page로 이동

입력한 값(이메일, 비밀번호)있을 때 유효성 검사 통과되면 버튼 활성화

하위 컴포넌트에 사용하기 위한 post 데이터를 Recoil로 저장할 것

로그인 시 유저의 아이디와 비밀번호를 객체로 담아 axios.post(URL)로 요청하여 data객체 서버로 전송하기

기본 설정 : 일반회원
클릭시 해당 버튼에 해당하는 값으로 다시 설정(강사 -> Teacher / 수강생 -> Student)

• Home에서 token, post값 받기(팔로잉 게시글 목록 API)
• Home에서 post객체 map메소드로 li태그로 뿌리기
• PostList, PostContent, PostProfile에 post값 연결
• useNavigate로 게시글 부분을 누르면 게시글 상세, 프로필 부분을 누르면 프로필 페이지로 각각 이동하도록 구현

유효성검사 후 조건을 만족하지 못했을 때 에러처리

클릭시 상세 페이지 이동

프로필 링크 복사

• 버튼 클릭시 팔로우 취소 버튼으로 바뀜

• 데이터에 팔로잉 상태 추가

• 로그인 유효성 검사하는 이벤트 onchange에서 onBlur로 변경

GET /post/feed/?limit=Number&skip=Number를 통해
posts 데이터 값을 받아오기

• 이전 페이지인 Signup 페이지로 이동

(직전에 입력한 입력값을 가지고 감 -> 이건 추후 구현)

accountname 항목에 이미 저장된 type 값 + username값 으로 저장

• 로그인 페이지로 이동

• 입력된 값 API로 전송

• 클래스 등록 페이지 이동