[Feat/#443] 예매자 관리 페이지 퍼블리싱

src/assets/svgs/BtnFilter.tsx

@@ -0,0 +1,23 @@
+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}>
+    <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"
+    />
+    <path
+      fill="#3E3E3E"
+      fillRule="evenodd"
+      d="M24 47c12.703 0 23-10.297 23-23S36.703 1 24 1 1 11.298 1 24s10.298 23 23 23m0 1c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#F4F4F4"
+      fillRule="evenodd"
+      d="M26.142 18.108a2.93 2.93 0 0 1 4.904 1.322H33.5a.75.75 0 0 1 0 1.5h-2.454a2.94 2.94 0 0 1-.76 1.322 2.932 2.932 0 0 1-4.904-1.322H15a.75.75 0 0 1 0-1.5h10.382a2.93 2.93 0 0 1 .76-1.322m2.072.642a1.43 1.43 0 1 0 0 2.86 1.43 1.43 0 0 0 0-2.86m-11.322 5.965a2.93 2.93 0 0 1 4.904 1.322H33.5a.75.75 0 0 1 0 1.5H21.796a2.93 2.93 0 0 1-5.664 0H15a.75.75 0 0 1 0-1.5h1.132a2.93 2.93 0 0 1 .76-1.322m2.072.642a1.43 1.43 0 1 0 0 2.86 1.43 1.43 0 0 0 0-2.86"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgBtnFilter;

src/assets/svgs/IcDelete.tsx

@@ -1,14 +1,13 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIcDelete = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
-    <circle cx={16} cy={16} r={11} fill="#3E3E3E" />
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>
     <path
-      stroke="#797979"
+      stroke="#939393"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}
-      d="m12 20 4-4 4 4m0-8-4 4-4-4"
+      d="m5 11 3-3 3 3m0-6L8 8 5 5"
     />
   </svg>
 );

src/assets/svgs/IcRefresh.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcRefresh = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" {...props}>
+    <path
+      fill="#F4F4F4"
+      d="M10.999 17.665q-2.792 0-4.73-1.937-1.937-1.937-1.937-4.73 0-2.79 1.938-4.728t4.729-1.938q1.437 0 2.75.593a6.34 6.34 0 0 1 2.25 1.699V5.165q0-.354.24-.593a.8.8 0 0 1 .593-.24q.354 0 .594.24a.8.8 0 0 1 .24.593v4.167q0 .354-.24.594a.8.8 0 0 1-.594.24h-4.167a.8.8 0 0 1-.593-.24.8.8 0 0 1-.24-.594q0-.354.24-.593.24-.24.593-.24h2.667a4.86 4.86 0 0 0-1.823-1.834A4.94 4.94 0 0 0 11 6q-2.085 0-3.542 1.458-1.458 1.458-1.458 3.542t1.458 3.541Q8.915 16 10.999 16q1.416 0 2.594-.719a4.95 4.95 0 0 0 1.822-1.927.9.9 0 0 1 .47-.406.9.9 0 0 1 .614-.01.75.75 0 0 1 .479.437q.146.333-.021.625a6.73 6.73 0 0 1-2.437 2.666q-1.584 1-3.521 1"
+    />
+  </svg>
+);
+export default SvgIcRefresh;

src/assets/svgs/index.tsx

@@ -1,4 +1,5 @@
 export { default as BannerBasic } from "./BannerBasic";
+export { default as BtnFilter } from "./BtnFilter";
 export { default as BtnFloating } from "./BtnFloating";
 export { default as BtnModalDelete } from "./BtnModalDelete";
 export { default as ButtonDelete24 } from "./ButtonDelete24";
@@ -59,8 +60,9 @@ export { default as IconWoochaegook } from "./IconWoochaegook";
 export { default as IconWoori } from "./IconWoori";
 export { default as IconXButton } from "./IconXButton";
 export { default as IcOutlinePlace } from "./IcOutlinePlace";
+export { default as IcRefresh } from "./IcRefresh";
 export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as SelectionControlCheckboxSelectedOff } from "./SelectionControlCheckboxSelectedOff";
 export { default as Subtract } from "./Subtract";
 export { default as Switch } from "./Switch";
-export { default as Union } from "./Union";
+export { default as Union } from "./Union";

src/components/commons/bottomSheet/BottomSheet.styled.ts

@@ -31,8 +31,8 @@ export const BottomSheetLayout = styled.section<{ $paddingTop?: string }>`
   border-radius: 2rem 2rem 0 0;
 `;
 
-export const Title = styled.h1`
-  margin-bottom: 2.8rem;
+export const Title = styled.h1<{ $title?: string }>`
+  margin-bottom: ${({ $title }) => ($title ? "2.8rem" : "0")};
 
   color: ${({ theme }) => theme.colors.white};
   ${({ theme }) => theme.fonts.heading4};

src/components/commons/bottomSheet/BottomSheet.tsx

@@ -13,7 +13,7 @@ const BottomSheet = ({ isOpen, title, paddingTop, children }: BottomSheetPropTyp
   return (
     <S.BottomSheetWrapper $isOpen={isOpen} onClick={(e) => e.stopPropagation()}>
       <S.BottomSheetLayout $paddingTop={paddingTop}>
-        <S.Title>{title}</S.Title>
+        <S.Title $title={title}>{title}</S.Title>
         {children}
       </S.BottomSheetLayout>
     </S.BottomSheetWrapper>

src/pages/ticketholderlist/TicketHolderList.styled.ts

@@ -1,121 +1,38 @@
-import { IconToggleOff, IconToggleOn } from "@assets/svgs";
 import styled from "styled-components";
 
-export const BodyWrapper = styled.div`
+export const TicketHolderListWrpper = styled.section`
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  width: 37.4rem;
-  height: auto;
-  min-height: 60.8rem; /* 60.8rem(body의 높이) +  5.6rem(버튼의 높이) */
-  margin-bottom: 10.4rem;
-  padding: 2.4rem;
-`;
-
-export const BodyLayout = styled.section`
-  display: flex;
-  flex: 1 0 0;
   flex-direction: column;
-  gap: 1.2rem;
-  align-items: flex-start;
+  align-items: center;
+  padding: 0 2.4rem;
 `;
 
-export const LayoutHeaderBox = styled.div`
-  display: flex;
-  gap: 3.2rem;
-  align-items: flex-end;
-  align-self: stretch;
-`;
+export const TitleSticky = styled.section`
+  position: sticky;
+  top: 5.6rem;
 
-export const LayoutFilterBox = styled.div`
-  display: flex;
-  gap: 0.6rem;
-  align-items: center;
+  background-color: ${({ theme }) => theme.colors.gray_900};
 `;
 
-export const ToggleWrapper = styled.div`
+export const ManageCardList = styled.section`
   display: flex;
-  gap: 0.4rem;
-  align-items: center;
-`;
-
-export const ToggleText = styled.span`
-  color: ${({ theme }) => theme.colors.gray_400};
-  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+  flex-direction: column;
+  gap: 1.2rem;
 `;
 
-export const ToggleButton = styled.button<{ $detail: boolean }>`
-  position: relative;
+export const ManageCardContainer = styled.section`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 5.6rem;
-  height: 3.3rem;
-
-  background-color: ${({ theme, $detail }) =>
-    $detail ? theme.colors.pink_500 : theme.colors.gray_700};
-  cursor: pointer;
-  border: none;
-  border-radius: 36px;
-`;
-
-export const Circle = styled.span<{ $detail: boolean }>`
-  position: absolute;
-  top: 50%;
-  left: ${({ $detail }) => ($detail ? "4rem" : "1.6rem")};
-  width: 2.7rem;
-  height: 2.7rem;
-
-  background-color: ${({ theme }) => theme.colors.white};
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-
-  transition: left 0.25s ease-in-out; /* left 속성은 변하게 된다면 이 애니메이션 적용 */
-`;
-
-export const ToggleOnIcon = styled(IconToggleOn)<{ $width: string; $height: string }>`
-  width: ${({ $width }) => $width};
-  height: ${({ $height }) => $height};
-`;
-
-export const ToggleOffIcon = styled(IconToggleOff)<{ $width: string; $height: string }>`
-  width: ${({ $width }) => $width};
-  height: ${({ $height }) => $height};
-`;
-
-export const FooterButtonText = styled.span`
-  margin-top: 2.4rem;
-
-  color: ${({ theme }) => theme.colors.gray_200};
-  text-align: center;
-  ${({ theme }) => theme.fonts["body2-normal-semi"]};
+  width: 100%;
 `;
 
 export const FooterButtonWrapper = styled.div`
-  position: fixed;
+  position: sticky;
   bottom: 0;
-  left: 50%;
   z-index: 1;
   display: flex;
-  flex-direction: column;
-  gap: 2.4rem;
-  align-items: center;
-  width: 37.4rem;
-  min-height: 13.8rem;
+  min-height: 10.4rem;
+  padding-top: 2.4rem;
 
   background-color: ${({ theme }) => theme.colors.gray_900};
-  transform: translate(-50%, 0);
-  border-top: 1px solid #3e3e3e;
-`;
-
-export const MarginBottom = styled.div<{ $value: string }>`
-  margin-bottom: ${({ $value }) => $value};
-`;
-
-export const TwoButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 1.1rem;
-  align-items: flex-start;
-  justify-content: center;
 `;