Feature/fe-040 먹팟 상세 페이지

[sxungchxn]

체크 리스트

• 적절한 제목으로 수정했나요?
• 관련된 이슈와 연결 시켰나요?
• Target Branch를 올바르게 설정했나요?
• Label을 알맞게 설정했나요?

작업 내역

상세 페이지 기능 구현

• 게시글 조회
• 참여 신청
• 참여 신청 취소
• 게시글 삭제
• 공유하기(오픈채팅방, 현재 게시글 링크 복사)

문제 상황과 해결

쿼리키 하드코딩 문제 해결

위와 같이 단순 배열 하드코딩으로 관리되고 있어서 휴먼에러 발생 가능성이 높은 상황

쿼리 관련 폴더구조 및 쿼리키 관리 기능 추가

문제사항1 - 난해한 쿼리 관련 폴더구조

• queryKey 따로, queryFn 따로, queryHook을 다 따로 보관되어버린다.
• 위 세가지는 같이 쓰이기 마련이나 관심사가 너무 분리되어있고 관리하기도 어려운 상황

문제사항2 - API 데이터 타입들이 모두 흩어져 있었음

• app 디렉토리 내에서 API 응답데이터에 대한 타입을 app 별로 types로 만들어서 관리했으나 이 역시 여기저기 타입이 흩어지면서 관리 및 사용이 너무 어려워짐

해결 방법 - 하나의 폴더로 관심사 통합하기

쿼리 별로 (board, user) queryKey, queryFn, queryHook(+ 관련 타입)을 묶어서 하나의 상위 폴더 내 에서 관리하도록 함

커스텀 useMutation 훅 정의

일반 tanstackquery의 useMutation 훅을 사용할 경우 에러에 대한 타입유추가 제대로 되지 않아서 덮어쓰는 함수 정의

커스텀 useMutation 을 쓸 경우 위와 같이 에러 타입에 대한 유추가 정상적으로 작동

비고

나중에 해야될 일 : 게시글 수정 페이지로 연결

[ojj1123]

오 react query 관련 리팩터링을 했군요! 동기가 매우 공감됩니다~👍

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
10 Code Smells

No Coverage information
0.0% Duplication

[jieunpark247]

커스텀한 useMutation 하고 폴더 구조 공통화 시키면 좋을것같아요~ 회의 잡아서 따로 말해보아요 �👍🏼

[jieunpark247]

👍🏼