{formatDate(data.applicant.updatedAt, 'YYYY년 M월 D일(ddd)')}
@@ -45,8 +58,8 @@ const ApplicationDetailView = () => {
질문 리스트
- {data?.questions.map((each: Question) => (
-
+ {data?.questions.map((each: Question, index) => (
+
))}
diff --git a/src/pages/ApplicationDetailView/ApplicationDetailView.styled.ts b/src/pages/ApplicationDetailView/ApplicationDetailView.styled.ts
index a3a9c6e1..eee767b0 100644
--- a/src/pages/ApplicationDetailView/ApplicationDetailView.styled.ts
+++ b/src/pages/ApplicationDetailView/ApplicationDetailView.styled.ts
@@ -39,7 +39,7 @@ export const ApplicantInfo = styled.div`
& > div {
display: flex;
flex-direction: column;
- gap: 2.8rem;
+ gap: 2rem;
width: 50%;
}
}
@@ -79,8 +79,9 @@ export const Aside = styled.aside`
export const Divider = styled.div`
${({ theme }) => css`
+ width: 100%;
height: 0.1rem;
- margin: 0 3.2rem;
+ margin-top: 2rem;
background-color: ${theme.colors.gray30};
`}
`;
diff --git a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx
index cd6103fe..5e79bae5 100644
--- a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx
+++ b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx
@@ -1,5 +1,5 @@
-import React, { FormEvent, useEffect, useMemo, useState } from 'react';
-import { useRecoilStateLoadable, useRecoilValue, useRecoilRefresher_UNSTABLE } from 'recoil';
+import React, { FormEvent, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import { useRecoilStateLoadable, useRecoilValue } from 'recoil';
import { useSearchParams } from 'react-router-dom';
import Preview from '@/assets/svg/preview-20.svg';
@@ -13,15 +13,15 @@ import {
UserProfile,
SearchOptionBar,
} from '@/components';
-import { usePagination, useToggleState } from '@/hooks';
+import { useDirty, usePagination, useToggleState } from '@/hooks';
import { $applicationForms, $teamIdByName } from '@/store';
import { ApplicationFormResponse, Question, ApplicationFormRequest } from '@/types';
-import { PATH } from '@/constants';
+import { PATH, SORT_TYPE } from '@/constants';
import { formatDate } from '@/utils';
-import { TableColumn } from '@/components/common/Table/Table.component';
+import { TableColumn, SortType } from '@/components/common/Table/Table.component';
import { TeamType, RoleType } from '@/components/common/UserProfile/UserProfile.component';
import { ApplicationFormPreviewModal } from '@/components/ApplicationForm/ApplicationFormPreview/ApplicationFormPreview.component';
-import { ButtonShape } from '@/components/common/Button/Button.component';
+import { ButtonShape, ButtonSize } from '@/components/common/Button/Button.component';
import * as Styled from './ApplicationFormList.styled';
@@ -95,35 +95,54 @@ const ApplicationFormList = () => {
const [searchParams] = useSearchParams();
const teamName = searchParams.get('team');
const teamId = useRecoilValue($teamIdByName(teamName));
+ const teamTabRef = useRef
(null);
const page = searchParams.get('page') || '1';
const size = searchParams.get('size') || '20';
const [searchWord, setSearchWord] = useState<{ value: string }>({ value: '' });
+
+ const [sortTypes, setSortTypes] = useState[]>([
+ { accessor: 'team.name', type: SORT_TYPE.DEFAULT },
+ { accessor: 'name', type: SORT_TYPE.DEFAULT },
+ { accessor: 'createdAt', type: SORT_TYPE.DEFAULT },
+ { accessor: 'updatedAt', type: SORT_TYPE.DEFAULT },
+ ]);
+ const sortParam = useMemo(() => {
+ const matched = sortTypes.find((sortType) => sortType.type !== SORT_TYPE.DEFAULT);
+ if (!matched) return '';
+
+ const { accessor, type } = matched;
+ return `${accessor},${type}`;
+ }, [sortTypes]);
+
const applicationFormParams = useMemo(
() => ({
page: parseInt(page, 10) - 1,
size: parseInt(size, 10),
teamId: parseInt(teamId, 10) || undefined,
searchWord: searchWord.value,
+ sort: sortParam,
}),
- [page, size, teamId, searchWord],
+ [page, size, teamId, searchWord, sortParam],
);
+ const [totalCount, setTotalCount] = useState(0);
const [{ state, contents: tableRows }] = useRecoilStateLoadable(
$applicationForms(applicationFormParams),
);
- const refreshApplicationForms = useRecoilRefresher_UNSTABLE(
- $applicationForms(applicationFormParams),
- );
const isLoading = state === 'loading';
- const [loadedTableRows, setLoadedTableRows] = useState([]);
+ const [loadedTableRows, setLoadedTableRows] = useState(
+ tableRows.data || [],
+ );
const { pageOptions, handleChangePage, handleChangeSize } = usePagination(
tableRows.page?.totalCount,
);
+ const { makeDirty, isDirty } = useDirty(1);
+
const handleSubmit = (
e: { target: { searchWord: { value: string } } } & FormEvent,
) => {
@@ -134,42 +153,54 @@ const ApplicationFormList = () => {
useEffect(() => {
if (!isLoading) {
setLoadedTableRows(tableRows.data);
+ setTotalCount(tableRows.page.totalCount);
+ makeDirty();
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading, tableRows]);
useEffect(() => {
- refreshApplicationForms();
+ setSearchWord({ value: '' });
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [page, size, searchWord]);
+ }, [teamName]);
- useEffect(() => {
- refreshApplicationForms();
- setSearchWord({ value: '' });
+ useLayoutEffect(() => {
+ if (teamTabRef.current && isDirty && !isLoading) {
+ teamTabRef.current.scrollIntoView();
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [teamId]);
+ }, [loadedTableRows]);
return (
지원서 설문지 내역
-
+
+
+
- prefix="application"
+ prefix="application-form"
columns={columns}
rows={loadedTableRows}
- maxHeight={72}
isLoading={isLoading}
supportBar={{
- totalCount: tableRows.page?.totalCount,
+ totalCount,
totalSummaryText: '총 지원설문지',
buttons: [
-