Skip to content

Conversation

@seorang42
Copy link
Contributor

#️⃣연관된 티켓 넘버

CLAP-192

📝작업 내용

내 요청 페이지에 API를 연결하는 작업을 진행했습니다.
API로부터 받아온 데이터를 관리하기 위한 @tanstack/vue-query를 설치하였습니다. (버전 : 5.66.0)

🏞️스크린샷 (선택)

스크린샷 2025-02-01 오후 7 31 30

💬리뷰 요구사항(선택)

카테고리 필터의 경우 모든 카테고리를 조회하는 '/api/category'만 사용하였습니다. 1차, 2차 카테고리 개별 조회의 경우 이후 사용하실 분이 코드 작성하시면 될 것 같습니다.
기존의 Status 타입을 API 반환 Enum에 맞게 수정하였습니다. 혹시나 Status의 값을 HTML 요소에서 사용하셨던 부분이 있다면 utils/statusAsText 함수를 사용하여 한글로 변환하여 사용하시면 될 것 같습니다.

@seorang42 seorang42 added the ✨ Feature 기능 개발 label Feb 1, 2025
@seorang42 seorang42 self-assigned this Feb 1, 2025
@Minkyu0424 Minkyu0424 added 📬 API 서버 API 통신 ✨ Feature 기능 개발 and removed ✨ Feature 기능 개발 labels Feb 1, 2025
<slot name="listBar" />

<div class="overflow-y-auto">
<div class="grow overflow-y-auto">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이건 커스텀 속성인가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아뇨 grow는 flex-grow:1을 부여하는 클래스로 상위 요소가 flex인 경우 다른 요소들이 차지하는 공간을 제외하고 나머지의 공간을 차지하게 하는 속성입니다.
grow를 하여 NoContent 컴포넌트를 위한 공간을 확보해주기 위한 클래스입니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상태 상수 변경된 거 확인했습니다

const { parseRequestParams } = useParseParams()
const parsedParams = parseRequestParams(params)
const response = await axiosInstance.get('/api/tasks/requests', {
headers: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로그인 되면 해당 헤더 안쓰셔도 됩니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵! 일단 현재는 원시적으로 직접 토큰값을 저장하여 환경 변수로 사용하고 있는데 이후 로그인 구현 후 그에 맞게 수정하도록 하겠습니다!

queryFn: fetchRequestList
})
watch(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이게 useEffect랑 depenency처럼 동작하는거 맞을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 맞습니다!
watch() 안에 watch가 주시할 변수를 지정하고, 안에 콜백 함수를 통해 해당 변수가 변화 했을 때의 행동을 정의하였습니다.
또한 once 옵션을 통해 처음에 data를 받아왔을 때의 totalPage를 한 번 설정하고, 이후 재설정을 막아 ListPagination 컴포넌트의 반복적인 리렌더링을 막고자 하였습니다!

Copy link
Contributor

@Minkyu0424 Minkyu0424 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다

@seorang42 seorang42 merged commit c02caa2 into develop Feb 1, 2025
@seorang42 seorang42 deleted the CLAP-192 branch February 1, 2025 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신 ✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants