[DEV-228/FE] feat: 내 면접 모아보기 질문탭 mock-api 연결

[HIHJH]

관련 이슈

close #323

작업한 내용

• page에서 질문 탭 컴포넌트 분리
  • page에서는 탭 상태만 관리하도록 질문 탭 컴포넌트를 분리하였습니다. 면접 탭은 이후 작업에서 분리하겠습니다!
• 질문 탭 컴포넌트는 2개 폴더로 분리하였습니다.
  • frequent: 자주 받은 질문
  • list: 전체 질문 조회 및 필터링(검색)
• API 연결
  • 카테고리 리스트 getMyFrequentQnaSetCategories
  • 카테고리별 질문 조회 getMyFrequentQnaSetCategoryQuestions
  • 검색 searchMyQnaSet
    • useInfiniteQuery로 searchMyQnaSet API를 페이지 단위로 호출하였습니다.
    • IntersectionObserver로 하단 도달을 감지하면 fetchNextPage()를 실행합니다.

  const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage, isError } = useInfiniteQuery({
    queryKey: ['my-interviews', 'question-list', searchBody, sortParam],
    initialPageParam: 0,
    queryFn: ({ pageParam }) =>
      searchMyQnaSet(searchBody, {
        page: pageParam,
        size: PAGE_SIZE,
        sort: sortParam,
      }),
    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
      const totalPages = lastPage.result?.totalPages ?? 0
      const nextPage = lastPageParam + 1
      return nextPage < totalPages ? nextPage : undefined
    },
  })

• 데이터가 없는 경우 해당 영역에 에러 메세지도 추가해두었습니다.

const getEmptyMessage = ({ isError, hasFilterCondition }: { isError: boolean; hasFilterCondition: boolean }) => {
  if (isError) return '질문 목록을 불러오지 못했어요. 잠시 후 다시 시도해 주세요.'
  if (hasFilterCondition) return '선택한 검색/필터 조건에 맞는 질문이 없어요. 조건을 바꿔서 다시 확인해보세요.'
  return '질문 데이터가 없어요. 면접 기록을 진행해서 질문을 모아보세요.'
}

PR 리뷰시 참고할 사항

• frontend/src/features/dashboard/my-interviews/components/questions 폴더 위주로 봐주시면 됩니다!

• 현재 swagger에는 request param 형태가 pageable 객체로 지정되어 있는데, 실제로는 page, size, sort 각각 param을 넣어주어야 해서 BE분들께 수정 요청드릴 예정입니다! 그 전까지는 임시로 api schema 파일을 수정하여 작업해두었습니다. 5620609

참고 자료 (링크, 사진, 예시 코드 등)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web-team4-refit	Ready	Preview, Comment	Feb 15, 2026 6:44am

[gemini-code-assist]

Summary of Changes

Hello @HIHJH, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 '내 면접 모아보기' 페이지의 질문 탭 기능을 전면적으로 개선합니다. 기존의 모의 데이터를 사용하던 질문 목록을 실제 API와 연동하고, 자주 받은 질문 섹션과 전체 질문 검색 및 필터링 기능을 도입하여 사용자가 자신의 면접 질문 데이터를 효율적으로 관리하고 탐색할 수 있도록 합니다. 특히, 검색 결과에 무한 스크롤을 적용하여 대량의 데이터를 부드럽게 탐색할 수 있게 하였으며, 질문 필터링을 통해 원하는 질문을 쉽게 찾을 수 있도록 기능성을 강화했습니다.

Highlights

• 질문 탭 컴포넌트 분리 및 API 연동: 내 면접 모아보기 페이지에서 질문 탭을 별도의 컴포넌트로 분리하고, 자주 받은 질문 및 전체 질문 조회/검색 API를 연동했습니다.
• 무한 스크롤 구현: 질문 검색 결과에 대해 useInfiniteQuery와 IntersectionObserver를 활용한 무한 스크롤 기능을 구현하여 사용자 경험을 개선했습니다.
• API 스키마 임시 수정: 백엔드 API의 pageable 객체 파라미터 불일치로 인해, 임시로 API 스키마 파일을 수정하여 page, size, sort 파라미터를 직접 전달하도록 변경했습니다. 추후 백엔드 수정 요청 예정입니다.
• 질문 필터 및 정렬 기능 추가: STAR 분석 여부, STAR 분석 결과 레벨별 필터링 및 다양한 정렬 옵션을 제공하는 질문 필터 기능을 추가했습니다.

Changelog

• frontend/src/apis/generated/refit-api.schemas.ts
  • 여러 API 요청 타입에서 pageable 파라미터를 선택적으로 변경하고 page, size, sort 파라미터를 추가했습니다.
• frontend/src/features/_common/components/sidebar/InterviewInfoSection.tsx
  • formatDateTime 유틸리티 함수의 import 경로를 업데이트했습니다.
• frontend/src/features/_common/utils/date.ts
  • formatDateTime 함수를 named export로 변경하고, 새로운 formatDate 유틸리티 함수를 추가했습니다.
• frontend/src/features/_common/utils/index.ts
  • formatDateTime의 기본 export를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/FrequentQuestionsSection.tsx
  • 이전의 모의 데이터 기반 컴포넌트를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/QnaCard.tsx
  • 파일 이름이 frontend/src/features/dashboard/my-interviews/components/questions/list/qna-card/QnaCard.tsx로 변경되었습니다.
  • resultStatus 타입을 변경하고 TODO 주석을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/QuestionListSection.tsx
  • 이전의 모의 데이터 기반 컴포넌트를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/QuestionsTab.tsx
  • 질문 탭의 로직을 캡슐화하는 새로운 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/frequent/FrequentQuestionsSection.tsx
  • 자주 받은 질문을 표시하기 위한 새로운 컴포넌트를 추가하고 API 및 페이지네이션을 통합했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/frequent/category-list/CategoryList.tsx
  • 자주 받은 질문 카테고리 목록을 표시하는 새로운 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/frequent/question-card/QuestionCard.tsx
  • 개별 자주 받은 질문 카드를 표시하는 새로운 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/frequent/useFrequentQuestions.ts
  • 자주 받은 질문의 상태 및 API 호출을 관리하는 새로운 커스텀 훅을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/index.ts
  • 새로운 컴포넌트 구조를 반영하도록 export를 업데이트했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/list/QuestionListSection.tsx
  • 모든 질문 목록을 표시하기 위한 새로운 컴포넌트를 추가하고 무한 스크롤을 통합했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/list/filter/QuestionFilterControls.tsx
  • 질문 필터링 및 정렬을 위한 새로운 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/list/useInfiniteQuestionList.ts
  • 질문 검색 결과의 무한 스크롤을 위한 새로운 커스텀 훅을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/mappers.ts
  • API 응답을 UI 모델로 매핑하기 위한 새로운 타입 정의 및 매핑 함수를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/constants/constants.ts
  • InterviewResultStatus 타입을 업데이트하고, EMPTY_QUESTION_FILTER, QUESTION_SORT_OPTIONS, STAR_LEVEL_OPTIONS, DATA_EMPTY_MESSAGE를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/example.ts
  • InterviewItemType 및 MOCK_QNA의 resultStatus 타입을 업데이트하고, MOCK_QUESTION_RANKS 및 MOCK_QUESTION_PREVIEWS를 제거했습니다.
• frontend/src/features/dashboard/trend-questions/components/FilterResultList.tsx
  • QnaCard의 import 경로를 업데이트했습니다.
• frontend/src/features/retro/_common/components/ScrapModal.tsx
  • useGetScrapFoldersContainingQnaSet 파라미터를 pageable 객체 대신 page, size를 직접 사용하도록 업데이트했습니다.
• frontend/src/mocks/browser.ts
  • getMyFrequentQnaSetCategories, getMyFrequentQnaSetCategoryQuestions, searchMyQnaSet에 대한 mock 핸들러를 추가했습니다.
• frontend/src/mocks/data/my-frequent-questions.ts
  • 자주 받은 질문 및 검색 결과를 위한 새로운 mock 데이터와 함수를 추가했습니다.
• frontend/src/pages/dashboard/my-collections/detail/page.tsx
  • MOCK_QUESTIONS의 resultStatus 타입을 업데이트했습니다.
• frontend/src/pages/dashboard/my-collections/difficult/page.tsx
  • MOCK_DIFFICULT_QUESTIONS의 resultStatus 타입을 업데이트했습니다.
• frontend/src/pages/dashboard/my-interviews/page.tsx
  • 페이지를 리팩토링하여 새로운 QuestionsTab 컴포넌트를 사용하고, 면접 관련 필터 상태를 분리했습니다.

Activity

• 이 PR은 '내 면접 모아보기' 페이지의 질문 탭에 대한 새로운 기능 개발 및 기존 컴포넌트 리팩토링을 포함합니다.
• 작성자는 리뷰어들에게 frontend/src/features/dashboard/my-interviews/components/questions 폴더를 중점적으로 검토해달라고 요청했습니다.
• Swagger 정의와 실제 백엔드 API의 pageable 객체 파라미터 불일치 문제를 해결하기 위해 refit-api.schemas.ts 파일을 임시로 수정했으며, 백엔드 수정 요청이 예정되어 있습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이번 PR은 '내 면접 모아보기'의 질문 탭을 mock API와 성공적으로 연결하고, 더 나은 구조와 상태 관리를 위해 컴포넌트를 리팩토링했습니다. 페이지네이션을 위한 useInfiniteQuery와 무한 스크롤을 위한 IntersectionObserver의 사용이 돋보입니다. 커스텀 훅과 매퍼 함수를 통해 코드도 잘 정리되었습니다. 코드 품질을 더욱 향상시키기 위해 React key 사용, 타입 안전성, 타입 정의 간소화에 대한 몇 가지 제안 사항을 드립니다.

[forhyundaisofteer]

고생하셨습니다!! 남은거 다 머지 되고 나서 mock 빼봐요!