Merge branch 'develop' of https://github.com/TEAM-BEAT/BEAT-Client into feat/#338/CarouselSlide

Author: sinji2102

api/hi.ts

@@ -0,0 +1,8 @@
+export async function GET(request) {
+  console.log("hi im test");
+
+  return new Response(JSON.stringify({ message: "Hi from the server!" }), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+}

api/prerender.ts

@@ -0,0 +1,56 @@
+import Prerenderer from "@prerenderer/prerenderer";
+import PuppeteerRenderer from "@prerenderer/renderer-puppeteer";
+import chromium from "@sparticuz/chromium-min";
+
+export async function POST(req: Request, res) {
+  console.log("req is: ", req);
+
+  try {
+    const body = await readBody(req);
+
+    const { performanceId } = body;
+    console.log("performanceId is: ", performanceId);
+
+    const chromePath =
+      process.env.VITE_CHROME_PATH ||
+      (await chromium.executablePath(
+        "https://github.com/Sparticuz/chromium/releases/download/v121.0.0/chromium-v121.0.0-pack.tar"
+      ));
+
+    // 프리렌더 작업 수행
+    const prerenderer = new Prerenderer({
+      staticDir: __dirname, // 정적 파일이 있는 디렉터리 경로
+      renderer: new PuppeteerRenderer({
+        launchOptions: {
+          args: ["--no-sandbox", "--disable-setuid-sandbox"],
+          ignoreDefaultArgs: ["--disable-extensions"],
+          defaultViewport: chromium.defaultViewport,
+          executablePath: chromePath,
+          ignoreHTTPSErrors: true,
+          headless: chromium.headless,
+        },
+        maxConcurrentRoutes: 1,
+        renderAfterTime: 500,
+      }),
+    });
+
+    await prerenderer.initialize();
+    await prerenderer.renderRoutes([`/gig/${performanceId}`]);
+    await prerenderer.destroy();
+
+    res.status(200).json({ message: "Prerender complete", performanceId });
+  } catch (error) {
+    console.error("Error during prerendering:", error);
+    res.status(500).json({ message: "Error during prerendering", error });
+  }
+}
+
+// Request body를 JSON으로 파싱하는 유틸리티 함수
+async function readBody(req) {
+  const chunks = [];
+  for await (const chunk of req) {
+    chunks.push(chunk);
+  }
+  const buffer = Buffer.concat(chunks).toString();
+  return JSON.parse(buffer);
+}

public/svgs/not_found_asset.svg

@@ -0,0 +1,8 @@
+export async function GET(request) {
+  console.log("hello im test");
+
+  return new Response(JSON.stringify({ message: "Hello from the server!" }), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+}

src/api/hello.ts

@@ -141,7 +141,7 @@ export const usePostPerformance = () => {
 
   return useMutation({
     mutationFn: (formData: PerformanceFormData) => postPerformance(formData),
-    onSuccess: (res) => {
+    onSuccess: async (res) => {
       queryClient.invalidateQueries({
         queryKey: [HOME_QUERY_KEY.LIST, PERFORMANCE_QUERY_KEY.DETAIL],
       });
@@ -152,11 +152,29 @@ export const usePostPerformance = () => {
       });
 
       if (isPerformanceResponse(res) && res.status === 201) {
+        // 프리렌더 작업 수행
+        const prerenderResponse = await fetch(`${import.meta.env.VITE_CLIENT_URL}/api/prerender`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ performanceId: res.data.performanceId }),
+        });
+
+        console.log("prerenderResponse is: ", prerenderResponse);
+
+        if (prerenderResponse.ok) {
+          console.log("Prerender successful");
+        } else {
+          console.error("Prerender failed");
+        }
+
+        // 등록 완료 페이지로 이동
         navigate("/register-complete", {
           state: { performanceId: res.data.performanceId },
         });
       } else {
-        console.error("Unexpected response type", res);
+        console.error("Performance creation failed:", res);
       }
     },
   });

src/apis/domains/performances/queries.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/apis/domains/tickets/api.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgNotFoundAsset = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 150 109" {...props}>
+    <path
+      fill="url(#not_found_asset_svg__a)"
+      d="m60.984 58.346-12.13-38.629L42.907 0l-5.799 19.998-14.514 57.484-8.474-19.136H-10V69.25H7.975l9.403 21.365L26.25 109l5.467-20.355 11.975-45.206 8.102 25.81H166V58.347z"
+    />
+    <defs>
+      <linearGradient
+        id="not_found_asset_svg__a"
+        x1={78}
+        x2={78}
+        y1={0}
+        y2={109}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FF006B" />
+        <stop offset={1} stopColor="#252525" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default SvgNotFoundAsset;

src/assets/svgs/NotFoundAsset.tsx

@@ -4,6 +4,7 @@ export { default as ButtonDelete24 } from "./ButtonDelete24";
 export { default as CarouselPartInactive } from "./CarouselPartInactive";
 export { default as Empty } from "./Empty";
 export { default as IcHamburgar } from "./IcHamburgar";
+export { default as IcOutlinePlace } from "./IcOutlinePlace";
 export { default as IcomCopy } from "./IcomCopy";
 export { default as IconArrowDown } from "./IconArrowDown";
 export { default as IconArrowLeft } from "./IconArrowLeft";
@@ -54,6 +55,6 @@ 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 IcOutlinePlace } from "./IcOutlinePlace";
+export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as Subtract } from "./Subtract";
 export { default as Union } from "./Union";

src/assets/svgs/index.tsx

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

@@ -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/components/commons/label/Labal.tsx src/components/commons/label/Label.tsx

@@ -8,13 +8,14 @@ import {
   useGetScheduleAvailable,
 } from "@apis/domains/performances/queries";
 import { Button, Context, Loading, OuterLayout, ViewBottomSheet } from "@components/commons";
+import MetaTag from "@components/commons/meta/MetaTag";
 import { NAVIGATION_STATE } from "@constants/navigationState";
 import { useHeader, useLogin, useModal } from "@hooks";
 import { BookerInfo, Count, EasyPassEntry, Info, Select, TermCheck } from "@pages/book/components";
 import { SHOW_TYPE_KEY } from "@pages/gig/constants";
+import NotFound from "@pages/notFound/NotFound";
 import * as S from "./Book.styled";
 import { getScheduleNumberById } from "./utils";
-import MetaTag from "@components/commons/meta/MetaTag";
 
 const Book = () => {
   const navigate = useNavigate();
@@ -26,6 +27,24 @@ const Book = () => {
   const { isLogin } = useLogin();
   const { setHeader } = useHeader();
 
+  useEffect(() => {
+    if (data) {
+      const nowDate = new Date();
+      const lastPerformanceDate = new Date(
+        data.scheduleList[data?.scheduleList.length - 1].performanceDate
+      );
+      if (nowDate > lastPerformanceDate) {
+        openAlert({
+          title: "종료된 공연입니다.",
+          okText: "확인",
+          okCallback: () => {
+            navigate("/main");
+          },
+        });
+      }
+    }
+  }, [data]);
+
   useEffect(() => {
     setHeader({
       headerStyle: NAVIGATION_STATE.ICON_TITLE_SUB_TEXT,
@@ -160,12 +179,8 @@ const Book = () => {
         bookerPhoneNumber: bookerInfo.bookerPhoneNumber,
       } as GuestBookingRequest;
 
-      console.log(formData);
-
       const res = await memberBook(formData);
 
-      console.log(res);
-
       navigate("/book/complete", {
         state: {
           id: performanceId,
@@ -206,9 +221,15 @@ const Book = () => {
     }
   }, [isLogin, selectedValue, bookerInfo, easyPassword, isTermChecked]);
 
-  return isLoading ? (
-    <Loading />
-  ) : (
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (!data) {
+    return <NotFound />;
+  }
+
+  return (
     <S.ContentWrapper>
       <MetaTag title="공연 예매" />
       {isPending && <Loading />}

src/pages/book/Book.tsx

@@ -12,13 +12,11 @@ export const InfoTop = styled.div`
   display: flex;
 `;
 
-export const InfoPoster = styled.img<{ $imgsrc: string }>`
+export const InfoPoster = styled.img`
   width: 9.5rem;
   height: 12.8rem;
   margin-right: 1.4rem;
 
-  background-image: url(${({ $imgsrc }) => $imgsrc});
-  background-size: 100% 100%;
   border-radius: 4px;
 `;
 

src/pages/book/components/info/Info.styled.ts

@@ -20,7 +20,7 @@ const Info = ({ genre, title, posterImage, teamName, venue, period }: InfoProps)
   return (
     <S.InfoContainer>
       <S.InfoTop>
-        <S.InfoPoster $imgsrc={posterImage} />
+        <S.InfoPoster src={posterImage} />
 
         <S.InfoTextBox>
           <ShowType type={getShowTypeText(genre)} />

src/pages/book/components/info/Info.tsx

@@ -1,8 +1,10 @@
 import { useGetPerformanceDetail } from "@apis/domains/performances/queries";
 import { ActionBottomSheet, Button, Loading } from "@components/commons";
 import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
+import MetaTag from "@components/commons/meta/MetaTag";
 import { NAVIGATION_STATE } from "@constants/navigationState";
 import { useHeader, useLogin } from "@hooks";
+import NotFound from "@pages/notFound/NotFound";
 import { navigateAtom } from "@stores";
 import { requestKakaoLogin } from "@utils/kakaoLogin";
 import { useAtom } from "jotai";
@@ -12,7 +14,6 @@ import Content from "./components/content/Content";
 import ShowInfo from "./components/showInfo/ShowInfo";
 import { SHOW_TYPE_KEY } from "./constants";
 import * as S from "./Gig.styled";
-import MetaTag from "@components/commons/meta/MetaTag";
 
 const Gig = () => {
   const navigate = useNavigate();
@@ -25,12 +26,18 @@ const Gig = () => {
 
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
+  const nowDate = new Date();
+  const lastPerformanceDate = new Date(
+    data?.scheduleList[data?.scheduleList.length - 1]?.performanceDate
+  );
+  // 현재 시간이 마지막 공연 시간보다 크면 예매 버튼 비활성화
+  const isBookDisabled = nowDate > lastPerformanceDate;
+
   const handleBookClick = () => {
     if (isLogin) {
       navigate(`/book/${performanceId}`);
       return;
     }
-
     setIsSheetOpen(true);
   };
 
@@ -44,19 +51,25 @@ const Gig = () => {
   };
 
   useEffect(() => {
-    setHeader({
-      headerStyle: NAVIGATION_STATE.ICON_TITLE,
-      title: data?.performanceTitle,
-      leftOnClick: () => {
-        navigate("/main");
-      },
-    });
+    if (data) {
+      setHeader({
+        headerStyle: NAVIGATION_STATE.ICON_TITLE,
+        title: data?.performanceTitle,
+        leftOnClick: () => {
+          navigate("/main");
+        },
+      });
+    }
   }, [data]);
 
   if (isLoading) {
     return <Loading />;
   }
 
+  if (!data) {
+    return <NotFound />;
+  }
+
   return (
     <S.ContentWrapper>
       <MetaTag
@@ -86,7 +99,9 @@ const Gig = () => {
         staffList={data?.staffList ?? []}
       />
       <S.FooterContainer>
-        <Button onClick={handleBookClick}>예매하기</Button>
+        <Button onClick={handleBookClick} disabled={isBookDisabled}>
+          {isBookDisabled ? "종료된 공연은 예매할 수 없습니다." : "예매하기"}
+        </Button>
       </S.FooterContainer>
 
       <ActionBottomSheet