[React] 리액트 심화주차 개인과제 (인증서비스가 들어간 FanLetter 만들기)

 

🔥 React 심화주차 개인과제 🔥

 

 

숙련주차 개인과제에서 각자 본인이 작성한 홈화면과 상세화면에 이어서 인증시스템을 적용시켜 리팩토링하기

 

 

 

<필수 구현 사항>

• 홈 화면 UI 구현 (Create, Read)
• 상세화면 구현 (Read, Update, Delete) ( 본인이 작성한 팬레터에서만 수정, 삭제 가능 )
• 로그인/회원가입 UI 구현 ( 로그인 해야만 팬레터 화면으로 진입 가능 )
• 프로필관리 UI 구현 ( 프로필 이미지, 닉네임 변경 기능 구현 )

 

 

<필수 요구 사항>

• 팬레터 CRUD 를 위한 API 통신은 json-server 를 이용
• 인증과 프로필관리를 위한 API 통신은 제공된 jwt인증서버를 이용
• fetch API 대신 axios 를 이용해 주세요
• 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 (스타일링 방식은 자유지만 일관성 있게 작업할 것)
• Redux 사용 시 반드시 Redux Toolkit 을 이용

 

 

 

 

 

<Header>

 

 

 

라우터를 이용하여 NavBar를 전 페이지에서도 이용할 수 있게 하였다

 

 

 

<FormBox>

 

 

 

팬레터를 보낼 수 있는 form box이다

닉네임은 자동으로 회원가입한 유저의 닉네임이 뜬다

근데 이 부분도 에러가 있다

리덕스를 이용해서 유저정보를 관리해주어야 하는데 구현이 잘 안돼서

추후 프로필 변경에도 문제가 발생하였다 ..

 

 

 

<LetterBox>

 

 

form box에서 등록을 하면 바로 밑 letterbox에 보여진다

유저의 프로필 사진 (기본), 아이디, 등록시간, 닉네임, 글이 보여진다

 

 

 

<DetailPage>

 

 

 

letter 하나를 클릭하면 상세페이지가 나온다

여기선 글 수정과 삭제가 가능하다

 

 

 

 

<Profile Page>

 

 

유저의 아이디와 프로필 정보, 닉네임을 확인하고 변경하는 페이지이다

 

 

 

 

이미지를 업로드하면 미리보기까지는 넘어가는데 변경이 안된다

닉네임은 변경이 되지만 ,, 유저가 닉네임을 바꾸기 전에 쓴 letter에 변경된 닉네임이 반영되지 않는다

리덕스로 관리해주어야 하는 이유가 이것 때문이다..

 

 

 

 

구현하지 못한 기능들이 참 많다 

우선 프로필 변경 기능이 너무 아쉬웠다 조금만 하면 될 수 있을 거 같은데

시간이 부족했다 ㅠㅠ

그리고 엑세스 토큰 만료도 못하였다

 

 

이번 주차 개인과제는 실무적으로 많이 쓰이고 도움이 된다하여

꼭 짚고 넘어가야 할 부분이 많은 것 같다

나의 수면과 맞바꾼 과제가 나의 맘에 쏙 들진 않지만

조금이나마 성장했을 거라 믿는다.....

 

 

 

 

---