Merge pull request #80 from Curate-Me/feat/#79_ticket-download-image

feat: �QA
kusitms-com · Nov 28, 2024 · 7bd7b9a · 7bd7b9a
2 parents d81a9e5 + 7feddbb
commit 7bd7b9a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 37 deletions.
diff --git a/src/components/Main/Analysis/TicketRecommend/index.tsx b/src/components/Main/Analysis/TicketRecommend/index.tsx
@@ -4,15 +4,15 @@ import { Reviews } from "./Reviews";
 import { TicketReviewSummary } from "@/types";
 import { useGetRecommendClacoTicket } from "@/hooks/queries";
 import { useNavigate } from "react-router-dom";
-
 export const TicketRecommend = () => {
-  const { data } = useGetRecommendClacoTicket();
-
+  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,47 +23,46 @@ export const TicketRecommend = () => {
     createdAt: "",
   });
   const [isReviewVisible, setIsReviewVisible] = useState<boolean>(true);
-  const navigate = useNavigate();
-
   useEffect(() => {
     if (data) {
-      setReviewContent(data.result[0].ticketReviewSummary);
+      if (data.code === "COM-000" && data.result.length > 0) {
+        setReviewContent(data.result[0].ticketReviewSummary);
+      } else if (data.code === "CLB-001") {
+        // 클라코북을 찾을 수 없는 오류
+        setError(true);
+        // window.confirm("알 수 없는 오류가 발생했습니다.");
+        // navigate("/");
+      } else {
+        navigate("/");
+        localStorage.clear();
+      }
     }
-  }, [data]);
-
+  }, [data, navigate]);
   const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
     setTouchEnd(null);
     setTouchStart({
       x: e.targetTouches[0].clientX,
       y: e.targetTouches[0].clientY,
     });
   };
-
   const handleTouchMove = (e: TouchEvent<HTMLDivElement>) => {
     setTouchEnd({
       x: e.targetTouches[0].clientX,
       y: e.targetTouches[0].clientY,
     });
   };
-
   const handleTouchEnd = () => {
     if (!touchStart || !touchEnd || !data) return;
-
     const xDistance = touchStart.x - touchEnd.x;
     const yDistance = Math.abs(touchStart.y - touchEnd.y);
-
     if (yDistance > Math.abs(xDistance)) {
       return;
     }
-
     const minSwipeDistance = 50;
     const isLeftSwipe = xDistance > minSwipeDistance;
     const isRightSwipe = xDistance < -minSwipeDistance;
-
     if (!isLeftSwipe && !isRightSwipe) return;
-
     setIsReviewVisible(false);
-
     let nextIndex;
     if (isLeftSwipe) {
       nextIndex = (currentIndex + 1) % data.result.length;
@@ -73,22 +72,17 @@ export const TicketRecommend = () => {
       nextIndex = currentIndex;
     }
     setCurrentIndex(nextIndex);
-
     setTimeout(() => {
       setReviewContent(data.result[nextIndex].ticketReviewSummary);
       setIsReviewVisible(true);
     }, 400);
   };
-
   const getItemStyle = (index: number) => {
     const baseStyle =
       "w-[232px] absolute top-1/2 -translate-y-1/2 transition-all duration-500 ease-in-out";
-
     const position = index - currentIndex;
-
     const normalizedPosition =
       position < -1 ? position + 3 : position > 1 ? position - 3 : position;
-
     if (normalizedPosition === 0) {
       return `${baseStyle} left-1/2 -translate-x-1/2 z-40 scale-100 opacity-100`;
     } else if (normalizedPosition === 1) {
@@ -97,12 +91,34 @@ export const TicketRecommend = () => {
       return `${baseStyle} left-[-15%] -translate-x-1/2 z-10 scale-100 opacity-30`;
     }
   };
-
   const handleGoToTicket = () => {
     const currentTicketId = data?.result[currentIndex].ticketInfoResponse.id;
     navigate(`/ticket/${currentTicketId}`);
   };
-
+  // 로딩, 에러, 데이터 없음 상태 처리
+  if (
+    isLoading ||
+    isError ||
+    !data ||
+    !data.result ||
+    data.result.length === 0
+  ) {
+    return (
+      <div className="w-full text-center px-6 pt-[22px] pb-[171px]">
+        비슷한 취향을 가진 사람들의 정보를 <br />
+        분석해주는 서비스를 준비중이에요..
+      </div>
+    );
+  }
+  // 클라코북을 찾을 수 없는 에러 발생 시
+  if (error) {
+    return (
+      <div className="w-full text-center px-6 pt-[22px] pb-[171px]">
+        비슷한 취향을 가진 사람들의 정보를 <br />
+        분석해주는 서비스를 준비중이에요..
+      </div>
+    );
+  }
   return (
     <div className="pt-[22px] pb-[171px] relative">
       <div className="px-6 mb-[47px] leading-8 text-grayscale-90 heading2-bold">
@@ -119,7 +135,7 @@ export const TicketRecommend = () => {
           <div key={index} className={getItemStyle(index)}>
             <img
               src={ticket.ticketInfoResponse.ticketImage}
-              alt="클라코티켓 이미지"
+              alt="클라코 티켓 이미지"
               className="w-[213px] h-[471px] object-contain"
             />
           </div>

diff --git a/src/pages/Login/page.tsx b/src/pages/Login/page.tsx
@@ -27,15 +27,15 @@ export const LoginPage = () => {
         </div>
 
         <button
-          className="relative flex w-full bg-login items-center justify-center rounded-[8px] py-[0.88rem]"
+          className="flex w-full bg-login items-center justify-center rounded-[8px] py-[0.88rem]"
           onClick={handleLogin}
         >
           <img
             src={KakaoLogo}
             alt="카카오 로고 이미지"
-            className="absolute w-5 h-5 left-[125px]"
+            className="w-5 h-5"
           />
-          <span className="pl-10 body1-regular text-grayscale-20">
+          <span className="pl-2 body1-medium text-grayscale-20">
             카카오로 시작하기
           </span>
         </button>

diff --git a/src/pages/TicketCreate/Download/page.tsx b/src/pages/TicketCreate/Download/page.tsx
@@ -19,7 +19,7 @@ export const TicketDownloadPage = () => {
   const [loadingState, setLoadingState] = useState<boolean>(true);
   const posterUrl = (localStorage.getItem("poster") || "").replace(
     /^"|"$/g,
-    ""
+    "",
   );
 
   const { mutate: uploadTicketImage, data: ticketData } = usePutTicketImage();
@@ -74,7 +74,7 @@ export const TicketDownloadPage = () => {
           onSuccess: () => {
             setIsChecked(true);
           },
-        }
+        },
       );
     } catch (error) {
       console.error("티켓 이미지 변환/업로드 실패:", error);
@@ -186,17 +186,15 @@ export const TicketDownloadPage = () => {
         >
           <Download />
           <span className="caption-12 text-grayscale-80">이미지 다운로드</span>
-          {isModalOpen && (
-            <DownLoadModal
-              onClose={handleCloseModal}
-              onConfirm={onDownloadBtn}
-            />
-          )}
 
           {toast && (
             <Toast setToast={setToast} message={"티켓 다운이 완료되었어요"} />
           )}
         </div>
+
+        {isModalOpen && (
+          <DownLoadModal onClose={handleCloseModal} onConfirm={onDownloadBtn} />
+        )}
       </div>
     </div>
   );