[DEV-227/FE] feat: 내 면접 모아보기 면접탭 api 연결

[HIHJH]

관련 이슈

close #322

작업한 내용

• 임시저장 전체보기 모달 + 삭제 컨펌 모달 추가
• 임시저장 row 클릭하면 해당 interviewReviewStatus에 해당하는 단계로 이동하도록 연결해두었습니다.
  • getInterviewNavigationPath 공통 함수 사용
• API 연결
  • 임시저장 목록 조회 getMyInterviewDrafts
  • 임시저장 목록 삭제 deleteInterview
  • 복기 완료 면접 조회 및 검색 searchInterviews
    • 질문 탭에서랑 동일하게 useInfiniteQuery를 사용하고, 최하단에 빈 div(loadMoreRef)를 두고 intersectionObserver로 스크롤을 인식하여 fetchNextPage 호출하면서 무한스크롤을 구현하였습니다.

PR 리뷰시 참고할 사항

전반적으로 내 면접 모아보기 > 질문 탭 API 연결 과 비슷하게 구현되었습니다!

• DATA_EMPTY_MESSAGE 들도 임시로 작성해두었는데, 나중에 정리해봐도 좋을 것 같습니다!

  interviews: '아직 면접 기록이 없어요. 면접을 등록하고 기록을 모아보세요.',
  questions: '아직 질문 데이터가 없어요. 면접 기록을 진행해서 질문과 답변을 모아보세요.',

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

++ 질문 탭 Empty 스타일 변경

[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 17, 2026 6:22am

[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를 통합하여 "내 면접 모아보기" 기능을 크게 개선합니다. 임시저장 항목 관리를 위한 모달과 복기 완료 면접을 위한 무한 스크롤과 같은 새로운 UI 컴포넌트를 도입하여 데이터 처리 및 사용자 경험을 향상시켰습니다. 또한, 로직을 중앙화하고 목업 데이터를 제거하기 위한 상당한 리팩토링이 포함되어 있습니다.

Highlights

• API 연동: 임시저장 목록 조회를 위한 getMyInterviewDrafts API와 삭제를 위한 deleteInterview API를 연동했습니다. 또한, 복기 완료 면접 조회 및 무한 스크롤을 위한 searchInterviews API를 연결했습니다.
• UI/UX 개선: 임시저장 전체보기 모달과 삭제 확인 모달을 추가하여 사용자 경험을 향상시켰습니다. 임시저장 목록의 각 항목을 클릭하면 해당 면접 복기 상태 페이지로 이동하도록 기능을 추가했습니다. 빈 데이터 메시지(DATA_EMPTY_MESSAGE)의 내용과 스타일을 업데이트했습니다.
• 리팩토링: 면접 관련 로직을 InterviewsTab 컴포넌트로 분리하여 코드의 응집도를 높였습니다. 기존에 사용되던 목업 데이터를 제거하고 실제 API 호출로 대체했으며, 정렬 옵션을 상수로 중앙화하여 관리 효율성을 높였습니다.

Changelog

• frontend/src/features/dashboard/my-collections/components/QnaCardListSection.tsx
  • QnaCard 컴포넌트의 import 경로를 업데이트했습니다.
• frontend/src/features/dashboard/my-interviews/components/filter/FilterSortControls.tsx
  • 정렬 옵션을 INTERVIEW_SORT_OPTIONS 상수를 사용하도록 변경하고, 기존의 로컬 SORT_OPTIONS 정의를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/filter/InterviewFilterModal.tsx
  • toggleItem 함수에 제네릭 타입을 적용하여 타입 안정성을 높였고, handleReset 함수가 검색 키워드를 유지하도록 수정했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/DraftSection.tsx
  • 기존의 DraftSection 컴포넌트를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/InterviewCard.tsx
  • 파일 이름을 frontend/src/features/dashboard/my-interviews/components/interviews/list/interview-card/InterviewCard.tsx로 변경하고, 날짜 형식 지정 및 호버 스타일을 업데이트했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/InterviewListSection.tsx
  • 기존의 InterviewListSection 컴포넌트를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/InterviewsTab.tsx
  • 면접 탭의 검색, 임시저장 섹션, 면접 목록 표시 로직을 포함하는 InterviewsTab 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/draft/DraftSection.tsx
  • API 연동, 내비게이션, 전체보기 모달 기능을 포함하는 임시저장 항목 표시를 위한 DraftSection 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/draft/draft-list-modal/DraftListModal.tsx
  • 임시저장 항목을 조회, 편집, 삭제할 수 있는 모달 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/draft/draft-list-modal/useDraftDelete.ts
  • 임시저장 항목 삭제 및 관련 쿼리 무효화를 처리하는 커스텀 훅을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/draft/draft-list-modal/useDraftList.ts
  • 임시저장 항목 목록을 페이지네이션과 함께 가져오고 관리하는 커스텀 훅을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/index.ts
  • 기존 컴포넌트들의 내보내기 정의를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/list/InterviewListSection.tsx
  • 무한 스크롤 및 API 연동을 통해 완료된 면접 항목을 표시하는 InterviewListSection 컴포넌트를 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/list/useInfiniteInterviewList.ts
  • useInfiniteQuery와 IntersectionObserver를 사용하여 무한 스크롤로 완료된 면접을 가져오는 커스텀 훅을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/interviews/mappers.ts
  • API 응답 데이터를 UI 모델로 매핑하는 유틸리티 함수들을 추가했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/frequent/FrequentQuestionsSection.tsx
  • 빈 데이터 메시지의 스타일을 업데이트했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/index.ts
  • 기존 컴포넌트들의 내보내기 정의를 제거했습니다.
• frontend/src/features/dashboard/my-interviews/components/questions/list/qna-card/QnaCard.tsx
  • InterviewCard 컴포넌트의 import 경로를 업데이트했습니다.
• frontend/src/features/dashboard/my-interviews/constants/constants.ts
  • EMPTY_FILTER의 정렬 값을 업데이트하고, INTERVIEW_SORT_OPTIONS 상수를 추가했으며, DATA_EMPTY_MESSAGE의 면접 관련 메시지를 수정했습니다.
• frontend/src/features/dashboard/my-interviews/example.ts
  • 목업 데이터 파일을 제거했습니다.
• frontend/src/pages/dashboard/my-interviews/page.tsx
  • 면접 필터링 및 표시 로직을 새로운 InterviewsTab 컴포넌트로 이동하여 페이지 로직을 리팩토링했습니다.
• frontend/src/types/interview.d.ts
  • InterviewFilter 타입 정의를 InterviewSearchRequest 스키마에 맞춰 업데이트했습니다.

Activity

• 임시저장 전체보기 모달과 삭제 컨펌 모달을 추가했습니다.
• 임시저장 row 클릭 시 해당 interviewReviewStatus에 해당하는 단계로 이동하도록 연결했습니다.
• getMyInterviewDrafts, deleteInterview, searchInterviews API를 연결했습니다.
• useInfiniteQuery와 IntersectionObserver를 사용하여 복기 완료 면접 목록에 무한 스크롤을 구현했습니다.
• "질문 탭 API 연결" PR과 유사하게 구현되었음을 언급했습니다.
• 임시로 작성된 빈 데이터 메시지(DATA_EMPTY_MESSAGE)는 추후 정리될 수 있다고 언급했습니다.
• 변경 사항을 보여주는 스크린샷을 첨부했습니다.

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은 '내 면접 모아보기'의 면접 탭에 API를 연결하여 기존의 모의 데이터를 실제 데이터로 대체하는 작업을 포함하고 있습니다. 임시저장 및 복기 완료된 면접 목록을 불러오고, 무한 스크롤, 검색, 필터링 기능을 구현했습니다. 전반적으로 코드가 잘 구조화되어 있으며, useInfiniteInterviewList, useDraftList, useDraftDelete와 같은 커스텀 훅을 사용하여 로직을 분리한 점이 좋습니다. react-query를 활용한 데이터 페칭 및 상태 관리도 잘 구현되었습니다. 코드의 안정성을 높이고 React의 모범 사례를 따르기 위한 몇 가지 제안 사항을 리뷰에 포함했습니다.