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

frontend/src/apis/generated/refit-api.schemas.ts

@@ -931,15 +931,24 @@ export type SignUpParams = {
 }
 
 export type GetMyScrapFoldersParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type SearchMyQnaSetParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type SearchInterviewsParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type PublishTokenParams = {
@@ -952,30 +961,48 @@ export type PublishTokenByUserIdParams = {
 }
 
 export type GetQnaSetsInScrapFolderParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetScrapFoldersContainingQnaSetParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetMyFrequentQnaSetCategoriesParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetMyFrequentQnaSetCategoryQuestionsParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetFrequentQuestionsParams = {
   industryIds?: number[]
   jobCategoryIds?: number[]
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetMyInterviewDraftsParams = {
   interviewReviewStatus: GetMyInterviewDraftsInterviewReviewStatus
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetMyInterviewDraftsInterviewReviewStatus =
@@ -989,15 +1016,24 @@ export const GetMyInterviewDraftsInterviewReviewStatus = {
 } as const
 
 export type GetMyDifficultQnaSetsParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetUpcomingInterviewsParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetDebriefIncompletedInterviewsParams = {
-  pageable: Pageable
+  pageable?: Pageable
+  page?: number
+  size?: number
+  sort?: string[]
 }
 
 export type GetDashboardCalendarInterviewsParams = {

frontend/src/features/_common/components/sidebar/InterviewInfoSection.tsx

@@ -1,6 +1,6 @@
 import { INTERVIEW_TYPE_LABEL } from '@/constants/interviews'
 import { ContainerWithoutHeader } from '@/designs/components'
-import { formatDateTime } from '@/features/_common/utils'
+import { formatDateTime } from '@/features/_common/utils/date'
 import type { LabelValueType } from '@/types/global'
 import type { InterviewInfoType } from '@/types/interview'
 

frontend/src/features/_common/utils/date.ts

@@ -1,4 +1,4 @@
-export default function formatDateTime(dateString: string): string {
+export function formatDateTime(dateString: string): string {
   return new Date(dateString).toLocaleString('ko-KR', {
     year: 'numeric',
     month: 'long',
@@ -8,3 +8,11 @@ export default function formatDateTime(dateString: string): string {
     hour12: false,
   })
 }
+
+export function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}

frontend/src/features/dashboard/my-interviews/components/questions/QuestionsTab.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { SearchBar, SearchResultBar } from '@/features/dashboard/my-interviews/components/filter'
+import FrequentQuestionsSection from '@/features/dashboard/my-interviews/components/questions/frequent/FrequentQuestionsSection'
+import QuestionFilterControls from '@/features/dashboard/my-interviews/components/questions/list/filter/QuestionFilterControls'
+import QuestionListSection from '@/features/dashboard/my-interviews/components/questions/list/QuestionListSection'
+import { EMPTY_QUESTION_FILTER } from '@/features/dashboard/my-interviews/constants/constants'
+import type { QuestionFilter } from '@/types/interview'
+
+export default function QuestionsTab() {
+  const [filter, setFilter] = useState<QuestionFilter>(EMPTY_QUESTION_FILTER)
+  const isSearching = filter.keyword.length > 0
+
+  return (
+    <>
+      <div className="absolute top-0 right-0">
+        <SearchBar keyword={filter.keyword} onSearch={(keyword) => setFilter((prev) => ({ ...prev, keyword }))} />
+      </div>
+      {!isSearching && <FrequentQuestionsSection />}
+      <section className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          {isSearching ? (
+            <SearchResultBar query={filter.keyword} onClose={() => setFilter((prev) => ({ ...prev, keyword: '' }))} />
+          ) : (
+            <h2 className="title-s-bold">내가 복기 완료한 질문과 답변</h2>
+          )}
+          <QuestionFilterControls filter={filter} onChange={setFilter} />
+        </div>
+        <QuestionListSection filter={filter} />
+      </section>
+    </>
+  )
+}