Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AUD-70] 코스 목록 API 연동 #41

Merged
merged 12 commits into from
Feb 21, 2024
Merged

[AUD-70] 코스 목록 API 연동 #41

merged 12 commits into from
Feb 21, 2024

Conversation

RookieAND
Copy link
Collaborator

@RookieAND RookieAND commented Feb 20, 2024

📃 변경사항

  • 코스 목록 API 를 연동했습니다
  • 선택된 코스 옵션에 대한 데이터를 fetching 하도록 enabled 옵션을 추가했습니다.
  • useIntersectionObserver Hook 을 기반으로 무한 스크롤 기능을 추가했습니다.
  • 데이터가 fetching 중이거나 에러가 발생했을 경우에 대한 fallback UI 를 보여주는 AsyncBoundary 컴포넌트를 추가했습니다
  • Tanstack query 내부에서 API 호출 중 에러 발생 시 retry 횟수를 0으로 설정했습니다.

🫨 고민한 부분 (optional)

  • 코스 목록 데이터의 staleTime 을 20초로 두었는데 조금 더 길게 두어도 될지가 고민입니다.

💫 기타사항 (optional)

  • AsyncBoundary 의 경우 추후 Skeleton UI 와 Fallback UI 에 대한 스펙이 나오는대로 추가하도록 하겠습니다.
  • 로그인 과정에서 프론트엔드 단에서 Redirect URL 을 받지 않으므로 더 이상 사용하지 않는 상수도 추가로 제거했습니다.

@RookieAND RookieAND added the ✨ Feature 기능 개발 label Feb 20, 2024
@RookieAND RookieAND self-assigned this Feb 20, 2024
Copy link
Member

@KimGaeun0806 KimGaeun0806 left a comment

Choose a reason for hiding this comment

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

작업해주셔서 감사합니다 ~!
course api 부분 코드 간단한데 전 왜이렇게 삽질했는지 모르겠네요
익숙하지 않아서 그랬나봅니다... ..

・゚゚・。 /__/\ 。・゚゚・
。・゚゚・( > ᴥ <) ・゚゚・。
...... ((__u_u)

* @param param.pendingFallback Suspense에 넘겨줄 fallback Component
* @param param.rejectedFallback ErrorBoundary의 fallbackRender Props에 넘겨줄 fallback Component
*/
const AsyncBoundary = ({
Copy link
Member

Choose a reason for hiding this comment

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

AsyncBoundary도 해주셨군요!

˖♡ ⁺ ᘏ ⑅ ᘏ
˖°ฅ( • · • ฅ)

@@ -10,13 +10,13 @@ import { COLOR } from '@/styles/foundation';
import * as S from './CourseTab.css';

interface PropsType {
name: string;
courseName: string;
Copy link
Member

Choose a reason for hiding this comment

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

courseName이 더 직관적인 것 같긴 하네요

</div>
);
const CoursesContainer = ({ selectedCourseTab }: PropsType) => {
console.log(selectedCourseTab);
Copy link
Member

Choose a reason for hiding this comment

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

console.log는 지워도 될 것 같습니다

Comment on lines +19 to +22
const { data: wholeCourses } = useGetCourses({
limit: 10,
enabled: selectedCourseTab === 'allCourse',
});
Copy link
Member

Choose a reason for hiding this comment

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

TMI이지만 제가 이 부분에서 뭐가 안돼서 삽질했었는데
도대체 왜 안됐는지 모르겠네요

@RookieAND RookieAND merged commit 4265be6 into develop Feb 21, 2024
1 check passed
@RookieAND RookieAND deleted the feature/AUD-70 branch February 21, 2024 04:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants