feat: csv 버튼 재연결

src/assets/svgs/IconDownload.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconDownload = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <path
+      fill="#FB247F"
+      d="M9.999 13.333 5.832 9.166l1.167-1.208 2.166 2.167V3.333h1.667v6.792l2.167-2.167 1.166 1.208zm-5 3.333q-.687 0-1.177-.489A1.6 1.6 0 0 1 3.332 15v-2.5h1.667V15h10v-2.5h1.666V15q0 .687-.489 1.177a1.6 1.6 0 0 1-1.177.49z"
+    />
+  </svg>
+);
+export default SvgIconDownload;

src/assets/svgs/index.tsx

@@ -22,6 +22,7 @@ export { default as IconCheckboxSelectedOn } from "./IconCheckboxSelectedOn";
 export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn";
 export { default as IconChecked } from "./IconChecked";
 export { default as IconChevronBack } from "./IconChevronBack";
+export { default as IconDownload } from "./IconDownload";
 export { default as IconEmpty } from "./IconEmpty";
 export { default as IconEyeOff } from "./IconEyeOff";
 export { default as IconEyeOn } from "./IconEyeOn";

src/components/commons/navigation/Navigation.styled.ts

@@ -1,4 +1,11 @@
-import { IcHamburgar, IconArrowLeft, IconArrowRight, IconLogo, IconXButton } from "@assets/svgs";
+import {
+  IcHamburgar,
+  IconArrowLeft,
+  IconArrowRight,
+  IconLogo,
+  IconXButton,
+  IconDownload,
+} from "@assets/svgs";
 import styled from "styled-components";
 
 export const NavigationWrapper = styled.div`
@@ -38,6 +45,13 @@ export const HamburgarButton = styled(IcHamburgar)`
   cursor: pointer;
 `;
 
+export const DownloadButton = styled(IconDownload)`
+  width: 2rem;
+  height: 2rem;
+
+  cursor: pointer;
+`;
+
 export const NavigationLeftButton = styled(IconArrowLeft)`
   box-sizing: content-box;
   width: 2.4rem;
@@ -67,7 +81,7 @@ export const NavigationXButton = styled(IconXButton)`
 
 // TODO: 뷰에 띄워보니 padding이 없어 스타일링 이상함 디자이너 분께 물어보기
 export const SubTextButton = styled.button`
-  width: 3.2rem;
+  display: flex;
   margin: 0 0.4rem 0 0;
 
   ${({ theme }) => theme.fonts["body1-normal-semi"]};

src/components/commons/navigation/Navigation.tsx

@@ -83,6 +83,19 @@ const Navigation = () => {
     );
   }
 
+  if (headerStyle === NAVIGATION_STATE.ICON_TITLE_DOWNLOAD) {
+    return (
+      <S.NavigationWrapper>
+        <S.NavigationLeftButton onClick={leftOnClick} />
+        <S.NavigationTitle>{title}</S.NavigationTitle>
+        <S.SubTextButton onClick={rightOnClick}>
+          {subText}
+          <S.DownloadButton />
+        </S.SubTextButton>
+      </S.NavigationWrapper>
+    );
+  }
+
   if (!headerStyle) {
     return null;
   }

src/constants/navigationState.ts

@@ -7,6 +7,7 @@ export const NAVIGATION_STATE = {
   ICON: "icon",
   LOGO_HAMBURGAR: "logoHamburgar",
   ICON_ICON: "iconIcon",
+  ICON_TITLE_DOWNLOAD: "iconTitleDownload",
 } as const;
 
 export type NavigationState = (typeof NAVIGATION_STATE)[keyof typeof NAVIGATION_STATE];

src/pages/ticketholderlist/TicketHolderList.tsx

@@ -10,7 +10,7 @@ import MetaTag from "@components/commons/meta/MetaTag";
 import { NAVIGATION_STATE } from "@constants/navigationState";
 import { useHeader, useModal } from "@hooks";
 import useDebounce from "src/hooks/useDebounce";
-import { useEffect, useState, ChangeEvent } from "react";
+import { useEffect, useState, ChangeEvent, useRef } from "react";
 import { CSVLink } from "react-csv";
 import { useNavigate, useParams } from "react-router-dom";
 import { convertingNumber } from "@constants/convertingNumber";
@@ -77,6 +77,8 @@ const TicketHolderList = () => {
 
   const [CSVDataArr, setCSVDataArr] = useState<CSVDataType[]>([]);
 
+  const csvLinkRef = useRef(null);
+
   const { performanceId } = useParams();
 
   const { data, isLoading, refetch } = useTicketRetrive(
@@ -363,16 +365,20 @@ const TicketHolderList = () => {
     }
   };
 
+  const handleCSVDownload = () => {
+    if (csvLinkRef.current) {
+      csvLinkRef.current.link.click();
+    }
+  };
+
   const { setHeader } = useHeader();
   useEffect(() => {
     setHeader({
-      headerStyle: NAVIGATION_STATE.ICON_TITLE_SUB_TEXT,
+      headerStyle: NAVIGATION_STATE.ICON_TITLE_DOWNLOAD,
       title: "예매자 관리",
-      // TODO : 공통컴포넌트에 svg 들어갈 수 있도록 수정하기
-      subText: "CSV",
+      subText: "리스트",
       leftOnClick: handleNavigateBack,
-      // TODO : rightOnClick CSV 다운로드로 변경
-      // rightOnClick:,
+      rightOnClick: handleCSVDownload,
     });
   }, [setHeader]);
 
@@ -477,6 +483,12 @@ const TicketHolderList = () => {
                 handleFilter(scheduleNumber, bookingStatus)
               }
             />
+            <CSVLink
+              data={CSVDataArr}
+              headers={headers}
+              filename={`${data.performanceTitle}_예매자 목록.csv`}
+              ref={csvLinkRef}
+            />
             <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
               클립보드에 복사되었습니다!
             </Toast>