[Feat/#321] 등록한 공연 목록 중 종료된 공연 라벨링

src/apis/domains/tickets/api.ts

@@ -49,7 +49,7 @@ export const putTicketUpdate = async (
 ): Promise<SuccessResponseVoid | null> => {
   try {
     const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await put(
-      `tickets/${formData.performanceId}`,
+      "tickets",
       formData
     );
 
@@ -70,7 +70,7 @@ export const deleteTicketDelete = async (
   // console.log("fromdata", formData);
   try {
     const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await del(
-      `tickets/${formData.performanceId}`,
+      "tickets",
       //DELETE요청의 경우 두번째 인자가 좀 다름. - config 파일을 넣어야 함
       { data: formData }
     );

src/components/commons/index.ts

@@ -14,7 +14,7 @@ export { default as ContextBox } from "./contextBox/ContextBox.tsx";
 export { default as Hamburger } from "./hamburger/Hamburger.tsx";
 export { default as TextArea } from "./input/textArea/TextArea.tsx";
 export { default as TextField } from "./input/textField/TextField.tsx";
-export { default as Labal } from "./label/Labal.tsx";
+export { default as Label } from "./label/Label.tsx";
 export { default as Loading } from "./loading/Loading.tsx";
 export { default as Alert } from "./modal/Alert.tsx";
 export { default as ModalTextBox } from "./modal/components/ModalTextBox.tsx";

src/components/commons/label/Label.styled.ts

@@ -1,5 +1,5 @@
-import styled from "styled-components";
 import { Subtract } from "@assets/svgs";
+import styled from "styled-components";
 
 export const LabelWrapper = styled.section`
   position: absolute;

src/components/commons/label/Labal.tsx → src/components/commons/label/Label.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from "react";
 import * as S from "./Label.styled";
 
 interface LabelProps {
   dueDate: number;
 }
 
-const Labal = ({ dueDate }: LabelProps) => {
+const Label = ({ dueDate }: LabelProps) => {
   return (
     <S.LabelWrapper>
       {dueDate === 0 && (
@@ -31,4 +30,4 @@ const Labal = ({ dueDate }: LabelProps) => {
   );
 };
 
-export default Labal;
+export default Label;

src/pages/lookup/components/LookupWrapper.tsx

@@ -1,8 +1,8 @@
 import * as S from "./LookupWrapper.styled";
 
 import Button from "@components/commons/button/Button";
+import Label from "@components/commons/label/Label";
 import LookupCard from "./LookupCard";
-import Labal from "@components/commons/label/Labal";
 
 import { LookupProps } from "../types/lookupType";
 
@@ -12,7 +12,7 @@ const LookupWrapper = ({ handleBtn, ...item }: LookupProps) => {
       <S.LookupContainer>
         <S.LookupCardLeft>
           <S.LookupImage src={item.posterImage} />
-          <Labal dueDate={item.dueDate} />
+          <Label dueDate={item.dueDate} />
           <Button variant="line" size="xsmall" onClick={handleBtn}>
             취소하기
           </Button>

src/pages/main/components/performance/PerformnaceCard.tsx

@@ -1,7 +1,7 @@
-import * as S from "./Performance.Cardstyled";
 import { useNavigate } from "react-router-dom";
+import * as S from "./Performance.Cardstyled";
 
-import Labal from "@components/commons/label/Labal";
+import Label from "@components/commons/label/Label";
 
 const PerformnaceCard = ({ ...item }) => {
   const navigate = useNavigate();
@@ -15,7 +15,7 @@ const PerformnaceCard = ({ ...item }) => {
     >
       <S.PerformanceImg src={item.posterImage} />
 
-      <Labal dueDate={item.dueDate} />
+      <Label dueDate={item.dueDate} />
       <S.PerformanceTitleWrapper>
         <S.PerformanceTitle>{item.performanceTitle}</S.PerformanceTitle>
         <S.PerformancePeriod>{item.performancePeriod}</S.PerformancePeriod>

src/pages/myRegisterdShow/MyRegisterdShow.tsx

@@ -1,5 +1,6 @@
 import { useMakerPerformance } from "@apis/domains/performances/queries";
 import Button from "@components/commons/button/Button";
+import MetaTag from "@components/commons/meta/MetaTag";
 import { NAVIGATION_STATE } from "@constants/navigationState";
 import { useHeader } from "@hooks";
 import { components } from "@typings/api/schema";
@@ -9,7 +10,6 @@ import bannerNarrow from "../../assets/images/banner_narrow.png";
 import * as S from "./MyRegisterdShow.styled";
 import RegisteredCard from "./components/registeredcard/RegisteredCard";
 import { RegisteredObjProps } from "./constants/myRegisterShow";
-import MetaTag from "@components/commons/meta/MetaTag";
 const MyRegisterdShow = () => {
   const { setHeader } = useHeader();
   const navigate = useNavigate();

src/pages/myRegisterdShow/components/registeredcard/RegisteredCard.styled.ts

@@ -9,6 +9,7 @@ export const CardWrapper = styled.article`
 `;
 
 export const CardImg = styled.div<{ imgsrc: string }>`
+  position: relative;
   width: 10.8rem;
   height: 15.4rem;
 

src/pages/myRegisterdShow/components/registeredcard/RegisteredCard.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/commons/button/Button";
+import Label from "@components/commons/label/Label";
 import { SHOW_TYPE, SHOW_TYPE_KEY, ShowTypes } from "@pages/gig/constants";
 import { useNavigate } from "react-router-dom";
 import { RegisteredObjProps } from "../../constants/myRegisterShow";
@@ -25,39 +26,69 @@ const RegisteredCard = ({
 
   const getShowTypeText = (key: SHOW_TYPE_KEY): ShowTypes => SHOW_TYPE[key];
 
+  const calculateDueDate = (dateString: string): number => {
+    //문자열이 ~ 를 포함하는지 확인 (즉, 단일 문자인지 아닌지 확인)
+    const endDateString = dateString.includes("~")
+      ? dateString.split("~")[1].trim()
+      : dateString.trim();
+
+    //해당 날짜를 표준 형식(YYYY-MM-DD) 형식으로 변환 (물론 YYYY.MM.DD도 인식되긴 함 -표준은 아님)
+    const [year, month, day] = endDateString.split(".").map(Number); //숫자로 저장
+    const endDate = new Date(year, month - 1, day); //month는 0부터 시작하므로 -1 해줌
+
+    //현재 시간을 얻은 뒤, 밀리초 계산은 배제하기 위해 연,월,일로 현재 날짜의 Date 객체 재생성
+    const nowDate = new Date();
+    const nowYear = nowDate.getFullYear();
+    const nowMonth = nowDate.getMonth();
+    const nowDay = nowDate.getDate(); //getDay는 요일을 반환하는거니까, 헷갈리지 말자 !!
+    const startDate = new Date(nowYear, nowMonth, nowDay);
+
+    const timeDiff = endDate.getTime() - startDate.getTime();
+
+    //계산값을 일 단위로 변환(floor를 이용해 내림)
+    const dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
+    return dayDiff;
+  };
+
+  const dueDate = calculateDueDate(performancePeriod);
   return (
-    <S.CardWrapper>
-      <S.CardImg
-        imgsrc={posterImage ?? ""}
-        onClick={() => {
-          navigate(`/gig/${performanceId}`);
-        }}
-      />
-      <S.CardInfo>
-        <S.CardInfoTextBox
+    <>
+      <S.CardWrapper>
+        <S.CardImg
+          imgsrc={posterImage ?? ""}
           onClick={() => {
             navigate(`/gig/${performanceId}`);
           }}
         >
-          <S.CardInfoTextTitleBox>
-            <S.CardInfoGenreText>{getShowTypeText(genre as SHOW_TYPE_KEY)}</S.CardInfoGenreText>
-            <S.CardInfoTitleText>{performanceTitle}</S.CardInfoTitleText>
-          </S.CardInfoTextTitleBox>
+          <Label dueDate={dueDate} />
+        </S.CardImg>
+
+        <S.CardInfo>
+          <S.CardInfoTextBox
+            onClick={() => {
+              navigate(`/gig/${performanceId}`);
+            }}
+          >
+            <S.CardInfoTextTitleBox>
+              <S.CardInfoGenreText>{getShowTypeText(genre as SHOW_TYPE_KEY)}</S.CardInfoGenreText>
+              <S.CardInfoTitleText>{performanceTitle}</S.CardInfoTitleText>
+            </S.CardInfoTextTitleBox>
 
-          <S.CardInfoPeriodBox>{performancePeriod}</S.CardInfoPeriodBox>
-        </S.CardInfoTextBox>
-        <S.CardInfoButtonBoxWrapper>
-          <S.CardInfoButtonBox>
-            <Button onClick={handleModifiyBtn} size="xsmall" variant="gray" disabled={false}>
-              공연정보 수정
-            </Button>
-            <Button onClick={handleGuestListBtn} size="xsmall" variant="line" disabled={false}>
-              예매자 관리
-            </Button>
-          </S.CardInfoButtonBox>
-        </S.CardInfoButtonBoxWrapper>
-      </S.CardInfo>
-    </S.CardWrapper>
+            <S.CardInfoPeriodBox>{performancePeriod}</S.CardInfoPeriodBox>
+          </S.CardInfoTextBox>
+          <S.CardInfoButtonBoxWrapper>
+            <S.CardInfoButtonBox>
+              <Button onClick={handleModifiyBtn} size="xsmall" variant="gray" disabled={false}>
+                공연정보 수정
+              </Button>
+              <Button onClick={handleGuestListBtn} size="xsmall" variant="line" disabled={false}>
+                예매자 관리
+              </Button>
+            </S.CardInfoButtonBox>
+          </S.CardInfoButtonBoxWrapper>
+        </S.CardInfo>
+      </S.CardWrapper>
+    </>
   );
 };