250920 - 댓글/피드백 로직 리팩토링

현재 코드 구조

SubmissionList.tsx

SubmissionList : 전달 받은 submissions 배열을 순회하며 각 항목을 SubmissionListItem 컴포넌트로 렌더링

SubmissionListItem : 과제 제출 항목을 보여주는 UI를 담당하며, 그 안에서 직접 댓글과 피드백 데이터를 불러오는 중

 

문제 : SubmissionListItem 이 제출물 내용 표시를 넘어, 하위 컴포넌트인 CommentSection, FeedbackSection 이 사용할 데이터까지 모두 불러오고 상태를 관리하고 있어 복잡!!

 

해결방법 : 커스텀 훅 도입

 

1. 'useSubmissionComments' hook 생성

댓글 데이터 상태와 함수 로직 이사

submissionId 를 인자로 받아서 댓글 데이터 조회/캐싱/로딩/에러 상태 관리 모두 처리

 

2. 'useSubmissionFeedback' hook 생성

피드백 데이터 상태와 함수 로직 이사

마찬가지!

 

3. CommentSection

기존에 props 로 댓글 데이터를 받던 것을 삭제하고, 직접 useSubmissionComments 훅을 호출해 댓글을 가져오고 댓글 수정/삭제 등의 기능도 여기서 사용!

 

4. FeedbackSection

마찬가지로 삭제하고, 직접 useSubmissionFeedback 훅을 호출해 데이터와 기능을 직접 관리하도록 변경!

 

5. SubmissionListItem 정리

댓글/피드백 관련 useState, useEffect, fetch... 함수들을 모두 제거한다