Merge pull request #81 from Curate-Me/feat/#78_qa2-handling

Feat/#78 qa2 handling
kusitms-com · Nov 28, 2024 · 5967676 · 5967676
2 parents 7bd7b9a + ec203b7
commit 5967676
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 185 deletions.
diff --git a/src/components/Browse/ShowFilter/index.tsx b/src/components/Browse/ShowFilter/index.tsx
@@ -155,6 +155,7 @@ export const ShowFilter = ({ onClose, onApply }: ShowFilterProps) => {
           <Location
             selectedLocation={selectedLocation}
             onLocationFilterClick={handleLocationClick}
+            isFilter={true}
           />
         </div>
         <div className="flex flex-col mb-[58px] gap-8">

diff --git a/src/components/Main/Analysis/TicketRecommend/Reviews/index.tsx b/src/components/Main/Analysis/TicketRecommend/Reviews/index.tsx
@@ -10,7 +10,7 @@ export const Reviews = ({ data }: ReviewsProps) => {
   return (
     <div className="mt-[21px]">
       <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>
+        <span className="w-[350px] 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]">

diff --git a/src/components/Main/Analysis/TicketRecommend/index.tsx b/src/components/Main/Analysis/TicketRecommend/index.tsx
@@ -6,13 +6,14 @@ import { useGetRecommendClacoTicket } from "@/hooks/queries";
 import { useNavigate } from "react-router-dom";
 export const TicketRecommend = () => {
   const navigate = useNavigate();
+
   const { data, isLoading, isError } = useGetRecommendClacoTicket();
   const [error, setError] = useState<boolean>(false);
   const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(
-    null,
+    null
   );
   const [touchEnd, setTouchEnd] = useState<{ x: number; y: number } | null>(
-    null,
+    null
   );
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [reviewContent, setReviewContent] = useState<TicketReviewSummary>({
@@ -23,9 +24,11 @@ export const TicketRecommend = () => {
     createdAt: "",
   });
   const [isReviewVisible, setIsReviewVisible] = useState<boolean>(true);
+
   useEffect(() => {
     if (data) {
       if (data.code === "COM-000" && data.result.length > 0) {
+        setError(false);
         setReviewContent(data.result[0].ticketReviewSummary);
       } else if (data.code === "CLB-001") {
         // 클라코북을 찾을 수 없는 오류
@@ -38,6 +41,7 @@ export const TicketRecommend = () => {
       }
     }
   }, [data, navigate]);
+
   const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
     setTouchEnd(null);
     setTouchStart({
@@ -95,6 +99,7 @@ export const TicketRecommend = () => {
     const currentTicketId = data?.result[currentIndex].ticketInfoResponse.id;
     navigate(`/ticket/${currentTicketId}`);
   };
+
   // 로딩, 에러, 데이터 없음 상태 처리
   if (
     isLoading ||
@@ -110,6 +115,7 @@ export const TicketRecommend = () => {
       </div>
     );
   }
+
   // 클라코북을 찾을 수 없는 에러 발생 시
   if (error) {
     return (
@@ -119,6 +125,7 @@ export const TicketRecommend = () => {
       </div>
     );
   }
+
   return (
     <div className="pt-[22px] pb-[171px] relative">
       <div className="px-6 mb-[47px] leading-8 text-grayscale-90 heading2-bold">

diff --git a/src/components/common/Location/index.tsx b/src/components/common/Location/index.tsx
@@ -18,17 +18,25 @@ export const Location = ({
   onLocationClick,
   isFilter = false,
 }: LocationProps) => {
+  const handleClick = (location: { value: string[]; label: string }) => {
+    if (isFilter) {
+      onLocationFilterClick?.(location.value, location.label);
+    } else {
+      onLocationClick?.(location.label);
+    }
+  };
+
   return (
     <div className="grid grid-cols-2 gap-[0.63rem]">
       {AREA_LIST.map((location, index) => (
         <TypeButton
           key={index}
-          isChecked={location.value.every((v) => selectedLocation.includes(v))}
-          onClick={() =>
-            isFilter
-              ? onLocationFilterClick?.(location.value, location.label)
-              : onLocationClick?.(location.label)
+          isChecked={
+            !isFilter
+              ? selectedLocation?.includes(location.label)
+              : location.value.every((v) => selectedLocation?.includes(v))
           }
+          onClick={() => handleClick(location)}
         >
           {location.label}
         </TypeButton>

diff --git a/src/hooks/mutation/usePutUserPreference.ts b/src/hooks/mutation/usePutUserPreference.ts
@@ -1,28 +1,29 @@
 import { client } from "@/apis";
 import { UserPreferencesPutRequest, UserPreferencesPutResponse } from "@/types";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 
 const putUserPreference = async (
-  preferences: UserPreferencesPutRequest,
+  preferences: UserPreferencesPutRequest
 ): Promise<UserPreferencesPutResponse> => {
   const response = await client.put<UserPreferencesPutResponse>(
     `/preferences`,
-    preferences,
+    preferences
   );
   return response.data;
 };
 
 const usePutUserPreference = () => {
   const navigate = useNavigate();
-
+  const queryClient = useQueryClient();
   return useMutation<
     UserPreferencesPutResponse,
     Error,
     UserPreferencesPutRequest
   >({
     mutationFn: putUserPreference,
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userPreferences"] });
       navigate("/mypage");
     },
     onError: (error) => {

diff --git a/src/pages/Mypage/PreferenceEdit/page.tsx b/src/pages/Mypage/PreferenceEdit/page.tsx
@@ -28,10 +28,10 @@ export const PreferenceEditPage = () => {
       setMinPrice(preferenceData.minPrice);
       setMaxPrice(preferenceData.maxPrice);
       setSelectedLocation(
-        preferenceData.preferRegions.map((region) => region.preferenceRegion),
+        preferenceData.preferRegions.map((region) => region.preferenceRegion)
       );
       setSelectedConcepts(
-        preferenceData.preferTypes.map((type) => type.preferenceType),
+        preferenceData.preferTypes.map((type) => type.preferenceType)
       );
     }
   }, [isLoading, data]);
@@ -47,11 +47,12 @@ export const PreferenceEditPage = () => {
   };
 
   const handleLocationClick = (location: string) => {
-    if (selectedLocation.includes(location)) {
-      setSelectedLocation(selectedLocation.filter((loc) => loc !== location));
-    } else {
-      setSelectedLocation([...selectedLocation, location]);
-    }
+    setSelectedLocation((prev) => {
+      if (prev.includes(location)) {
+        return prev.filter((loc) => loc !== location);
+      }
+      return [...prev, location];
+    });
   };
 
   const handleConceptClick = (concept: string) => {
@@ -127,6 +128,7 @@ export const PreferenceEditPage = () => {
         <Location
           selectedLocation={selectedLocation}
           onLocationClick={handleLocationClick}
+          isFilter={false}
         />
       </div>
       <div className="mb-[74px]">

diff --git a/src/pages/Ticket/[id]/edit/page.tsx b/src/pages/Ticket/[id]/edit/page.tsx
@@ -16,7 +16,7 @@ export const ClacoTicketReviewEditPage = () => {
   const { mutate: editClacoTicketReview } = usePutEditTicketReview();
 
   useEffect(() => {
-    console.log(data);
+    // console.log(data);
     setRating(data.starRate);
     setReviewText(data.content);
   }, [setRating, setReviewText, data]);

diff --git a/src/pages/Ticket/[id]/page.tsx b/src/pages/Ticket/[id]/page.tsx
@@ -54,8 +54,10 @@ export const ClacoTicketDetailPage = () => {
   const navigate = useNavigate();
 
   const gotoBack = () => {
-    // navigate("/ticketbook");
-    navigate(-1);
+    const id = localStorage.getItem("prevTicketBookId");
+    const title = localStorage.getItem("prevClacoBookTitle");
+    navigate(`/ticketbook/${id}?title=${title}`);
+    // navigate(-1);
   };
 
   const gotoTicketReviewEdit = () => {
@@ -249,7 +251,7 @@ export const ClacoTicketDetailPage = () => {
                   )
                 )}
             </div>
-            {/* 
+
             <div className="flex items-center gap-[9px] headline2-bold text-grayscale-70">
               좌석
               {reviewData &&
@@ -282,7 +284,7 @@ export const ClacoTicketDetailPage = () => {
                   )}
                 </>
               )}
-            </div> */}
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/pages/TicketBook/[id]/page.tsx b/src/pages/TicketBook/[id]/page.tsx
@@ -23,16 +23,6 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useDeferredLoading } from "@/hooks/utils";
 import { useQueryClient } from "@tanstack/react-query";
 
-// import { ClacoTicket } from "@/components/common/ClacoTicket";
-// import TEST1 from "@/assets/images/poster1.gif";
-// const TEST_TAG = [
-//   { iconUrl: "", tagName: "역동적인" },
-//   { iconUrl: "", tagName: "고전적인" },
-//   { iconUrl: "", tagName: "현대적인" },
-//   { iconUrl: "", tagName: "서정적인" },
-//   { iconUrl: "", tagName: "웅장한" },
-// ];
-
 export const ClacoBookDetailPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -84,10 +74,14 @@ export const ClacoBookDetailPage = () => {
   }, [value]);
 
   const gotoBack = () => {
-    navigate(-1);
+    localStorage.removeItem("prevTicketBookId");
+    localStorage.removeItem("prevClacoBookTitle");
+    navigate("/ticketbook");
   };
 
   const gotoTicketDetail = (tId: number) => {
+    localStorage.setItem("prevTicketBookId", String(id));
+    localStorage.setItem("prevClacoBookTitle", currentClacoBook);
     queryClient.invalidateQueries({ queryKey: ["ticketReviewDetail", tId] });
     navigate(`/ticket/${tId}`);
   };
@@ -191,6 +185,31 @@ export const ClacoBookDetailPage = () => {
     );
   }
 
+  if (!isLoading && clacoTicket?.length === 0) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center mt-[100px]">
+          <span className="heading2-bold text-grayscale-80">
+            공연은 즐겁게 관람하셨나요?
+          </span>
+          <div className="relative flex items-center justify-center">
+            <img
+              src={showReview}
+              alt="showReview"
+              className="object-contain mb-[53px]"
+            />
+            <div className="absolute bottom-0 flex text-center">
+              <span className="body2-regular text-grayscale-70 mb-[39px]">
+                티켓북에 공연 감상을 등록하고
+                <br />
+                나만의 티켓을 만들어보세요!
+              </span>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
   return (
     <div className="relative flex flex-col pt-[46px] items-center justify-center px-6">
       <div className="flex justify-between items-center w-full mb-[56px] h-[26px]">
@@ -227,63 +246,34 @@ export const ClacoBookDetailPage = () => {
       ) : null}
 
       <div className="clacobook pb-[185px]">
-        {clacoTicket?.length === 0 ? (
-          <>
-            {/* <ClacoTicket
-              concertPoster={TEST1}
-              watchDate="2024-12-11"
-              concertName="광주시립교향역단, GSO 오티움 콘서트 V: modern"
-              concertTags={TEST_TAG}
-            /> */}
-            <div className="flex flex-col items-center justify-center mt-[100px]">
-              <span className="heading2-bold text-grayscale-80">
-                공연은 즐겁게 관람하셨나요?
-              </span>
-              <div className="relative flex items-center justify-center">
-                <img
-                  src={showReview}
-                  alt="showReview"
-                  className="object-contain mb-[53px]"
-                />
-                <div className="absolute bottom-0 flex text-center">
-                  <span className="body2-regular text-grayscale-70 mb-[39px]">
-                    티켓북에 공연 감상을 등록하고
-                    <br />
-                    나만의 티켓을 만들어보세요!
-                  </span>
-                </div>
-              </div>
-            </div>
-          </>
-        ) : (
-          <>
-            <Swiper
-              pagination={true}
-              modules={[Pagination]}
-              spaceBetween={213}
-              onSlideChange={handleSlideChange}
-              onSwiper={(swiper) => {
-                setSelectTicketIndex(swiper.activeIndex);
-              }}
-              className="max-w-[240px] h-[569px] rounded-[5px] flex justify-center items-center"
-            >
-              {clacoTicket &&
-                clacoTicket.map((image, index) => (
-                  <SwiperSlide key={index}>
-                    <div ref={ticketRefs[index]}>
-                      <img
-                        src={image.ticketImage}
-                        alt="클라코 티켓 이미지"
-                        className="w-[240px] h-[530px]"
-                        crossOrigin="anonymous"
-                        onClick={() => gotoTicketDetail(image.id)}
-                      />
-                    </div>
-                  </SwiperSlide>
-                ))}
-            </Swiper>
-          </>
-        )}
+        <>
+          <Swiper
+            pagination={true}
+            modules={[Pagination]}
+            spaceBetween={213}
+            onSlideChange={handleSlideChange}
+            onSwiper={(swiper) => {
+              setSelectTicketIndex(swiper.activeIndex);
+            }}
+            className="max-w-[240px] h-[569px] rounded-[5px] flex justify-center items-center"
+          >
+            {clacoTicket &&
+              clacoTicket.map((image, index) => (
+                <SwiperSlide key={index}>
+                  <div ref={ticketRefs[index]}>
+                    <img
+                      src={image.ticketImage}
+                      alt="클라코 티켓 이미지"
+                      className="w-[240px] h-[530px]"
+                      crossOrigin="anonymous"
+                      onClick={() => gotoTicketDetail(image.id)}
+                    />
+                  </div>
+                </SwiperSlide>
+              ))}
+          </Swiper>
+        </>
+
         <div
           className="absolute bottom-[57px] right-[26px] w-[70px] h-[70px] bg-primary rounded-full flex justify-center items-center"
           onClick={gotoTicketCreate}