feat: chip 생성 및 자잘한 수정사항 반영

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/index.ts

@@ -0,0 +1,66 @@
+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";
+export { default as CarouselPartInactive } from "./CarouselPartInactive";
+export { default as Empty } from "./Empty";
+export { default as IcomCopy } from "./IcomCopy";
+export { default as IconArrowLeft } from "./IconArrowLeft";
+export { default as IconArrowRight } from "./IconArrowRight";
+export { default as IconArrowDown } from "./IconArrowDown";
+export { default as IconArrowUp } from "./IconArrowUp";
+export { default as IconBnk } from "./IconBnk";
+export { default as IconCalendar } from "./IconCalendar";
+export { default as IconCamera } from "./IconCamera";
+export { default as IconCheckboxDisabledOn } from "./IconCheckboxDisabledOn";
+export { default as IconCheckboxSelectedOn } from "./IconCheckboxSelectedOn";
+export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn";
+export { default as IconCheck } from "./IconCheck";
+export { default as IconChevronBack } from "./IconChevronBack";
+export { default as IconEmpty } from "./IconEmpty";
+export { default as IconEyeOff } from "./IconEyeOff";
+export { default as IconEyeOn } from "./IconEyeOn";
+export { default as IconFooterLogo } from "./IconFooterLogo";
+export { default as IconHanna } from "./IconHanna";
+export { default as IconIbk } from "./IconIbk";
+export { default as IconIm } from "./IconIm";
+export { default as IconImg } from "./IconImg";
+export { default as IconKabank } from "./IconKabank";
+export { default as IconKb } from "./IconKb";
+export { default as IconLargeBand } from "./IconLargeBand";
+export { default as IconLargeDance } from "./IconLargeDance";
+export { default as IconLargeEtc } from "./IconLargeEtc";
+export { default as IconLargeMusical } from "./IconLargeMusical";
+export { default as IconLogo } from "./IconLogo";
+export { default as IconMinus } from "./IconMinus";
+export { default as IconNonghyup } from "./IconNonghyup";
+export { default as IconPhotoDelete } from "./IconPhotoDelete";
+export { default as IconPlus } from "./IconPlus";
+export { default as IconProfile } from "./IconProfile";
+export { default as IconRoleAdd } from "./IconRoleAdd";
+export { default as IconSaemauel } from "./IconSaemauel";
+export { default as IconSc } from "./IconSc";
+export { default as IconShinhan } from "./IconShinhan";
+export { default as IconShinhyup } from "./IconShinhyup";
+export { default as IconSmallBand } from "./IconSmallBand";
+export { default as IconSmallDance } from "./IconSmallDance";
+export { default as IconSmallEtc } from "./IconSmallEtc";
+export { default as IconSmallMusical } from "./IconSmallMusical";
+export { default as IconSoohyup } from "./IconSoohyup";
+export { default as IconTextfiedlDelete } from "./IconTextfiedlDelete";
+export { default as IconTime } from "./IconTime";
+export { default as IconToggleOff } from "./IconToggleOff";
+export { default as IconToggleOn } from "./IconToggleOn";
+export { default as IconToss } from "./IconToss";
+export { default as IconWoochaegook } from "./IconWoochaegook";
+export { default as IconWoori } from "./IconWoori";
+export { default as IconXButton } from "./IconXButton";
+export { default as IcDelete } from "./IcDelete";
+export { default as IcHamburgar } from "./IcHamburgar";
+export { default as IcOutlinePlace } from "./IcOutlinePlace";
+export { default as IcRefresh } from "./IcRefresh";
+export { default as NotFoundAsset } from "./NotFoundAsset";
+export { default as Subtract } from "./Subtract";
+export { default as Switch } from "./Switch";
+export { default as Union } from "./Union";

src/pages/ticketholderlist/TicketHolderList.tsx

@@ -14,8 +14,9 @@ import SearchBar from "./components/searchBar/SearchBar";
 import MenuBottomsheet from "./components/MenuBottomSheet/MenuBottomsheet";
 import FilterBottomSheet from "./components/FilterBottomSheet/FilterBottomSheet";
 import { BookingListProps } from "@pages/ticketholderlist/types/bookingListType";
-import { ManageCard } from "./components/magageCard";
+import { ManageCard } from "./components/manageCard";
 import { getBankNameKr } from "@utils/getBankName";
+import SelectedChips from "./components/selectedChips/SelectedChips";
 
 const data = {
   performanceTitle: "비트밴드 정기공연",
@@ -284,6 +285,7 @@ const TicketHolderList = () => {
               />
               <Spacing marginBottom={"2.6"} />
               <SearchBar handleFilter={handleFilter} status={status} />
+              <SelectedChips />
               <Spacing marginBottom={"1.6"} />
             </S.TitleSticky>
 

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

@@ -124,6 +124,7 @@ const FilterBottomSheet = ({
           </S.CheckBoxRow>
         </S.CheckBoxContainer>
         <Spacing marginBottom="3.2" />
+        {/* TODO : 선택된 내역 없을 때 버튼 비활성화 하기 */}
         <Button onClick={handleCilckBtn}>적용하기</Button>
       </BottomSheet>
     </S.FilterBottomSheetWrapper>

src/pages/ticketholderlist/components/magageCard/ManageCardContainer.styled.ts → src/pages/ticketholderlist/components/manageCard/ManageCardContainer.styled.ts

@@ -57,12 +57,29 @@ export const TextContainer = styled.section`
   gap: 0.4rem;
 `;
 
-export const InfoText = styled.div`
+export const InfoText = styled.div<{ $status: string }>`
   ${({ theme }) => theme.fonts["body2-normal-medi"]};
   color: ${({ theme }) => theme.colors.white};
+
+  ${({ $status }) => {
+    if ($status === "취소 완료") {
+      return css`
+        color: ${({ theme }) => theme.colors.gray_400};
+        text-decoration: line-through;
+      `;
+    }
+  }}
 `;
 
-export const DateText = styled.div`
+export const DateText = styled.div<{ $status: string }>`
   ${({ theme }) => theme.fonts["caption1-medi"]};
-  color: ${({ theme }) => theme.colors.gray_400};
+  color: ${({ theme }) => theme.colors.gray_500};
+
+  ${({ $status }) => {
+    if ($status === "취소 완료") {
+      return css`
+        color: ${({ theme }) => theme.colors.gray_600};
+      `;
+    }
+  }}
 `;

src/pages/ticketholderlist/components/magageCard/ManageCardContainer.tsx → src/pages/ticketholderlist/components/manageCard/ManageCardContainer.tsx

@@ -23,13 +23,13 @@ export default function ManageCardContainer({
     <S.ManageCardWrapper>
       <S.InfoBox>
         <S.TextContainer>
-          <S.InfoText>
+          <S.InfoText $status={status}>
             {name} ({phoneNumber})
           </S.InfoText>
-          <S.InfoText>
+          <S.InfoText $status={status}>
             {scheduleId}회차 / {ticketCount}매
           </S.InfoText>
-          <S.DateText>{date}</S.DateText>
+          <S.DateText $status={status}>{date}</S.DateText>
         </S.TextContainer>
       </S.InfoBox>
       <S.StatusBox $status={status}>{status}</S.StatusBox>

src/pages/ticketholderlist/components/searchBar/SearchBar.styled.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { BtnFilter } from "@assets/svgs";
 
 export const SearchBarWrapper = styled.section`
   display: flex;
@@ -21,8 +22,7 @@ export const SearchBar = styled.input`
   border-radius: 4rem;
 `;
 
-// 찌그러지는 거 수정하기
-export const FilterBtn = styled.button`
+export const FilterBtn = styled(BtnFilter)`
   width: 4.8rem;
   height: 4.8rem;
   margin-left: 1.2rem;

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

@@ -6,6 +6,7 @@ interface SearchBarProps {
   handleFilter: () => void;
 }
 
+// TODO: 필터 적용되었을 때 아웃라인 색상 적용 -> 기능 붙일 때 같이 하기
 const SearchBar = ({ handleFilter, status }: SearchBarProps) => {
   return (
     <S.SearchBarWrapper>

src/pages/ticketholderlist/components/selectedChips/SelectedChips.styled.ts

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import { IcDelete } from "@assets/svgs";
+
+export const SelectedChipsWrapper = styled.section`
+  display: flex;
+  gap: 0.8rem;
+  width: 32.7rem;
+  overflow-x: scroll;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  white-space: nowrap;
+`;
+
+export const Chip = styled.section`
+  display: flex;
+  gap: 0.2rem;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  margin-top: 1.6rem;
+  padding: 0.8rem 1.2rem;
+
+  ${({ theme }) => theme.fonts["body2-normal-medi"]};
+  color: ${({ theme }) => theme.colors.gray_200};
+
+  border: 0.1rem solid;
+  border-color: ${({ theme }) => theme.colors.gray_700};
+  border-radius: 9.9rem;
+`;
+
+// delete icon 확인하기
+export const DeleteIcon = styled(IcDelete)`
+  width: 1.6rem;
+  height: 1.6rem;
+`;

src/pages/ticketholderlist/components/selectedChips/SelectedChips.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as S from "./SelectedChips.styled";
+
+const SelectedChips = () => {
+  // TODO: delteIcon에 삭제 기능 추가하기
+  const handleClickDelete = () => {};
+
+  return (
+    // TODO : 선택된 필터 props로 받아서 map 돌리기
+    <S.SelectedChipsWrapper>
+      <S.Chip>
+        1회차
+        <S.DeleteIcon onClick={handleClickDelete} />
+      </S.Chip>
+    </S.SelectedChipsWrapper>
+  );
+};
+
+export default SelectedChips;

src/pages/ticketholderlist/components/title/Title.styled.ts

@@ -6,8 +6,14 @@ export const TitleWrapper = styled.section`
 `;
 
 export const PerformanceTeamName = styled.div`
+  display: inline;
+  width: 32.7rem;
+  overflow: hidden;
+
   ${({ theme }) => theme.fonts["caption1-semi"]};
   color: ${({ theme }) => theme.colors.gray_400};
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const PerformanceTitleWrapper = styled.section`
@@ -16,13 +22,15 @@ export const PerformanceTitleWrapper = styled.section`
   width: 32.8rem;
 `;
 
-// TODO : 말줄임표 작업
 export const PerformanceTitle = styled.div`
-  display: flex;
+  display: inline;
   width: 25.8rem;
+  overflow: hidden;
 
   ${({ theme }) => theme.fonts.heading2};
   color: ${({ theme }) => theme.colors.white};
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const TicketCountWrapper = styled.section`