3번째 리팩토링 진행 현황

1. styled컴포넌트만을 이용했던 것을 scss, styled컴포넌트로 나눔

2. Wrapper컴포넌트 수정

로그인 이전

로그인 이후

유저 메뉴 dropbox 형태로 수정

3. 로그인 페이지 / 회원가입 페이지 수정

기존 로그인, 회원가입 페이지는 Wrapper컴포넌트의 navbar, sidebar를 화면에 포함한 형태가 아니었지만 어색한 느낌이 들어서 화면에 모두 출력.

4. 회원가입 페이지 컴포넌트 분할 및 유효성 검사 개발

컴포넌트를 분할한 버전의 코드(좌) / 기존버전의 코드(우)

4가지 input을 분할한 컴포넌트들

리팩토링 하면서 가장 만족하는 부분이다.
기존에는 하나의 컴포넌트에서 모든 상태를 관리하면서 코드가 굉장히 비대해졌었는데,

각 input 마다 컴포넌트를 분할하여 코드의 복잡성을 크게 줄였다.
기존에는 왜 이렇게 할 생각을 못했을까..,?
소소하게 하나 배우고 간다,,,, ^-----------^

해야될 것

1. 회원가입 페이지 
 - 유효성 검사 완성시키기
 - 대표사진 설정코드 추가
 - 서버에 가입요청 코드 구현
 - 서버(nestjs)에서 가입 요청 받고 email/nickname 중복 확인 추가 작성

2. 로그인 페이지
 - 서버에 로그인 요청코드 구현

3. 로그인 후 유저 데이터 Redux로 관리 구현

4. nav bar의 user옵션 설정 (로그아웃, 유저 정보 수정)
5. 유저정보페이지 구현

6. 버튼 UI및 전체적으로 UI꾸미기
7. 빨리 boiler plate코드 완성 시키고 다음 스탭 진행하기

 

원래 해야될거 jira에 작성했었는데, 진행 현황 이미지랑 같이 올리고 기록해놓고 싶어서..