선택된 항목을 엑셀 다운로드 가능하도록 수정

src/hooks/useConvertToXlsx.ts

@@ -8,7 +8,8 @@ interface UseExportXlsxProps<T> {
 }
 
 const useConvertToXlsx = <T>({ workSheet, teamName, isLoading }: UseExportXlsxProps<T>) => {
-  const workBookRef = useRef<WorkBook>(utils.book_new());
+  const workBookRef = useRef<WorkBook>();
+
   useEffect(() => {
     if (workSheet) {
       workBookRef.current = utils.book_new();
@@ -17,7 +18,7 @@ const useConvertToXlsx = <T>({ workSheet, teamName, isLoading }: UseExportXlsxPr
     }
   }, [teamName, workSheet, isLoading]);
 
-  return { workBook: workBookRef.current };
+  return { getWorkBook: () => workBookRef.current };
 };
 
 export default useConvertToXlsx;

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]);

src/pages/ApplicationList/ApplicationList.page.tsx

@@ -31,14 +31,14 @@ 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,
   ApplicationResultStatus,
   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<ApplicationResponse[]>([]);
   const selectedResults = useMemo(
@@ -125,8 +118,8 @@ const ApplicationList = () => {
     tableRows.data || [],
   );
 
-  const { workBook } = useConvertToXlsx<ApplicationResponse>({
-    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: [
-            <Styled.DisabledButton
+            <Button
               $size={ButtonSize.xs}
               shape={ButtonShape.defaultLine}
               onClick={() =>
@@ -306,8 +299,8 @@ const ApplicationList = () => {
               disabled={selectedResults.length === 0 && isMyTeam}
             >
               SMS 발송
-            </Styled.DisabledButton>,
-            <Styled.DisabledButton
+            </Button>,
+            <Button
               $size={ButtonSize.xs}
               shape={ButtonShape.defaultLine}
               onClick={() =>
@@ -327,19 +320,24 @@ const ApplicationList = () => {
               disabled={selectedResults.length === 0 && isMyTeam}
             >
               합격 여부 변경
-            </Styled.DisabledButton>,
+            </Button>,
             <Button
               $size={ButtonSize.xs}
               shape={ButtonShape.defaultLine}
-              onClick={() =>
+              onClick={() => {
+                const workBook = getWorkBook();
+
+                if (!workBook) {
+                  return;
+                }
                 writeFileXLSX(
                   workBook,
                   `${formatDate(dayjs().format(), 'YYYY년 M월 D일(ddd)')}-${
                     teamName || '전체'
                   }.xlsx`,
-                )
-              }
-              disabled={!loadedTableRows}
+                );
+              }}
+              disabled={selectedRows.length === 0}
             >
               Export to Excel
             </Button>,

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;
-    }
-  `}
-`;

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]);

src/styles/resetCss.ts

@@ -8,7 +8,6 @@ const resetCss = css`
   html {
     /* 1rem = 10px */
     font-size: 62.5%;
-    scroll-behavior: smooth;
   }
 
   html,

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 {