Skip to content

3주차 리펙토링

jin-Pro edited this page Nov 14, 2021 · 24 revisions

하드 코딩 없애기 - 담당자 : 김영진

함수 중복 수정

  • Template/RequestList.tsx => handleModalClick 함수 중복일거 같음
  • Template/ProfileList.tsx => handleModalClick 함수 중복일거 같음
  • Template/ChatListTemplate.tsx => changeOpenModal 함수 중복일거 같음
  • Hook 내부 파일 과연 이게 훅인가??? util 로 넘겨도 될거 같음 => 이름 바꿈

함수 생성

  • Null check 및 value 체크 함수 만들기

URL

  • API URL 정리

Atomic 디자인에 맞게 컴포넌트 수정 - 담당자 : 민태홍 , 김영진

  • container 생성
  • Template/TeamSettingTemplate.tsx dropdown 컴포넌트로 만들기
  • Organism/TeamInfoContainer => InfoContainer로 변경하고 InfoContainer를 불러서 Children에 고정값 넣어서 만든 USERInfoContainer / TeamInfoContainer만들어서 재사용하기 (USERInfoContainer가 마이페이지에 있는거 말하는건가??)
  • Organism/TeamButtonContainer => ButtonContainer로 변경하고 children에 고정값 넣어서 만든 TeamCreateButton / TeamSettingButton 으로 만들어서 재사용하기(이미 그렇게 사용하고 있는 것 처럼 보임)
  • Page/TeamCreatepage 분리 => Atomic 디자인 답게 Template 만들어서 TeamInfoContainer / TeamCreateButtonContainer 따로 빼두자
  • Page/RequestPage => 나에게 온 요청 / 내가 보낸 요청 Template으로 만들어서 정리하기

useRef => 담당자 : 홍한솔

  • useRef 여러개 사용 하는 경우 ( ex : input값 여러개 ) => 일단은 어느정도 완료

- 데이터 요청 실패 성공 이벤트 처리 => 담당자 : 홍한솔 , 이윤성

기본 로직

try{
  axios()...
  if (result.status>=400){
    throw new Error("실패"); 
  }
}
catch(error){
 .... 
}

API 서버 에러 -> 400번 이상 STATUS 보내도록 처리 + 클라이언트에서 STATUS CHECK -> Throw 에러 -> 모달 띄우기

  • 로그인 페이지 에러 처리 (클라이언트 입력 체크)
  • 회원가입 페이지 에러 처리 (클라이언트 입력 체크)
  • 팀 생성 페이지 에러 처리 (클라이언트 에러 처리) -> catch error => error 잡을 시 실패했다는 모달 띄우기

로그인 안했을 경우 페이지 URl 이동했을 경우 처리 하기 => 담당자 : 홍한솔


  • Page/RegisterPage.tsx 분리 => label - input
  • Page/RegisterPage.tsx 그냥 보면 알 수 있음 ㅋㅋ
  • Page/LoginPage.tsx 분리 => 로컬 로그인 / 소셜 로그인
  • Page/LoginPage.tsx 전체적 리팩토링
  • Organism/NavBar.tsx 분리 => 데이터 객체 배열로 넣어서 MAP으로 돌리자
  • Organism/TeamInfoImage.tsx 이미지 안바뀌는거 수정
  • Organism/ChatProFileContainer.tsx 함수 중복
  • Organism/ChatDetail.tsx 무한스크롤 함수 수정
  • Molecules/ChatRoomFooter.tsx 코드 분리
  • Organism/Header 분리 => Molecules로 왼쪽 가운데 오른쪽 나누자
  • Organism/MainBodyRight 분리 => 데이터 객체 배열로 넣어서 map 으로 돌리자
  • Organism/MyInfo.tsx 분리 => className myinfo 인 부분 분리하자 - header랑 body 분리하라는거 맞나??
  • Organism/Header.tsx 드랍다운 하나로 관리하기
  • Page/CowDogTing.tsx => 무한 스크롤 이벤트 성능 처리

  • useState 여러개 => useReducer 변경
  • 카카오 소셜 로그인
  • 깃 소셜 로그인
  • 네이버 소셜 로그인
  • 소개 N:N 페이지 - 그룹별 멤버 들어오는 로직 필요

  • eslint
  • 개발자도구 빨간줄
Clone this wiki locally