diff --git a/src/hooks/useConvertToXlsx.ts b/src/hooks/useConvertToXlsx.ts index c4611ee6..fae7dee0 100644 --- a/src/hooks/useConvertToXlsx.ts +++ b/src/hooks/useConvertToXlsx.ts @@ -8,7 +8,8 @@ interface UseExportXlsxProps { } const useConvertToXlsx = ({ workSheet, teamName, isLoading }: UseExportXlsxProps) => { - const workBookRef = useRef(utils.book_new()); + const workBookRef = useRef(); + useEffect(() => { if (workSheet) { workBookRef.current = utils.book_new(); @@ -17,7 +18,7 @@ const useConvertToXlsx = ({ workSheet, teamName, isLoading }: UseExportXlsxPr } }, [teamName, workSheet, isLoading]); - return { workBook: workBookRef.current }; + return { getWorkBook: () => workBookRef.current }; }; export default useConvertToXlsx; diff --git a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx index 6b50dd07..3a7cd91b 100644 --- a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx +++ b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx @@ -173,7 +173,7 @@ const ApplicationFormList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - window.scrollTo(0, 179); + window.scrollTo({ top: 179, left: 0, behavior: 'smooth' }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); diff --git a/src/pages/ApplicationList/ApplicationList.page.tsx b/src/pages/ApplicationList/ApplicationList.page.tsx index 35ebb897..ae8b0546 100644 --- a/src/pages/ApplicationList/ApplicationList.page.tsx +++ b/src/pages/ApplicationList/ApplicationList.page.tsx @@ -31,7 +31,6 @@ import { useConvertToXlsx, useDirty, usePagination } from '@/hooks'; import { ApplicationRequest, ApplicationResponse } from '@/types'; import { SortType, TableColumn } from '@/components/common/Table/Table.component'; import { ButtonShape, ButtonSize } from '@/components/common/Button/Button.component'; -import * as Styled from './ApplicationList.styled'; import ApplicationStatusBadge, { ApplicationConfirmationStatus, ApplicationConfirmationStatusKeyType, @@ -39,6 +38,7 @@ import ApplicationStatusBadge, { ApplicationResultStatusKeyType, } from '@/components/common/ApplicationStatusBadge/ApplicationStatusBadge.component'; import { ApplicationFilterValuesType } from '@/components/common/SearchOptionBar/SearchOptionBar.component'; +import * as Styled from './ApplicationList.styled'; const APPLICATION_EXTRA_SIZE = 100; @@ -105,13 +105,6 @@ const ApplicationList = () => { const [totalCount, setTotalCount] = useState(0); const [{ state, contents: tableRows }] = useRecoilStateLoadable($applications(applicationParams)); - const [{ contents: entireTableRows }] = useRecoilStateLoadable( - $applications({ - page: 0, - teamId: parseInt(teamId, 10) || undefined, - size: (tableRows?.page?.totalCount || 0) + APPLICATION_EXTRA_SIZE, - }), - ); const refreshApplications = useRecoilRefresher_UNSTABLE($applications(applicationParams)); const [selectedRows, setSelectedRows] = useState([]); const selectedResults = useMemo( @@ -125,8 +118,8 @@ const ApplicationList = () => { tableRows.data || [], ); - const { workBook } = useConvertToXlsx({ - workSheet: entireTableRows?.data?.map((each: ApplicationResponse) => ({ + const { getWorkBook } = useConvertToXlsx({ + workSheet: selectedRows.map((each: ApplicationResponse) => ({ 이름: each.applicant.name, 전화번호: each.applicant.phoneNumber, 지원플랫폼: each.team.name, @@ -261,7 +254,7 @@ const ApplicationList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - window.scrollTo(0, 179); + window.scrollTo({ top: 179, left: 0, behavior: 'smooth' }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); @@ -290,7 +283,7 @@ const ApplicationList = () => { totalSummaryText: '총 지원인원', selectedSummaryText: '명 선택', buttons: [ - @@ -306,8 +299,8 @@ const ApplicationList = () => { disabled={selectedResults.length === 0 && isMyTeam} > SMS 발송 - , - , + , , diff --git a/src/pages/ApplicationList/ApplicationList.styled.ts b/src/pages/ApplicationList/ApplicationList.styled.ts index b083c05c..991899e1 100644 --- a/src/pages/ApplicationList/ApplicationList.styled.ts +++ b/src/pages/ApplicationList/ApplicationList.styled.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { Button, Link } from '@/components'; +import { Link } from '@/components'; export const PageWrapper = styled.div` padding: 4rem 0; @@ -71,13 +71,3 @@ export const Center = styled.div` align-items: center; justify-content: center; `; - -/* TODO: (@minsour) 버튼에 함수 바인딩할때 제거 */ -export const DisabledButton = styled(Button)` - ${({ theme }) => css` - &:disabled { - background-color: ${theme.colors.gray10}; - cursor: not-allowed; - } - `} -`; diff --git a/src/pages/SmsSendingList/SmsSendingList.page.tsx b/src/pages/SmsSendingList/SmsSendingList.page.tsx index c1d9610c..ee1c7228 100644 --- a/src/pages/SmsSendingList/SmsSendingList.page.tsx +++ b/src/pages/SmsSendingList/SmsSendingList.page.tsx @@ -146,7 +146,7 @@ const ApplicationFormList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - window.scrollTo(0, 167); + window.scrollTo({ top: 167, left: 0, behavior: 'smooth' }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); diff --git a/src/styles/resetCss.ts b/src/styles/resetCss.ts index 2b913db4..0a0276f3 100644 --- a/src/styles/resetCss.ts +++ b/src/styles/resetCss.ts @@ -8,7 +8,6 @@ const resetCss = css` html { /* 1rem = 10px */ font-size: 62.5%; - scroll-behavior: smooth; } html, diff --git a/src/styles/themes/button.ts b/src/styles/themes/button.ts index 2293de78..0e3ec5f2 100644 --- a/src/styles/themes/button.ts +++ b/src/styles/themes/button.ts @@ -65,7 +65,8 @@ export const button = { &:disabled { color: ${colors.gray50}; - background-color: ${colors.gray40}; + background-color: ${colors.gray10}; + border-color: ${colors.gray30}; } & > svg > path {