Merge pull request #163 from han-kimm/develop

✨feat: 토스트 함수로 분리 / 소셜 로그인 로직 수정 / 닉네임 중복 확인 / 하트버튼 애니메이션

app/(route)/(bottom-nav)/mypage/_components/SettingList.tsx

@@ -1,7 +1,10 @@
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
+import { instance } from "@/api/api";
 import { useModal } from "@/hooks/useModal";
 import { outSession } from "@/store/session/cookies";
+import { openToast } from "@/utils/toast";
+import { TOAST_MESSAGE } from "@/constants/toast";
 
 const WithdrawModal = dynamic(() => import("@/components/modal/WithdrawModal"), { ssr: false });
 
@@ -18,6 +21,17 @@ const SettingList = ({ isOpener }: { isOpener: boolean }) => {
   const router = useRouter();
   const { modal, openModal, closeModal } = useModal();
 
+  const handleLogout = async () => {
+    const res = await instance.delete("/auth");
+    if (res.ok) {
+      outSession();
+      router.push("/");
+      router.refresh();
+      openToast.success(TOAST_MESSAGE.auth.logout);
+      return;
+    }
+  };
+
   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()}>
@@ -29,7 +43,7 @@ const SettingList = ({ isOpener }: { isOpener: boolean }) => {
             {EditUserInfo.password}
           </li>
         )}
-        <li onClick={() => (outSession(), router.push("/"), router.refresh())} className={ButtonStyle}>
+        <li onClick={handleLogout} className={ButtonStyle}>
           {EditUserInfo.logOut}
         </li>
         <li onClick={() => openModal("withdraw")} className={`rounded-b-lg ${ButtonStyle}`}>

app/(route)/(bottom-nav)/mypage/_components/tab/MyLocationTab/MapInfoBox.tsx

@@ -1,7 +1,8 @@
 import { SyntheticEvent } from "react";
-import toast from "react-hot-toast";
 import HorizontalEventCard from "@/components/card/HorizontalEventCard";
+import { openToast } from "@/utils/toast";
 import { EventCardType } from "@/types/index";
+import { TOAST_MESSAGE } from "@/constants/toast";
 import MapIcon from "@/public/icon/map.svg";
 
 const getPlaceId = async (address: string, placeName: string) => {
@@ -21,9 +22,7 @@ const MapInfoBox = ({ locationInfo, closeMapBox }: { locationInfo: EventCardType
   const handleRedirectToMap = async () => {
     const placeId = await getPlaceId(locationInfo.address, locationInfo.placeName);
     if (!placeId) {
-      toast.error("카카오 맵과 연동되지 않은 주소입니다🥹", {
-        className: "text-14 font-600",
-      });
+      openToast.error(TOAST_MESSAGE.kakaoMap);
       return;
     }
     window.open(`https://map.kakao.com/link/map/${placeId}`);

app/(route)/(bottom-nav)/signin/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import FeelMyRhythm from "@/(route)/(bottom-nav)/signin/_components/Confetti";
 import LoadingDot from "@/(route)/(bottom-nav)/signin/_components/LoadingDot";
 import { instance } from "app/_api/api";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
@@ -13,8 +13,9 @@ import Button from "@/components/button";
 import InputText from "@/components/input/InputText";
 import PinkLayout from "@/components/layout/PinkLayout";
 import useEnterNext from "@/hooks/useEnterNext";
-import { deleteCookies, setCookies, setSession } from "@/store/session/cookies";
+import { setCookies, setSession } from "@/store/session/cookies";
 import { ERROR_MESSAGES, REG_EXP } from "@/utils/signupValidation";
+import { openToast } from "@/utils/toast";
 import { SHOT_SIGNIN } from "@/constants/confetti";
 import { META_TAG } from "@/constants/metaTag";
 import { OAUTH } from "@/constants/oauth";
@@ -23,6 +24,8 @@ import Logo from "@/public/icon/logo.svg";
 import KakaoLogo from "@/public/icon/logo_kakao.svg";
 import NaverLogo from "@/public/icon/logo_naver.svg";
 
+const FeelMyRhythm = dynamic(() => import("@/(route)/(bottom-nav)/signin/_components/Confetti"), { ssr: false });
+
 const SIGNIN_DEFAULT = {
   mode: "onBlur",
   defaultValues: {
@@ -57,9 +60,7 @@ const SignInPage = () => {
         toast.custom(<FeelMyRhythm shotList={SHOT_SIGNIN} location={{ y: 0.5 }} />, {
           className: "z-popup",
         });
-        toast(`어서오세요! ${res.nickName}님`, {
-          className: "text-16 font-600",
-        });
+        openToast.success(`어서오세요! ${res.nickName}님`);
 
         setSession({ isAuth: true, user: res });
 

app/(route)/event/[eventId]/_components/HeartButton.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { ButtonHTMLAttributes } from "react";
+import { usePathname } from "next/navigation";
+import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
 import useLikeEvent from "@/hooks/useLikeEvent";
+import { confettiHeart } from "@/constants/confetti";
 import HeartIcon from "@/public/icon/heart.svg";
 
 interface HeartButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,15 +13,29 @@ interface HeartButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const HeartButton = ({ eventId, initialLike, initialLikeCount }: HeartButtonProps) => {
+  const [selected, setSelected] = useState(initialLike);
   const { liked, likeCount, handleLikeEvent } = useLikeEvent({ eventId, initialLike, initialLikeCount });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setSelected(liked);
+  }, [liked]);
+
+  const handleClick = () => {
+    setSelected((prev) => !prev);
+    handleLikeEvent();
+
+    confettiHeart(buttonRef, selected, pathname);
+  };
 
   return (
-    <button onClick={handleLikeEvent} className="absolute right-20 top-24 text-center text-12 font-600 pc:right-0 pc:top-0 pc:text-14">
+    <button ref={buttonRef} onClick={handleClick} className="absolute right-20 top-24 text-center text-12 font-600 pc:right-0 pc:top-0 pc:text-14">
       <div className="pc:hidden">
-        <HeartIcon stroke={liked ? "#FF50AA" : "#1C1E22"} fill={liked ? "#FF50AA" : "none"} strokeWidth={1.7} />
+        <HeartIcon stroke={selected ? "#FF50AA" : "#1C1E22"} fill={selected ? "#FF50AA" : "none"} strokeWidth={1.7} />
       </div>
       <div className="hidden pc:block">
-        <HeartIcon stroke={liked ? "#FF50AA" : "#1C1E22"} fill={liked ? "#FF50AA" : "none"} width={32} height={32} viewBox="0 0 24 24" strokeWidth={1.4} />
+        <HeartIcon stroke={selected ? "#FF50AA" : "#1C1E22"} fill={selected ? "#FF50AA" : "none"} width={32} height={32} viewBox="0 0 24 24" strokeWidth={1.4} />
       </div>
       {likeCount}
     </button>

app/(route)/event/[eventId]/_components/tab/LocationTab.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
+import { openToast } from "@/utils/toast";
 import { MapType } from "@/types/index";
+import { TOAST_MESSAGE } from "@/constants/toast";
 import KakaoMap from "../KakaoMap";
 
 const getPlaceId = async (name: string, address: string) => {
@@ -20,9 +21,7 @@ const LocationTab = ({ name, address }: MapType) => {
   const handleRedirectToMap = async () => {
     const placeId = await getPlaceId(name, address);
     if (!placeId) {
-      toast.error("카카오 맵과 연동되지 않은 주소입니다🥹", {
-        className: "text-14 font-600",
-      });
+      openToast.error(TOAST_MESSAGE.kakaoMap);
       return;
     }
     router.push(`https://map.kakao.com/link/map/${placeId}`);

app/(route)/event/[eventId]/post/page.tsx

@@ -5,7 +5,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
 import { ButtonHTMLAttributes, ChangeEvent, InputHTMLAttributes, ReactNode, useCallback, useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import MetaTag from "@/components/MetaTag";
 import WarningCheck from "@/components/WarningCheck";
 import Button from "@/components/button";
@@ -17,7 +16,9 @@ import { instance } from "@/api/api";
 import { useAuth } from "@/hooks/useAuth";
 import { useStore } from "@/store/index";
 import { makeImgUrlList } from "@/utils/changeImgUrl";
+import { openToast } from "@/utils/toast";
 import { META_TAG } from "@/constants/metaTag";
+import { TOAST_MESSAGE } from "@/constants/toast";
 import PartyIcon from "@/public/icon/party.svg";
 import SadIcon from "@/public/icon/sad.svg";
 import { MemoizedImageList } from "./_components/MemoizedImageList";
@@ -96,10 +97,7 @@ const ReviewPostPage = () => {
       });
       router.push(`/event/${eventId}`);
     } catch (e) {
-      console.error(e);
-      toast.error("후기 등록에 실패하였습니다", {
-        className: "text-14 font-600",
-      });
+      openToast.error(TOAST_MESSAGE.review);
     } finally {
       setIsLoading(false);
     }

app/(route)/oauth/callback/[provider]/page.tsx

@@ -3,9 +3,10 @@
 import FadingDot from "@/(route)/(bottom-nav)/signin/_components/FadingDot";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import toast from "react-hot-toast";
 import { instance } from "@/api/api";
 import { deleteCookies, getCookies, setSession } from "@/store/session/cookies";
+import { openToast } from "@/utils/toast";
+import { TOAST_MESSAGE } from "@/constants/toast";
 import Logo from "@/public/icon/logo.svg";
 import KakaoLogo from "@/public/icon/logo_kakao.svg";
 import NaverLogo from "@/public/icon/logo_naver.svg";
@@ -20,10 +21,9 @@ const OAuth = () => {
     const pathname = getCookies("pathname");
     try {
       const res = await instance.post(`/auth`, { code, signinMethod, email: "", password: "" });
+      console.log(res);
       setSession({ isAuth: true, user: res });
-      toast(`${signinMethod} 계정으로 연동 되었습니다. ${res.nickName}님`, {
-        className: "text-16 font-600",
-      });
+      openToast.success(`${signinMethod} 계정으로 연동 되었습니다. ${res.nickName}님`);
 
       deleteCookies("pathname", { path: "/" });
 
@@ -33,12 +33,11 @@ const OAuth = () => {
         return;
       }
 
+      router.replace("/");
       router.push(pathname);
       router.refresh();
     } catch (e) {
-      toast.error("이미 가입한 이메일입니다.", {
-        className: "text-16 font-600",
-      });
+      openToast.error(TOAST_MESSAGE.user.email);
       router.push("/signin");
     }
   };

app/(route)/setting/my-artist/page.tsx

@@ -3,14 +3,15 @@
 import dynamic from "next/dynamic";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import MetaTag from "@/components/MetaTag";
 import MyArtistList from "@/components/MyArtistList";
 import MobileHeader from "@/components/header/MobileHeader";
 import PinkLayout from "@/components/layout/PinkLayout";
 import { instance } from "@/api/api";
 import { useModal } from "@/hooks/useModal";
+import { openToast } from "@/utils/toast";
 import { META_TAG } from "@/constants/metaTag";
+import { TOAST_MESSAGE } from "@/constants/toast";
 
 const AlertModal = dynamic(() => import("@/components/modal/AlertModal"), { ssr: false });
 const InputModal = dynamic(() => import("@/components/modal/InputModal"), { ssr: false });
@@ -36,9 +37,7 @@ const MyArtistEditPage = () => {
         }
       }
     } catch (e) {
-      toast("다시 시도해 주십시오.", {
-        className: "text-16 font-600",
-      });
+      openToast.error(TOAST_MESSAGE.mutate.error);
     } finally {
       setValue("request", "");
       setIsPending(false);

app/(route)/setting/password/page.tsx

@@ -4,7 +4,6 @@ import FadingDot from "@/(route)/(bottom-nav)/signin/_components/FadingDot";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import MetaTag from "@/components/MetaTag";
 import BottomButton from "@/components/button/BottomButton";
 import MobileHeader from "@/components/header/MobileHeader";
@@ -14,7 +13,9 @@ import { instance } from "@/api/api";
 import useEnterNext from "@/hooks/useEnterNext";
 import { getSession } from "@/store/session/cookies";
 import { ERROR_MESSAGES, REG_EXP } from "@/utils/signupValidation";
+import { openToast } from "@/utils/toast";
 import { META_TAG } from "@/constants/metaTag";
+import { TOAST_MESSAGE } from "@/constants/toast";
 
 const PWCHANGE_DEFAULT = {
   mode: "onBlur",
@@ -46,9 +47,7 @@ const PasswordPage = () => {
         router.push("/mypage");
       } catch {
         setSubmitState((prev) => ({ ...prev, isError: true }));
-        toast("다시 시도해 주십시오.", {
-          className: "text-16 font-600",
-        });
+        openToast.error(TOAST_MESSAGE.mutate.error);
       } finally {
         setSubmitState((prev) => ({ ...prev, isLoading: false }));
       }

app/(route)/setting/profile/page.tsx

@@ -4,7 +4,6 @@ import FadingDot from "@/(route)/(bottom-nav)/signin/_components/FadingDot";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import MetaTag from "@/components/MetaTag";
 import BottomButton from "@/components/button/BottomButton";
 import MobileHeader from "@/components/header/MobileHeader";
@@ -14,7 +13,9 @@ import PinkLayout from "@/components/layout/PinkLayout";
 import { instance } from "@/api/api";
 import { getSession, setSession } from "@/store/session/cookies";
 import { ERROR_MESSAGES, REG_EXP } from "@/utils/signupValidation";
+import { openToast } from "@/utils/toast";
 import { META_TAG } from "@/constants/metaTag";
+import { TOAST_MESSAGE } from "@/constants/toast";
 
 interface DefaultValues {
   profileImage: File | null | "";
@@ -42,11 +43,9 @@ const ProfilePage = () => {
 
     setTimeout(async () => {
       try {
-        const nickNameRes = await instance.get("/users/nickname");
+        const nickNameRes = await instance.get("/users/nickname", { search: nickName });
         if (nickNameRes.isDuplicated) {
-          toast.error("이미 사용 중인 닉네임입니다.", {
-            className: "text-16 font-600",
-          });
+          openToast.error(TOAST_MESSAGE.user.nickName);
           return;
         }
 
@@ -73,9 +72,7 @@ const ProfilePage = () => {
         }
       } catch {
         setSubmitState((prev) => ({ ...prev, isError: true }));
-        toast("다시 시도해 주십시오.", {
-          className: "text-16 font-600",
-        });
+        openToast.error(TOAST_MESSAGE.mutate.error);
       } finally {
         setSubmitState((prev) => ({ ...prev, isLoading: false }));
       }

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

@@ -3,14 +3,15 @@ import { instance } from "app/_api/api";
 import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import toast from "react-hot-toast";
 import ArtistCard from "@/components/ArtistCard";
 import ChipButton from "@/components/chip/ChipButton";
 import SearchInput from "@/components/input/SearchInput";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
 import { useModal } from "@/hooks/useModal";
+import { openToast } from "@/utils/toast";
 import { Res_Get_Type } from "@/types/getResType";
 import { ArtistType } from "@/types/index";
+import { TOAST_MESSAGE } from "@/constants/toast";
 
 const InputModal = dynamic(() => import("@/components/modal/InputModal"), { ssr: false });
 
@@ -70,10 +71,7 @@ const SearchArtist = ({ onClick, myArtists, myArtistsInfo }: Props) => {
   const { control, handleSubmit, setValue, watch } = useForm({ defaultValues: { name: "" } });
   const name = watch("name");
 
-  const notify = () =>
-    toast.success("등록 요청이 제출되었습니다.", {
-      className: "text-16 font-600 px-28 py-16",
-    });
+  const notify = () => openToast.success(TOAST_MESSAGE.request.success);
 
   const onModalSubmit: SubmitHandler<{ name: string }> = async () => {
     if (name) {
@@ -88,9 +86,7 @@ const SearchArtist = ({ onClick, myArtists, myArtistsInfo }: Props) => {
         closeModal();
         notify();
       } catch (error: any) {
-        toast.error("죄송합니다. 잠시 후 시도해주세요", {
-          className: "text-16 font-600 px-28 py-16",
-        });
+        openToast.error(TOAST_MESSAGE.request.error);
       }
     }
   };

app/_api/api.ts

@@ -188,7 +188,7 @@ type PostEndPoint =
   | `/reviews/${string}/claims`;
 
 type PutEndPoint = `/event/${string}` | `/users/${string}/profile` | `/users/${string}/password` | `/users/${string}/artists`;
-type DeleteEndPoint = `/users/${string}/artists` | `/reviews/${string}/images` | `/users/${string}`;
+type DeleteEndPoint = `/users/${string}/artists` | `/reviews/${string}/images` | `/users/${string}` | "/auth";
 type PostQueryType<T> = T extends "/file/upload" ? { category: "event" | "artist" | "user" } : unknown;
 
 type PostBodyType<T> = T extends "/event"