fix: 유저 취향 기반 클라코북 맞춤 추천 에러 핸들링 및 location 컴포넌트 수정

kusitms-com · Nov 28, 2024 · 9f6d0ba · 9f6d0ba
1 parent c398d0c
commit 9f6d0ba
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 91 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/index.tsx b/src/components/Main/Analysis/TicketRecommend/index.tsx
@@ -6,7 +6,7 @@ import { useGetRecommendClacoTicket } from "@/hooks/queries";
 import { useNavigate } from "react-router-dom";
 
 export const TicketRecommend = () => {
-  const { data } = useGetRecommendClacoTicket();
+  const { data, isLoading, isError } = useGetRecommendClacoTicket();
 
   const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(
     null
@@ -27,9 +27,15 @@ export const TicketRecommend = () => {
 
   useEffect(() => {
     if (data) {
-      setReviewContent(data.result[0].ticketReviewSummary);
+      if (data?.code === "COM-000") {
+        setReviewContent(data.result[0].ticketReviewSummary);
+      } else {
+        // COM-000 응답 코드 아닌 경우 오류 발생으로 간주 (재로그인 시도하도록 리다이렉트)
+        navigate("/");
+        localStorage.clear();
+      }
     }
-  }, [data]);
+  }, [data, navigate]);
 
   const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
     setTouchEnd(null);
@@ -103,6 +109,15 @@ export const TicketRecommend = () => {
     navigate(`/ticket/${currentTicketId}`);
   };
 
+  if (isLoading || isError) {
+    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">

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) {
+      if (onLocationFilterClick) {
+        onLocationFilterClick(location.value, location.label);
+      }
+    } else {
+      if (onLocationClick) {
+        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={location.value.every((v) => selectedLocation?.includes(v))}
+          onClick={() => handleClick(location)}
         >
           {location.label}
         </TypeButton>

diff --git a/src/pages/TicketBook/page.tsx b/src/pages/TicketBook/page.tsx
@@ -128,6 +128,7 @@ export const ClacoBookPage = () => {
 
   const { shouldShowSkeleton } = useDeferredLoading(isLoading);
 
+  // 데이터 로딩 중일 때는 스켈레톤 UI
   if (shouldShowSkeleton) {
     return (
       <div className="flex flex-col pt-[46px] items-center justify-center px-6">
@@ -145,6 +146,45 @@ export const ClacoBookPage = () => {
     );
   }
 
+  // 데이터 로딩이 완료되고 데이터가 없을 때만 빈 상태 UI
+  if (!isLoading && clacoBookList.length === 0) {
+    return (
+      <div className="flex flex-col pt-[46px] items-center justify-center px-6">
+        <span className="headline2-bold text-grayscale-80 mb-[152px] h-[26px]">
+          티켓북
+        </span>
+        <div className="flex flex-col items-center justify-center">
+          <div className="flex flex-col items-center justify-center">
+            <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>
+
+            <a
+              href="/ticketcreate/search"
+              className="rounded-[5px] px-[89px] py-[14px] text-center bg-grayscale-30 text-grayscale-80 cursor-pointer"
+            >
+              나만의 티켓 만들러 가기
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col pt-[46px] items-center justify-center px-6">
       {clacoBookList.length === 0 ? (
@@ -186,91 +226,61 @@ export const ClacoBookPage = () => {
           )}
         </div>
       )}
-
-      {clacoBookList.length !== 0 ? (
-        <>
-          <div className="pb-[100px]">
-            <RadioGroup
-              defaultValue={String(selectClacoBook?.id)}
-              className="flex flex-col gap-[35px]"
-            >
-              {clacoBookList.map((book) => (
-                <div
-                  key={book.id}
-                  onClick={() => {
-                    if (!isEditing) {
-                      handleClacoBookDetail(book.id as number, book.title);
-                    }
-                  }}
-                >
-                  <ClacoBook data={book} isEditing={isEditing}>
-                    <RadioGroupItem
-                      value={String(book.id)}
-                      id={String(book.id)}
-                      onClick={(e: React.MouseEvent) => {
-                        e.stopPropagation();
-                        setSelectClacoBook(book);
-                      }}
-                    />
-                  </ClacoBook>
-                </div>
-              ))}
-            </RadioGroup>
-          </div>
-
-          {/* 모달 영역 */}
-          {isModalOpen && (
-            <>
-              {action === "delete" && selectClacoBook ? (
-                <DeleteClacoBookModal
-                  clacoBook={selectClacoBook}
-                  onClose={handleCloseModal}
-                  onConfirm={handleDelete}
-                />
-              ) : (
-                <CreateEditModal
-                  clacoBook={action === "edit" ? selectClacoBook : null}
-                  action={action}
-                  onClose={handleCloseModal}
-                  onConfirm={
-                    action == "add" ? handleConfirmCreate : handleConfirmEdit
+      <>
+        <div className="pb-[100px]">
+          <RadioGroup
+            defaultValue={String(selectClacoBook?.id)}
+            className="flex flex-col gap-[35px]"
+          >
+            {clacoBookList.map((book) => (
+              <div
+                key={book.id}
+                onClick={() => {
+                  if (!isEditing) {
+                    handleClacoBookDetail(book.id as number, book.title);
                   }
-                />
-              )}
-            </>
-          )}
+                }}
+              >
+                <ClacoBook data={book} isEditing={isEditing}>
+                  <RadioGroupItem
+                    value={String(book.id)}
+                    id={String(book.id)}
+                    onClick={(e: React.MouseEvent) => {
+                      e.stopPropagation();
+                      setSelectClacoBook(book);
+                    }}
+                  />
+                </ClacoBook>
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
 
-          {/* 토스트 영역 */}
-          {toast && <Toast setToast={setToast} message={message} />}
-        </>
-      ) : (
-        <div className="flex flex-col items-center justify-center">
-          <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>
+        {/* 모달 영역 */}
+        {isModalOpen && (
+          <>
+            {action === "delete" && selectClacoBook ? (
+              <DeleteClacoBookModal
+                clacoBook={selectClacoBook}
+                onClose={handleCloseModal}
+                onConfirm={handleDelete}
+              />
+            ) : (
+              <CreateEditModal
+                clacoBook={action === "edit" ? selectClacoBook : null}
+                action={action}
+                onClose={handleCloseModal}
+                onConfirm={
+                  action == "add" ? handleConfirmCreate : handleConfirmEdit
+                }
+              />
+            )}
+          </>
+        )}
 
-          <a
-            href="/ticketcreate/search"
-            className="rounded-[5px] px-[89px] py-[14px] text-center bg-grayscale-30 text-grayscale-80 cursor-pointer"
-          >
-            나만의 티켓 만들러 가기
-          </a>
-        </div>
-      )}
+        {/* 토스트 영역 */}
+        {toast && <Toast setToast={setToast} message={message} />}
+      </>
     </div>
   );
 };