Merge pull request #76 from Curate-Me/feat/#72_qa/1-issue

feat: qa/1 issue

src/apis/client.ts

@@ -19,6 +19,7 @@ client.interceptors.response.use(
     if (res.data.refreshed) {
       const new_accessToken = res.headers["authorization"];
       localStorage.setItem("accessToken", new_accessToken);
+      window.location.replace("/main");
     }
 
     // /* 해당 에러 발생 시 재로그인 하도록 로그인 화면으로 리다이렉트 */
@@ -28,6 +29,7 @@ client.interceptors.response.use(
       res.data.code === "MSE-001" ||
       res.data.code === "ATH-001"
     ) {
+      localStorage.clear();
       window.location.replace("/");
     }
     return res;

src/components/Browse/RecentConcertResult/index.tsx

@@ -17,19 +17,26 @@ export const RecentConcertResult = ({
       </span>
       <div className="flex flex-col gap-[29px] mt-[12px]">
         {concertData &&
-          concertData.pages.flatMap((page, pageIndex) =>
-            page.result.listPageResponse.map((show, index) => (
-              <ShowSummaryCard
-                key={`${pageIndex}-${show.id}-${index}`}
-                data={show}
-              />
-            ))
-          )}
-        {/* 추가 데이터 로드 */}
-        {isFetchingNextPage && (
-          <div className="mt-4 text-center">
-            <span>로딩 중...</span>
-          </div>
+        concertData.pages[0].result.listPageResponse.length === 0 ? (
+          <div>검색결과없음</div>
+        ) : (
+          <>
+            {concertData &&
+              concertData.pages.flatMap((page, pageIndex) =>
+                page.result.listPageResponse.map((show, index) => (
+                  <ShowSummaryCard
+                    key={`${pageIndex}-${show.id}-${index}`}
+                    data={show}
+                  />
+                ))
+              )}
+            {/* 추가 데이터 로드 */}
+            {isFetchingNextPage && (
+              <div className="mt-4 text-center">
+                <span>로딩 중...</span>
+              </div>
+            )}
+          </>
         )}
       </div>
     </>

src/components/Browse/SearchResult/index.tsx

@@ -4,9 +4,13 @@ import { ShowSummaryCard } from "@/components/common/ShowSummaryCard";
 
 export type SearchReultProps = {
   searchData: GetConcertInfiniteResponse;
+  isFetchingNextPage: boolean;
 };
 
-export const SearchResult = ({ searchData }: SearchReultProps) => {
+export const SearchResult = ({
+  searchData,
+  isFetchingNextPage,
+}: SearchReultProps) => {
   return (
     // 검색 이후 로직
     <>
@@ -42,6 +46,12 @@ export const SearchResult = ({ searchData }: SearchReultProps) => {
                   <ShowSummaryCard key={show.id} data={show} />
                 ))
               )}
+            {/* 추가 데이터 로드 */}
+            {isFetchingNextPage && (
+              <div className="mt-4 text-center">
+                <span>로딩 중...</span>
+              </div>
+            )}
           </>
         )}
       </div>

src/components/Browse/ShowFilter/index.tsx

@@ -68,23 +68,28 @@ export const ShowFilter = ({ onClose, onApply }: ShowFilterProps) => {
     setIsVisible(false);
     setTimeout(() => onApply(priceRange, location, dateRange, feature), 300);
 
+    const [startDate, endDate] = dateRange.split("~");
     const filterObj = {
       minPrice: minPrice,
       maxPrice: maxPrice,
       selectedLocation: selectedLocation,
-      rangeStart: rangeStart,
-      rangeEnd: rangeEnd,
-      selectedFeatures: selectedFeatures,
+      startDate: startDate,
+      endDate: endDate,
+      categories: selectedFeatures,
     };
     console.log(filterObj);
-    sessionStorage.setItem("filterObj", JSON.stringify(filterObj));
+
+    localStorage.setItem("filterObj", JSON.stringify(filterObj));
   };
 
-  const handleLocationClick = (location: string) => {
-    if (selectedLocation.includes(location)) {
-      setSelectedLocation(selectedLocation.filter((loc) => loc !== location));
+  const handleLocationClick = (values: string[], label: string) => {
+    console.log(label);
+    if (values.every((value) => selectedLocation.includes(value))) {
+      setSelectedLocation(
+        selectedLocation.filter((loc) => !values.includes(loc))
+      );
     } else {
-      setSelectedLocation([...selectedLocation, location]);
+      setSelectedLocation([...selectedLocation, ...values]);
     }
   };
 
@@ -149,7 +154,7 @@ export const ShowFilter = ({ onClose, onApply }: ShowFilterProps) => {
           </span>
           <Location
             selectedLocation={selectedLocation}
-            onLocationClick={handleLocationClick}
+            onLocationFilterClick={handleLocationClick}
           />
         </div>
         <div className="flex flex-col mb-[58px] gap-8">

src/components/Main/Analysis/AIRecommend/index.tsx

@@ -7,6 +7,8 @@ import { useUserStore } from "@/libraries/store/user";
 import { useEffect, useState } from "react";
 import { UserBased } from "@/types";
 import { useGetUserBased } from "@/hooks/queries";
+import { useDeferredLoading } from "@/hooks/utils";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export const AIRecommend = () => {
   const [userBased, setUserBased] = useState<UserBased[]>([]);
@@ -19,9 +21,19 @@ export const AIRecommend = () => {
     }
   }, [isLoading, data]);
 
-  if (isLoading) {
+  const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+  if (shouldShowSkeleton) {
     //skeleton UI 적용될 부분
-    return <div>로딩 중..</div>;
+    return (
+      <div className="py-[22px] px-6">
+        <div className="flex flex-col gap-2 mb-[23px]">
+          <Skeleton className="w-[197px] h-[25px]" />
+          <Skeleton className="w-[210px] h-[25px]" />
+        </div>
+        <Skeleton className="w-full h-[443px]" />
+      </div>
+    );
   }
 
   return (

src/components/Main/Analysis/TicketRecommend/Reviews/index.tsx

@@ -9,8 +9,8 @@ export type ReviewsProps = {
 export const Reviews = ({ data }: ReviewsProps) => {
   return (
     <div className="mt-[21px]">
-      <div className="flex justify-center w-full headline1-bold mb-[18px]">
-        {data.concertName}
+      <div className="flex justify-center items-center w-full min-h-[51px] headline1-bold mb-[18px]">
+        <span className="w-[400px] text-center">{data.concertName}</span>
       </div>
       <div className="w-[351px] h-[119px] mx-auto px-[15px] py-[17px] rounded-[3.52px] bg-grayscale-20">
         <div className="flex justify-start items-center space-x-[9px]">

src/components/Main/Analysis/TicketRecommend/index.tsx

@@ -1,71 +1,12 @@
 import { ReactComponent as Arrow } from "@/assets/svgs/Arrow 2.svg";
 import { TouchEvent, useEffect, useState } from "react";
 import { Reviews } from "./Reviews";
-// import { useGetRecommendClacoTicket } from "@/hooks/queries";
-import Ticket1 from "@/assets/images/MyClacoTicket1.png";
-import Ticket2 from "@/assets/images/MyClacoTicket2.png";
-import Ticket3 from "@/assets/images/MyClacoTicket3.png";
 import { TicketReviewSummary } from "@/types";
 import { useGetRecommendClacoTicket } from "@/hooks/queries";
-
-const REVIEW_MOCK_DATA = {
-  code: "COM-000",
-  message: "OK.",
-  result: [
-    {
-      ticketInfoResponse: {
-        id: 1,
-        ticketImage: Ticket1,
-      },
-      ticketReviewSummary: {
-        nickName: "큘미사용자1",
-        concertName: "백조의 호수1",
-        concertId: 865,
-        createdAt: "2024-11-23T05:39:59.110Z",
-        content:
-          "전문 무용수들의 실력이 눈부시게 빛났습니다. 지젤 역을 맡은 발레리나의 날렵한 동작과 뛰어난 연기는 보는 이의 마음을 울렸습니다. 특히, 2막의 윌리들의 군무는 환상적이었고, 유령들의 통일성이 돋보였습니다. 모든 출연진이 하나가 되어 춤출 때, 진한 감동이 전해졌습니다.",
-      },
-    },
-    {
-      ticketInfoResponse: {
-        id: 2,
-        ticketImage: Ticket2,
-      },
-      ticketReviewSummary: {
-        nickName: "큘미사용자2",
-        concertName: "백조의 호수2",
-        concertId: 865,
-        createdAt: "2024-11-24T05:39:59.110Z",
-        content:
-          "주요 무용수들의 기술은 정말 놀라웠습니다. 오데트 역을 맡은 주 무용수의 우아한 포즈와 뛰어난 스핀은 관객의 시선을 사로잡았습니다. 특히, 마지막 장면에서의 군무는 환상적이었고, 백조들의 일체감이 돋보였습니다. 모든 무용수가 조화를 이루며 춤출 때, 마치 한 몸처럼 느껴졌습니다.",
-      },
-    },
-    {
-      ticketInfoResponse: {
-        id: 3,
-        ticketImage: Ticket3,
-      },
-      ticketReviewSummary: {
-        nickName: "큘미사용자3",
-        concertName: "백조의 호수3",
-        concertId: 865,
-        createdAt: "2024-11-18T05:39:59.110Z",
-        content:
-          "전문 무용수들의 실력이 눈부시게 빛났습니다. 지젤 역을 맡은 발레리나의 날렵한 동작과 뛰어난 연기는 보는 이의 마음을 울렸습니다. 특히, 2막의 윌리들의 군무는 환상적이었고, 유령들의 통일성이 돋보였습니다. 모든 출연진이 하나가 되어 춤출 때, 진한 감동이 전해졌습니다.",
-      },
-    },
-  ],
-  refreshed: true,
-};
+import { useNavigate } from "react-router-dom";
 
 export const TicketRecommend = () => {
-  const { data, isLoading } = useGetRecommendClacoTicket();
-
-  useEffect(() => {
-    if (data && !isLoading) {
-      // console.log(data);
-    }
-  }, [data, isLoading]);
+  const { data } = useGetRecommendClacoTicket();
 
   const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(
     null
@@ -74,17 +15,21 @@ export const TicketRecommend = () => {
     null
   );
   const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [reviewContent, setReviewContent] = useState<TicketReviewSummary>({
+    nickName: "",
+    concertId: 0,
+    concertName: "",
+    content: "",
+    createdAt: "",
+  });
+  const [isReviewVisible, setIsReviewVisible] = useState<boolean>(true);
+  const navigate = useNavigate();
 
-  const [reviewContent, setReviewContent] = useState<TicketReviewSummary>(
-    REVIEW_MOCK_DATA.result[0].ticketReviewSummary
-  );
-  const [isReviewVisible, setIsReviewVisible] = useState(true);
-
-  // useEffect(() => {
-  //   if (data) {
-  //     setReviewContent(data.result[0])
-  //   }
-  // },[data])
+  useEffect(() => {
+    if (data) {
+      setReviewContent(data.result[0].ticketReviewSummary);
+    }
+  }, [data]);
 
   const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
     setTouchEnd(null);
@@ -102,7 +47,7 @@ export const TicketRecommend = () => {
   };
 
   const handleTouchEnd = () => {
-    if (!touchStart || !touchEnd) return;
+    if (!touchStart || !touchEnd || !data) return;
 
     const xDistance = touchStart.x - touchEnd.x;
     const yDistance = Math.abs(touchStart.y - touchEnd.y);
@@ -121,18 +66,16 @@ export const TicketRecommend = () => {
 
     let nextIndex;
     if (isLeftSwipe) {
-      nextIndex = (currentIndex + 1) % REVIEW_MOCK_DATA.result.length;
+      nextIndex = (currentIndex + 1) % data.result.length;
     } else if (isRightSwipe) {
-      nextIndex =
-        (currentIndex - 1 + REVIEW_MOCK_DATA.result.length) %
-        REVIEW_MOCK_DATA.result.length;
+      nextIndex = (currentIndex - 1 + data.result.length) % data.result.length;
     } else {
       nextIndex = currentIndex;
     }
     setCurrentIndex(nextIndex);
 
     setTimeout(() => {
-      setReviewContent(REVIEW_MOCK_DATA.result[nextIndex].ticketReviewSummary);
+      setReviewContent(data.result[nextIndex].ticketReviewSummary);
       setIsReviewVisible(true);
     }, 400);
   };
@@ -155,6 +98,11 @@ export const TicketRecommend = () => {
     }
   };
 
+  const handleGoToTicket = () => {
+    const currentTicketId = data?.result[currentIndex].ticketInfoResponse.id;
+    navigate(`/ticket/${currentTicketId}`);
+  };
+
   return (
     <div className="pt-[22px] pb-[171px] relative">
       <div className="px-6 mb-[47px] leading-8 text-grayscale-90 heading2-bold">
@@ -167,7 +115,7 @@ export const TicketRecommend = () => {
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
-        {REVIEW_MOCK_DATA?.result.map((ticket, index) => (
+        {data?.result.map((ticket, index) => (
           <div key={index} className={getItemStyle(index)}>
             <img
               src={ticket.ticketInfoResponse.ticketImage}
@@ -186,7 +134,10 @@ export const TicketRecommend = () => {
       >
         <Reviews data={reviewContent} />
       </div>
-      <div className="absolute bottom-[120px] right-6 caption-13 flex-col space-y-[11px] text-grayscale-60 cursor-pointer">
+      <div
+        className="absolute bottom-[120px] right-6 caption-13 flex-col space-y-[11px] text-grayscale-60 cursor-pointer"
+        onClick={handleGoToTicket}
+      >
         <Arrow />
         <div className="text-right">보러가기</div>
       </div>