[Fix/#462] 자잘한 디자인 QA + 변경사항 반영

src/assets/svgs/BtnFilter.tsx

@@ -1,7 +1,14 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgBtnFilter = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" {...props}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 48 48"
+    {...props}
+    width="48"
+    height="48"
+  >
     <path
       fill="#2A2A2A"
       d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0s24 10.745 24 24"

src/pages/ticketholderlist/TicketHolderList.styled.ts

@@ -18,6 +18,7 @@ export const ManageCardList = styled.section`
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
+  margin-bottom: 10.4rem;
 `;
 
 export const ManageCardContainer = styled.section`

src/pages/ticketholderlist/TicketHolderList.tsx

@@ -15,7 +15,7 @@ import { CSVLink } from "react-csv";
 import { useNavigate, useParams } from "react-router-dom";
 import { convertingNumber } from "@constants/convertingNumber";
 import * as S from "./TicketHolderList.styled";
-import { BottomSheet, Button, Spacing } from "@components/commons";
+import { Button, Spacing } from "@components/commons";
 import Title from "@pages/ticketholderlist/components/title/Title";
 import SearchBar from "./components/searchBar/SearchBar";
 import MenuBottomsheet from "./components/MenuBottomSheet/MenuBottomsheet";
@@ -61,6 +61,7 @@ const headers = [
 
 const TicketHolderList = () => {
   const [paymentData, setPaymentData] = useState<BookingListProps[]>();
+  const [allBookings, setAllBookings] = useState<BookingListProps[]>([]); // 전체 예매자 정보 (필터 적용 안 된)
 
   // DEFAULT, PAYMENT, REFUND, DELETE
   const [status, setStatus] = useState("DEFAULT");
@@ -312,7 +313,13 @@ const TicketHolderList = () => {
   useEffect(() => {
     const fetchData = async () => {
       const refetchData = await refetch();
-      setPaymentData(refetchData?.data?.bookingList ?? []);
+      const bookingList = refetchData?.data?.bookingList ?? [];
+      setPaymentData(bookingList);
+
+      // 전체 리스트는 필터값 가져오지 않도록
+      if (filterList.scheduleNumber.length === 0 && filterList.bookingStatus.length === 0) {
+        setAllBookings(bookingList);
+      }
     };
 
     const fetchSearchData = async () => {
@@ -325,13 +332,11 @@ const TicketHolderList = () => {
   }, [filterList, status, debouncedQuery]);
 
   useEffect(() => {
-    setPaymentData(data?.bookingList ?? []);
-
-    if (data?.bookingList) {
+    if (allBookings) {
       //전체 데이터를 기반으로 csv 추출 데이터 구축
       const tempCSVDataArr: CSVDataType[] = [];
 
-      data.bookingList.map((item) => {
+      allBookings.map((item) => {
         const date = item.createdAt.split("T")[0];
         const time = item.createdAt.split("T")[1].slice(0, 5);
         const formattedDate = date?.replace(/-/g, ".");
@@ -352,16 +357,23 @@ const TicketHolderList = () => {
       );
       setCSVDataArr(tempCSVDataArr);
     }
-  }, [data, paymentData]);
+  }, [data, paymentData, allBookings]);
 
   const navigate = useNavigate();
 
+  // 함수가 선언될 당시의 status값을 클로저로 캡처 -> 최신 값 보장하기 위해 함수형 업데이트 사용
   const handleNavigateBack = () => {
-    if (status !== "DEFAULT") {
-      setStatus("DEFAULT");
-    } else {
+    setStatus((prevStatus) => {
+      if (prevStatus !== "DEFAULT") {
+        setFilterList({
+          scheduleNumber: [],
+          bookingStatus: [],
+        });
+        return "DEFAULT";
+      }
       navigate("/gig-manage");
-    }
+      return prevStatus;
+    });
   };
 
   const handleCSVDownload = () => {
@@ -371,15 +383,25 @@ const TicketHolderList = () => {
   };
 
   const { setHeader } = useHeader();
+
   useEffect(() => {
-    setHeader({
-      headerStyle: NAVIGATION_STATE.ICON_TITLE_DOWNLOAD,
-      title: "예매자 관리",
-      subText: "리스트",
-      leftOnClick: handleNavigateBack,
-      rightOnClick: handleCSVDownload,
-    });
-  }, [setHeader]);
+    if (status === "DEFAULT") {
+      setHeader({
+        headerStyle: NAVIGATION_STATE.ICON_TITLE_DOWNLOAD,
+        title: "예매자 관리",
+        subText: "리스트",
+        leftOnClick: handleNavigateBack,
+        rightOnClick: handleCSVDownload,
+      });
+    } else {
+      setHeader({
+        headerStyle: NAVIGATION_STATE.ICON_TITLE,
+        title: actions[status]?.text,
+        subText: "리스트",
+        leftOnClick: handleNavigateBack,
+      });
+    }
+  }, [setHeader, status]);
 
   const handleCopyClipBoard = (text: string) => {
     navigator.clipboard.writeText(text);
@@ -411,6 +433,7 @@ const TicketHolderList = () => {
                 isFilter={
                   filterList.scheduleNumber.length > 0 || filterList.bookingStatus.length > 0
                 }
+                hasBooking={allBookings?.length > 0}
               />
               {status === "DEFAULT" && (
                 <SelectedChips
@@ -466,7 +489,8 @@ const TicketHolderList = () => {
             )}
 
             <S.FooterButtonWrapper>
-              <Button onClick={handleButtonClick}>{buttonText}</Button>
+              {" "}
+              {paymentData?.length > 0 && <Button onClick={handleButtonClick}>{buttonText}</Button>}
             </S.FooterButtonWrapper>
             <MenuBottomsheet
               isOpen={openMenu}

src/pages/ticketholderlist/components/FilterBottomSheet/FilterBottomSheet.styled.ts

@@ -77,6 +77,11 @@ export const SelectIcon = styled(IconCheckboxSelectedOn)`
   width: 2rem;
   height: 2rem;
   margin-right: 0.8rem;
+
+  rect {
+    fill: ${({ theme }) => theme.colors.pink_400};
+    stroke: ${({ theme }) => theme.colors.pink_400};
+  }
 `;
 
 export const UnSelectIcon = styled(IconCheckboxUnselectedOn)`

src/pages/ticketholderlist/components/FilterBottomSheet/FilterBottomSheet.tsx

@@ -127,7 +127,9 @@ const FilterBottomSheet = ({
         </S.CheckBoxContainer>
         <Spacing marginBottom="3.2" />
         {isAllEmpty ? (
-          <Button variant="gray">적용하기</Button>
+          <Button variant="gray" disabled={true}>
+            적용하기
+          </Button>
         ) : (
           <Button onClick={handleCilckBtn}>적용하기</Button>
         )}

src/pages/ticketholderlist/components/manageCard/ManageAccount.tsx

@@ -4,7 +4,7 @@ interface ManageAccountProps {
   bankName: string;
   accountNumber: string;
   accountHolder: string;
-  handleCopyClipBoard: (number) => void;
+  handleCopyClipBoard: (text: string) => void;
 }
 
 export default function ManageAccount({
@@ -15,7 +15,7 @@ export default function ManageAccount({
 }: ManageAccountProps) {
   return (
     <>
-      <S.ManageAccountWrapper onClick={() => handleCopyClipBoard(accountNumber)}>
+      <S.ManageAccountWrapper onClick={() => handleCopyClipBoard(`${bankName} ${accountNumber}`)}>
         {bankName} ({accountHolder}) {accountNumber}
         <S.CopyIcon />
       </S.ManageAccountWrapper>

src/pages/ticketholderlist/components/manageCard/ManageCheckBox.styled.ts

@@ -18,6 +18,11 @@ export const SelectIcon = styled(IconCheckboxSelectedOn)`
   width: 1.8rem;
   height: 1.8rem;
   margin-right: 1rem;
+
+  rect {
+    fill: ${({ theme }) => theme.colors.pink_400};
+    stroke: ${({ theme }) => theme.colors.pink_400};
+  }
 `;
 
 export const UnSelectIcon = styled(IconCheckboxUnselectedOn)`

src/pages/ticketholderlist/components/searchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import * as S from "./SearchBar.styled";
 
 interface SearchBarProps {
@@ -7,6 +7,7 @@ interface SearchBarProps {
   handleFilterSheet: () => void;
   handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   isFilter: boolean;
+  hasBooking: boolean;
 }
 
 const SearchBar = ({
@@ -15,19 +16,33 @@ const SearchBar = ({
   handleInputChange,
   searchWord,
   isFilter,
+  hasBooking,
 }: SearchBarProps) => {
+  const [placeholder, setPlaceholder] = useState("예매자를 검색해보세요.");
+
+  const handleFocus = () => {
+    setPlaceholder("2글자 이상 입력해 주세요.");
+  };
+
+  const handleBlur = () => {
+    setPlaceholder("예매자를 검색해보세요.");
+  };
   return (
     <S.SearchBarWrapper>
       <S.SearchBarLayout>
         <S.SearchIcon />
         <S.SearchBar
           type="text"
-          placeholder="예매자를 검색해보세요."
+          placeholder={placeholder}
           value={searchWord}
           onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
         ></S.SearchBar>
       </S.SearchBarLayout>
-      {status === "DEFAULT" && <S.FilterBtn onClick={handleFilterSheet} $isFilter={isFilter} />}
+      {status === "DEFAULT" && hasBooking && (
+        <S.FilterBtn onClick={handleFilterSheet} $isFilter={isFilter} />
+      )}
     </S.SearchBarWrapper>
   );
 };