hotfix: base 경로 수정

src/assets/lotties/onboarding-loading.json

@@ -1,16 +1,16 @@
 {
   "assets": [
-    { "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 },
+    { "h": 339, "id": "0", "p": "MagnifierBackground.png", "u": "https://claco-client.vercel.app/assets/", "w": 344, "e": 0 },
+    { "h": 170, "id": "1", "p": "delicate-COgzgCmJ.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "2", "p": "dynamic-DyHv12pT.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "3", "p": "familiar-Dg6qKd33.png", "u": "https://claco-client.vercel.app/assets/", "w": 168, "e": 0 },
+    { "h": 170, "id": "4", "p": "grand-BYiR4a-o.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "5", "p": "lyrical-BgxdJF4r.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "6", "p": "modern-CpuftXSH.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "7", "p": "novel-DIk8ha5_.png", "u": "https://claco-client.vercel.app/assets/", "w": 168, "e": 0 },
+    { "h": 170, "id": "8", "p": "romantic-o0K20Lyg.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "9", "p": "tragic-5xq7Nqci.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
+    { "h": 170, "id": "10", "p": "classical-BXnO5iTb.png", "u": "https://claco-client.vercel.app/assets/", "w": 170, "e": 0 },
     {
       "id": "17",
       "layers": [

src/components/Browse/ShowFilter/index.tsx

@@ -30,6 +30,21 @@ export const ShowFilter = ({ onClose, onApply }: ShowFilterProps) => {
   const [rangeEnd, setRangeEnd] = useState<Date | null>(null);
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
+  useEffect(() => {
+    const savedFilter = localStorage.getItem("filterObj");
+    if (savedFilter) {
+      const parsedFilter = JSON.parse(savedFilter);
+      setMinPrice(parsedFilter.minPrice || 0);
+      setMaxPrice(parsedFilter.maxPrice || 1000000);
+      setSelectedLocation(parsedFilter.selectedLocation || []);
+      setSelectedFeatures(parsedFilter.categories || []);
+      setRangeStart(
+        parsedFilter.startDate ? new Date(parsedFilter.startDate) : null,
+      );
+      setRangeEnd(parsedFilter.endDate ? new Date(parsedFilter.endDate) : null);
+    }
+  }, []);
+
   useEffect(() => {
     const timer = setTimeout(() => setIsVisible(true), 50);
     return () => clearTimeout(timer);
@@ -86,7 +101,7 @@ export const ShowFilter = ({ onClose, onApply }: ShowFilterProps) => {
     console.log(label);
     if (values.every((value) => selectedLocation.includes(value))) {
       setSelectedLocation(
-        selectedLocation.filter((loc) => !values.includes(loc))
+        selectedLocation.filter((loc) => !values.includes(loc)),
       );
     } else {
       setSelectedLocation([...selectedLocation, ...values]);

src/components/ShowDetail/ShowInformation/ShowOverview/index.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as Megaphone } from "@/assets/svgs/Megaphone.svg";
 import { ReactComponent as Book } from "@/assets/svgs/Book.svg";
 import { Genre } from "@/components/common/Genre";
 import { useNavigate, useParams } from "react-router-dom";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ShowCategory } from "@/types";
 import { usePostLike } from "@/hooks/mutation";
 import { useConcertInfoStore } from "@/libraries/store/concertInfo";
@@ -52,9 +52,19 @@ const ShowOverview = ({
   const navigate = useNavigate();
   const [_liked, setLiked] = useState(liked);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [showButton, setShowButton] = useState(false);
+  const textRef = useRef<HTMLParagraphElement>(null);
   const mutation = usePostLike();
   const { id } = useParams<{ id: string }>();
 
+  useEffect(() => {
+    if (textRef.current) {
+      const height = textRef.current.getBoundingClientRect().height;
+
+      setShowButton(height > 40);
+    }
+  }, [summary]);
+
   const gotoBack = () => {
     navigate(-1);
   };
@@ -132,28 +142,32 @@ const ShowOverview = ({
           <span className="headline2-bold">Claco 쉬운 공연 설명</span>
         </div>
 
-        <p
-          className={`body2-medium text-grayscale-70 mb-[10px] ${
-            isExpanded ? "" : "line-clamp-2"
-          }`}
-        >
-          {summary || "공연 설명이 없습니다."}
-        </p>
-
-        <button
-          onClick={toggleExpanded}
-          className="flex justify-center mb-[17px]"
-        >
-          <BackArrow
-            width="14"
-            height="14"
-            viewBox="0 0 11 20"
-            className={`text-grayscale-60 ${
-              isExpanded ? "rotate-90" : "-rotate-90"
+        <div className="flex flex-col items-center justify-center mb-[17px]">
+          <p
+            ref={textRef}
+            className={`body2-medium text-grayscale-70 ${
+              showButton && !isExpanded ? "line-clamp-2" : "mb-[15px]"
             }`}
-          />
-        </button>
-
+          >
+            {summary || ""}
+          </p>
+
+          {showButton && (
+            <button
+              onClick={toggleExpanded}
+              className="flex justify-center mt-[15px]"
+            >
+              <BackArrow
+                width="14"
+                height="14"
+                viewBox="0 0 11 20"
+                className={`text-grayscale-60 ${
+                  isExpanded ? "rotate-90" : "-rotate-90"
+                }`}
+              />
+            </button>
+          )}
+        </div>
         <div className="flex space-x-2 items-center mb-[22px]">
           <Book />
           <span className="headline2-bold">이런 느낌의 공연이에요</span>

src/components/ShowDetail/ShowInformation/ShowPoster/index.tsx

@@ -15,7 +15,7 @@ const ShowPoster = forwardRef<HTMLDivElement, DetailsInfoSectionProps>(
     const checkImageHeight = () => {
       if (imageRef.current) {
         const imageHeight = imageRef.current.naturalHeight;
-        setIsImageOverflow(imageHeight > 2000);
+        setIsImageOverflow(imageHeight > 4000);
       }
     };
 

src/components/common/CategoryTag/index.tsx

@@ -13,7 +13,7 @@ export const CategoryTag = ({ categoryType, className }: CategoryTagProps) => {
       case "공연예정":
         return "border-[1px] border-grayscale-70";
       default:
-        return;
+        return "border-[1px] border-grayscale-70";
     }
   };
   return (

src/components/common/ShowSummaryCard/index.tsx

@@ -31,7 +31,8 @@ export const ShowSummaryCard = ({ data }: ShowSummaryCardProps) => {
         <img
           src={data.poster}
           alt="poster"
-          className="w-[131px] h-[172px] rounded-[5px] object-cover"
+          className="w-[123px] h-[172px] rounded-[5px] object-cover"
+          onClick={() => gotoShowDetail(data.id)}
         />
         <div className="absolute top-0 left-0 w-full h-[70px] bg-gradient-to-b from-[rgba(0,0,0,0.40)] to-[rgba(102,102,102,0.00)] pointer-events-none"></div>
 
@@ -40,7 +41,7 @@ export const ShowSummaryCard = ({ data }: ShowSummaryCardProps) => {
         </div>
 
         <span
-          className="absolute top-[13px] right-[10px]"
+          className="absolute top-[13px] right-[10px] z-50"
           onClick={handleLike}
         >
           {isLiked ? (
@@ -51,7 +52,7 @@ export const ShowSummaryCard = ({ data }: ShowSummaryCardProps) => {
         </span>
       </div>
 
-      <div className="flex flex-col ml-4 max-w-[207px]" onClick={() => gotoShowDetail(data.id)}>
+      <div className="flex flex-col relative ml-4 max-w-[207px]" onClick={() => gotoShowDetail(data.id)}>
         <div className="flex flex-col min-w-[186px]">
           <span className="caption-12 self-start mb-[9px]">
             <CategoryTag categoryType={data.prfstate} />
@@ -79,6 +80,7 @@ export const ShowSummaryCard = ({ data }: ShowSummaryCardProps) => {
             </span>
           ))}
         </div>
+        <div className="absolute right-0 bottom-0 w-[63px] h-[26px] bg-gradient-to-r from-transparent to-[#1C1C1C]" />
       </div>
     </div>
   );

src/globals.css

@@ -12,7 +12,6 @@
     font-weight: 700;
     font-display: swap;
     src:
-      local("Pretendard Bold"),
       url("./assets/fonts/Pretendard-Bold.subset.woff2") format("woff2"),
       url("./assets/fonts/Pretendard-Bold.subset.woff") format("woff");
   }
@@ -22,7 +21,6 @@
     font-weight: 600;
     font-display: swap;
     src:
-      local("Pretendard SemiBold"),
       url("./assets/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"),
       url("./assets/fonts/Pretendard-SemiBold.subset.woff") format("woff");
   }
@@ -32,7 +30,6 @@
     font-weight: 500;
     font-display: swap;
     src:
-      local("Pretendard Medium"),
       url("./assets/fonts/Pretendard-Medium.subset.woff2") format("woff2"),
       url("./assets/fonts/Pretendard-Medium.subset.woff") format("woff");
   }
@@ -42,7 +39,6 @@
     font-weight: 400;
     font-display: swap;
     src:
-      local("Pretendard Regular"),
       url("./assets/fonts/Pretendard-Regular.subset.woff2") format("woff2"),
       url("./assets/fonts/Pretendard-Regular.subset.woff") format("woff");
   }
@@ -52,7 +48,6 @@
     font-weight: 400;
     font-display: swap;
     src:
-      local("Nonchalance Medium"),
       url("./assets/fonts/Nonchalance-Medium.woff2") format("woff2"),
       url("./assets/fonts/Nonchalance-Medium.woff") format("woff");
   }
@@ -273,4 +268,4 @@ input[type="range"]::-webkit-slider-thumb {
 
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
-}
+}

src/hooks/queries/index.ts

@@ -15,3 +15,4 @@ export { default as useGetClacoBookList } from "./useGetClacoBookList";
 export { default as useGetClacoTicketList } from "./useGetClacoTicketList";
 export { default as useGetTicketReviewDetail } from "./useGetTicketReviewDetail";
 export { default as useGetConcertLikes } from "./useGetConcertLikes";
+export { default as useGetReviewAutoCompleteSearch } from "./useGetReviewAutoCompleteSearch";

src/hooks/queries/useGetReviewAutoCompleteSearch.ts

@@ -0,0 +1,30 @@
+import { client } from "@/apis";
+import { AutoCompleteSearchResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getReviewAutoCompleteSearch = async (
+  query: string,
+): Promise<AutoCompleteSearchResponse> => {
+  const response = await client.get<AutoCompleteSearchResponse>(
+    "/concerts/reviews/search",
+    {
+      params: {
+        query: query,
+      },
+    },
+  );
+  return response.data;
+};
+
+const useGetReviewAutoCompleteSearch = (
+  query: string,
+): UseQueryResult<AutoCompleteSearchResponse, AxiosError> => {
+  return useQuery<AutoCompleteSearchResponse, AxiosError>({
+    queryKey: ["useReviewAutoComplete", query],
+    queryFn: () => getReviewAutoCompleteSearch(query),
+    enabled: query.trim().length !== 0,
+  });
+};
+
+export default useGetReviewAutoCompleteSearch;

src/hooks/utils/extractSchedule.ts

@@ -17,35 +17,80 @@ const extractSchedule = (dtguidance: string): PrfGuidance[] => {
   const scheduleEntries = dtguidance.split(", ");
   const schedule: PrfGuidance[] = [];
 
+  const sortTimes = (times: string[]) => {
+    return times.sort((a, b) => {
+      const timeToMinutes = (time: string) => {
+        const [hours, minutes] = time.split(":").map(Number);
+        return hours * 60 + minutes;
+      };
+      return timeToMinutes(a) - timeToMinutes(b);
+    });
+  };
+
   scheduleEntries.forEach((entry) => {
     const match = entry.match(/(.*)\((.*)\)/);
     if (match) {
       let dayRange = match[1].trim();
-      const times = match[2].split(",").map((time) => time.trim());
+      const times = sortTimes(match[2].split(",").map((time) => time.trim()));
 
       if (dayRange === "HOL") {
         dayRange = "일요일";
       }
 
       if (dayRange.includes("~")) {
         const [startDay, endDay] = dayRange
-          .split("~")
+          .split(" ~ ")
           .map((day) => day.trim());
         const startDayIndex = daysMap.find((d) => d.day === startDay)?.dayIndex;
         const endDayIndex = daysMap.find((d) => d.day === endDay)?.dayIndex;
 
         if (startDayIndex !== undefined && endDayIndex !== undefined) {
-          for (let i = startDayIndex; i <= endDayIndex; i++) {
-            const fullDay = daysMap.find((d) => d.dayIndex === i)?.day;
-            const shortDay = fullDay ? fullDay.slice(0, 1) : null;
-            if (shortDay && !schedule.some((item) => item.day === shortDay)) {
-              schedule.push({ day: shortDay, times });
+          if (startDayIndex <= endDayIndex) {
+            for (let i = startDayIndex; i <= endDayIndex; i++) {
+              const fullDay = daysMap.find((d) => d.dayIndex === i)?.day;
+              const shortDay = fullDay ? fullDay.slice(0, 1) : null;
+              if (shortDay) {
+                const existing = schedule.find((item) => item.day === shortDay);
+                if (existing) {
+                  existing.times = sortTimes([...existing.times, ...times]);
+                } else {
+                  schedule.push({ day: shortDay, times });
+                }
+              }
+            }
+          } else {
+            for (let i = startDayIndex; i < daysMap.length; i++) {
+              const fullDay = daysMap.find((d) => d.dayIndex === i)?.day;
+              const shortDay = fullDay ? fullDay.slice(0, 1) : null;
+              if (shortDay) {
+                const existing = schedule.find((item) => item.day === shortDay);
+                if (existing) {
+                  existing.times = sortTimes([...existing.times, ...times]);
+                } else {
+                  schedule.push({ day: shortDay, times });
+                }
+              }
+            }
+            for (let i = 0; i <= endDayIndex; i++) {
+              const fullDay = daysMap.find((d) => d.dayIndex === i)?.day;
+              const shortDay = fullDay ? fullDay.slice(0, 1) : null;
+              if (shortDay) {
+                const existing = schedule.find((item) => item.day === shortDay);
+                if (existing) {
+                  existing.times = sortTimes([...existing.times, ...times]);
+                } else {
+                  schedule.push({ day: shortDay, times });
+                }
+              }
             }
           }
         }
       } else {
         const shortDay = dayRange.slice(0, 1);
-        if (!schedule.some((item) => item.day === shortDay)) {
+        const existing = schedule.find((item) => item.day === shortDay);
+        if (existing) {
+          existing.times = sortTimes([...existing.times, ...times]);
+        } else {
           schedule.push({ day: shortDay, times });
         }
       }
@@ -55,4 +100,4 @@ const extractSchedule = (dtguidance: string): PrfGuidance[] => {
   return schedule;
 };
 
-export default extractSchedule;
+export default extractSchedule;

src/pages/Browse/page.tsx

@@ -130,6 +130,10 @@ export const BrowsePage = () => {
 
   const handleTabClick = (tab: TabMenu) => {
     setActiveTab(tab);
+    setIsFilterOn(false);
+    setFilterValue(null);
+    localStorage.removeItem("filterObj");
+    handleRefreshClick();
   };
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -304,7 +308,7 @@ export const BrowsePage = () => {
 
               <div className="flex items-center justify-between gap-3 py-1">
                 {hasActiveFilters ? (
-                  <div className="flex text-center gap-[5px] pl-1 overflow-x-auto scrollbar-hide">
+                  <div className="flex text-center gap-[5px] pl-1 py-[2px] overflow-x-auto scrollbar-hide">
                     {filterState.priceRange && (
                       <div className="rounded-[20px] px-[10px] py-1 border-[0.5px] border-grayscale-60 bg-transparent caption-12 text-grayscale-60 whitespace-nowrap">
                         {filterState.priceRange}