+
setColorState("#DD6339")}
+ />
+
setColorState("#D499B8")}
+ />
+
setColorState("#9E8D8E")}
+ />
+
+
+
+
+ );
+};
diff --git a/src/components/Ticket/Modal/Delete/ClacoBook/index.tsx b/src/components/Ticket/Modal/Delete/ClacoBook/index.tsx
new file mode 100644
index 0000000..d39f916
--- /dev/null
+++ b/src/components/Ticket/Modal/Delete/ClacoBook/index.tsx
@@ -0,0 +1,33 @@
+import { Modal } from "@/components/common/Modal";
+import { ClacoBookType } from "../../../ClacoBook";
+
+export type DeleteModalProps = {
+ clacoBook: ClacoBookType;
+ onClose: () => void;
+ onConfirm: (clacoBookId: number) => void;
+};
+
+export const DeleteClacoBookModal = ({
+ clacoBook,
+ onClose,
+ onConfirm,
+}: DeleteModalProps) => {
+ return (
+
onConfirm(clacoBook.id!)}
+ >
+
+
+ 정말 이 티켓북을 삭제하시겠어요?
+
+
+ 지금 삭제하시면 기록된 모든 내용이 삭제되며
+
+
+ );
+};
diff --git a/src/components/Ticket/Modal/Delete/ClacoTicket/index.tsx b/src/components/Ticket/Modal/Delete/ClacoTicket/index.tsx
new file mode 100644
index 0000000..d54513a
--- /dev/null
+++ b/src/components/Ticket/Modal/Delete/ClacoTicket/index.tsx
@@ -0,0 +1,30 @@
+import { Modal } from "@/components/common/Modal";
+
+export type DeleteModalProps = {
+ onClose: () => void;
+ onConfirm: () => void;
+};
+
+export const DeleteClacoTicketModal = ({
+ onClose,
+ onConfirm,
+}: DeleteModalProps) => {
+ return (
+
+
+
+ 정말 이 티켓을 삭제하시겠어요?
+
+
+ 지금 삭제하시면 기록된 모든 내용이 삭제되며
+
+
+ );
+};
diff --git a/src/components/Ticket/Modal/DownLoad/index.tsx b/src/components/Ticket/Modal/DownLoad/index.tsx
new file mode 100644
index 0000000..8c6b00b
--- /dev/null
+++ b/src/components/Ticket/Modal/DownLoad/index.tsx
@@ -0,0 +1,21 @@
+import { Modal } from "@/components/common/Modal";
+
+export type DownLoadModalProps = {
+ onClose: () => void;
+ onConfirm: () => void;
+};
+
+export const DownLoadModal = ({ onClose, onConfirm }: DownLoadModalProps) => {
+ return (
+
+
+ 이 티켓을 다운받으시겠어요?
+
+
+ );
+};
diff --git a/src/components/Ticket/Modal/Move/index.tsx b/src/components/Ticket/Modal/Move/index.tsx
new file mode 100644
index 0000000..fbd17de
--- /dev/null
+++ b/src/components/Ticket/Modal/Move/index.tsx
@@ -0,0 +1,65 @@
+import { Modal } from "@/components/common/Modal";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ClacoBookList } from "@/types";
+import { useState } from "react";
+
+export type MoveModalProps = {
+ clacoBookList: ClacoBookList[];
+ onClose: () => void;
+ onConfirm: () => void;
+ onSelect: React.Dispatch
>;
+};
+
+export const MoveModal = ({
+ clacoBookList,
+ onClose,
+ onConfirm,
+ onSelect,
+}: MoveModalProps) => {
+ const [isMove, setIsMove] = useState(false);
+ const [isSelect, setIsSelect] = useState(false);
+ const handleConfirm = () => {
+ if (isMove) {
+ onConfirm();
+ } else {
+ setIsMove(true);
+ }
+ };
+ return (
+
+ {isMove ? (
+
+
+ 선택하신 폴더로 티켓을 이동하시겠어요?
+
+
+ ) : (
+
+
+ {clacoBookList.map((item, index) => (
+
+ {
+ setIsSelect(true);
+ onSelect(item as ClacoBookList);
+ }}
+ className="mr-[10px] border-grayscale-50 text-grayscale-50"
+ />
+ {item.title}
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/Ticket/PerformanceAttributes/index.tsx b/src/components/Ticket/PerformanceAttributes/index.tsx
new file mode 100644
index 0000000..84a2854
--- /dev/null
+++ b/src/components/Ticket/PerformanceAttributes/index.tsx
@@ -0,0 +1,32 @@
+import { ReactComponent as Book } from "@/assets/svgs/Book.svg";
+import { Genre } from "@/components/common/Genre";
+import { TagCategory } from "@/types";
+
+export type PerformacneAttributesProps = {
+ categories: TagCategory[];
+ title: string;
+};
+
+export const PerformanceAttributes = ({
+ categories,
+ title,
+}: PerformacneAttributesProps) => {
+ return (
+
+
+ {title}
+
+
+ {categories.map((item) => (
+
+
+ {ageOptions.map((age) => (
+ onAgeSelect(age.value)}
+ >
+ {age.label}
+
+ ))}
+
+ );
+};
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
new file mode 100644
index 0000000..4bec81d
--- /dev/null
+++ b/src/components/common/Button/index.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+
+interface ButtonProps extends React.ButtonHTMLAttributes {
+ isChecked: boolean;
+}
+
+export const ConfirmButton = ({
+ isChecked,
+ children,
+ className = "",
+ disabled,
+ ...props
+}: ButtonProps) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/common/Calendar/CalendarDay/index.tsx b/src/components/common/Calendar/CalendarDay/index.tsx
new file mode 100644
index 0000000..9fc1eff
--- /dev/null
+++ b/src/components/common/Calendar/CalendarDay/index.tsx
@@ -0,0 +1,49 @@
+import { CalendarDayProps } from "@/types";
+
+export const CalendarDay = ({
+ day,
+ isSelected,
+ isInRange,
+ isWithinRange,
+ isRangeStart,
+ isRangeEnd,
+ mode,
+ onClick,
+}: CalendarDayProps) => {
+ return (
+
+ {isWithinRange && (
+
+ )}
+
+
+
(
+ new Date(startYear || new Date().getFullYear(), (startMonth || 1) - 1, 1),
+ );
+
+ const [internalRangeStart, setInternalRangeStart] = useState(
+ rangeStart,
+ );
+ const [internalRangeEnd, setInternalRangeEnd] = useState(
+ rangeEnd,
+ );
+
+ const performanceDates = Object.keys(showTimesByDate || "");
+
+ const getYear = () => currentDate.getFullYear();
+ const getMonth = () => currentDate.getMonth();
+
+ const startOfMonth = new Date(getYear(), getMonth(), 1);
+ const endOfMonth = new Date(getYear(), getMonth() + 1, 0);
+ const startDay = startOfMonth.getDay();
+
+ useEffect(() => {
+ if (startYear && startMonth) {
+ setCurrentDate(new Date(startYear, startMonth, 1));
+ }
+ }, [startYear, startMonth]);
+
+ useEffect(() => {
+ setInternalRangeStart(rangeStart);
+ setInternalRangeEnd(rangeEnd);
+ }, [rangeStart, rangeEnd]);
+
+ // single mode: 티켓 등록, range mode: 둘러보기
+ const handleDateClick = (day: number) => {
+ const date = new Date(getYear(), getMonth(), day);
+
+ if (mode === "single") {
+ if (isDateInRange(date) && onDateSelect) {
+ onDateSelect(date);
+ }
+ } else if (mode === "range") {
+ if (!internalRangeStart || (internalRangeStart && internalRangeEnd)) {
+ setInternalRangeStart(date);
+ setInternalRangeEnd(null);
+ } else {
+ if (date < internalRangeStart) {
+ setInternalRangeStart(date);
+ } else {
+ setInternalRangeEnd(date);
+ if (onRangeSelect && internalRangeStart) {
+ onRangeSelect(internalRangeStart, date);
+ }
+ }
+ }
+ }
+ };
+
+ const getCalendarDays = () => {
+ const days: (number | null)[] = [];
+ for (let i = 0; i < startDay; i++) {
+ days.push(null);
+ }
+ for (let day = 1; day <= endOfMonth.getDate(); day++) {
+ days.push(day);
+ }
+ return days;
+ };
+
+ const changeMonth = (months: number) => {
+ setCurrentDate(new Date(getYear(), getMonth() + months, 1));
+ };
+
+ const isDateInRange = (date: Date) => {
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, "0");
+ const day = String(date.getDate()).padStart(2, "0");
+ const dateString = `${year}-${month}-${day}`;
+ return performanceDates.includes(dateString);
+ };
+
+ const isWithinSelectedRange = (date: Date) => {
+ return (
+ internalRangeStart &&
+ internalRangeEnd &&
+ date >= internalRangeStart &&
+ date <= internalRangeEnd
+ );
+ };
+
+ return (
+
+
+ changeMonth(-1)}
+ />
+
+ {`${getYear()}년 ${getMonth() + 1}월`}
+
+ changeMonth(1)}
+ />
+
+
+
+
+ {(() => {
+ const days = getCalendarDays();
+ const rows = [];
+ for (let i = 0; i < days.length; i += 7) {
+ const week = days.slice(i, i + 7);
+ rows.push(
+
+ {week.map((day, index) => {
+ const date = day
+ ? new Date(getYear(), getMonth(), day)
+ : null;
+ const isInRange =
+ mode === "single" && date && isDateInRange(date);
+ const isSelected =
+ mode === "single" &&
+ date &&
+ selectedDate &&
+ selectedDate.toDateString() === date.toDateString();
+ const isWithinRange =
+ mode === "range" && date && isWithinSelectedRange(date);
+ const isRangeStart =
+ mode === "range" &&
+ date &&
+ internalRangeStart &&
+ date.toDateString() === internalRangeStart.toDateString();
+ const isRangeEnd =
+ mode === "range" &&
+ date &&
+ internalRangeEnd &&
+ date.toDateString() === internalRangeEnd.toDateString();
+
+ return (
+
+ {day ? (
+ handleDateClick(day)}
+ />
+ ) : (
+
+ )}
+
+ );
+ })}
+ ,
+ );
+ }
+ return rows;
+ })()}
+
+
+
+ {categoryType === "서양음악(클래식)"
+ ? "클래식"
+ : categoryType === "무용"
+ ? "무용"
+ : categoryType === "공연중"
+ ? "공연 중"
+ : "공연 예정"}
+
+ );
+};
+
+CategoryTag.Skeleton = () => {
+ return (initialGenreIndex);
+ const [isTransitioning, setIsTransitioning] = useState(false);
+ const [userPreference, setUserPreference] = useState([]);
+
+ const { data, isLoading } = useGetUserPreferences();
+
+ useEffect(() => {
+ if (!isLoading && data?.result?.preferCategories) {
+ // console.log(data);
+ setUserPreference(data.result.preferCategories);
+ }
+ }, [isLoading, data]);
+
+ useEffect(() => {
+ setCurrentIndex(initialGenreIndex);
+ }, []);
+
+ useEffect(() => {
+ if (!userPreference.length) return;
+
+ const rotateGenre = () => {
+ setIsTransitioning(true);
+ setTimeout(() => {
+ setCurrentIndex((prev) => (prev + 1) % userPreference.length);
+ setIsTransitioning(false);
+ }, 300);
+ };
+
+ const timer = setTimeout(() => {
+ const interval = setInterval(rotateGenre, 3500);
+ return () => clearInterval(interval);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }, [userPreference]);
+
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+ if (shouldShowSkeleton) {
+ return (
+
+
+
+
+
+
+
+ {Array.from(Array(5).keys()).map((_, index) => (
+
+
+ ))}
+
+
+
+ {type === "main" ? (
+ <>
+ 클라코가 분석한
+
+
+
+
+
+
+
+
+
+ {/* 배경 그라데이션 */}
+
+
+ {/* 장르 컴포넌트 컨테이너 */}
+
+ {userPreference.length > 0 && (
+
+
+
+
+ {userPreference.map((item, index) => (
+
+
+
+
+
+
+ {formattedWatchDate(watchDate)}
+
+
+ {concertName}
+
+
+
+
+ {concertTags.map((item, index) => (
+
+
+
+
+
+ onConceptClick(
+ "악기나 성악, 오페라 등 음악 자체에 깊이 집중할 수 있는 클래식 공연이 좋아요.",
+ )
+ }
+ >
+ 악기나 성악, 오페라 등 음악 자체에
+
+
+ onConceptClick(
+ "무용, 발레 등 음악과 퍼포먼스를 모두 감상할 수 있는 공연이 좋아요.",
+ )
+ }
+ >
+ 무용, 발레 등 음악과 퍼포먼스를
+
+
+ );
+};
diff --git a/src/components/common/Gender/index.tsx b/src/components/common/Gender/index.tsx
new file mode 100644
index 0000000..2a2d92e
--- /dev/null
+++ b/src/components/common/Gender/index.tsx
@@ -0,0 +1,23 @@
+import { TypeButton } from "@/components/Onboarding/Registration";
+import { GenderProps } from "@/types";
+
+export const Gender = ({ selectedGender, onGenderSelect }: GenderProps) => {
+ const genderOptions = [
+ { label: "남성", value: "MALE" },
+ { label: "여성", value: "FEMALE" },
+ ];
+
+ return (
+
+ {genderOptions.map((gender) => (
+ onGenderSelect(gender.value)}
+ >
+ {gender.label}
+
+ ))}
+
+ );
+};
diff --git a/src/components/common/Genre/index.tsx b/src/components/common/Genre/index.tsx
new file mode 100644
index 0000000..7528663
--- /dev/null
+++ b/src/components/common/Genre/index.tsx
@@ -0,0 +1,77 @@
+import { cn } from "@/lib/utils";
+import { GenreImageMap, GenreKeyword, GenreProps } from "@/types/genre";
+import { Suspense, useEffect, useState } from "react";
+
+const GENRE_IMAGE_MAP: GenreImageMap = {
+ 웅장한: () => import("@/assets/images/Genre/grand.png"),
+ 섬세한: () => import("@/assets/images/Genre/delicate.png"),
+ 고전적인: () => import("@/assets/images/Genre/classical.png"),
+ 현대적인: () => import("@/assets/images/Genre/modern.png"),
+ 서정적인: () => import("@/assets/images/Genre/lyrical.png"),
+ 역동적인: () => import("@/assets/images/Genre/dynamic.png"),
+ 낭만적인: () => import("@/assets/images/Genre/romantic.png"),
+ 비극적인: () => import("@/assets/images/Genre/tragic.png"),
+ 친숙한: () => import("@/assets/images/Genre/familiar.png"),
+ 새로운: () => import("@/assets/images/Genre/novel.png"),
+};
+
+const defaultImage = () => import("@/assets/images/Genre/classical.png");
+
+const isGenreKeyword = (keyword: string): keyword is GenreKeyword => {
+ return Object.keys(GENRE_IMAGE_MAP).includes(keyword);
+};
+
+export const Genre = ({
+ genreImgURL,
+ genreKeyword,
+ className,
+ isShow = false,
+}: GenreProps) => {
+ const [imageSrc, setImageSrc] = useState("");
+
+ useEffect(() => {
+ const loadImage = async () => {
+ try {
+ if (isGenreKeyword(genreKeyword)) {
+ const imageModule = await GENRE_IMAGE_MAP[genreKeyword]();
+ setImageSrc(imageModule.default);
+ } else {
+ const defaultImageModule = await defaultImage();
+ setImageSrc(defaultImageModule.default);
+ }
+ } catch (error) {
+ console.error("Error loading image:", error);
+ const defaultImageModule = await defaultImage();
+ setImageSrc(defaultImageModule.default);
+ }
+ };
+
+ loadImage();
+ }, [genreKeyword]);
+
+ return (
+
+
+ }
+ >
+ {imageSrc && (
+
+ )}
+
+ {!isShow && (
+
+ {genreKeyword}
+
+ )}
+
+ {AREA_LIST.map((location, index) => (
+ selectedLocation?.includes(v))
+ }
+ onClick={() => handleClick(location)}
+ >
+ {location.label}
+
+ ))}
+
+ );
+};
diff --git a/src/components/common/Modal/ThumbnailModal/index.tsx b/src/components/common/Modal/ThumbnailModal/index.tsx
new file mode 100644
index 0000000..3987da5
--- /dev/null
+++ b/src/components/common/Modal/ThumbnailModal/index.tsx
@@ -0,0 +1,91 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Swiper as SwiperType } from "swiper";
+import { FreeMode, Thumbs } from "swiper/modules";
+import { ReactComponent as X } from "@/assets/svgs/X-icon.svg";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/thumbs";
+
+export type ThumbnailModalProps = {
+ isShow: boolean;
+ isAnimating: boolean;
+ thumbsSwiper: SwiperType | null;
+ selectIndex: number;
+ images: string[];
+ onClose: () => void;
+ setThumbsSwiper: (swiper: SwiperType | null) => void;
+};
+
+export const ThumbnailModal = ({
+ isShow,
+ isAnimating,
+ thumbsSwiper,
+ selectIndex,
+ images,
+ onClose,
+ setThumbsSwiper,
+}: ThumbnailModalProps) => {
+ if (!isShow && !isAnimating) return null;
+
+ return (
+ <>
+
+
+
+ {images.map((image, index) => (
+
+
+
+
+
+ ))}
+
+
+
+ {images.map((image, index) => (
+
+
+ ))}
+
+
+
+
+
+ {title}
+
+
{children && <>{children}}
+
+
+ {negativeButtonText}
+
+
+ {positiveButtonText}
+
+
+
+
("");
+ const [errorMessage, setErrorMessage] = useState("");
+ const [hasStartedTyping, setHasStartedTyping] = useState(false);
+ const [isDuplicate, setIsDuplicate] = useState(false);
+ const debouncedNickname = useDebouncedState(nickname, 300);
+
+ const validateNickname = useCallback((name: string): string => {
+ const specialCharRegex = /[!@#$%^&*(),.?":{}|<>]/g;
+ if (name.length < 2) {
+ return "2글자 이상 작성해주세요";
+ } else if (specialCharRegex.test(name)) {
+ return "특수문자는 사용할 수 없어요";
+ }
+ return "";
+ }, []);
+
+ const validateDuplicatedNickname = useCallback(
+ async (name: string) => {
+ try {
+ const response = await nickNameCheck(name);
+ if (response.code === "MEM-009") {
+ setErrorMessage("이미 사용 중인 닉네임이에요");
+ setIsDuplicate(true);
+ setIsChecked(false);
+ } else {
+ setErrorMessage("");
+ setIsDuplicate(false);
+ setIsChecked(true);
+ setNickname(name);
+ }
+ } catch (error) {
+ console.error(error);
+ setIsChecked(false);
+ }
+ },
+ [setErrorMessage, setIsDuplicate, setIsChecked, setNickname]
+ );
+
+ useEffect(() => {
+ const error = validateNickname(nickname);
+ if (error) {
+ setErrorMessage(error);
+ setIsChecked(false);
+ setIsDuplicate(false);
+ return;
+ }
+
+ if (debouncedNickname) {
+ validateDuplicatedNickname(debouncedNickname);
+ }
+ }, [
+ debouncedNickname,
+ nickname,
+ validateNickname,
+ validateDuplicatedNickname,
+ setErrorMessage,
+ setIsChecked,
+ setIsDuplicate,
+ ]);
+
+ const handleInputChange = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setLocalNickname(value);
+ setNickname(value);
+ if (!hasStartedTyping) {
+ setHasStartedTyping(true);
+ }
+ };
+
+ return (
+ <>
+
+
+ {nickname.length}/10
+
+
+ {hasStartedTyping && errorMessage ? (
+
+ {errorMessage}
+
+ ) : hasStartedTyping && isChecked ? (
+
+ ) : null}
+
+ *최소 2글자 이상 사용할 수 있어요
+ *특수문자는 사용할 수 없어요
+
+
+ );
+};
diff --git a/src/components/common/Price/index.tsx b/src/components/common/Price/index.tsx
new file mode 100644
index 0000000..0ab9ed4
--- /dev/null
+++ b/src/components/common/Price/index.tsx
@@ -0,0 +1,68 @@
+import { PriceProps } from "@/types";
+
+export const Price = ({
+ minPrice,
+ maxPrice,
+ onMinPriceChange,
+ onMaxPriceChange,
+}: PriceProps) => {
+ const handleMinPriceChange = (e: React.ChangeEvent) => {
+ const value = Number(e.target.value);
+ if (value + 10000 <= maxPrice) {
+ onMinPriceChange(value);
+ }
+ };
+
+ const handleMaxPriceChange = (e: React.ChangeEvent) => {
+ const value = Number(e.target.value);
+ if (value - 10000 >= minPrice) {
+ onMaxPriceChange(value);
+ }
+ };
+
+ return (
+ <>
+
+
+
+ {minPrice.toLocaleString()}원 ~ {maxPrice.toLocaleString()}원
+
+
+
+
+
+ 0원
+ 1,000,000원
+
+
+ );
+};
diff --git a/src/components/common/ReviewTag/index.tsx b/src/components/common/ReviewTag/index.tsx
new file mode 100644
index 0000000..a1f852d
--- /dev/null
+++ b/src/components/common/ReviewTag/index.tsx
@@ -0,0 +1,14 @@
+import { ReviewTagProps } from "@/types";
+
+export const ReviewTag = ({ isPlace = false, children, onClick, isSelected = false }: ReviewTagProps) => {
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/common/ScrollTop/index.tsx b/src/components/common/ScrollTop/index.tsx
new file mode 100644
index 0000000..03d7734
--- /dev/null
+++ b/src/components/common/ScrollTop/index.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollTop() {
+ const { pathname } = useLocation();
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [pathname]);
+
+ return null;
+}
diff --git a/src/components/common/Search/Bar/index.tsx b/src/components/common/Search/Bar/index.tsx
new file mode 100644
index 0000000..c298210
--- /dev/null
+++ b/src/components/common/Search/Bar/index.tsx
@@ -0,0 +1,25 @@
+import { ReactComponent as Search } from "@/assets/svgs/search.svg";
+import { SearchBarProps } from "@/types";
+import { forwardRef } from "react";
+
+export const SearchBar = forwardRef(
+ ({ value, onChange, onKeyDown, onFocus, placeholder }, ref) => {
+ return (
+
+
+ );
+ }
+);
+
+SearchBar.displayName = "SearchBar";
diff --git a/src/components/common/Search/Card/index.tsx b/src/components/common/Search/Card/index.tsx
new file mode 100644
index 0000000..de57a10
--- /dev/null
+++ b/src/components/common/Search/Card/index.tsx
@@ -0,0 +1,31 @@
+import { CategoryTag } from "@/components/common/CategoryTag";
+import { HighlightText } from "../HighLight";
+import { extractDateRange } from "@/hooks/utils";
+import { SearchCardProps } from "@/types";
+
+export const SearchCard = ({
+ data,
+ searchKeyWord,
+ className = "",
+ onClick,
+}: SearchCardProps) => {
+ return (
+
+
+
+
+
+
+ {extractDateRange(data.prfpdfrom, data.prfpdto)}
+
+
{text} ;
+
+ const parts = text.split(new RegExp(`(${highlight})`, "gi"));
+
+ return (
+
+ {parts.map((part, index) =>
+ part.toLowerCase() === highlight?.toLowerCase() ? (
+
+ {part}
+
+ ) : (
+ {part}
+ )
+ )}
+
+ );
+};
diff --git a/src/components/common/ShowFilterTab/index.tsx b/src/components/common/ShowFilterTab/index.tsx
new file mode 100644
index 0000000..019348e
--- /dev/null
+++ b/src/components/common/ShowFilterTab/index.tsx
@@ -0,0 +1,33 @@
+import { ShowFilterTabProps, TabMenuItem } from "@/types";
+
+const TEB_MENU: TabMenuItem[] = [
+ { value: null, label: "전체" },
+ { value: "서양음악(클래식)", label: "클래식" },
+ { value: "무용", label: "무용" },
+];
+
+export const ShowFilterTab = ({
+ activeTab,
+ onTabClick,
+ className = "",
+}: ShowFilterTabProps) => {
+ return (
+
+ {TEB_MENU.map((tab, index) => (
+ onTabClick(tab.value)}
+ >
+ {tab.label}
+
+ ))}
+
+ );
+};
diff --git a/src/components/common/ShowSummaryCard/const/index.ts b/src/components/common/ShowSummaryCard/const/index.ts
new file mode 100644
index 0000000..91aaf7f
--- /dev/null
+++ b/src/components/common/ShowSummaryCard/const/index.ts
@@ -0,0 +1,94 @@
+import { Show } from "@/types";
+import poster2 from "@/assets/images/poster2.gif";
+import poster10 from "@/assets/images/poster10.gif";
+import poster13 from "@/assets/images/poster13.png";
+
+export const initialShowData: Show[] = [
+ {
+ id: 1,
+ posterImage: poster10,
+ showType: "무용",
+ status: "공연중",
+ defaultLiked: true,
+ title: "유니버설발레단 (호두까기 인형) - 성남",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: true,
+ },
+ {
+ id: 2,
+ posterImage: poster13,
+ showType: "서양음악(클래식)",
+ status: "공연중",
+ defaultLiked: false,
+ title: "대니 구 크리스마스 콘서트 ",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: false,
+ },
+ {
+ id: 3,
+ posterImage: poster2,
+ showType: "무용",
+ status: "completed",
+ defaultLiked: false,
+ title: "라트라비아타",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: false,
+ },
+ {
+ id: 4,
+ posterImage: poster2,
+ showType: "무용",
+ status: "공연예정",
+ defaultLiked: false,
+ title: "라트라비아타",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: false,
+ },
+ {
+ id: 5,
+ posterImage: poster2,
+ showType: "무용",
+ status: "completed",
+ defaultLiked: false,
+ title: "라트라비아타",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: false,
+ },
+ {
+ id: 6,
+ posterImage: poster2,
+ showType: "서양음악(클래식)",
+ status: "공연중",
+ defaultLiked: false,
+ title: "라트라비아타",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: false,
+ },
+];
+
+export const searchResultData: Show[] = [
+ {
+ id: 1,
+ posterImage: poster10,
+ showType: "무용",
+ status: "공연예정",
+ defaultLiked: true,
+ title: "유니버설발레단 (호두까기 인형) - 성남",
+ location: "예술의 전당 오페라 극장",
+ date: "2024.11.30",
+ keywords: ["섬세한", "역동적인", "서정적인", "웅장한", "새로운"],
+ isLiked: true,
+ },
+];
diff --git a/src/components/common/ShowSummaryCard/index.tsx b/src/components/common/ShowSummaryCard/index.tsx
new file mode 100644
index 0000000..d435956
--- /dev/null
+++ b/src/components/common/ShowSummaryCard/index.tsx
@@ -0,0 +1,91 @@
+import { ReactComponent as Heart } from "@/assets/svgs/Heart.svg";
+import { CategoryTag } from "@/components/common/CategoryTag";
+import { Skeleton } from "@/components/ui/skeleton";
+import { usePostLike } from "@/hooks/mutation";
+import { extractDateRange } from "@/hooks/utils";
+import { ShowSummaryCardProps } from "@/types";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const ShowSummaryCard = ({ data }: ShowSummaryCardProps) => {
+ const navigate = useNavigate();
+ const [isLiked, setIsLiked] = useState(data.liked);
+ const mutation = usePostLike();
+
+ const gotoShowDetail = (id: number) => {
+ navigate(`/show/${id}`);
+ };
+
+ const handleLike = () => {
+ setIsLiked((prev) => !prev);
+ mutation.mutate(data.id, {
+ onError: () => {
+ setIsLiked((prev) => !prev);
+ },
+ });
+ };
+
+ return (
+
+
+
gotoShowDetail(data.id)}
+ />
+
+
+
+
+
+
+ {isLiked ? (
+
+
+
+
gotoShowDetail(data.id)}>
+
+
+
+
+ {data.prfnm}
+
+
+ {data.fcltynm}
+
+
+ {extractDateRange(data.prfpdfrom, data.prfpdto)}
+
+
+
+
+
+
+ {data.categories.map((category, index) => (
+
+ {category.category}
+
+ ))}
+
+
+
+
,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..df330eb
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ return (
+
+
+
+
+
+ );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..070d715
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ );
+}
+
+export { Skeleton };
diff --git a/src/globals.css b/src/globals.css
index 7ce139b..e5eca7f 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -3,23 +3,121 @@
@tailwind utilities;
@layer base {
+ * {
+ @apply border-border;
+ }
+
+ @font-face {
+ font-family: Pretendard;
+ font-weight: 700;
+ font-display: swap;
+ src:
+ url("./assets/fonts/Pretendard-Bold.subset.woff2") format("woff2"),
+ url("./assets/fonts/Pretendard-Bold.subset.woff") format("woff");
+ }
+
+ @font-face {
+ font-family: Pretendard;
+ font-weight: 600;
+ font-display: swap;
+ src:
+ url("./assets/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"),
+ url("./assets/fonts/Pretendard-SemiBold.subset.woff") format("woff");
+ }
+
+ @font-face {
+ font-family: Pretendard;
+ font-weight: 500;
+ font-display: swap;
+ src:
+ url("./assets/fonts/Pretendard-Medium.subset.woff2") format("woff2"),
+ url("./assets/fonts/Pretendard-Medium.subset.woff") format("woff");
+ }
+
+ @font-face {
+ font-family: Pretendard;
+ font-weight: 400;
+ font-display: swap;
+ src:
+ url("./assets/fonts/Pretendard-Regular.subset.woff2") format("woff2"),
+ url("./assets/fonts/Pretendard-Regular.subset.woff") format("woff");
+ }
+
@font-face {
- font-family: 'Pretendard';
- src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
+ font-family: Nonchalance;
+ font-weight: 400;
+ font-display: swap;
+ src:
+ url("./assets/fonts/Nonchalance-Medium.woff2") format("woff2"),
+ url("./assets/fonts/Nonchalance-Medium.woff") format("woff");
}
+
html {
- font-size: 62.5%;
- font-family: pretendard;
+ background-color: #1c1c1c;
+ @media (max-width: 450px) {
+ font-size: 15px;
+ }
+ @media (max-width: 375px) {
+ font-size: 12px;
+ }
}
- body {
- display: flex;
- justify-content: center;
- align-items: center;
- border: 1px solid #222;
+ body {
+ @apply bg-background text-foreground;
+ }
- max-width: 430px;
- min-height: 100vh;
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+ --ring: 0 0% 3.9%;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ --radius: 0.5rem;
+ }
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+ --ring: 0 0% 83.1%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%;
}
}
@@ -61,12 +159,113 @@
@apply text-[1rem] font-medium leading-normal tracking-[-0.01em];
}
.body1-regular {
- @apply text-[1rem] font-regular leading-normal tracking-[-0.01em];
+ @apply text-[1rem] font-normal leading-normal tracking-[-0.01em];
+ }
+ .body2-semibold {
+ @apply text-[0.875rem] font-semibold leading-normal tracking-[-0.01em];
}
.body2-medium {
- @apply text-[0.9375rem] font-medium leading-normal tracking-[-0.01em];
+ @apply text-[0.875rem] font-medium leading-normal tracking-[-0.01em];
}
.body2-regular {
- @apply text-[0.9375rem] font-regular leading-normal tracking-[-0.01em];
+ @apply text-[0.875rem] font-normal leading-normal tracking-[-0.01em];
+ }
+ .caption-13 {
+ @apply text-[0.8125rem] font-normal leading-normal tracking-[-0.02em];
+ }
+ .caption-12 {
+ @apply text-[0.75rem] font-normal leading-normal tracking-[-0.02em];
+ }
+}
+
+@layer utilities {
+ .carousel-item-overlay::after {
+ content: "";
+ @apply absolute inset-0 bg-black rounded-lg bg-opacity-20;
}
}
+
+input[type="range"] {
+ pointer-events: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ height: 0.875rem;
+ width: 0.875rem;
+ border-radius: 50%;
+ background-color: #f1efef;
+ -webkit-appearance: none;
+ pointer-events: auto;
+}
+
+.swiper-pagination {
+ position: absolute;
+ bottom: 70px !important;
+ right: 10px;
+ width: auto !important;
+ margin: 0;
+}
+
+.clacobook .swiper-pagination {
+ position: absolute;
+ bottom: 0px !important;
+ right: 0px;
+ width: auto !important;
+ margin: 0;
+}
+
+.swiper-pagination-bullet {
+ padding-top: -20px;
+ border-radius: 50%;
+ width: 6px;
+ height: 6px;
+ text-align: center;
+ line-height: 30px;
+ font-size: 12px;
+ color: #000;
+ opacity: 1;
+ background: #626262;
+}
+
+.swiper-pagination-bullet-active {
+ color: #fff;
+ background: #d9d9d9;
+}
+
+.thumbnail .swiper-slide {
+ border-radius: 5px;
+ max-width: 90px;
+ margin-right: 20px;
+ img {
+ border-radius: 5px;
+ }
+}
+
+.thumbnail .swiper-slide-thumb-active {
+ max-width: 90px;
+ border: 1px solid #ecebe7;
+ border-radius: 5px;
+}
+
+.change-gender-fillcolor path {
+ fill: #e9663a;
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.slide-up {
+ animation: slideUp 1s ease-out;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/hooks/mutation/index.ts b/src/hooks/mutation/index.ts
new file mode 100644
index 0000000..85f8a99
--- /dev/null
+++ b/src/hooks/mutation/index.ts
@@ -0,0 +1,9 @@
+export { default as usePostLike } from "./usePostLike";
+export { default as usePostTicketReview } from "./usePostTicketReview";
+export { default as usePutTicketImage } from "./usePutTicketImage";
+export { default as usePostCreateClacoBook } from "./usePostCreateClacoBook";
+export { default as useDeleteClacoBook } from "./useDeleteClacoBook";
+export { default as usePutEditClacoBook } from "./usePutEditClacoBook";
+export { default as usePutMoveClacoTicket } from "./usePutMoveClacoTicket";
+export { default as useDeleteClacoTicket } from "./useDeleteClacoTicket";
+export { default as usePutEditTicketReview } from "./usePutEditTicketReview";
diff --git a/src/hooks/mutation/useDeleteClacoBook.ts b/src/hooks/mutation/useDeleteClacoBook.ts
new file mode 100644
index 0000000..eda81a6
--- /dev/null
+++ b/src/hooks/mutation/useDeleteClacoBook.ts
@@ -0,0 +1,27 @@
+import { client } from "@/apis";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+const deleteClacoBook = async (bookId: number) => {
+ const res = await client.delete(`/claco-books/claco-book/${bookId}`);
+ return res.data;
+};
+
+const useDeleteClacoBook = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: deleteClacoBook,
+ onSuccess: (res) => {
+ if (res.code === "COM-000") {
+ console.log("클라코북 삭제 성공");
+ queryClient.invalidateQueries({ queryKey: ["clacoBookList"] });
+ } else {
+ console.log("클라코북을 삭제하는 도중 에러가 발생했습니다.");
+ }
+ },
+ onError: (error) => {
+ console.error("클라코북 생성 실패", error);
+ },
+ });
+};
+
+export default useDeleteClacoBook;
diff --git a/src/hooks/mutation/useDeleteClacoTicket.ts b/src/hooks/mutation/useDeleteClacoTicket.ts
new file mode 100644
index 0000000..4bca0a6
--- /dev/null
+++ b/src/hooks/mutation/useDeleteClacoTicket.ts
@@ -0,0 +1,31 @@
+import { client } from "@/apis";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+const deleteClacoTicket = async (ticketReviewId: number) => {
+ const res = await client.delete(`/ticket-reviews/${ticketReviewId}`);
+ return res.data;
+};
+
+const useDeleteClacoTicket = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: deleteClacoTicket,
+ onSuccess: (res) => {
+ if (res.code === "COM-000") {
+ console.log("클라코 티켓 삭제 성공");
+ queryClient.invalidateQueries({ queryKey: ["clacoTicketList"] });
+ } else if (res.code === "TCK-001") {
+ console.log("클라코 티켓을 찾을 수 없습니다.");
+ } else if (res.code === "MEM-999") {
+ console.log("해당 클라코 티켓의 소유주가 아니라 삭제할 수 없습니다.");
+ } else {
+ console.log("클라코 티켓을 삭제하는데 오류가 발생했습니다.");
+ }
+ },
+ onError: (error) => {
+ console.error("클라코 티켓 삭제 실패", error);
+ },
+ });
+};
+
+export default useDeleteClacoTicket;
diff --git a/src/hooks/mutation/usePostCreateClacoBook.ts b/src/hooks/mutation/usePostCreateClacoBook.ts
new file mode 100644
index 0000000..e401b80
--- /dev/null
+++ b/src/hooks/mutation/usePostCreateClacoBook.ts
@@ -0,0 +1,40 @@
+import { client } from "@/apis";
+import { ClacoBookList, ClacoBookListResponse } from "@/types";
+import {
+ useMutation,
+ UseMutationResult,
+ useQueryClient,
+} from "@tanstack/react-query";
+import { AxiosError, AxiosResponse } from "axios";
+
+const createClacoBook = async (
+ clacobook: ClacoBookList
+): Promise => {
+ const res: AxiosResponse =
+ await client.post("/claco-books", clacobook);
+ return res.data;
+};
+
+const usePostCreateClacoBook = (): UseMutationResult<
+ ClacoBookListResponse,
+ AxiosError,
+ ClacoBookList
+> => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: createClacoBook,
+ onSuccess: (res) => {
+ if (res.code === "COM-000") {
+ console.log("클라코북 생성 성공");
+ queryClient.invalidateQueries({ queryKey: ["clacoBookList"] });
+ } else if (res.code === "CLB-010") {
+ console.log("클라코북은 최대 5개까지만 보유할 수 있습니다");
+ }
+ },
+ onError: (error) => {
+ console.error("클라코북 생성 실패", error);
+ },
+ });
+};
+
+export default usePostCreateClacoBook;
diff --git a/src/hooks/mutation/usePostLike.ts b/src/hooks/mutation/usePostLike.ts
new file mode 100644
index 0000000..0671371
--- /dev/null
+++ b/src/hooks/mutation/usePostLike.ts
@@ -0,0 +1,36 @@
+import { client } from "@/apis";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export type Like = {
+ likeId: number;
+ liked: boolean;
+};
+
+const postLike = async (concertId: number) => {
+ const response = await client.post(`/concerts/likes/${concertId}`, {});
+ return response.data;
+};
+
+const usePostLike = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: postLike,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["userBased"] });
+ queryClient.invalidateQueries({ queryKey: ["itemBased"] });
+ queryClient.invalidateQueries({ queryKey: ["concert-data"] });
+ queryClient.invalidateQueries({
+ queryKey: ["search-concert-data"],
+ });
+ queryClient.invalidateQueries({
+ queryKey: ["search-liked-concert-data"],
+ });
+ queryClient.invalidateQueries({ queryKey: ["showDetail"] });
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+};
+
+export default usePostLike;
diff --git a/src/hooks/mutation/usePostTicketReview.ts b/src/hooks/mutation/usePostTicketReview.ts
new file mode 100644
index 0000000..2a1cf59
--- /dev/null
+++ b/src/hooks/mutation/usePostTicketReview.ts
@@ -0,0 +1,63 @@
+import { client } from "@/apis";
+import { TicketReviewRequest, TicketReviewResponse } from "@/types";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+const postTicketReview = async (
+ request: TicketReviewRequest
+): Promise => {
+ const formData = new FormData();
+ formData.append(
+ "request",
+ new Blob([JSON.stringify(request)], {
+ type: "application/json",
+ })
+ );
+
+ if (request.files.length == 0) {
+ formData.append("files", "");
+ } else {
+ request.files.forEach((file: File) => {
+ formData.append("files", file);
+ });
+ }
+
+ const response = await client.post(
+ "/ticket-reviews",
+ formData,
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ }
+ );
+
+ return response.data;
+};
+
+const usePostTicketReview = () => {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: postTicketReview,
+ onSuccess: (data) => {
+ console.log(data);
+ localStorage.removeItem("showDate");
+ localStorage.removeItem("showTime");
+ localStorage.removeItem("showPlace");
+ localStorage.removeItem("seat");
+ localStorage.removeItem("castingList");
+ const ticketReviewId = data.result?.ticketReviewId;
+ if (ticketReviewId) {
+ localStorage.setItem("ticketReviewId", ticketReviewId.toString());
+ }
+ queryClient.invalidateQueries({ queryKey: ["clacoTicketList"] });
+ navigate("/ticketcreate/download");
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+};
+
+export default usePostTicketReview;
diff --git a/src/hooks/mutation/usePutEditClacoBook.ts b/src/hooks/mutation/usePutEditClacoBook.ts
new file mode 100644
index 0000000..14cacd0
--- /dev/null
+++ b/src/hooks/mutation/usePutEditClacoBook.ts
@@ -0,0 +1,40 @@
+import { client } from "@/apis";
+import { ClacoBookList, ClacoBookListResponse } from "@/types";
+import {
+ useMutation,
+ UseMutationResult,
+ useQueryClient,
+} from "@tanstack/react-query";
+import { AxiosError, AxiosResponse } from "axios";
+
+const editClacoBook = async (
+ clacobook: ClacoBookList
+): Promise => {
+ const res: AxiosResponse =
+ await client.put("/claco-books", clacobook);
+ return res.data;
+};
+
+const usePutEditClacoBook = (): UseMutationResult<
+ ClacoBookListResponse,
+ AxiosError,
+ ClacoBookList
+> => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: editClacoBook,
+ onSuccess: (res) => {
+ if (res.code === "COM-000") {
+ console.log("클라코북 수정 성공");
+ queryClient.invalidateQueries({ queryKey: ["clacoBookList"] });
+ } else if (res.code === "CLB-001") {
+ console.log("클라코북을 수정하는 중에 문제가 발생했어요");
+ }
+ },
+ onError: (error) => {
+ console.error("클라코북 수정 실패", error);
+ },
+ });
+};
+
+export default usePutEditClacoBook;
diff --git a/src/hooks/mutation/usePutEditTicketReview.ts b/src/hooks/mutation/usePutEditTicketReview.ts
new file mode 100644
index 0000000..8637ea9
--- /dev/null
+++ b/src/hooks/mutation/usePutEditTicketReview.ts
@@ -0,0 +1,54 @@
+import { client } from "@/apis";
+import {
+ EditClacoTicketReviewProps,
+ EditClacoTicketReviewResponse,
+} from "@/types";
+import {
+ useMutation,
+ UseMutationResult,
+ useQueryClient,
+} from "@tanstack/react-query";
+import { AxiosError, AxiosResponse } from "axios";
+
+const editClacoTicketReview = async (
+ editData: EditClacoTicketReviewProps
+): Promise => {
+ const res: AxiosResponse =
+ await client.put(
+ "/ticket-reviews",
+ editData
+ );
+ return res.data;
+};
+
+const usePutEditTicketReview = (): UseMutationResult<
+ EditClacoTicketReviewResponse,
+ AxiosError,
+ EditClacoTicketReviewProps
+> => {
+ const queryClient = useQueryClient();
+ return useMutation<
+ EditClacoTicketReviewResponse,
+ AxiosError,
+ EditClacoTicketReviewProps
+ >({
+ mutationFn: editClacoTicketReview,
+ onSuccess: (res) => {
+ if (res.code === "COM-000") {
+ console.log("클라코 티켓 리뷰 수정 성공");
+ queryClient.invalidateQueries({ queryKey: ["ticketReviewDetail"] });
+ } else if (res.code === "TCK-001") {
+ console.log("클라코 티켓 리뷰를 찾을 수 없습니다");
+ } else if (res.code === "MEM-999") {
+ console.log("해당 리뷰의 작성자가 아닙니다.");
+ } else {
+ console.log("클라코 티켓 리뷰 수정 중에 문제가 발생했습니다.");
+ }
+ },
+ onError: (error) => {
+ console.error("클라코 티켓 리뷰 수정 실패", error);
+ },
+ });
+};
+
+export default usePutEditTicketReview;
diff --git a/src/hooks/mutation/usePutMoveClacoTicket.ts b/src/hooks/mutation/usePutMoveClacoTicket.ts
new file mode 100644
index 0000000..745907d
--- /dev/null
+++ b/src/hooks/mutation/usePutMoveClacoTicket.ts
@@ -0,0 +1,36 @@
+import { client } from "@/apis";
+import { ClacoBookListResponse } from "@/types";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
+
+export type MoveClacoTicketProps = {
+ ticketReviewId: number;
+ clacoBookId: number;
+};
+
+const moveClacoTicket = async ({
+ ticketReviewId,
+ clacoBookId,
+}: MoveClacoTicketProps): Promise => {
+ const res: AxiosResponse =
+ await client.put(
+ `/ticket-reviews/${ticketReviewId}/claco-books/${clacoBookId}`
+ );
+ return res.data;
+};
+
+const usePutMoveClacoTicket = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: moveClacoTicket,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ["clacoTicketList"] });
+ queryClient.invalidateQueries({ queryKey: ["clacoBookList"] });
+ },
+ onError: (error) => {
+ console.error("클라코 티켓 폴더 이동 실패", error);
+ },
+ });
+};
+
+export default usePutMoveClacoTicket;
diff --git a/src/hooks/mutation/usePutTicketImage.ts b/src/hooks/mutation/usePutTicketImage.ts
new file mode 100644
index 0000000..e9dd259
--- /dev/null
+++ b/src/hooks/mutation/usePutTicketImage.ts
@@ -0,0 +1,53 @@
+import { client } from "@/apis";
+import { useMutation } from "@tanstack/react-query";
+
+export type TicketImageRequest = {
+ id: number;
+ file: File;
+};
+
+export type TicketImageURL = {
+ imageUrl: string;
+};
+
+export type TicketImageResponse = {
+ code: string;
+ message: string;
+ result: TicketImageURL;
+ refreshed: boolean;
+};
+
+const putTicketImage = async (
+ request: TicketImageRequest
+): Promise => {
+ const formData = new FormData();
+ formData.append("file", request.file);
+
+ const response = await client.put(
+ `/ticket-reviews/ticket-images?id=${request.id}`,
+ formData,
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ }
+ );
+
+ return response.data;
+};
+
+const usePutTicketImage = () => {
+ // const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: putTicketImage,
+ onSuccess: () => {
+ // console.log(data);
+ // queryClient.invalidateQueries({ queryKey: ["ticketReviewDetail"] });
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+};
+
+export default usePutTicketImage;
diff --git a/src/hooks/mutation/usePutUserInfo.ts b/src/hooks/mutation/usePutUserInfo.ts
new file mode 100644
index 0000000..b171c55
--- /dev/null
+++ b/src/hooks/mutation/usePutUserInfo.ts
@@ -0,0 +1,52 @@
+import { client } from "@/apis";
+import { UserInfoRequest, UserInfoResponse } from "@/types";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+const putUserInfo = async (
+ request: UserInfoRequest,
+): Promise => {
+ const formData = new FormData();
+ formData.append(
+ "request",
+ new Blob([JSON.stringify(request)], {
+ type: "application/json",
+ }),
+ );
+
+ formData.append("updateNickname", request.updateNickname || "");
+
+ if (request.updateImage) {
+ formData.append("updateImage", request.updateImage);
+ } else {
+ formData.append("files", "");
+ }
+
+ const response = await client.put(`/members`, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ });
+
+ return response.data;
+};
+
+const usePutUserInfo = () => {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: putUserInfo,
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: ["userInfo"],
+ });
+ navigate("/mypage");
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+};
+
+export default usePutUserInfo;
diff --git a/src/hooks/mutation/usePutUserPreference.ts b/src/hooks/mutation/usePutUserPreference.ts
new file mode 100644
index 0000000..d6154f4
--- /dev/null
+++ b/src/hooks/mutation/usePutUserPreference.ts
@@ -0,0 +1,35 @@
+import { client } from "@/apis";
+import { UserPreferencesPutRequest, UserPreferencesPutResponse } from "@/types";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+const putUserPreference = async (
+ preferences: UserPreferencesPutRequest
+): Promise => {
+ const response = await client.put(
+ `/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) => {
+ console.error(error);
+ },
+ });
+};
+
+export default usePutUserPreference;
diff --git a/src/hooks/queries/index.ts b/src/hooks/queries/index.ts
new file mode 100644
index 0000000..901529d
--- /dev/null
+++ b/src/hooks/queries/index.ts
@@ -0,0 +1,18 @@
+export { default as useGetUserPreferences } from "./useGetUserPreferences";
+export { default as useGetUserBased } from "./useGetUserBased";
+export { default as useGetItemBased } from "./useGetItemBased";
+export { default as useGetConcertBased } from "./useGetConcertBased";
+export { default as useGetShowDeatil } from "./useGetShowDetail";
+export { default as useGetRecommendClacoTicket } from "./useGetRecommendClacoTicket";
+export { default as useGetConcertList } from "./useGetConcertList";
+export { default as useGetAutoCompleteSearch } from "./useGetAutoCompleteSearch";
+export { default as useGetSearch } from "./useGetSearch";
+export { default as useGetConcertFilters } from "./useGetConcertFilters";
+export { default as useGetConcertReviewList } from "./useGetConcertReviewList";
+export { default as useGetConcertReviewSize } from "./useGetConcertReviewSize";
+export { default as useGetConcertReviewDetail } from "./useGetConcertReviewDetail";
+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";
diff --git a/src/hooks/queries/useGetAutoCompleteSearch.ts b/src/hooks/queries/useGetAutoCompleteSearch.ts
new file mode 100644
index 0000000..ca494df
--- /dev/null
+++ b/src/hooks/queries/useGetAutoCompleteSearch.ts
@@ -0,0 +1,40 @@
+import { client } from "@/apis";
+import { AutoCompleteSearchResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getAutoCompleteSearch = async (
+ query: string
+): Promise => {
+ const response = await client.get(
+ "/concerts/search",
+ {
+ params: {
+ query: query,
+ },
+ }
+ );
+ return response.data;
+};
+
+const useGetAutoCompleteSearch = (
+ query: string
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["useAutoComplete", query],
+ queryFn: () => getAutoCompleteSearch(query),
+ enabled: query.trim().length !== 0,
+ });
+};
+
+export default useGetAutoCompleteSearch;
+
+/**
+ * No description
+ *
+ * @tags useGetAutoCompleteSearch
+ * @name concert-controller
+ * @summary 검색어 디바운스 쿼리에 따른 자동완성 목록 불러오는 API
+ * @request GET:/concerts/search
+ * @secure bearer
+ */
diff --git a/src/hooks/queries/useGetClacoBookList.ts b/src/hooks/queries/useGetClacoBookList.ts
new file mode 100644
index 0000000..59c1915
--- /dev/null
+++ b/src/hooks/queries/useGetClacoBookList.ts
@@ -0,0 +1,21 @@
+import { client } from "@/apis";
+import { ClacoBookListResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getClacoBookList = async (): Promise => {
+ const response = await client.get("/claco-books");
+ return response.data;
+};
+
+const useGetClacoBookList = (): UseQueryResult<
+ ClacoBookListResponse,
+ AxiosError
+> => {
+ return useQuery({
+ queryKey: ["clacoBookList"],
+ queryFn: () => getClacoBookList(),
+ });
+};
+
+export default useGetClacoBookList;
diff --git a/src/hooks/queries/useGetClacoTicketList.ts b/src/hooks/queries/useGetClacoTicketList.ts
new file mode 100644
index 0000000..491e601
--- /dev/null
+++ b/src/hooks/queries/useGetClacoTicketList.ts
@@ -0,0 +1,24 @@
+import { client } from "@/apis";
+import { ClacoTicketListResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getClacoTicketList = async (
+ clacoBookId: number
+): Promise => {
+ const response = await client.get(
+ `/ticket-reviews/claco-books/${clacoBookId}`
+ );
+ return response.data;
+};
+
+const useGetClacoTicketList = (
+ clacoBookId: number
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["clacoTicketList", clacoBookId],
+ queryFn: () => getClacoTicketList(clacoBookId),
+ });
+};
+
+export default useGetClacoTicketList;
diff --git a/src/hooks/queries/useGetConcertBased.ts b/src/hooks/queries/useGetConcertBased.ts
new file mode 100644
index 0000000..441c9ac
--- /dev/null
+++ b/src/hooks/queries/useGetConcertBased.ts
@@ -0,0 +1,24 @@
+import { client } from "@/apis";
+import { ConcertBasedResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertBased = async (
+ concertId: number,
+): Promise => {
+ const response = await client.get(
+ `/recommendations/concertbased?concertId=${concertId}`,
+ );
+ return response.data;
+};
+
+const useGetConcertBased = (
+ concertId: number,
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["concertBased", concertId],
+ queryFn: () => getConcertBased(concertId),
+ });
+};
+
+export default useGetConcertBased;
diff --git a/src/hooks/queries/useGetConcertFilters.ts b/src/hooks/queries/useGetConcertFilters.ts
new file mode 100644
index 0000000..92e0b7d
--- /dev/null
+++ b/src/hooks/queries/useGetConcertFilters.ts
@@ -0,0 +1,87 @@
+import { client } from "@/apis";
+import {
+ GetConcertFiltersProps,
+ GetConcertInfiniteResponse,
+ GetConcertListResponse,
+} from "@/types";
+import {
+ useInfiniteQuery,
+ UseInfiniteQueryResult,
+} from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertFilters = async ({
+ minPrice,
+ maxPrice,
+ area,
+ startDate,
+ endDate,
+ page,
+ size = 9,
+ categories,
+}: GetConcertFiltersProps) => {
+ const response = await client.get(
+ "/concerts/filters",
+ {
+ params: {
+ minPrice,
+ maxPrice,
+ area,
+ startDate,
+ endDate,
+ page,
+ size,
+ categories,
+ },
+ paramsSerializer: {
+ indexes: null,
+ },
+ }
+ );
+ return response.data;
+};
+
+const useGetConcertFilters = ({
+ minPrice,
+ maxPrice,
+ area,
+ startDate,
+ endDate,
+ size = 9,
+ categories,
+ enabled = false,
+}: Omit & {
+ enabled?: boolean;
+}): UseInfiniteQueryResult => {
+ return useInfiniteQuery({
+ queryKey: [
+ "concert-filter",
+ minPrice,
+ maxPrice,
+ area,
+ startDate,
+ endDate,
+ categories,
+ ],
+ queryFn: ({ pageParam }) =>
+ getConcertFilters({
+ minPrice,
+ maxPrice,
+ area,
+ startDate,
+ endDate,
+ page: pageParam,
+ size,
+ categories,
+ }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage, allPages) => {
+ return lastPage.result.currentPage !== allPages[0].result.totalPage
+ ? lastPage.result.currentPage + 1
+ : undefined;
+ },
+ enabled,
+ });
+};
+
+export default useGetConcertFilters;
diff --git a/src/hooks/queries/useGetConcertLikes.ts b/src/hooks/queries/useGetConcertLikes.ts
new file mode 100644
index 0000000..97543bb
--- /dev/null
+++ b/src/hooks/queries/useGetConcertLikes.ts
@@ -0,0 +1,33 @@
+import { client } from "@/apis";
+import { GetLikedConcertListResponse, GetSearchProps } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertLikes = async ({
+ query,
+ genre,
+}: GetSearchProps): Promise => {
+ const response = await client.get(
+ "/concerts/likes",
+ {
+ params: {
+ query: query,
+ genre: genre,
+ },
+ },
+ );
+ return response.data;
+};
+
+const useGetConcertLikes = ({
+ query,
+ genre,
+}: GetSearchProps): UseQueryResult => {
+ return useQuery({
+ queryKey: ["search-liked-concert-data", query],
+ queryFn: () => getConcertLikes({ query, genre }),
+ enabled: query.trim().length !== 0,
+ });
+};
+
+export default useGetConcertLikes;
diff --git a/src/hooks/queries/useGetConcertList.ts b/src/hooks/queries/useGetConcertList.ts
new file mode 100644
index 0000000..d51c5b4
--- /dev/null
+++ b/src/hooks/queries/useGetConcertList.ts
@@ -0,0 +1,59 @@
+import { client } from "@/apis";
+import {
+ GetConcertInfiniteResponse,
+ GetConcertListProps,
+ GetConcertListResponse,
+} from "@/types";
+import {
+ useInfiniteQuery,
+ UseInfiniteQueryResult,
+} from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertsList = async ({
+ genre,
+ page,
+ size = 9,
+}: GetConcertListProps): Promise => {
+ const response = await client.get(`/concerts/views`, {
+ params: {
+ genre,
+ page,
+ size,
+ },
+ });
+ return response.data;
+};
+
+const useGetConcertsList = ({
+ genre,
+ size = 9,
+ enabled = true,
+}: Omit & {
+ enabled?: boolean;
+}): UseInfiniteQueryResult => {
+ return useInfiniteQuery({
+ queryKey: ["concert-data", genre],
+ queryFn: ({ pageParam = 1 }) =>
+ getConcertsList({ genre, page: pageParam, size }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage, allPages) => {
+ return lastPage.result.currentPage !== allPages[0].result.totalPage
+ ? lastPage.result.currentPage + 1
+ : undefined;
+ },
+ enabled,
+ });
+};
+
+export default useGetConcertsList;
+
+/**
+ * No description
+ *
+ * @tags useGetInfiniteConcerts
+ * @name concert-controller
+ * @summary 둘러보기 공연 조회 API
+ * @request GET: /concerts/views
+ * @secure bearer
+ */
diff --git a/src/hooks/queries/useGetConcertReviewDetail.ts b/src/hooks/queries/useGetConcertReviewDetail.ts
new file mode 100644
index 0000000..ee1731a
--- /dev/null
+++ b/src/hooks/queries/useGetConcertReviewDetail.ts
@@ -0,0 +1,24 @@
+import { client } from "@/apis";
+import { GetConcertReviewDetailResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertReviewDetail = async (
+ reviewId: number
+): Promise => {
+ const response = await client.get(
+ `/ticket-reviews/reviews/${reviewId}`
+ );
+ return response.data;
+};
+
+const useGetConcertReviewDetail = (
+ reviewId: number
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["concert-review-detail", reviewId],
+ queryFn: () => getConcertReviewDetail(reviewId),
+ });
+};
+
+export default useGetConcertReviewDetail;
diff --git a/src/hooks/queries/useGetConcertReviewList.ts b/src/hooks/queries/useGetConcertReviewList.ts
new file mode 100644
index 0000000..26dd2cc
--- /dev/null
+++ b/src/hooks/queries/useGetConcertReviewList.ts
@@ -0,0 +1,63 @@
+import { client } from "@/apis";
+import {
+ GetConcertReviewInfiniteResponse,
+ GetConcertReviewListProps,
+ GetConcertReviewListResponse,
+} from "@/types";
+import {
+ useInfiniteQuery,
+ UseInfiniteQueryResult,
+} from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertReviewList = async ({
+ concertId,
+ page,
+ size = 9,
+ orderBy,
+}: GetConcertReviewListProps): Promise => {
+ const response = await client.get(
+ `/ticket-reviews/concerts/reviews/${concertId}`,
+ {
+ params: {
+ page,
+ size,
+ orderBy,
+ },
+ }
+ );
+ return response.data;
+};
+
+const useGetConcertReviewList = ({
+ concertId,
+ size = 9,
+ orderBy,
+}: Omit): UseInfiniteQueryResult<
+ GetConcertReviewInfiniteResponse,
+ AxiosError
+> => {
+ return useInfiniteQuery({
+ queryKey: ["concert-review-data", orderBy],
+ queryFn: ({ pageParam = 1 }) =>
+ getConcertReviewList({ concertId, page: pageParam, size, orderBy }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage, allPages) => {
+ return lastPage.result.currentPage !== allPages[0].result.totalPage
+ ? lastPage.result.currentPage + 1
+ : undefined;
+ },
+ });
+};
+
+export default useGetConcertReviewList;
+
+/**
+ * No description
+ *
+ * @tags useGetConcertReviewList
+ * @name ticket-review-controller
+ * @summary 공연에 작성된 리뷰 목록 조회 api
+ * @request GET: /ticket-reviews/concerts/reviews
+ * @secure bearer
+ */
diff --git a/src/hooks/queries/useGetConcertReviewSize.ts b/src/hooks/queries/useGetConcertReviewSize.ts
new file mode 100644
index 0000000..4b5a589
--- /dev/null
+++ b/src/hooks/queries/useGetConcertReviewSize.ts
@@ -0,0 +1,24 @@
+import { client } from "@/apis";
+import { GetConcertReviewSizeResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getConcertReviewSize = async (
+ concertId: number
+): Promise => {
+ const response = await client.get(
+ `/ticket-reviews/concerts/${concertId}/size`
+ );
+ return response.data;
+};
+
+const useGetConcertReviewSize = (
+ concertId: number
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["concert-review-size", concertId],
+ queryFn: () => getConcertReviewSize(concertId),
+ });
+};
+
+export default useGetConcertReviewSize;
diff --git a/src/hooks/queries/useGetItemBased.ts b/src/hooks/queries/useGetItemBased.ts
new file mode 100644
index 0000000..67b781d
--- /dev/null
+++ b/src/hooks/queries/useGetItemBased.ts
@@ -0,0 +1,24 @@
+import { client } from "@/apis";
+import { UserItemBasedResponse } from "@/types";
+
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getItemBased = async (): Promise => {
+ const response = await client.get(
+ "/recommendations/itembased"
+ );
+ return response.data;
+};
+
+const useGetItemBased = (): UseQueryResult<
+ UserItemBasedResponse,
+ AxiosError
+> => {
+ return useQuery({
+ queryKey: ["itemBased"],
+ queryFn: getItemBased,
+ });
+};
+
+export default useGetItemBased;
diff --git a/src/hooks/queries/useGetRecommendClacoTicket.ts b/src/hooks/queries/useGetRecommendClacoTicket.ts
new file mode 100644
index 0000000..be18ffa
--- /dev/null
+++ b/src/hooks/queries/useGetRecommendClacoTicket.ts
@@ -0,0 +1,25 @@
+import { client } from "@/apis";
+import { UserRecClacoTicketResponse } from "@/types";
+
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getRecommendClacoTicket =
+ async (): Promise => {
+ const response = await client.get(
+ "/recommendations/clacobooks"
+ );
+ return response.data;
+ };
+
+const useGetRecommendClacoTicket = (): UseQueryResult<
+ UserRecClacoTicketResponse,
+ AxiosError
+> => {
+ return useQuery({
+ queryKey: ["recommend-clacoticket"],
+ queryFn: getRecommendClacoTicket,
+ });
+};
+
+export default useGetRecommendClacoTicket;
diff --git a/src/hooks/queries/useGetReviewAutoCompleteSearch.ts b/src/hooks/queries/useGetReviewAutoCompleteSearch.ts
new file mode 100644
index 0000000..14c7179
--- /dev/null
+++ b/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 => {
+ const response = await client.get(
+ "/concerts/reviews/search",
+ {
+ params: {
+ query: query,
+ },
+ },
+ );
+ return response.data;
+};
+
+const useGetReviewAutoCompleteSearch = (
+ query: string,
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["useReviewAutoComplete", query],
+ queryFn: () => getReviewAutoCompleteSearch(query),
+ enabled: query.trim().length !== 0,
+ });
+};
+
+export default useGetReviewAutoCompleteSearch;
diff --git a/src/hooks/queries/useGetSearch.ts b/src/hooks/queries/useGetSearch.ts
new file mode 100644
index 0000000..8e69772
--- /dev/null
+++ b/src/hooks/queries/useGetSearch.ts
@@ -0,0 +1,60 @@
+import { client } from "@/apis";
+import {
+ GetConcertInfiniteResponse,
+ GetConcertListResponse,
+ GetSearchProps,
+} from "@/types";
+import {
+ useInfiniteQuery,
+ UseInfiniteQueryResult,
+} from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getSearch = async ({
+ query,
+ page,
+ size = 9,
+}: GetSearchProps): Promise => {
+ const response = await client.get(
+ "/concerts/queries",
+ {
+ params: {
+ query: query,
+ page: page,
+ size: size,
+ },
+ }
+ );
+ return response.data;
+};
+
+const useGetSearch = ({
+ query,
+ size = 9,
+}: Omit): UseInfiniteQueryResult<
+ GetConcertInfiniteResponse,
+ AxiosError
+> => {
+ return useInfiniteQuery({
+ queryKey: ["search-concert-data", query],
+ queryFn: ({ pageParam }) => getSearch({ query, page: pageParam, size }),
+ initialPageParam: 1,
+ getNextPageParam: (lastPage, allPages) => {
+ return lastPage.result.currentPage !== allPages[0].result.totalPage
+ ? lastPage.result.currentPage + 1
+ : undefined;
+ },
+ });
+};
+
+export default useGetSearch;
+
+/**
+ * No description
+ *
+ * @tags useGetSearch
+ * @name concert-controller
+ * @summary 검색 API
+ * @request GET:/concerts/queries
+ * @secure bearer
+ */
diff --git a/src/hooks/queries/useGetShowDetail.ts b/src/hooks/queries/useGetShowDetail.ts
new file mode 100644
index 0000000..151ec00
--- /dev/null
+++ b/src/hooks/queries/useGetShowDetail.ts
@@ -0,0 +1,22 @@
+import { client } from "@/apis";
+import { ShowDetailCheckResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getShowDetail = async (showId: number) => {
+ const response = await client.get(
+ `/concerts/details/${showId}`,
+ );
+ return response.data;
+};
+
+const useGetShowDetail = (
+ showId: number,
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["showDetail", showId],
+ queryFn: () => getShowDetail(showId),
+ });
+};
+
+export default useGetShowDetail;
diff --git a/src/hooks/queries/useGetTicketReviewDetail.ts b/src/hooks/queries/useGetTicketReviewDetail.ts
new file mode 100644
index 0000000..8bdd68c
--- /dev/null
+++ b/src/hooks/queries/useGetTicketReviewDetail.ts
@@ -0,0 +1,22 @@
+import { client } from "@/apis";
+import { TicketReviewDetailResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getTicketReviewDetail = async (ticketReviewId: number) => {
+ const response = await client.get(
+ `/ticket-reviews/${ticketReviewId}`,
+ );
+ return response.data;
+};
+
+const useGetTicketReviewDetail = (
+ ticketReviewId: number,
+): UseQueryResult => {
+ return useQuery({
+ queryKey: ["ticketReviewDetail", ticketReviewId],
+ queryFn: () => getTicketReviewDetail(ticketReviewId),
+ });
+};
+
+export default useGetTicketReviewDetail;
diff --git a/src/hooks/queries/useGetUserBased.ts b/src/hooks/queries/useGetUserBased.ts
new file mode 100644
index 0000000..5f5ffa0
--- /dev/null
+++ b/src/hooks/queries/useGetUserBased.ts
@@ -0,0 +1,20 @@
+import { client } from "@/apis";
+import { UserBasedResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getUserBased = async (): Promise => {
+ const response = await client.get(
+ "/recommendations/userbased"
+ );
+ return response.data;
+};
+
+const useGetUserBased = (): UseQueryResult => {
+ return useQuery({
+ queryKey: ["userBased"],
+ queryFn: getUserBased,
+ });
+};
+
+export default useGetUserBased;
diff --git a/src/hooks/queries/useGetUserInfo.ts b/src/hooks/queries/useGetUserInfo.ts
new file mode 100644
index 0000000..a30c222
--- /dev/null
+++ b/src/hooks/queries/useGetUserInfo.ts
@@ -0,0 +1,18 @@
+import { client } from "@/apis";
+import { UserInfoResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getUserInfo = async (): Promise => {
+ const response = await client.get("/members");
+ return response.data;
+};
+
+const useGetUserInfo = (): UseQueryResult => {
+ return useQuery({
+ queryKey: ["userInfo"],
+ queryFn: getUserInfo,
+ });
+};
+
+export default useGetUserInfo;
diff --git a/src/hooks/queries/useGetUserPreferences.ts b/src/hooks/queries/useGetUserPreferences.ts
new file mode 100644
index 0000000..acc4503
--- /dev/null
+++ b/src/hooks/queries/useGetUserPreferences.ts
@@ -0,0 +1,21 @@
+import { client } from "@/apis";
+import { UserPreferencesResponse } from "@/types";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+const getUserPreferences = async (): Promise => {
+ const response = await client.get("/preferences");
+ return response.data;
+};
+
+const useGetUserPreferences = (): UseQueryResult<
+ UserPreferencesResponse,
+ AxiosError
+> => {
+ return useQuery({
+ queryKey: ["userPreferences"],
+ queryFn: getUserPreferences,
+ });
+};
+
+export default useGetUserPreferences;
diff --git a/src/hooks/utils/extractDateRange.ts b/src/hooks/utils/extractDateRange.ts
new file mode 100644
index 0000000..231902a
--- /dev/null
+++ b/src/hooks/utils/extractDateRange.ts
@@ -0,0 +1,19 @@
+const extractDateRange = (fromDate: string, toDate: string): string => {
+ const formatDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}.${String(date.getDate()).padStart(2, "0")}`;
+ };
+ if (fromDate && toDate) {
+ if (fromDate === toDate) {
+ return formatDate(fromDate);
+ } else {
+ return `${formatDate(fromDate)} ~ ${formatDate(toDate)}`;
+ }
+ }
+ return "공연 기간 정보 없음";
+};
+
+export default extractDateRange;
diff --git a/src/hooks/utils/extractPricesWithSeats.ts b/src/hooks/utils/extractPricesWithSeats.ts
new file mode 100644
index 0000000..d32bac0
--- /dev/null
+++ b/src/hooks/utils/extractPricesWithSeats.ts
@@ -0,0 +1,49 @@
+import { PricesMapType } from "@/types";
+
+const extractPricesWithSeats = (priceString: string) => {
+ if (!priceString.includes("무료")) {
+ const priceEntries = priceString.split(", ");
+ const pricesMap: PricesMapType = {};
+
+ priceEntries.forEach((entry) => {
+ const match = entry.match(/(.*)\s(\d{1,3}(,\d{3})*)원/);
+ if (match) {
+ const seat = match[1].trim();
+ const price = parseInt(match[2].replace(/,/g, ""), 10);
+ pricesMap[seat] = price;
+ } else if (entry.includes("전석")) {
+ const matchFreeSeat = entry.match(/전석\s(\d{1,3}(,\d{3})*)원/);
+ if (matchFreeSeat) {
+ pricesMap["전석"] = parseInt(matchFreeSeat[1].replace(/,/g, ""), 10);
+ }
+ }
+ });
+
+ const cleanedPrices = Object.values(pricesMap).filter(
+ (price) => typeof price === "number",
+ ) as number[];
+
+ const minPrice =
+ cleanedPrices.length > 0 ? Math.min(...cleanedPrices) : null;
+ const maxPrice =
+ cleanedPrices.length > 0 ? Math.max(...cleanedPrices) : null;
+
+ return {
+ seats: Object.keys(pricesMap),
+ prices: Object.values(pricesMap).map((price) =>
+ typeof price === "number" ? `${price.toLocaleString()}원` : price,
+ ),
+ minPrice,
+ maxPrice,
+ };
+ }
+
+ return {
+ seats: ["전석"],
+ prices: ["무료"],
+ minPrice: "무료",
+ maxPrice: "무료",
+ };
+};
+
+export default extractPricesWithSeats;
\ No newline at end of file
diff --git a/src/hooks/utils/extractSchedule.ts b/src/hooks/utils/extractSchedule.ts
new file mode 100644
index 0000000..7077916
--- /dev/null
+++ b/src/hooks/utils/extractSchedule.ts
@@ -0,0 +1,103 @@
+import { PrfGuidance } from "@/components/ShowDetail/ShowInformation/ShowEssentials";
+import { DaysMapType } from "@/types";
+
+const daysMap: DaysMapType[] = [
+ { day: "일요일", dayIndex: 0 },
+ { day: "월요일", dayIndex: 1 },
+ { day: "화요일", dayIndex: 2 },
+ { day: "수요일", dayIndex: 3 },
+ { day: "목요일", dayIndex: 4 },
+ { day: "금요일", dayIndex: 5 },
+ { day: "토요일", dayIndex: 6 },
+];
+
+const extractSchedule = (dtguidance: string): PrfGuidance[] => {
+ if (!dtguidance) return [];
+
+ 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 = sortTimes(match[2].split(",").map((time) => time.trim()));
+
+ if (dayRange === "HOL") {
+ dayRange = "일요일";
+ }
+
+ if (dayRange.includes("~")) {
+ const [startDay, endDay] = dayRange
+ .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) {
+ 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);
+ const existing = schedule.find((item) => item.day === shortDay);
+ if (existing) {
+ existing.times = sortTimes([...existing.times, ...times]);
+ } else {
+ schedule.push({ day: shortDay, times });
+ }
+ }
+ }
+ });
+
+ return schedule;
+};
+
+export default extractSchedule;
diff --git a/src/hooks/utils/extractShowTime.tsx b/src/hooks/utils/extractShowTime.tsx
new file mode 100644
index 0000000..8e56943
--- /dev/null
+++ b/src/hooks/utils/extractShowTime.tsx
@@ -0,0 +1,49 @@
+import extractSchedule from "./extractSchedule";
+
+export type ShowTimesByDate = {
+ [key: string]: { time: string }[];
+};
+
+export type ExtractShowTimeProps = {
+ prfpdfrom: string;
+ prfpdto: string;
+ dtguidance: string;
+};
+
+const extractShowTime = ({
+ prfpdfrom,
+ prfpdto,
+ dtguidance,
+}: ExtractShowTimeProps): ShowTimesByDate => {
+ const showTimesByDate: ShowTimesByDate = {};
+ const schedule = extractSchedule(dtguidance);
+
+ const daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"];
+
+ const startDate = new Date(prfpdfrom);
+ const endDate = new Date(prfpdto);
+
+ for (
+ let currentDate = new Date(startDate);
+ currentDate <= endDate;
+ currentDate.setDate(currentDate.getDate() + 1)
+ ) {
+ const year = currentDate.getFullYear();
+ const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+ const day = String(currentDate.getDate()).padStart(2, "0");
+ const dateString = `${year}-${month}-${day}`;
+
+ const dayOfWeek = daysOfWeek[currentDate.getDay()];
+ const matchingSchedule = schedule.find((item) => item.day === dayOfWeek);
+
+ if (matchingSchedule && matchingSchedule.times.length > 0) {
+ showTimesByDate[dateString] = matchingSchedule.times.map((time) => ({
+ time,
+ }));
+ }
+ }
+
+ return showTimesByDate;
+};
+
+export default extractShowTime;
diff --git a/src/hooks/utils/formatYYYYMMDD.ts b/src/hooks/utils/formatYYYYMMDD.ts
new file mode 100644
index 0000000..0fdabe1
--- /dev/null
+++ b/src/hooks/utils/formatYYYYMMDD.ts
@@ -0,0 +1,12 @@
+import { parse, format } from "date-fns";
+import { ko } from "date-fns/locale";
+
+const formatDateYYYYMMDD = (dateStr: string) => {
+ const date = parse(dateStr.split(" ")[0], "yyyy-MM-dd", new Date());
+ const formattedDate = format(date, "yyyy.MM.dd");
+ const shortDay = `(${format(date, "E", { locale: ko })})`;
+
+ return `${formattedDate} ${shortDay}`;
+};
+
+export default formatDateYYYYMMDD;
diff --git a/src/hooks/utils/index.ts b/src/hooks/utils/index.ts
new file mode 100644
index 0000000..5ca7294
--- /dev/null
+++ b/src/hooks/utils/index.ts
@@ -0,0 +1,11 @@
+export { default as useTruncateText } from "./useTruncateText";
+export { default as useThumbnailModal } from "./useThumbnailModal";
+export { default as useDebouncedState } from "./useDebouncedState";
+export { default as useShowFilter } from "./useShowFilter";
+export { default as formatDateYYYYMMDD } from "./formatYYYYMMDD";
+export { default as extractDateRange } from "./extractDateRange";
+export { default as extractPricesWithSeats } from "./extractPricesWithSeats";
+export { default as extractSchedule } from "./extractSchedule";
+export { default as timeToMinutes } from "./timeToMinutes";
+export { default as useRefFocusEffect } from "./useRefFocusEffect";
+export { default as useDeferredLoading } from "./useDeferredLoading";
diff --git a/src/hooks/utils/timeToMinutes.ts b/src/hooks/utils/timeToMinutes.ts
new file mode 100644
index 0000000..a73e96e
--- /dev/null
+++ b/src/hooks/utils/timeToMinutes.ts
@@ -0,0 +1,17 @@
+const timeToMinutes = (runtime: string): string => {
+ if (!runtime) return "공연 시간 정보 없음";
+
+ const hourMatch = runtime.match(/(\d+)시간/);
+ const minuteMatch = runtime.match(/(\d+)분/);
+
+ const hours = hourMatch ? parseInt(hourMatch[1], 10) : 0;
+ const minutes = minuteMatch ? parseInt(minuteMatch[1], 10) : 0;
+
+ const result = hours * 60 + minutes;
+
+ if (result === 0) return "공연 시간 정보 없음";
+
+ return `${result}분`;
+};
+
+export default timeToMinutes;
diff --git a/src/hooks/utils/useDebouncedState.ts b/src/hooks/utils/useDebouncedState.ts
new file mode 100644
index 0000000..8910cab
--- /dev/null
+++ b/src/hooks/utils/useDebouncedState.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export default function useDebouncedState(
+ value: T,
+ delay: number = 500,
+ immediate: boolean = false
+): T {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ if (immediate) {
+ setDebouncedValue(value);
+ return;
+ }
+ const timeout = setTimeout(() => setDebouncedValue(value), delay);
+ return () => clearTimeout(timeout);
+ }, [value, delay, immediate]);
+
+ return debouncedValue;
+}
diff --git a/src/hooks/utils/useDeferredLoading.ts b/src/hooks/utils/useDeferredLoading.ts
new file mode 100644
index 0000000..543d2f0
--- /dev/null
+++ b/src/hooks/utils/useDeferredLoading.ts
@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+//200ms보다 적은 응답 시간이 걸리는 경우 스캘레톤 컴포넌트 UI를 보여주지 않기 위한 커스텀 훅 (사용성 개선을 위함)
+const useDeferredLoading = (isLoading: boolean, delay: number = 200) => {
+ const [showSkeleton, setShowSkeleton] = useState(false);
+
+ useEffect(() => {
+ let timeoutId: NodeJS.Timeout;
+
+ if (isLoading) {
+ timeoutId = setTimeout(() => {
+ setShowSkeleton(true);
+ }, delay);
+ } else {
+ setShowSkeleton(false);
+ }
+
+ return () => clearTimeout(timeoutId);
+ }, [isLoading, delay]);
+
+ return {
+ shouldShowSkeleton: isLoading && showSkeleton,
+ };
+};
+
+export default useDeferredLoading;
diff --git a/src/hooks/utils/useRefFocusEffect.ts b/src/hooks/utils/useRefFocusEffect.ts
new file mode 100644
index 0000000..bca0bd1
--- /dev/null
+++ b/src/hooks/utils/useRefFocusEffect.ts
@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+
+const useRefFocusEffect = (
+ onFocusCallback: () => void,
+
+ deps: React.DependencyList = []
+) => {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const currentElement = ref.current;
+
+ if (currentElement) {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ onFocusCallback();
+ }
+ });
+ },
+ {
+ threshold: 0.5,
+ }
+ );
+
+ observer.observe(currentElement);
+
+ return () => {
+ observer.unobserve(currentElement);
+ };
+ }
+ }, [...deps]);
+
+ return { elementRef: ref };
+};
+
+export default useRefFocusEffect;
diff --git a/src/hooks/utils/useShowFilter.ts b/src/hooks/utils/useShowFilter.ts
new file mode 100644
index 0000000..de3e1b5
--- /dev/null
+++ b/src/hooks/utils/useShowFilter.ts
@@ -0,0 +1,83 @@
+import { useState } from "react";
+
+export type FilterState = {
+ priceRange: string;
+ selectedLocation: string;
+ dateRange: string;
+ selectedFeature: string;
+};
+
+export type UseShowFilterReturn = {
+ filterState: FilterState;
+ showFilter: boolean;
+ hasActiveFilters: boolean;
+ setShowFilter: (show: boolean) => void;
+ handleFilterClick: () => void;
+ handleRefreshClick: () => void;
+ applyFilter: (
+ price: string,
+ location: string,
+ date: string,
+ feature: string
+ ) => void;
+ closeFilter: () => void;
+};
+
+const useShowFilter = (): UseShowFilterReturn => {
+ const [showFilter, setShowFilter] = useState(false);
+ const [filterState, setFilterState] = useState({
+ priceRange: "",
+ selectedLocation: "",
+ dateRange: "",
+ selectedFeature: "",
+ });
+
+ const hasActiveFilters = Object.values(filterState).some(
+ (value) => value !== ""
+ );
+
+ const handleFilterClick = () => {
+ setShowFilter(true);
+ };
+
+ const handleRefreshClick = () => {
+ setFilterState({
+ priceRange: "",
+ selectedLocation: "",
+ dateRange: "",
+ selectedFeature: "",
+ });
+ };
+
+ const closeFilter = () => {
+ setShowFilter(false);
+ };
+
+ const applyFilter = (
+ price: string,
+ location: string,
+ date: string,
+ feature: string
+ ) => {
+ setFilterState({
+ priceRange: price,
+ selectedLocation: location,
+ dateRange: date,
+ selectedFeature: feature,
+ });
+ closeFilter();
+ };
+
+ return {
+ filterState,
+ showFilter,
+ hasActiveFilters,
+ setShowFilter,
+ handleFilterClick,
+ handleRefreshClick,
+ applyFilter,
+ closeFilter,
+ };
+};
+
+export default useShowFilter;
diff --git a/src/hooks/utils/useThumbnailModal.ts b/src/hooks/utils/useThumbnailModal.ts
new file mode 100644
index 0000000..6a939f4
--- /dev/null
+++ b/src/hooks/utils/useThumbnailModal.ts
@@ -0,0 +1,52 @@
+import { SelectThumbnail, UseThumbnailModalReturn } from "@/types";
+import { Swiper as SwiperType } from "swiper";
+import { useState, useEffect } from "react";
+
+const useThumbnailModal = (): UseThumbnailModalReturn => {
+ const [thumbsSwiper, setThumbsSwiper] = useState(null);
+ const [isThumbnailShow, setIsThumbnailShow] = useState(false);
+ const [isAnimating, setIsAnimating] = useState(false);
+ const [selectIndex, setSelectIndex] = useState({
+ page: 1,
+ index: 0,
+ });
+
+ useEffect(() => {
+ if (isThumbnailShow) {
+ document.body.style.overflow = "hidden";
+ setTimeout(() => {
+ setIsAnimating(true);
+ }, 50);
+ } else {
+ document.body.style.overflow = "unset";
+ setIsAnimating(false);
+ }
+
+ return () => {
+ document.body.style.overflow = "unset";
+ };
+ }, [isThumbnailShow]);
+
+ const handleImageClick = () => {
+ if (isThumbnailShow) {
+ setIsAnimating(false);
+ setTimeout(() => {
+ setIsThumbnailShow(false);
+ }, 300);
+ } else {
+ setIsThumbnailShow(true);
+ }
+ };
+
+ return {
+ thumbsSwiper,
+ isThumbnailShow,
+ isAnimating,
+ selectIndex,
+ setThumbsSwiper,
+ setSelectIndex,
+ handleImageClick,
+ };
+};
+
+export default useThumbnailModal;
diff --git a/src/hooks/utils/useTruncateText.ts b/src/hooks/utils/useTruncateText.ts
new file mode 100644
index 0000000..a12708a
--- /dev/null
+++ b/src/hooks/utils/useTruncateText.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+const useTruncateText = (
+ text: string | undefined | null,
+ maxLength: number
+): string => {
+ const [truncatedText, setTruncatedText] = useState("");
+
+ useEffect(() => {
+ if (!text) {
+ setTruncatedText("");
+ } else if (text.length <= maxLength) {
+ setTruncatedText(text);
+ } else {
+ setTruncatedText(text.slice(0, maxLength).trim() + "...");
+ }
+ }, [text, maxLength]);
+
+ return truncatedText;
+};
+
+export default useTruncateText;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx
index 0a5e99a..c24fc9d 100644
--- a/src/libraries/index.tsx
+++ b/src/libraries/index.tsx
@@ -1,11 +1,23 @@
-import { PropsWithChildren } from 'react';
-import { RecoilRoot } from 'recoil';
-import ReactQuerySetting from '@/libraries/reactQuery/ReactQuerySetting';
+import { PropsWithChildren, useEffect } from "react";
+
+import ReactQuerySetting from "@/libraries/reactQuery/ReactQuerySetting";
+
+const setScreenHeight = () => {
+ const vh = window.innerHeight * 0.01;
+ document.documentElement.style.setProperty("--vh", `${vh}px`);
+};
+
+export default function AppContainer({ children }: PropsWithChildren) {
+ useEffect(() => {
+ setScreenHeight();
+
+ window.addEventListener("resize", setScreenHeight);
+ return () => window.removeEventListener("resize", setScreenHeight);
+ }, []);
-export default function AppRegister({ children }: PropsWithChildren) {
return (
-
- {children}
-
+
+ {children}
+
);
}
diff --git a/src/libraries/reactQuery/ReactQuerySetting.tsx b/src/libraries/reactQuery/ReactQuerySetting.tsx
index d5fa3df..bb770f1 100644
--- a/src/libraries/reactQuery/ReactQuerySetting.tsx
+++ b/src/libraries/reactQuery/ReactQuerySetting.tsx
@@ -1,13 +1,14 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren } from "react";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const MINUTES = 1000 * 60;
const queryClient = new QueryClient({
defaultOptions: {
queries: {
- retry: 1,
+ retry: false,
retryDelay: 1000,
staleTime: 5 * MINUTES,
},
@@ -15,5 +16,10 @@ const queryClient = new QueryClient({
});
export default function ReactQuerySetting({ children }: PropsWithChildren) {
- return {children} ;
+ return (
+
+
+ );
}
diff --git a/src/libraries/store/concertInfo.ts b/src/libraries/store/concertInfo.ts
new file mode 100644
index 0000000..b4177f5
--- /dev/null
+++ b/src/libraries/store/concertInfo.ts
@@ -0,0 +1,30 @@
+import { create } from "zustand";
+
+export type ConcertInfo = {
+ genrenm: string;
+ prfstate: string;
+ prfnm: string;
+};
+
+export type ConcertInfoState = {
+ data: ConcertInfo;
+ setConcertInfo: (data: ConcertInfo) => void;
+ clearConcertInfo: () => void;
+};
+
+export const useConcertInfoStore = create()((set) => ({
+ data: {
+ genrenm: "",
+ prfstate: "",
+ prfnm: "",
+ },
+ setConcertInfo: (data) => set({ data }),
+ clearConcertInfo: () =>
+ set({
+ data: {
+ genrenm: "",
+ prfstate: "",
+ prfnm: "",
+ },
+ }),
+}));
diff --git a/src/libraries/store/index.ts b/src/libraries/store/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/libraries/store/onboarding.ts b/src/libraries/store/onboarding.ts
new file mode 100644
index 0000000..1fe0648
--- /dev/null
+++ b/src/libraries/store/onboarding.ts
@@ -0,0 +1,97 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export type OnboardingState = {
+ gender: string;
+ setGender: (gender: string) => void;
+ clearGender: () => void;
+
+ age: number;
+ setAge: (age: number) => void;
+ clearAge: () => void;
+
+ minPrice: number;
+ setMinPrice: (minPrice: number) => void;
+ clearMinPrice: () => void;
+
+ maxPrice: number;
+ setMaxPrice: (maxPrice: number) => void;
+ clearMaxPrice: () => void;
+
+ regionPreferences: string[];
+ setRegionPreferences: (regions: string[]) => void;
+ addRegionPreference: (region: string) => void;
+ clearRegionPreferences: () => void;
+
+ typePreferences: string[];
+ setTypePreferences: (types: string[]) => void;
+ addTypePreference: (type: string) => void;
+ clearTypePreferences: () => void;
+
+ categoryPreferences: string[];
+ setCategoryPreferences: (categories: string[]) => void;
+ addCategoryPreference: (category: string) => void;
+ removeLastCategoryPreference: () => void;
+ removeSpecificCategoryPreference: (category: string) => void;
+ clearCategoryPreferences: () => void;
+};
+
+export const useOnboardingStore = create()(
+ persist(
+ (set) => ({
+ gender: "",
+ setGender: (gender) => set({ gender }),
+ clearGender: () => set({ gender: "" }),
+
+ age: 0,
+ setAge: (age) => set({ age }),
+ clearAge: () => set({ age: 0 }),
+
+ minPrice: 0,
+ setMinPrice: (minPrice) => set({ minPrice }),
+ clearMinPrice: () => set({ minPrice: 0 }),
+
+ maxPrice: 1000000,
+ setMaxPrice: (maxPrice) => set({ maxPrice }),
+ clearMaxPrice: () => set({ maxPrice: 1000000 }),
+
+ regionPreferences: [],
+ setRegionPreferences: (regions) => set({ regionPreferences: regions }),
+ addRegionPreference: (region) =>
+ set((state) => ({
+ regionPreferences: [...state.regionPreferences, region],
+ })),
+ clearRegionPreferences: () => set({ regionPreferences: [] }),
+
+ typePreferences: [],
+ setTypePreferences: (types) => set({ typePreferences: types }),
+ addTypePreference: (type) =>
+ set((state) => ({
+ typePreferences: [...state.typePreferences, type],
+ })),
+ clearTypePreferences: () => set({ typePreferences: [] }),
+
+ categoryPreferences: [],
+ setCategoryPreferences: (categories) =>
+ set({ categoryPreferences: categories }),
+ addCategoryPreference: (category) =>
+ set((state) => ({
+ categoryPreferences: [...state.categoryPreferences, category],
+ })),
+ removeLastCategoryPreference: () =>
+ set((state) => ({
+ categoryPreferences: state.categoryPreferences.slice(0, -1),
+ })),
+ removeSpecificCategoryPreference: (category: string) =>
+ set((state) => ({
+ categoryPreferences: state.categoryPreferences.filter(
+ (item) => item !== category,
+ ),
+ })),
+ clearCategoryPreferences: () => set({ categoryPreferences: [] }),
+ }),
+ {
+ name: "user-onboarding-storage",
+ },
+ ),
+);
diff --git a/src/libraries/store/reviewInfo.ts b/src/libraries/store/reviewInfo.ts
new file mode 100644
index 0000000..9cf8d30
--- /dev/null
+++ b/src/libraries/store/reviewInfo.ts
@@ -0,0 +1,27 @@
+import { create } from "zustand";
+
+export type ReviewInfo = {
+ starRate: number;
+ content: string;
+};
+
+export type ReviewInfoState = {
+ data: ReviewInfo;
+ setReviewInfo: (data: ReviewInfo) => void;
+ clearReviewInfo: () => void;
+};
+
+export const useReviewInfoStore = create()((set) => ({
+ data: {
+ starRate: 0,
+ content: "",
+ },
+ setReviewInfo: (data) => set({ data }),
+ clearReviewInfo: () =>
+ set({
+ data: {
+ starRate: 0,
+ content: "",
+ },
+ }),
+}));
diff --git a/src/libraries/store/user.ts b/src/libraries/store/user.ts
new file mode 100644
index 0000000..dbe8d5c
--- /dev/null
+++ b/src/libraries/store/user.ts
@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export type UserState = {
+ nickname: string;
+ setNickname: (nickname: string) => void;
+ clearNickname: () => void;
+};
+
+export const useUserStore = create()(
+ persist(
+ (set) => ({
+ nickname: "",
+ setNickname: (nickname) => set({ nickname }),
+ clearNickname: () => set({ nickname: "" }),
+ }),
+ {
+ name: "user-storage",
+ }
+ )
+);
diff --git a/src/libraries/toast/Toast.tsx b/src/libraries/toast/Toast.tsx
new file mode 100644
index 0000000..f766252
--- /dev/null
+++ b/src/libraries/toast/Toast.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+export type ToastProps = {
+ message: string;
+ setToast: React.Dispatch>;
+};
+
+export const Toast = ({ message, setToast }: ToastProps) => {
+ const [isVisible, setIsVisible] = useState(true);
+
+ useEffect(() => {
+ const fadeOutTimer = setTimeout(() => {
+ setIsVisible(false);
+ }, 2500);
+
+ const removeTimer = setTimeout(() => {
+ setToast(false);
+ }, 3000);
+
+ return () => {
+ clearTimeout(fadeOutTimer);
+ clearTimeout(removeTimer);
+ };
+ }, [setToast]);
+
+ return (
+
+ );
+};
diff --git a/src/libraries/toast/index.ts b/src/libraries/toast/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.tsx b/src/main.tsx
index 8931e81..bc1a62a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App.tsx';
-import './globals.css';
+// import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./globals.css";
-createRoot(document.getElementById('root')!).render(
-
-
+createRoot(document.getElementById("root")!).render(
+ //
+
);
diff --git a/src/pages/Browse/page.tsx b/src/pages/Browse/page.tsx
new file mode 100644
index 0000000..db34d3c
--- /dev/null
+++ b/src/pages/Browse/page.tsx
@@ -0,0 +1,400 @@
+import { SearchBar } from "@/components/common/Search/Bar";
+import { ShowFilterTab } from "@/components/common/ShowFilterTab";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ReactComponent as Filter } from "@/assets/svgs/filter.svg";
+import { ReactComponent as Refresh } from "@/assets/svgs/refresh.svg";
+import { ReactComponent as BackArrow } from "@/assets/svgs/BackArrow.svg";
+import { SearchCard } from "@/components/common/Search/Card";
+import { ShowFilter } from "@/components/Browse/ShowFilter";
+import { ShowSummaryCard } from "@/components/common/ShowSummaryCard";
+import {
+ useDebouncedState,
+ useDeferredLoading,
+ useRefFocusEffect,
+ useShowFilter,
+} from "@/hooks/utils";
+import {
+ useGetAutoCompleteSearch,
+ useGetConcertFilters,
+ useGetConcertList,
+ useGetSearch,
+} from "@/hooks/queries";
+import { AutoCompleteSearchCard, FilterValue, TabMenu } from "@/types";
+import { Skeleton } from "@/components/ui/skeleton";
+import { SearchResult } from "@/components/Browse/SearchResult";
+import { RecentConcertResult } from "@/components/Browse/RecentConcertResult";
+
+export const BrowsePage = () => {
+ const [query, setQuery] = useState("");
+ const [activeTab, setActiveTab] = useState(null);
+ const [skipDebounce, setSkipDebounce] = useState(false);
+ const debouncedQuery = useDebouncedState(query, 500, skipDebounce);
+ const [filterValue, setFilterValue] = useState(null);
+ const [isFilterOn, setIsFilterOn] = useState(false);
+ const [isSearch, setIsSearch] = useState(false);
+ const [isNoSearchResult, setIsNoSearchResult] = useState(false);
+ const [isNoFilterResult, setIsNoFilterResult] = useState(false);
+ const [showSearchResult, setShowSearchResult] = useState(false);
+ const [autoCompleteList, setAutoCompleteList] = useState<
+ AutoCompleteSearchCard[]
+ >([]);
+
+ const {
+ data: concertData,
+ fetchNextPage,
+ isFetchingNextPage,
+ isLoading,
+ } = useGetConcertList({
+ genre: activeTab,
+ size: 9,
+ // enabled: !isFilterOn,
+ });
+
+ const { data: autoCompleteData, isLoading: autoCompleteDataLoading } =
+ useGetAutoCompleteSearch(debouncedQuery);
+
+ const {
+ data: searchData,
+ fetchNextPage: searchFetchNextPage,
+ isFetchingNextPage: isFetchingSearchNext,
+ isLoading: searchLoading,
+ } = useGetSearch({
+ query: debouncedQuery,
+ size: 9,
+ });
+
+ const searchInputRef = useRef(null);
+ const {
+ filterState,
+ showFilter,
+ hasActiveFilters,
+ handleFilterClick,
+ handleRefreshClick,
+ applyFilter,
+ closeFilter,
+ } = useShowFilter();
+
+ useEffect(() => {
+ const savedFilter = localStorage.getItem("filterObj");
+ if (savedFilter) {
+ const parsedFilter = JSON.parse(savedFilter);
+ setFilterValue(parsedFilter);
+ setIsFilterOn(true);
+ }
+ }, [showFilter]);
+
+ const {
+ data: filterConcertData,
+ fetchNextPage: filterFetchNextPage,
+ isFetchingNextPage: isFilterFetchingNextPage,
+ isLoading: isFilterSearchLoading,
+ } = useGetConcertFilters({
+ minPrice: filterValue?.minPrice,
+ maxPrice: filterValue?.maxPrice,
+ area: filterValue?.selectedLocation,
+ startDate: filterValue?.startDate,
+ endDate: filterValue?.endDate,
+ categories: filterValue?.categories,
+ size: 9,
+ enabled: isFilterOn,
+ });
+
+ const navigate = useNavigate();
+ const gotoShowDetail = (id: number) => {
+ navigate(`/show/${id}`);
+ };
+
+ const handleRefreshButton = () => {
+ setIsFilterOn(false);
+ setFilterValue(null);
+ setIsNoFilterResult(false);
+ localStorage.removeItem("filterObj");
+ handleRefreshClick();
+ };
+
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+ const { elementRef: recentRef } = useRefFocusEffect(
+ fetchNextPage,
+ [concertData, isSearch, isFilterOn]
+ );
+ const { elementRef: filterRef } = useRefFocusEffect(
+ filterFetchNextPage,
+ [filterConcertData, isFilterOn]
+ );
+ const { elementRef: searchRef } = useRefFocusEffect(
+ searchFetchNextPage,
+ [searchData, isSearch]
+ );
+
+ const handleTabClick = (tab: TabMenu) => {
+ setActiveTab(tab);
+ setIsFilterOn(false);
+ setFilterValue(null);
+ localStorage.removeItem("filterObj");
+ handleRefreshClick();
+ };
+
+ const handleSearchChange = (e: React.ChangeEvent) => {
+ const newValue = e.target.value;
+ setSkipDebounce(newValue === "");
+ setQuery(newValue);
+ if (newValue.trim().length === 0) setAutoCompleteList([]);
+ };
+
+ const isProcessing = useRef(false);
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !isProcessing.current) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ isProcessing.current = true;
+
+ setIsSearch(false);
+ setShowSearchResult(true);
+ setSkipDebounce(true);
+ setActiveTab(null);
+
+ setTimeout(() => {
+ isProcessing.current = false;
+ searchInputRef.current?.blur();
+ }, 300);
+ }
+ };
+
+ // useEffect(() => {
+ // return () => {
+ // localStorage.removeItem("filterObj");
+ // };
+ // }, []);
+
+ useEffect(() => {
+ if (autoCompleteData && !autoCompleteDataLoading) {
+ setAutoCompleteList(autoCompleteData.result);
+ }
+ }, [
+ debouncedQuery,
+ autoCompleteDataLoading,
+ setAutoCompleteList,
+ autoCompleteData,
+ ]);
+
+ useEffect(() => {
+ if (searchData && !searchLoading) {
+ if (
+ searchData.pages[0].result.listPageResponse[0]
+ .recommendationConcertsResponseV1s
+ ) {
+ setIsNoSearchResult(true);
+ }
+ }
+
+ if (filterConcertData && !isFilterSearchLoading) {
+ if (filterConcertData.pages[0].result.listPageResponse.length === 0) {
+ setIsNoFilterResult(true);
+ }
+ }
+ }, [searchData, searchLoading, filterConcertData, isFilterSearchLoading]);
+
+ useEffect(() => {
+ if (skipDebounce) {
+ const timer = setTimeout(() => {
+ setSkipDebounce(false);
+ }, 100);
+
+ return () => clearTimeout(timer);
+ }
+ }, [skipDebounce]);
+
+ if (shouldShowSkeleton) {
+ return (
+
+
+
+ 둘러보기
+
+
+
setIsSearch(true)}
+ onChange={handleSearchChange}
+ onKeyDown={handleKeyDown}
+ placeholder={"공연명, 출연자, 극단 등을 검색하세요."}
+ />
+
+
+
+ {Array.from(Array(5).keys()).map((_, index) => (
+
+
+
+
+
+
+ {isSearch ? (
+ {
+ setIsSearch(false);
+ setShowSearchResult(false);
+ setIsNoSearchResult(false);
+ }}
+ />
+ ) : null}
+
+ 둘러보기
+
+
+
setIsSearch(true)}
+ onChange={handleSearchChange}
+ onKeyDown={handleKeyDown}
+ placeholder={"공연명, 출연자, 극단 등을 검색하세요."}
+ />
+
+ {/* 검색어 자동 완성 영역 */}
+ {isSearch ? (
+
+ {debouncedQuery.trim().length !== 0 ? (
+ <>
+ {autoCompleteList.length !== 0 ? (
+ <>
+ {" "}
+ {autoCompleteList?.map((show) => (
+ gotoShowDetail(show.id)}
+ />
+ ))}
+
+ ) : null}
+
+ ) : null}
+
+ ) : (
+ <>
+ {debouncedQuery.trim().length === 0 ? (
+
+ {hasActiveFilters ? (
+
+ {filterState.priceRange && (
+
+ {filterState.priceRange}
+
+ )}
+ {filterState.selectedLocation && (
+
+ {filterState.selectedLocation}
+
+ )}
+ {filterState.dateRange && (
+
+ {filterState.dateRange}
+
+ )}
+ {filterState.selectedFeature && (
+
+ {filterState.selectedFeature}
+
+ )}
+
+ ) : (
+
+ {debouncedQuery.trim().length === 0 ? "최근 공연" : null}
+
+ )}
+ {debouncedQuery.trim().length === 0 ? (
+
+
+ ) : null}
+
+ {hasActiveFilters && (
+
+ {debouncedQuery.trim().length === 0 ? "최근 공연" : null}
+
+ )}
+
+ {debouncedQuery.trim().length === 0 ? (
+ <>
+ {isFilterOn && filterConcertData ? (
+
+ {isNoSearchResult || isNoFilterResult ? null : (
+ <>
+ {!isSearch ? (
+
+ ) : null}
+
+ )}
+
+
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
-
글자 크기
+
+
+
+
+
+ 에
+
+
+
+ 오신 것을 환영해요!
+
+
+
+
+
+ 카카오로 시작하기
+
+
+
);
};
diff --git a/src/pages/Main/page.tsx b/src/pages/Main/page.tsx
new file mode 100644
index 0000000..70b8b80
--- /dev/null
+++ b/src/pages/Main/page.tsx
@@ -0,0 +1,11 @@
+import { ClassicalPalette } from "@/components/Main/ClassicalPalette";
+import { Analysis } from "@/components/Main/Analysis";
+
+export const MainPage = () => {
+ return (
+
+ );
+};
diff --git a/src/pages/Mypage/PreferenceEdit/page.tsx b/src/pages/Mypage/PreferenceEdit/page.tsx
new file mode 100644
index 0000000..d87579d
--- /dev/null
+++ b/src/pages/Mypage/PreferenceEdit/page.tsx
@@ -0,0 +1,167 @@
+import { ReactComponent as BackArrow } from "@/assets/svgs/BackArrow.svg";
+import { Age } from "@/components/common/Age";
+import { ConfirmButton } from "@/components/common/Button";
+import { Concept } from "@/components/common/Concept";
+import { Gender } from "@/components/common/Gender";
+import { Location } from "@/components/common/Location";
+import { Price } from "@/components/common/Price";
+import usePutUserPreference from "@/hooks/mutation/usePutUserPreference";
+import { useGetUserPreferences } from "@/hooks/queries";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const PreferenceEditPage = () => {
+ const [selectedGender, setSelectedGender] = useState
("");
+ const [selectedAge, setSelectedAge] = useState(null);
+ const [minPrice, setMinPrice] = useState(0);
+ const [maxPrice, setMaxPrice] = useState(1000000);
+ const [selectedLocation, setSelectedLocation] = useState([]);
+ const [selectedConcepts, setSelectedConcepts] = useState([]);
+ const { data, isLoading } = useGetUserPreferences();
+ const preferenceData = data?.result;
+ const { mutate: uploadPreference } = usePutUserPreference();
+
+ useEffect(() => {
+ if (!isLoading && preferenceData) {
+ setSelectedGender(preferenceData.gender);
+ setSelectedAge(preferenceData.age);
+ setMinPrice(preferenceData.minPrice);
+ setMaxPrice(preferenceData.maxPrice);
+ setSelectedLocation(
+ preferenceData.preferRegions.map((region) => region.preferenceRegion)
+ );
+ setSelectedConcepts(
+ preferenceData.preferTypes.map((type) => type.preferenceType)
+ );
+ }
+ }, [isLoading, data]);
+
+ const navigate = useNavigate();
+
+ const handleGenderClick = (gender: string) => {
+ setSelectedGender(gender);
+ };
+
+ const handleAgeClick = (age: number) => {
+ setSelectedAge(age);
+ };
+
+ const handleLocationClick = (location: string) => {
+ setSelectedLocation((prev) => {
+ if (prev.includes(location)) {
+ return prev.filter((loc) => loc !== location);
+ }
+ return [...prev, location];
+ });
+ };
+
+ const handleConceptClick = (concept: string) => {
+ if (selectedConcepts.includes(concept)) {
+ setSelectedConcepts(selectedConcepts.filter((item) => item !== concept));
+ } else if (selectedConcepts.length < 5) {
+ setSelectedConcepts([...selectedConcepts, concept]);
+ }
+ };
+
+ const handleConfirmClick = () => {
+ const requestPayload = {
+ gender: selectedGender || "",
+ age: selectedAge || 10,
+ minPrice: minPrice,
+ maxPrice: maxPrice,
+ regionPreferences: selectedLocation.map((location) => ({
+ preferenceRegion: location,
+ })),
+ typePreferences: selectedConcepts.map((concept) => ({
+ preferenceType: concept,
+ })),
+ };
+
+ try {
+ uploadPreference(requestPayload);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ const gotoBack = () => {
+ navigate("/mypage");
+ };
+
+ return (
+
+
+
+ 나의 취향 정보 수정
+
+
+
+
+
+
+ 공연장 위치
+
+
+
+
+ 공연 유형
+
+
+
{
+ handleConfirmClick();
+ }}
+ disabled={
+ !(
+ selectedGender &&
+ selectedAge &&
+ selectedLocation &&
+ selectedConcepts
+ )
+ }
+ className="w-full"
+ >
+ 적용하기
+
+
("");
+ const [isChecked, setIsChecked] = useState(false);
+ const [initialProfileImage, setInitialProfileImage] = useState("");
+ const [profileImage, setProfileImage] = useState(null);
+ const { data: userInfo, isLoading: isUserInfoLoading } = useGetUserInfo();
+ const userInfoData = userInfo?.result;
+ const { mutate: uploadUserInfo } = usePutUserInfo();
+
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (userInfoData) {
+ setLocalNickname(userInfoData.nickname);
+ setInitialProfileImage(userInfoData.imageUrl);
+ }
+ }, [userInfoData, isUserInfoLoading]);
+
+ const handleConfirmClick = () => {
+ try {
+ uploadUserInfo(
+ {
+ updateNickname: nickname,
+ updateImage: profileImage,
+ },
+ {
+ onSuccess: (data) => {
+ setInitialProfileImage(
+ `${data.result.imageUrl}?timestamp=${Date.now()}`,
+ );
+ setNickname(nickname);
+ },
+ },
+ );
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ const handleImageUpload = (event: React.ChangeEvent) => {
+ const file = event.target.files?.[0];
+ if (file && file.size <= 10 * 1024 * 1024) {
+ setProfileImage(file);
+ }
+ };
+
+ const gotoBack = () => {
+ navigate("/mypage");
+ };
+
+ if (isUserInfoLoading) {
+ return 로딩중
;
+ }
+
+ return (
+
+
+
+ 프로필 설정
+
+
+
내 정보
+
+
+ {profileImage ? (
+
+ ) : (
+
+ )}
+
+
+
+ {userInfoData?.nickname}
+
+
+
+ 프로필 이미지 업로드
+
+
+
+ *10MB 이내의 이미지 파일을 업로드 해주세요.
+
+
+
+
+
+ 닉네임 설정
+
+
+
+ 적용하기
+
+
(null);
+ const tabs = ["나의 취향 분석", "좋아요한 공연"];
+
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+ useEffect(() => {
+ if (!isLoading && userInfoData) {
+ console.log(userInfoData);
+ }
+ }, [userInfoData, isLoading]);
+
+ useEffect(() => {
+ if (userInfoData?.imageUrl) {
+ const newImageUrl = `${userInfoData.imageUrl}?timestamp=${Date.now()}`;
+ if (newImageUrl !== updatedImageUrl) {
+ setUpdatedImageUrl(newImageUrl);
+ }
+ }
+ }, [userInfoData?.imageUrl, updatedImageUrl]);
+
+ const handleTabClick = (tab: string) => {
+ setSelectedTab(tab);
+ };
+
+ const gotoUserSettings = () => {
+ window.scrollTo({ top: 0 });
+ navigate("/mypage/user");
+ };
+
+ if (isLoading || shouldShowSkeleton) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+
+
+
+ 마이페이지
+
+
+
+
+
+
+
+
+
+ {userInfoData?.nickname}
+
+
+
+
+
+ {tabs.map((tab) => (
+
handleTabClick(tab)}
+ className={`text-center cursor-pointer pb-2 ${
+ selectedTab === tab
+ ? "headline2-bold text-white px-[17px] border-b-2 border-grayscale-80 z-10"
+ : "headline2-bold text-grayscale-60 px-[17px] border-b-2 border-grayscale-30"
+ }`}
+ >
+ {tab}
+
+ ))}
+
+
+
+ {selectedTab === "나의 취향 분석" ? (
+
+ ) : (
+
+ )}
+
+ {showLoading ? (
+
+
+ 클라코가 {nickname}님의
+
+
+ ) : (
+
+
+ 클라코와 함께 클래식 경험을 넓혀줄
+
+
+
+
+ 맞춤 공연 보러가기
+
+
+ )}
+
([]);
+
+ const handleBackClick = () => {
+ navigate("/create/price");
+ };
+
+ const handleConfirmClick = () => {
+ if (selectedConcept) setConcept(selectedConcept);
+ navigate("/create/feature");
+ };
+
+ const handleConceptClick = (concept: string) => {
+ setSelectedConcept((prevSelectedConcept) =>
+ prevSelectedConcept.includes(concept)
+ ? prevSelectedConcept.filter((con) => con !== concept)
+ : [...prevSelectedConcept, concept],
+ );
+ };
+
+ return (
+
+
+
+
+
+ {nickname}님 취향에 맞는
+
+
+
+
+
+ 선호하는 클래식 공연 유형을 모두 선택해주세요.
+
+
+
+
+
0}
+ onClick={handleConfirmClick}
+ disabled={selectedConcept.length === 0}
+ >
+ 다음
+
+
+
+
(0);
+ const [progressValue, setProgressValue] = useState(55.55);
+ const nickname = useUserStore((state) => state.nickname);
+ const addFeature = useOnboardingStore((state) => state.addCategoryPreference);
+ const removeLastCategoryPreference = useOnboardingStore(
+ (state) => state.removeLastCategoryPreference
+ );
+ const removeSpecificCategoryPreference = useOnboardingStore(
+ (state) => state.removeSpecificCategoryPreference
+ );
+ const [selectedFeature, setSelectedFeature] = useState(null);
+ const [isWaiting, setIsWaiting] = useState(false);
+
+ const {
+ gender,
+ age,
+ minPrice,
+ maxPrice,
+ regionPreferences,
+ typePreferences,
+ categoryPreferences,
+ } = useOnboardingStore();
+
+ const navigate = useNavigate();
+
+ const handleBackClick = () => {
+ if (currentStep === 0) {
+ navigate("/create/concept");
+ } else {
+ removeLastCategoryPreference();
+ setCurrentStep(currentStep - 2);
+ }
+ setProgressValue((prevValue) => Math.min(prevValue - 11.11, 100));
+ };
+
+ const handleFeatureClick = (feature: string) => {
+ setSelectedFeature(feature);
+
+ if (progressValue !== 99.99) {
+ setIsWaiting(true);
+ setTimeout(() => {
+ if (currentStep < features.length - 2) {
+ setCurrentStep((prevStep) => prevStep + 2);
+ addFeature(feature);
+ setSelectedFeature(null);
+ setProgressValue((prevValue) => Math.min(prevValue + 11.11, 100));
+ }
+ setIsWaiting(false);
+ }, 500);
+ } else {
+ if (
+ !categoryPreferences.includes("친숙한") &&
+ !categoryPreferences.includes("새로운")
+ ) {
+ addFeature(feature);
+ } else {
+ if (feature === "친숙한" || feature === "새로운") {
+ if (categoryPreferences.includes("친숙한") && feature !== "친숙한") {
+ removeSpecificCategoryPreference("친숙한");
+ }
+ if (categoryPreferences.includes("새로운") && feature !== "새로운") {
+ removeSpecificCategoryPreference("새로운");
+ }
+ }
+
+ if (!categoryPreferences.includes(feature)) {
+ addFeature(feature);
+ }
+ }
+ }
+ };
+
+ const handleNextClick = async () => {
+ const onboardingRequest = {
+ nickname: nickname,
+ gender,
+ age,
+ minPrice,
+ maxPrice,
+ regionPreferences: regionPreferences.map((region) => ({
+ preferenceRegion: region,
+ })),
+ typePreferences: typePreferences.map((type) => ({
+ preferenceType: type,
+ })),
+ categoryPreferences: categoryPreferences.map((category) => ({
+ preferenceCategory: category,
+ })),
+ };
+
+ try {
+ const response = await submitUserInformation(onboardingRequest);
+ console.log(response);
+ navigate("/create/complete");
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+
+
+
+
+
+ {nickname}님 취향에 맞는
+
+
+
+
+
+
+ 선호하는 클래식 공연의 특징을 선택해주세요.
+
+
+ {features.slice(currentStep, currentStep + 2).map((feature) => (
+
handleFeatureClick(feature.title)}
+ className="flex items-center p-[19px]"
+ >
+
+ {feature.title}
+
+ {feature.description.map((line, index) => (
+
+ {line}
+
+ ))}
+
+
+
+ ))}
+
+
+
+
+ 다음
+
+
+
+
([]);
+
+ const handleBackClick = () => {
+ navigate("/create/profile");
+ };
+
+ const handleConfirmClick = () => {
+ setLocation(selectedLocation);
+ navigate("/create/price");
+ };
+
+ const handleLocationClick = (location: string) => {
+ if (selectedLocation.includes(location)) {
+ setSelectedLocation(selectedLocation.filter((loc) => loc !== location));
+ } else {
+ setSelectedLocation([...selectedLocation, location]);
+ }
+ };
+
+ return (
+
+
+
+
+
+ 맞춤 공연 추천 전,
+
+
+
+
+
+ 선호하는 공연장 위치를 모두 알려주세요.
+
+
+
+
+
0}
+ onClick={handleConfirmClick}
+ disabled={selectedLocation.length === 0}
+ >
+ 다음
+
+
+
+
("");
+ const [isChecked, setIsChecked] = useState(false);
+ const navigate = useNavigate();
+
+ const handleConfirmClick = () => {
+ if (isChecked) {
+ setNickname(localNickname);
+ navigate("/create/profile");
+ }
+ };
+ const handleBackClick = () => {
+ navigate("/tos");
+ };
+ return (
+
+
+
+
+
+ 사용하실 닉네임을 알려주세요
+
+
+
+
+
+ 확인
+
+
+
(0);
+ const [selectedMaxPrice, setSelectedMaxPrice] = useState(1000000);
+
+ const handleBackClick = () => {
+ navigate("/create/location");
+ };
+
+ const handleConfirmClick = () => {
+ setMinPrice(selectedMinPrice);
+ setMaxPrice(selectedMaxPrice);
+ navigate("/create/concept");
+ };
+
+ return (
+
+
+
+
+
+ 맞춤 공연 추천 전,
+
+
+
+
+
+ 선호하는 티켓 가격 범위를 알려주세요.
+
+
+
+
+ 다음
+
+
+
+
(null);
+ const [selectedAge, setSelectedAge] = useState(null);
+
+ const handleBackClick = () => {
+ navigate("/create");
+ };
+
+ const handleConfirmClick = () => {
+ if (selectedGender) setGender(selectedGender);
+ if (selectedAge) setAge(selectedAge);
+ navigate("/create/location");
+ };
+
+ return (
+
+
+
+
+
+ 맞춤 공연 추천 전,
+
+
+
+
+
+ 성별과 연령대를 알려주세요.
+
+
+
+
+
+ 다음
+
+
+
+
+
img.imageUrl) ?? []
+ }
+ onClose={handleImageClick}
+ setThumbsSwiper={setThumbsSwiper}
+ />
+
+
+
+
+
+
+
{reviewList?.result.userName}
+
+
+
+ {reviewList?.result.starRate}
+
+
+
+
+
+ {reviewList?.result.createdDate.replace(/-/g, ".")}
+
+
+
+
{reviewList?.result.content}
+
+ {reviewList?.result.reviewImages?.map((image, index) => (
+
{
+ handleImageClick();
+ setSelectIndex({
+ page: 1,
+ index: 0,
+ });
+ }}
+ key={index}
+ src={image.imageUrl}
+ alt="리뷰 이미지"
+ className="min-w-[90px] max-w-[90px] max-h-[90px] object-contain rounded-[5px]"
+ />
+ ))}
+
+
+
공연 특징
+
+ {reviewList?.result.tagReviews.map((tag) => (
+ {tag.tagName}
+ ))}
+
+
+
+
+
공연장
+
+ {reviewList?.result.watchSit}
+
+
+
+ {reviewList?.result.placeReviews.map((lReview) => (
+
+ {lReview.categoryName}
+
+ ))}
+
+
+
({
+ value: options[0].value,
+ label: options[0].label,
+ });
+
+ const {
+ data: reviewList,
+ fetchNextPage,
+ isFetchingNextPage,
+ isLoading,
+ } = useGetConcertReviewList({
+ concertId: Number(id),
+ size: 9,
+ orderBy: selectOption.value,
+ });
+
+ const { data: reviewTotalCount } = useGetConcertReviewSize(Number(id));
+
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(null);
+ const {
+ thumbsSwiper,
+ isThumbnailShow,
+ isAnimating,
+ selectIndex,
+ setThumbsSwiper,
+ setSelectIndex,
+ handleImageClick,
+ } = useThumbnailModal();
+
+ const navigate = useNavigate();
+
+ const gotoBack = () => {
+ navigate(-1);
+ clearConcertInfo();
+ };
+
+ const handlePreviewImage = (index: SelectThumbnail) => {
+ setSelectIndex(index);
+ handleImageClick();
+ };
+
+ const { elementRef } = useRefFocusEffect(fetchNextPage, [
+ reviewList,
+ ]);
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(event.target as Node)
+ ) {
+ setIsOpen(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+ if (shouldShowSkeleton) {
+ return (
+
+
+
+
+
+
+ {Array.from(Array(2).keys()).map((_, index) => (
+
+
+
+
+
+
+ {Array.from(Array(5).keys()).map((_, index) => (
+
+
+
+
+ {reviewList && reviewList?.pages[0].result.reviewList.length > 0 && (
+
img.imageUrl)) ||
+ []
+ }
+ onClose={handleImageClick}
+ setThumbsSwiper={setThumbsSwiper}
+ />
+ )}
+
+
+
+
+
+
+
+
+
{data.prfnm}
+
+ 리뷰 {reviewTotalCount?.result.total}개
+
+
+
+
+ setIsOpen((prev) => !prev)}
+ >
+
{selectOption.label}
+
+
+ {isOpen && (
+
+ {options.map((option, index) => (
+
+ setSelectOption({
+ value: option.value,
+ label: option.label,
+ })
+ }
+ className={`${selectOption.value === option.value ? "text-common-white" : "text-grayscale-60"}`}
+ >
+ {option.label}
+
+ ))}
+
+ )}
+
+
+ {reviewList &&
+ reviewList?.pages.flatMap((page) =>
+ page.result.reviewList.map((review, index) => (
+
+ review.reviewImages.length &&
+ handlePreviewImage({
+ page: page.result.currentPage,
+ index: index,
+ })
+ }
+ />
+ ))
+ )}
+ {/* 추가 데이터 로드 */}
+ {isFetchingNextPage && (
+
+ 로딩 중...
+
+ )}
+
+
+ )}
+ (null);
+ const detailsInfoRef = useRef(null);
+ const reviewRef = useRef(null);
+ const relatedShowsRef = useRef(null);
+
+ const { id } = useParams<{ id: string }>();
+ const { data, isLoading } = useGetShowDetail(Number(id));
+ const showDetail = data?.result;
+ const { seats, prices, minPrice, maxPrice } = extractPricesWithSeats(
+ showDetail?.pcseguidance || "",
+ );
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+ useEffect(() => {
+ const sectionRefs = {
+ "공연 정보": showInfoRef,
+ 상세정보: detailsInfoRef,
+ "감상 리뷰": reviewRef,
+ };
+
+ Object.entries(sectionRefs).forEach(([sectionId, ref]) => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setSelectedTab(sectionId);
+ }
+ });
+ },
+ {
+ threshold: sectionId === "상세정보" && showFullImage ? 0.2 : 0.7,
+ },
+ );
+
+ if (ref.current) {
+ observer.observe(ref.current);
+ }
+
+ return () => {
+ if (ref.current) {
+ observer.unobserve(ref.current);
+ }
+ };
+ });
+
+ const currentRelatedShowsRef = relatedShowsRef.current;
+ const endObserver = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setIsSticky(false);
+ } else {
+ setIsSticky(true);
+ }
+ });
+ },
+ { threshold: 0.8 },
+ );
+
+ if (currentRelatedShowsRef) {
+ endObserver.observe(currentRelatedShowsRef);
+ }
+
+ return () => {
+ if (currentRelatedShowsRef) {
+ endObserver.unobserve(currentRelatedShowsRef);
+ }
+ };
+ }, [showFullImage]);
+
+ const scrollToSection = (ref: React.RefObject) => {
+ const yOffset = -100;
+ if (ref.current) {
+ const elementPosition =
+ ref.current.getBoundingClientRect().top + window.scrollY + yOffset;
+ window.scrollTo({ top: elementPosition, behavior: "smooth" });
+ }
+ };
+
+ const handleTabClick = (tab: string) => {
+ setSelectedTab(tab);
+ if (tab === "공연 정보") {
+ scrollToSection(showInfoRef);
+ } else if (tab === "상세정보") {
+ scrollToSection(detailsInfoRef);
+ } else if (tab === "감상 리뷰") {
+ scrollToSection(reviewRef);
+ }
+ };
+
+ const displayedPrice = (
+ minPrice: number | string | null,
+ maxPrice: number | string | null,
+ ): string => {
+ if (minPrice === "무료" && maxPrice === "무료") {
+ return "무료";
+ }
+ if (minPrice !== null && maxPrice !== null) {
+ return minPrice === maxPrice
+ ? `${minPrice.toLocaleString()}원`
+ : `${minPrice.toLocaleString()}원-${maxPrice.toLocaleString()}원`;
+ }
+ return "";
+ };
+
+ if (isLoading || shouldShowSkeleton) {
+ return (
+
+
+ );
+ }
+ return (
+
+
+
+
+
+
+ {tabs.map((tab) => (
+
handleTabClick(tab)}
+ className={`text-center cursor-pointer pb-2 ${
+ selectedTab === tab
+ ? "body2-semibold text-grayscale-80 border-b-2 border-grayscale-80 z-10"
+ : "body2-medium text-grayscale-60 border-b-2 border-grayscale-30"
+ }`}
+ >
+ {tab}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(0);
+ const [reviewText, setReviewText] = useState("");
+ const navigate = useNavigate();
+ const { mutate: editClacoTicketReview } = usePutEditTicketReview();
+
+ useEffect(() => {
+ // console.log(data);
+ setRating(data.starRate);
+ setReviewText(data.content);
+ }, [setRating, setReviewText, data]);
+
+ const gotoBack = () => {
+ navigate(-1);
+ };
+
+ const handleConfirm = () => {
+ const editData = {
+ ticketReviewId: ticketId,
+ watchSit: null,
+ starRate: rating,
+ content: reviewText,
+ };
+ editClacoTicketReview(editData, {
+ onSuccess: () => {
+ navigate(`/ticket/${ticketId}`);
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+ };
+ return (
+
+ );
+};
diff --git a/src/pages/Ticket/[id]/page.tsx b/src/pages/Ticket/[id]/page.tsx
new file mode 100644
index 0000000..5150d95
--- /dev/null
+++ b/src/pages/Ticket/[id]/page.tsx
@@ -0,0 +1,322 @@
+import { ReactComponent as BackArrow } from "@/assets/svgs/BackArrow.svg";
+import { ReactComponent as Trash } from "@/assets/svgs/trash.svg";
+import { ReactComponent as Edit } from "@/assets/svgs/Edit.svg";
+import { ReactComponent as Star } from "@/assets/svgs/StarRating.svg";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useDeferredLoading, useThumbnailModal } from "@/hooks/utils";
+import { DeleteClacoTicketModal } from "@/components/Ticket/Modal/Delete/ClacoTicket";
+import { CategoryTag } from "@/components/common/CategoryTag";
+import { PerformanceAttributes } from "@/components/Ticket/PerformanceAttributes";
+import { ReviewTag } from "@/components/common/ReviewTag";
+import { Modal } from "@/components/common/Modal";
+import { ThumbnailModal } from "@/components/common/Modal/ThumbnailModal";
+import { TicketReviewDetailRequest } from "@/types";
+import { useGetTicketReviewDetail } from "@/hooks/queries";
+import { useDeleteClacoTicket, usePutEditTicketReview } from "@/hooks/mutation";
+import { useReviewInfoStore } from "@/libraries/store/reviewInfo";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const ClacoTicketDetailPage = () => {
+ const { id } = useParams();
+ const ticketId = Number(id);
+ const { setReviewInfo } = useReviewInfoStore();
+
+ const { data, isLoading } = useGetTicketReviewDetail(ticketId);
+ const { mutate: editClacoTicketReview } = usePutEditTicketReview();
+ const { mutate: deleteClacoTicket } = useDeleteClacoTicket();
+
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+ const [viewingSeat, setViewingSeat] = useState("");
+ const [reviewData, setReviewData] = useState();
+ const [imageLoaded, setImageLoaded] = useState(false);
+ const {
+ thumbsSwiper,
+ isThumbnailShow,
+ isAnimating,
+ selectIndex,
+ setThumbsSwiper,
+ setSelectIndex,
+ handleImageClick,
+ } = useThumbnailModal();
+
+ useEffect(() => {
+ if (data && !isLoading) {
+ setReviewData(data.result);
+ setReviewInfo({
+ starRate: data.result.starRate,
+ content: data.result.content,
+ });
+ }
+ }, [data, isLoading, setReviewInfo]);
+
+ const navigate = useNavigate();
+
+ const gotoBack = () => {
+ const id = localStorage.getItem("prevTicketBookId");
+ const title = localStorage.getItem("prevClacoBookTitle");
+ if (id || title) {
+ navigate(`/ticketbook/${id}?title=${title}`);
+ } else {
+ navigate(-1);
+ }
+ };
+
+ const gotoTicketReviewEdit = () => {
+ navigate(`/ticket/${Number(id)}/edit`);
+ };
+
+ const handleEditSeat = () => {
+ const editData = {
+ ticketReviewId: ticketId,
+ watchSit: JSON.stringify(viewingSeat),
+ starRate: null,
+ content: null,
+ };
+ editClacoTicketReview(editData, {
+ onSuccess: () => {
+ setIsEditModalOpen(false);
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+ };
+
+ const handleDeleteTicketReview = () => {
+ deleteClacoTicket(ticketId, {
+ onSuccess: () => {
+ setIsModalOpen(false);
+ // navigate("/ticketbook");
+ navigate(-1);
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+ };
+
+ useEffect(() => {
+ if (data?.result?.ticketImage) {
+ const img = new Image();
+ img.src = data.result.ticketImage;
+ img.onload = () => setImageLoaded(true);
+ }
+ }, [data]);
+
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+ if (shouldShowSkeleton) {
+ return (
+
+ );
+ }
+
+ return (
+
+
image.imageUrl) ?? []}
+ onClose={handleImageClick}
+ setThumbsSwiper={setThumbsSwiper}
+ />
+
+ setIsModalOpen(true)} />}
+
+
+ {reviewData && (
+
+
+ )}
+
+
{reviewData?.concertName}
+
+ {reviewData?.ticketImage && (
+
setImageLoaded(true)}
+ />
+ )}
+
+ {reviewData && (
+
+ )}
+
+
+
나의 공연 감상
+ {reviewData?.editor && (
+
+ )}
+
+
+
+
+
+ {reviewData?.starRate?.toFixed(1)}
+
+
+
+ {reviewData?.createdDate.replace(/-/g, ".")} 작성
+
+
+
{reviewData?.content}
+
+ {reviewData?.imageUrlS?.map((image, index) => (
+
{
+ handleImageClick();
+ setSelectIndex({
+ page: 1,
+ index: 0,
+ });
+ }}
+ key={index}
+ src={image.imageUrl}
+ alt="리뷰 이미지"
+ className="min-w-[90px] max-h-[90px] rounded-[5px]"
+ />
+ ))}
+
+
+
공연장
+
+ {reviewData?.placeReviews.map((lReview) => (
+
+ {lReview.categoryName}
+
+ ))}
+
+
+
+
관람 정보
+
+
관람 날짜
+
+ {reviewData?.watchDate.replace(/-/g, ".")}
+
+
+
공연장소
+
+ {reviewData?.watchPlace}
+
+
+
회차
+
+ {reviewData && JSON.parse(reviewData.watchRound)}
+
+
+
캐스팅
+
+ {reviewData &&
+ JSON.parse(reviewData.castings).map(
+ (casting: string, index: number, array: string[]) => (
+
+ {casting.trim()}
+
+ )
+ )}
+
+
+
+ 좌석
+ {reviewData &&
+ JSON.parse(reviewData.watchSit).trim().length === 0 ? (
+ <>
+ {reviewData?.editor && (
+ setIsEditModalOpen(true)}
+ />
+ )}
+
+ ) : null}
+
+
+ {reviewData &&
+ JSON.parse(reviewData.watchSit).trim().length === 0 ? null : (
+ <>
+ {reviewData && JSON.parse(reviewData.watchSit)}
+ {reviewData?.editor && (
+ setIsEditModalOpen(true)}
+ className="ml-2"
+ />
+ )}
+
+ )}
+
+
+
+
setIsModalOpen(false)}
+ onConfirm={handleDeleteTicketReview}
+ />
+ )}
+ {isEditModalOpen && (
+ setIsEditModalOpen(false)}
+ >
+
+
+ 관람 좌석을 입력해주세요
+
+
+
+ )}
+ []
+ >([]);
+ const [clacoTicket, setClacoTicket] = useState();
+ const [currentClacoBook, setCurrentClacoBook] = useState("");
+ const [selectTicketIndex, setSelectTicketIndex] = useState(0);
+ const [selectClacoBook, setSelectClacoBook] = useState({
+ id: 0,
+ title: "",
+ color: "",
+ });
+ const [isSetting, setIsSetting] = useState(false);
+ const [actionState, setActionState] = useState<
+ "move" | "delete" | "download"
+ >();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [toast, setToast] = useState(false);
+ const [message, setMessage] = useState("");
+
+ const { data: clacoBookData } = useGetClacoBookList();
+ const { data: clacoTicketData, isLoading } = useGetClacoTicketList(
+ Number(id)
+ );
+
+ const { mutate: moveClacoTicket } = usePutMoveClacoTicket();
+ const { mutate: deleteClacoTicket } = useDeleteClacoTicket();
+
+ useEffect(() => {
+ if (clacoTicketData?.result.ticketList && !isLoading) {
+ setClacoTicket(clacoTicketData.result.ticketList);
+
+ setTicketRefs(
+ clacoTicketData.result.ticketList.map(() =>
+ createRef()
+ )
+ );
+ }
+ }, [clacoTicketData, isLoading]);
+
+ useEffect(() => {
+ setCurrentClacoBook(value as string);
+ }, [value]);
+
+ const gotoBack = () => {
+ 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}`);
+ };
+
+ const gotoTicketCreate = () => {
+ localStorage.setItem("clacoBookId", id?.toString() || "");
+ navigate("/ticketcreate/search");
+ };
+
+ const onDownloadBtn = async () => {
+ if (!ticketRefs[selectTicketIndex]?.current) return;
+
+ try {
+ const canvas = await html2canvas(ticketRefs[selectTicketIndex].current!, {
+ scale: 2,
+ backgroundColor: "#1C1C1C",
+ useCORS: true,
+ allowTaint: true,
+ });
+ canvas.toBlob((blob) => {
+ if (blob !== null) {
+ console.log(ticketRefs[selectTicketIndex].current);
+ saveAs(blob, "MyClacoTicket.png");
+ }
+ });
+ } catch (error) {
+ console.error("Error converting div to image:", error);
+ }
+ };
+
+ const handleModalOpen = (action: "move" | "delete" | "download") => {
+ const condition =
+ clacoBookData?.result.clacoBookList
+ .filter((book) => book.title !== value)
+ .map((book) => book.title).length === 0;
+
+ if (action === "move" && condition) {
+ setToast(true);
+ setMessage("티켓을 이동할 클라코북이 없어요");
+ setIsSetting(false);
+ return;
+ }
+ setActionState(action);
+ setIsSetting(false);
+ setIsModalOpen(true);
+ };
+
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ };
+
+ const handleConfirm = async () => {
+ if (actionState === "move") {
+ const clacoBookId = selectClacoBook.id;
+ const ticketReviewId = clacoTicket && clacoTicket[selectTicketIndex].id;
+ moveClacoTicket(
+ {
+ clacoBookId: clacoBookId as number,
+ ticketReviewId: ticketReviewId as number,
+ },
+ {
+ onSuccess: () => {
+ setMessage("티켓이 이동이 완료되었어요");
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ }
+ );
+ } else if (actionState === "delete") {
+ const ticketReviewId = clacoTicket && clacoTicket[selectTicketIndex].id;
+ deleteClacoTicket(ticketReviewId as number, {
+ onSuccess: () => {
+ setMessage("티켓이 삭제되었어요");
+ },
+ onError: (error) => {
+ console.error(error);
+ },
+ });
+ } else {
+ onDownloadBtn();
+ }
+ setIsModalOpen(false);
+ setToast(true);
+ };
+
+ const handleSlideChange = (swiper: SwiperType) => {
+ setSelectTicketIndex(swiper.activeIndex);
+ };
+
+ const { shouldShowSkeleton } = useDeferredLoading(isLoading);
+
+ if (shouldShowSkeleton) {
+ return (
+
+ );
+ }
+
+ if (!isLoading && clacoTicket?.length === 0) {
+ return (
+ <>
+
+
+ navigate(-1)}
+ />
+
+ {currentClacoBook}
+
+
+
+
+ 공연은 즐겁게 관람하셨나요?
+
+
+
+
+
+ 티켓북에 공연 감상을 등록하고
+
| 성태현 
| \<개발 리드>
| 정희찬 
+ )}
+
+ {!isShow && (
+