1. Base_url
: 먼저 .env 파일을 하나 생성해준 후에
: 서버와 통신시 api의 base가 되는 url 값을 넣어주고,
작성한 Api 파일에서는 end-point 값만 작성해주면 된다.
다만,
provess.env로 접근해서 읽어오는 값이 'NEXT_PUBLIC_API_BASE_URL'로 읽어오기 때문에 .env에서 변수 생성시 NEXT_PUBLIC_API_BASE_URL 이름으로 값을 넣어주어야하고, '' <- 애네도 인식하기 때문에 있는 그대로 주소 값 자체를 넣어주어야 한다.
2. request, response type
: 먼저 UserApi 파일에서 미리 작성해둔 타입 UserDTOType을 import 해오고 params 타입 지정 부분을 any -> UserDTOType으로 바꿔준다.
: 폴더 이름을 userfolder -> user로 변경해준다.
3. query key 파라미터 타입 설정
: 2번 이슈와 마찬가지로 params 타입에 대한 부분이기 떄문에 Api 파일 중 query를 담당하는 파일로 가서
: 타입 지정을 해준다. 이후에 mutation을 담당하는 UserApi.mutation.ts 파일도 마찬가지로 수정해준다.
4. useAppStore
: 라인 선택 페이지에서 리뷰 받았던 내용을 토대로 리팩토링 해보자.
to
: 구조 분해 할당을 통해 할당했던 값을 .을 통해 하나 더 접근해서 line 값에 할당했다.
5. 불필요한 fragment
: 말 그대로 최상위 요소가 flex가 되어 있는데도, <> 빈 fragment로 한번 떠 쌓아져 있어서 지워주었다.
6. revisePage / 8. 컨벤션 / 9. 타입, 비지니스 로직 분리.
이슈 사항 6번 - revisePage.
이슈 사항 8번 - 컨벤션.
이슈 사항 9번 - 타입, 비지니스 로직 분리.
: 처음에 폴더 구조 및 파일 설계부터 잘 못 한 부분이 있어서, 코드 리뷰 이슈 사항 6, 8, 9번 같은 경우 큰 틀에서 같은 지적을 받았다. 타입 / props drilling(비효율적인 api 호출 및 비즈니스 로직) / 컨벤션 (똑개 컨벤션으로 components와 pages는 1:1 대응하는 구조) 문제 등이었다.
: 조언해주신대로 새롭게 폴더 구조를 짜고 파일 명 및 비즈니스 로직을 바꿔주었다.
: 메인 페이지에서 props로 모달 컴포넌트로 데이터를 전달해서, props drilling이 일어났던 user, formData, onSubmit 데이터들도 모달 컴포넌트에서 처리해주는 비즈니스 로직으로 수정해주었다.
: 기존에 mutate - onSuccess시에 메인 페이지에서 모달 페이지를 closeModal('modal'); 구문을 통해 닫아주었던 처리도 모달 페이지에서 props로 전달 받아서 처리해주었다.
7. 반복되는 구조
: 조언해주신대로 상수로 컴포넌트 위에서 배열로 선언해두고, 반복적인 구조를 map을 통해 Select 태그문 안의 options 들을 처리해주었다.
10. 변수명
: 굉장히 친절하게 어떤 이유 때문에 변수명을 한번 더 바꿔서 가져오는 것이 좋은지도 알려주셨다.
: 수정 부분은 간단하게 해당 구문이 쓰여지고 있는 MainPage 컴포넌트에 가서 수정해주었다.
11. 반복되는 컬러
: 반복되는 컬러 세팅과 / 이를 바탕으로 사용할 때 해당 세팅 해놓은 값을 primary.번호대 가져와서 (default 번호 500) 사용할 수 있다. -> 500에서 커질수록 진하기가 진해지고 숫자가 작아질수록 연해진다.
: 우선 primary color는 styles -> foundations -> colors에서 primary color를 원하는 색상 #29CF8D로 설정해주고,
: 기존에 color값이 들어갔던 부분에 가서 primary.500을 통해 넣어주면 끝.
12. fontSize, lineHeight
: textStyles에 가서 2xl 값 지정해주고,
: 원하는 곳에 가서 해당 속성으로 값을 먹여주면 적용 끝!
13. payload 타입
: 해당 부분은 action.payload를 받아오는 값과 만들어둔 타입 인터페이스 LineStateType의 형식을 일치시켜주어야 한다. (객체 - 리터럴 스트링 유니온 타입 자체)
: 만약 아래 코드처럼 해당 타입 부분을 그대로 'LineStateType'을 사용해서 적용하게 되면 action.payload 값과 state.line 값의 타입과 일치하지 않기 때문에 에러가 발생한다. 때문에 ['line'] 통해 객체형태가 아닌 객체안의 벨류값, 즉 해당 문자열 리터럴 값만을 타입으로써 지정해주었다.
PayloadAction<LineStateType>