From 7a8128cae581a889915745b2dcf29fe6a4d11438 Mon Sep 17 00:00:00 2001 From: minsour Date: Sun, 21 Aug 2022 00:40:08 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Fix:=20=EC=84=A0=ED=83=9D=EB=90=9C=20?= =?UTF-8?q?=ED=95=AD=EB=AA=A9=EC=9D=B4=20=EC=97=91=EC=85=80=20=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EA=B0=80=EB=8A=A5=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useConvertToXlsx.ts | 5 +-- .../ApplicationList/ApplicationList.page.tsx | 34 +++++++++---------- 2 files changed, 19 insertions(+), 20 deletions(-) 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/ApplicationList/ApplicationList.page.tsx b/src/pages/ApplicationList/ApplicationList.page.tsx index 35ebb897..94102604 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, @@ -290,7 +283,7 @@ const ApplicationList = () => { totalSummaryText: '총 지원인원', selectedSummaryText: '명 선택', buttons: [ - @@ -306,8 +299,8 @@ const ApplicationList = () => { disabled={selectedResults.length === 0 && isMyTeam} > SMS 발송 - , - , + , , From dff835f6a63abbc5a7f94b38bf2cd7798afef9b1 Mon Sep 17 00:00:00 2001 From: minsour Date: Sun, 21 Aug 2022 00:41:17 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Fix:=20defaultLine=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9D=98=20disabled=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ApplicationList/ApplicationList.styled.ts | 12 +----------- src/styles/themes/button.ts | 3 ++- 2 files changed, 3 insertions(+), 12 deletions(-) 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/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 { From d7824d7c997956d51e58357acc78812b3e5c9243 Mon Sep 17 00:00:00 2001 From: minsour Date: Sun, 21 Aug 2022 02:42:39 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Feat:=20html=EC=97=90=20scroll-behavior=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/resetCss.ts | 1 - 1 file changed, 1 deletion(-) 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, From 1c3e419fcea52ca050d2e69b8892ad132f8b5900 Mon Sep 17 00:00:00 2001 From: minsour Date: Sun, 21 Aug 2022 02:43:15 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Feat:=20scrollTo=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=B6=94=EC=B6=9C=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ApplicationFormList.page.tsx | 3 ++- src/pages/ApplicationList/ApplicationList.page.tsx | 3 ++- src/pages/SmsSendingList/SmsSendingList.page.tsx | 3 ++- src/utils/scroll.ts | 13 +++++++++++++ 4 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 src/utils/scroll.ts diff --git a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx index 6b50dd07..b5fe4a1a 100644 --- a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx +++ b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx @@ -25,6 +25,7 @@ import { ApplicationFormPreviewModal } from '@/components/ApplicationForm/Applic import { ButtonShape, ButtonSize } from '@/components/common/Button/Button.component'; import * as Styled from './ApplicationFormList.styled'; +import { scrollTo } from '@/utils/scroll'; const ApplicationFormPreview = ({ questions }: { questions: Question[] }) => { const [modalOpened, toggleModalOpened] = useToggleState(false); @@ -173,7 +174,7 @@ const ApplicationFormList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - window.scrollTo(0, 179); + scrollTo(0, 179, { useAnimation: true }); } // 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 94102604..18a9c002 100644 --- a/src/pages/ApplicationList/ApplicationList.page.tsx +++ b/src/pages/ApplicationList/ApplicationList.page.tsx @@ -39,6 +39,7 @@ import ApplicationStatusBadge, { } from '@/components/common/ApplicationStatusBadge/ApplicationStatusBadge.component'; import { ApplicationFilterValuesType } from '@/components/common/SearchOptionBar/SearchOptionBar.component'; import * as Styled from './ApplicationList.styled'; +import { scrollTo } from '@/utils/scroll'; const APPLICATION_EXTRA_SIZE = 100; @@ -254,7 +255,7 @@ const ApplicationList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - window.scrollTo(0, 179); + scrollTo(0, 179, { useAnimation: true }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); diff --git a/src/pages/SmsSendingList/SmsSendingList.page.tsx b/src/pages/SmsSendingList/SmsSendingList.page.tsx index c1d9610c..b4971694 100644 --- a/src/pages/SmsSendingList/SmsSendingList.page.tsx +++ b/src/pages/SmsSendingList/SmsSendingList.page.tsx @@ -13,6 +13,7 @@ import { TeamType, RoleType } from '@/components/common/UserProfile/UserProfile. import * as Styled from './SmsSendingList.styled'; import { SmsResponse, SmsSendingListRequest, SmsSendingListResponse } from '@/types/dto/sms'; +import { scrollTo } from '@/utils/scroll'; const ApplicationFormList = () => { const handleSMSModal = useRecoilCallback(({ set }) => (sms: SmsResponse) => { @@ -146,7 +147,7 @@ const ApplicationFormList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - window.scrollTo(0, 167); + scrollTo(0, 167, { useAnimation: true }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts new file mode 100644 index 00000000..8d76e4d2 --- /dev/null +++ b/src/utils/scroll.ts @@ -0,0 +1,13 @@ +interface OptionsOfScrollTo { + useAnimation?: boolean; +} + +export const scrollTo = (x: number, y: number, options?: OptionsOfScrollTo) => { + if (options?.useAnimation) { + document.documentElement.style.scrollBehavior = 'smooth'; + window.scrollTo(x, y); + document.documentElement.style.scrollBehavior = 'auto'; + } else { + window.scrollTo(x, y); + } +}; From 73f63d69803bb8bef5741586ade4b20a77bb8d6f Mon Sep 17 00:00:00 2001 From: minsour Date: Fri, 26 Aug 2022 21:30:19 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Feat:=20scrollTo=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ApplicationFormList.page.tsx | 3 +-- src/pages/ApplicationList/ApplicationList.page.tsx | 3 +-- src/pages/SmsSendingList/SmsSendingList.page.tsx | 3 +-- src/utils/scroll.ts | 13 ------------- 4 files changed, 3 insertions(+), 19 deletions(-) delete mode 100644 src/utils/scroll.ts diff --git a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx index b5fe4a1a..3a7cd91b 100644 --- a/src/pages/ApplicationFormList/ApplicationFormList.page.tsx +++ b/src/pages/ApplicationFormList/ApplicationFormList.page.tsx @@ -25,7 +25,6 @@ import { ApplicationFormPreviewModal } from '@/components/ApplicationForm/Applic import { ButtonShape, ButtonSize } from '@/components/common/Button/Button.component'; import * as Styled from './ApplicationFormList.styled'; -import { scrollTo } from '@/utils/scroll'; const ApplicationFormPreview = ({ questions }: { questions: Question[] }) => { const [modalOpened, toggleModalOpened] = useToggleState(false); @@ -174,7 +173,7 @@ const ApplicationFormList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - scrollTo(0, 179, { useAnimation: true }); + 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 18a9c002..ae8b0546 100644 --- a/src/pages/ApplicationList/ApplicationList.page.tsx +++ b/src/pages/ApplicationList/ApplicationList.page.tsx @@ -39,7 +39,6 @@ import ApplicationStatusBadge, { } from '@/components/common/ApplicationStatusBadge/ApplicationStatusBadge.component'; import { ApplicationFilterValuesType } from '@/components/common/SearchOptionBar/SearchOptionBar.component'; import * as Styled from './ApplicationList.styled'; -import { scrollTo } from '@/utils/scroll'; const APPLICATION_EXTRA_SIZE = 100; @@ -255,7 +254,7 @@ const ApplicationList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - scrollTo(0, 179, { useAnimation: true }); + window.scrollTo({ top: 179, left: 0, behavior: 'smooth' }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); diff --git a/src/pages/SmsSendingList/SmsSendingList.page.tsx b/src/pages/SmsSendingList/SmsSendingList.page.tsx index b4971694..ee1c7228 100644 --- a/src/pages/SmsSendingList/SmsSendingList.page.tsx +++ b/src/pages/SmsSendingList/SmsSendingList.page.tsx @@ -13,7 +13,6 @@ import { TeamType, RoleType } from '@/components/common/UserProfile/UserProfile. import * as Styled from './SmsSendingList.styled'; import { SmsResponse, SmsSendingListRequest, SmsSendingListResponse } from '@/types/dto/sms'; -import { scrollTo } from '@/utils/scroll'; const ApplicationFormList = () => { const handleSMSModal = useRecoilCallback(({ set }) => (sms: SmsResponse) => { @@ -147,7 +146,7 @@ const ApplicationFormList = () => { useLayoutEffect(() => { if (isDirty && !isLoading) { - scrollTo(0, 167, { useAnimation: true }); + window.scrollTo({ top: 167, left: 0, behavior: 'smooth' }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loadedTableRows]); diff --git a/src/utils/scroll.ts b/src/utils/scroll.ts deleted file mode 100644 index 8d76e4d2..00000000 --- a/src/utils/scroll.ts +++ /dev/null @@ -1,13 +0,0 @@ -interface OptionsOfScrollTo { - useAnimation?: boolean; -} - -export const scrollTo = (x: number, y: number, options?: OptionsOfScrollTo) => { - if (options?.useAnimation) { - document.documentElement.style.scrollBehavior = 'smooth'; - window.scrollTo(x, y); - document.documentElement.style.scrollBehavior = 'auto'; - } else { - window.scrollTo(x, y); - } -};