Merge branch 'main' into feat/#72_qa/1-issue

kusitms-com · Nov 28, 2024 · 5fefbb8 · 5fefbb8
2 parents 9b25246 + a43e71c
commit 5fefbb8
Show file tree

Hide file tree

Showing 11 changed files with 255 additions and 109 deletions.
diff --git a/src/apis/useGetShowPosterUrl.ts b/src/apis/useGetShowPosterUrl.ts
@@ -0,0 +1,24 @@
+import client from "./client";
+
+export type ShowPosterUrlResponse = {
+  code: string;
+  message: string;
+  result: string;
+  refreshed: boolean;
+};
+
+const useGetShowPoster = async (
+  KopisURL: string,
+): Promise<ShowPosterUrlResponse> => {
+  try {
+    const response = await client.get<ShowPosterUrlResponse>(
+      `/concerts/posters?KopisURL=${encodeURIComponent(KopisURL)}`,
+    );
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export default useGetShowPoster;
diff --git a/src/assets/lotties/onboarding-loading.json b/src/assets/lotties/onboarding-loading.json
@@ -1,16 +1,16 @@
 {
   "assets": [
-    { "h": 339, "id": "0", "p": "MagnifierBackground.png", "u": "/src/assets/images/", "w": 344, "e": 0 },
-    { "h": 170, "id": "1", "p": "delicate.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "2", "p": "dynamic.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "3", "p": "familiar.png", "u": "/src/assets/images/Genre/", "w": 168, "e": 0 },
-    { "h": 170, "id": "4", "p": "grand.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "5", "p": "lyrical.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "6", "p": "modern.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "7", "p": "novel.png", "u": "/src/assets/images/Genre/", "w": 168, "e": 0 },
-    { "h": 170, "id": "8", "p": "romantic.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "9", "p": "tragic.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
-    { "h": 170, "id": "10", "p": "classical.png", "u": "/src/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 339, "id": "0", "p": "MagnifierBackground.png", "u": "/dist/assets/images/", "w": 344, "e": 0 },
+    { "h": 170, "id": "1", "p": "delicate.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "2", "p": "dynamic.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "3", "p": "familiar.png", "u": "/dist/assets/images/Genre/", "w": 168, "e": 0 },
+    { "h": 170, "id": "4", "p": "grand.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "5", "p": "lyrical.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "6", "p": "modern.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "7", "p": "novel.png", "u": "/dist/assets/images/Genre/", "w": 168, "e": 0 },
+    { "h": 170, "id": "8", "p": "romantic.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "9", "p": "tragic.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
+    { "h": 170, "id": "10", "p": "classical.png", "u": "/dist/assets/images/Genre/", "w": 170, "e": 0 },
     {
       "id": "17",
       "layers": [

diff --git a/src/components/Mypage/LikedShow/index.tsx b/src/components/Mypage/LikedShow/index.tsx
@@ -2,7 +2,7 @@ import { SearchBar } from "@/components/common/Search/Bar";
 import { ShowFilterTab } from "@/components/common/ShowFilterTab";
 import { ShowSummaryCard } from "@/components/common/ShowSummaryCard";
 import { useEffect, useState } from "react";
-import { useDebouncedState } from "@/hooks/utils";
+import { useDebouncedState, useDeferredLoading } from "@/hooks/utils";
 import { TabMenu } from "@/types";
 import { useGetConcertLikes } from "@/hooks/queries";
 
@@ -16,6 +16,8 @@ export const LikedShow = () => {
     genre: activeTab || "",
   });
 
+  const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setQuery(e.target.value.trim());
   };
@@ -29,8 +31,28 @@ export const LikedShow = () => {
     refetch();
   }, [debouncedQuery, activeTab, refetch]);
 
-  if (isLoading) {
-    return <div>로딩 중...</div>;
+  if (shouldShowSkeleton) {
+    return (
+      <div className="relative w-full">
+        <ShowFilterTab
+          activeTab={activeTab}
+          onTabClick={handleTabClick}
+          className="mb-[19px]"
+        />
+        <div className="relative w-full mb-[22px]">
+          <SearchBar
+            value={query}
+            onChange={handleSearchChange}
+            placeholder={"공연 이름을 검색해주세요"}
+          />
+        </div>
+        <div className="flex flex-col gap-[22px]">
+          {Array.from(Array(5).keys()).map((_, index) => (
+            <ShowSummaryCard.Skeleton key={index} />
+          ))}
+        </div>
+      </div>
+    );
   }
 
   return (

diff --git a/src/hooks/mutation/usePostShowPoster.ts b/src/hooks/mutation/usePostShowPoster.ts
diff --git a/src/hooks/mutation/usePutTicketImage.ts b/src/hooks/mutation/usePutTicketImage.ts
@@ -1,5 +1,6 @@
 import { client } from "@/apis";
 import { useMutation } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 
 export type TicketImageRequest = {
   id: number;

diff --git a/src/pages/Mypage/page.tsx b/src/pages/Mypage/page.tsx
@@ -2,7 +2,9 @@ import { ReactComponent as Edit } from "@/assets/svgs/Edit.svg";
 import { ReactComponent as Settings } from "@/assets/svgs/settings.svg";
 import { LikedShow } from "@/components/Mypage/LikedShow";
 import { PreferenceAnalysis } from "@/components/Mypage/PreferenceAnalysis";
+import { Skeleton } from "@/components/ui/skeleton";
 import useGetUserInfo from "@/hooks/queries/useGetUserInfo";
+import { useDeferredLoading } from "@/hooks/utils";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -13,6 +15,8 @@ export const MyPage = () => {
   const userInfoData = data?.result;
   const tabs = ["나의 취향 분석", "좋아요한 공연"];
 
+  const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
   useEffect(() => {
     if (!isLoading && userInfoData) {
       console.log(userInfoData);
@@ -28,12 +32,43 @@ export const MyPage = () => {
     navigate("/mypage/user");
   };
 
-  if (isLoading) {
-    return <div>로딩중</div>;
+  if (shouldShowSkeleton) {
+    return (
+      <div className="pt-[41px] px-[24px] pb-[110px] min-h-screen relative">
+        <div className="flex flex-col relative items-center justify-center">
+          <Skeleton className="w-[86px] h-[36px] mb-[44px]" />
+          <Skeleton className="w-[84px] h-[84px] rounded-full mb-[11px]" />
+          <Skeleton className="mb-[27px] w-[86px] h-[36px]" />
+
+          <div className="flex mb-[37px] gap-[58px]">
+            <Skeleton className="w-[118px] h-[36px]" />
+            <Skeleton className="w-[118px] h-[36px]" />
+          </div>
+
+          <div className="flex flex-col items-left">
+            <Skeleton className="w-[146px] h-[36px] mb-[5px]" />
+            <Skeleton className="w-[342px] h-[36px] mb-[50px]" />
+          </div>
+
+          <Skeleton className="w-[157px] h-[157px] mb-[29px]" />
+
+          <div className="grid grid-cols-5 gap-[22px] mb-[8px]">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Skeleton key={index} className="w-[48px] h-[48px]" />
+            ))}
+          </div>
+          <div className="grid grid-cols-5 gap-[22px]">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Skeleton key={index} className="w-[48px] h-[18px]" />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <div className="relative px-6 pt-[46px] pb-[52px]">
+    <div className="relative px-[24px] pt-[46px] pb-[52px]">
       <div className="flex flex-col">
         <div className="relative items-center text-center mb-[49px]">
           <span className="headline2-bold text-grayscale-80">마이페이지</span>

diff --git a/src/pages/ShowDetail/page.tsx b/src/pages/ShowDetail/page.tsx
@@ -1,14 +1,18 @@
 import AudienceReviews from "@/components/ShowDetail/AudienceReviews";
+import { ReactComponent as ClacoMain } from "@/assets/svgs/Claco_Main.svg";
+import { ReactComponent as BackArrow } from "@/assets/svgs/BackArrow.svg";
 import RelatedShowsRecommend from "@/components/ShowDetail/RelatedShowRecommend";
 import ShowEssentials from "@/components/ShowDetail/ShowInformation/ShowEssentials";
 import ShowOverview from "@/components/ShowDetail/ShowInformation/ShowOverview";
 import ShowPoster from "@/components/ShowDetail/ShowInformation/ShowPoster";
+import { Skeleton } from "@/components/ui/skeleton";
 import useGetShowDetail from "@/hooks/queries/useGetShowDetail";
 import {
   extractDateRange,
   extractPricesWithSeats,
   extractSchedule,
   timeToMinutes,
+  useDeferredLoading,
 } from "@/hooks/utils";
 import { useRef, useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -108,6 +112,7 @@ export const ShowDetailPage = () => {
   const { seats, prices, minPrice, maxPrice } = extractPricesWithSeats(
     showDetail?.pcseguidance || "",
   );
+  const { shouldShowSkeleton } = useDeferredLoading(isLoading);
 
   const displayedPrice = (
     minPrice: number | string | null,
@@ -124,10 +129,24 @@ export const ShowDetailPage = () => {
     return "가격 정보 없음";
   };
 
-  if (isLoading) {
-    return <div>로딩중</div>;
+  if (shouldShowSkeleton) {
+    return (
+      <div className="relative flex flex-col min-h-screen px-[24px] pt-[61px] pb-[60px]">
+        <ClacoMain className="mb-[38px]" />
+        <BackArrow
+          width="8"
+          height="15"
+          viewBox="0 0 11 20"
+          className="mb-[37px] cursor-pointer"
+        />
+        <Skeleton className="w-[100px] h-[26px] mb-[11px]" />
+        <Skeleton className="w-[299px] h-[30px] mb-[28px]" />
+        <Skeleton className="w-full h-[173px] mb-[45px]" />
+        <Skeleton className="w-full h-[295px] mb-[66px]" />
+        <Skeleton className="w-full h-[40px] mb-[40px]" />
+      </div>
+    );
   }
-
   return (
     <div className="pt-[73px] pb-[40px]">
       <ShowOverview

diff --git a/src/pages/TicketBook/page.tsx b/src/pages/TicketBook/page.tsx
@@ -10,6 +10,7 @@ import { DeleteClacoBookModal } from "@/components/Ticket/Modal/Delete/ClacoBook
 import { Toast } from "@/libraries/toast/Toast";
 import { useNavigate } from "react-router-dom";
 import useGetClacoBookList from "@/hooks/queries/useGetClacoBookList";
+
 import {
   useDeleteClacoBook,
   usePostCreateClacoBook,