[Dev] 코드 리팩토링

[kyubumjang]

어떤 기능인가요?

Jayden 멘토님 피드백 기반으로 코드 리팩토링 진행합니다.

작업 상세 내용

LectureImage

• isLoading 처리한 부분 안에서 처리할 것이 아닌 밖에서 처리하고 세부적으로 isLoading에 따라 UI를 보여주는 것이 아니라면 현재 처리하고 있는 로딩 처리 방식은 별로, 전체 페이지에 대한 로딩 값을 들고 있고 페이지 전체에서 로딩 돌도록 수정
• useState 한번 더 하지 말고 데이터 가지고 온 것을 바로 넘겨주도록 수정

LectureInfo

• - if(isLoading){}
• if(!lectureInfo) {}

LectureSummary

• LectureSummarySkeleton을 정의 - 수정
• 구조에 맞게 하나의 페이지를 만드는게 좋을 것 같음

LectureFooter

• IconButton - Heart - onClick event 많이 사용되니까 컴포넌트 - likeButton으로 빼서 onClick props로 받아서 재사용할 수 있게
• price를 받아서 convertToWon - util 함수로 만들 것

Lecture Detail

• - 컴포넌트로 뺐으면 좋겠음 - 특정 타이틀, 폰트 사이즈

Entire Page

• useEffect
• 클래스 존재하지 않습니다. - 조건 거르게
• 그 외의 것을 return 해버리면 좋을 것 같음
• 순서 전부 바꾸는 것으로 진행 - 다른 컴포넌트도

Query Function

• queryFn: getEntireLecture 방식으로 수정 () => void 방식보다 선호

Input Label

• 전체적으로 수정 필요
• statusStyle: Record<InputLabelStatus, string> = {default: “”, correct: “”, error: “”)
• const statusText
• const statusColor 선언
• const containerClassName = twMerge(”flex flex-col w-full” message && “gap-2”)
• 객체 형태로 구현하는 것을 목표

Naming

• handleCopyClipBoard → copyClipBoard
• 이벤트 처리나 액션을 처리할 때 handle
• 단순한 함수는 그냥 기능
• handle 과 아닌 함수 구분할 수 있도록
• 부모 컴포넌트에서 핸들을 붙이고 자식으로 전달할 때

API 타입

• 제네릭으로 바꿀 수 있는 부분 전부 수정

Split 버그

• 처리가 안되는 경우 대비해서 UI 빈 값으로 처리하던지 해야할 듯

참고할만한 자료(선택)