Merge branch 'develop' of https://github.com/P1Z7/frontend into feat/…

…admin

app/(route)/mypage/_components/SettingList.tsx

@@ -17,9 +17,14 @@ const EditUserInfo = {
 
 const ButtonStyle = "w-full cursor-pointer border-b border-gray-50 px-24 py-20 pc:px-20 pc:py-16 hover:pc:bg-main-pink-50";
 
-const SettingList = ({ isOpener }: { isOpener: boolean }) => {
+interface Props {
+  closeBottomSheet?: () => void;
+  isOpener: boolean;
+  openModal: (modal: string) => void;
+}
+
+const SettingList = ({ isOpener, closeBottomSheet, openModal }: Props) => {
   const router = useRouter();
-  const { modal, openModal, closeModal } = useModal();
 
   const handleLogout = async () => {
     const res = await instance.delete("/auth");
@@ -32,6 +37,11 @@ const SettingList = ({ isOpener }: { isOpener: boolean }) => {
     }
   };
 
+  const handleWithdraw = () => {
+    openModal("withdraw");
+    closeBottomSheet?.();
+  };
+
   return (
     <>
       <ul className="flex h-fit w-full flex-col items-start text-16 text-gray-900 pc:text-14 pc:font-500" onClick={(event) => event.stopPropagation()}>
@@ -46,12 +56,11 @@ const SettingList = ({ isOpener }: { isOpener: boolean }) => {
         <li onClick={handleLogout} className={ButtonStyle}>
           {EditUserInfo.logOut}
         </li>
-        <li onClick={() => openModal("withdraw")} className={`rounded-b-lg ${ButtonStyle}`}>
+        <li onClick={handleWithdraw} className={`rounded-b-lg ${ButtonStyle}`}>
           {EditUserInfo.withdrawal}
         </li>
         <li className={`pc:hidden ${ButtonStyle}`} />
       </ul>
-      {modal === "withdraw" && <WithdrawModal closeModal={closeModal} />}
     </>
   );
 };

app/(route)/mypage/_components/UserProfile.tsx

@@ -2,14 +2,17 @@
 
 import dynamic from "next/dynamic";
 import Image from "next/image";
+import WithdrawModal from "@/components/modal/WithdrawModal";
 import { useAuth } from "@/hooks/useAuth";
 import useBottomSheet from "@/hooks/useBottomSheet";
+import { useModal } from "@/hooks/useModal";
 import SettingList from "./SettingList";
 
 const MyPageBottomSheet = dynamic(() => import("@/components/bottom-sheet/MyPageBottomSheet"), { ssr: false });
 
 const UserProfile = () => {
   const { bottomSheet, openBottomSheet, closeBottomSheet, refs } = useBottomSheet();
+  const { modal, openModal, closeModal } = useModal();
   const { session } = useAuth();
 
   return (
@@ -31,12 +34,13 @@ const UserProfile = () => {
         </div>
       </div>
       <section className="mx-20 hidden w-full rounded-lg border border-gray-50 pc:block">
-        <SettingList isOpener={session?.user.signupMethod === "opener"} />
+        <SettingList isOpener={session?.user.signupMethod === "opener"} openModal={openModal} />
       </section>
       <button onClick={() => openBottomSheet("mypage")} className="pc:hidden">
         <Image src="/icon/kebab-black.svg" width={24} height={25} alt="계정 정보 수정하기" />
       </button>
-      {bottomSheet === "mypage" && <MyPageBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} isOpener={session?.user.signupMethod === "opener"} />}
+      {bottomSheet === "mypage" && <MyPageBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} isOpener={session?.user.signupMethod === "opener"} openModal={openModal} />}
+      {modal === "withdraw" && <WithdrawModal closeModal={closeModal} />}
     </div>
   );
 };

app/(route)/mypage/_components/tab/MyReviewTab/MyReview.tsx

@@ -5,8 +5,10 @@ import Evaluation from "@/components/Evaluation";
 import ControlMyDataBottomSheet from "@/components/bottom-sheet/ControlMyDataBottomSheet";
 import KebabContents from "@/components/card/KebabContents";
 import Chip from "@/components/chip/Chip";
+import DeleteEventModal from "@/components/modal/DeleteEventModal";
 import { instance } from "@/api/api";
 import useBottomSheet from "@/hooks/useBottomSheet";
+import { useModal } from "@/hooks/useModal";
 import { formatAddress, formatDate } from "@/utils/formatString";
 import { MyReviewType } from "@/types/index";
 import HeartIcon from "@/public/icon/heart.svg";
@@ -35,6 +37,7 @@ const MyReview = ({ data, userId, setDep }: Props) => {
 
   const { bottomSheet, openBottomSheet, closeBottomSheet, refs } = useBottomSheet();
   const [openKebab, setOpenKebab] = useState(false);
+  const { openModal, closeModal, modal } = useModal();
 
   return (
     <div className="flex w-full flex-col gap-16 border-b border-gray-50 px-20 py-16">
@@ -45,7 +48,7 @@ const MyReview = ({ data, userId, setDep }: Props) => {
             <span className="text-12 font-500 text-gray-400">{data.isPublic ? "공개" : "비공개"}</span>
             <KebabIcon className="rotate-90 transform hover:cursor-pointer tablet:hidden" fill="#7E8695" onClick={() => openBottomSheet("myReview")} />
             <KebabIcon className="hidden rotate-90 transform hover:cursor-pointer tablet:block" fill="#7E8695" onClick={() => setOpenKebab(!openKebab)} />
-            {openKebab && <KebabContents id={data.id} setDep={setDep} type="review" />}
+            {openKebab && <KebabContents id={data.id} setDep={setDep} type="review" openModal={openModal} />}
           </div>
         </div>
         <div className="flex items-center gap-8">
@@ -70,7 +73,10 @@ const MyReview = ({ data, userId, setDep }: Props) => {
           {likeCount}
         </button>
       </div>
-      {bottomSheet === "myReview" && <ControlMyDataBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} eventId={data.id} setDep={setDep} type="review" />}
+      {bottomSheet === "myReview" && (
+        <ControlMyDataBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} eventId={data.id} setDep={setDep} type="review" openModal={openModal} />
+      )}
+      {modal === "delete_data" && <DeleteEventModal closeModal={closeModal} id={data.id} setDep={setDep} type={"review"} />}
     </div>
   );
 };

app/(route)/signup/_components/SearchArtist.tsx

@@ -150,12 +150,12 @@ const Card = ({ data, onClick, myArtists }: CardProps) => {
   return (
     <li>
       <label htmlFor={id}>
-        <ArtistCard isChecked={isChecked} profileImage={image === "http://image.co.kr" ? undefined : image} isSmall>
+        <ArtistCard isChecked={isChecked} profileImage={image === "http://image.co.kr" ? undefined : image} isSmall onClick={() => onClick(name, !isChecked, id)}>
           {name}
         </ArtistCard>
       </label>
 
-      <input name="myArtists" type="checkbox" id={id} onChange={() => onClick(name, !isChecked, id)} checked={isChecked} hidden />
+      <input name="myArtists" type="checkbox" id={id} checked={isChecked} hidden />
     </li>
   );
 };

app/(route)/signup/page.tsx

@@ -43,7 +43,6 @@ const SignUp = () => {
         <div className="flex h-[calc(100%-13.8rem)] grow flex-col px-20 tablet:px-40 pc:px-0">
           <GenericFormProvider<SignUpFormType> formOptions={{ mode: "onBlur", defaultValues: { ...DEFAULT_VALUES, email: emailFromSignin ?? "" } }}>
             <ProfileSetup steps={STEPS} handleNextClick={handleNextClick} handlePrevClick={handlePrevClick} Funnel={Funnel} Step={Step} />
-            <ProfileSetup steps={STEPS} handleNextClick={handleNextClick} handlePrevClick={handlePrevClick} Funnel={Funnel} Step={Step} />
           </GenericFormProvider>
         </div>
       </DottedLayout>

app/_api/api.ts

@@ -1,3 +1,4 @@
+import { usePathname } from "next/navigation";
 import { getSession } from "@/store/session/cookies";
 import { Req_Delete_Type } from "@/types/deleteBodyType";
 import { Req_Post_Type } from "@/types/postBodyType";
@@ -145,8 +146,10 @@ export class Api {
       const refetchResult = await this.refetch(newEndPoint, config);
       return refetchResult;
     }
-    const result = await res.json();
-    this.makeError(result);
+    if (endPoint !== "/auth" && !endPoint.includes("/users")) {
+      const result = await res.json();
+      this.makeError(result);
+    }
     return res;
   }
 }

app/_components/bottom-sheet/ControlMyDataBottomSheet.tsx

@@ -10,12 +10,13 @@ interface Props extends BottomSheetBaseType {
   eventId: string;
   setDep?: (dep: string) => void;
   type: "event" | "review";
+  openModal: (modal: string) => void;
 }
 
-const ControlMyDataBottomSheet = ({ closeBottomSheet, refs, eventId, setDep, type }: Props) => {
+const ControlMyDataBottomSheet = ({ closeBottomSheet, refs, eventId, setDep, type, openModal }: Props) => {
   return (
     <BottomSheet.Frame closeBottomSheet={closeBottomSheet} ref={refs.sheet}>
-      <KebabContents id={eventId} setDep={setDep} type={type} />
+      <KebabContents id={eventId} setDep={setDep} type={type} openModal={openModal} closeBottomSheet={closeBottomSheet} />
     </BottomSheet.Frame>
   );
 };

app/_components/bottom-sheet/MyPageBottomSheet.tsx

@@ -8,13 +8,14 @@ interface Props {
     content: (node: HTMLElement | null) => void;
   };
   isOpener: boolean;
+  openModal: (modal: string) => void;
 }
 
-const MyPageBottomSheet = ({ closeBottomSheet, refs, isOpener }: Props) => {
+const MyPageBottomSheet = ({ closeBottomSheet, refs, isOpener, openModal }: Props) => {
   return (
     <>
       <BottomSheet.Frame closeBottomSheet={closeBottomSheet} ref={refs.sheet}>
-        <SettingList isOpener={isOpener} />
+        <SettingList isOpener={isOpener} closeBottomSheet={closeBottomSheet} openModal={openModal} />
       </BottomSheet.Frame>
     </>
   );

app/_components/card/HorizontalEventCard.tsx

@@ -5,12 +5,14 @@ import HeartButton from "@/components/button/HeartButton";
 import Chip from "@/components/chip/Chip";
 import useBottomSheet from "@/hooks/useBottomSheet";
 import useLikeEvent from "@/hooks/useLikeEvent";
+import { useModal } from "@/hooks/useModal";
 import { formatAddress, formatDate } from "@/utils/formatString";
 import { EventCardType } from "@/types/index";
 import { TAG_ORDER } from "@/constants/post";
 import KebabIcon from "@/public/icon/kebab.svg";
 import NoImage from "@/public/image/no-profile.png";
 import ControlMyDataBottomSheet from "../bottom-sheet/ControlMyDataBottomSheet";
+import DeleteEventModal from "../modal/DeleteEventModal";
 import KebabContents from "./KebabContents";
 
 interface Props {
@@ -42,6 +44,7 @@ const HorizontalEventCard = ({ data, onHeartClick, isGrow = false, isMypage = fa
 
   const { bottomSheet, openBottomSheet, closeBottomSheet, refs } = useBottomSheet();
   const [openKebab, setOpenKebab] = useState(false);
+  const { openModal, closeModal, modal } = useModal();
 
   return (
     <Link
@@ -61,7 +64,7 @@ const HorizontalEventCard = ({ data, onHeartClick, isGrow = false, isMypage = fa
           <div className="relative">
             <KebabIcon className="rotate-90 transform tablet:hidden" fill="#7E8695" onClick={() => openBottomSheet("myPost")} />
             <KebabIcon className="hidden rotate-90 transform tablet:block" fill="#7E8695" onClick={() => setOpenKebab(!openKebab)} />
-            {openKebab && <KebabContents id={data.id} setDep={setDep} />}
+            {openKebab && <KebabContents id={data.id} setDep={setDep} openModal={openModal} />}
           </div>
         )}
       </div>
@@ -102,7 +105,10 @@ const HorizontalEventCard = ({ data, onHeartClick, isGrow = false, isMypage = fa
           </ul>
         </div>
       </div>
-      {bottomSheet === "myPost" && <ControlMyDataBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} eventId={data.id} setDep={setDep} type="event" />}
+      {bottomSheet === "myPost" && (
+        <ControlMyDataBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} eventId={data.id} setDep={setDep} type="event" openModal={openModal} />
+      )}
+      {modal === "delete_data" && <DeleteEventModal closeModal={closeModal} id={data.id} setDep={setDep} type={"review"} />}
     </Link>
   );
 };

app/_components/card/KebabContents.tsx

@@ -1,34 +1,40 @@
 import { useRouter } from "next/navigation";
 import { useModal } from "@/hooks/useModal";
+import { BottomSheetBaseType } from "@/types/index";
 import DeleteEventModal from "../modal/DeleteEventModal";
 
 interface KebabProps {
   id: string;
   setDep?: (dep: string) => void;
   type?: "event" | "review";
+  openModal: (modal: string) => void;
+  closeBottomSheet?: () => void;
 }
 
-const KebabContents = ({ id, setDep, type = "event" }: KebabProps) => {
+const KebabContents = ({ id, setDep, type = "event", openModal, closeBottomSheet }: KebabProps) => {
   const route = useRouter();
-  const { openModal, closeModal, modal } = useModal();
 
   const TYPE = {
     event: {
       editPath: `/event/${id}/edit`,
     },
   };
 
+  const handleDelete = () => {
+    openModal("delete_data");
+    closeBottomSheet?.();
+  };
+
   return (
     <ul className="flex h-fit w-full flex-col items-start pb-32 pt-16 text-16 text-gray-900 tablet:absolute tablet:right-60 tablet:top-32 tablet:w-120 tablet:translate-x-1/2 tablet:rounded-sm tablet:bg-white-white tablet:p-0 tablet:text-14 tablet:font-500 tablet:shadow-hero tablet:shadow-gray-200">
       {type === "event" && (
         <li className="w-full cursor-pointer border-b border-gray-50 px-24 py-20 hover:font-700  tablet:px-20 tablet:py-16" onClick={() => route.push(TYPE[type].editPath)}>
           수정하기
         </li>
       )}
-      <li className="w-full cursor-pointer border-b border-gray-50 px-24 py-20 hover:font-700 tablet:border-0 tablet:px-20 tablet:py-16" onClick={() => openModal("delete_data")}>
+      <li className="w-full cursor-pointer border-b border-gray-50 px-24 py-20 hover:font-700 tablet:border-0 tablet:px-20 tablet:py-16" onClick={handleDelete}>
         삭제하기
       </li>
-      {modal === "delete_data" && <DeleteEventModal closeModal={closeModal} id={id} setDep={setDep} type={type} />}
     </ul>
   );
 };