fix: 모임 인원 초과 및 결과 생성 완료 시 Toast 커스텀 기능 추가 (#116)

* fix: ToastLinkButton 컴포넌트를 추가로 개발하여 Toast 에 추가 진행

* fix: 모임 인원이 다 찼거나 이미 결과가 생성된 경우에 대한 Toast 커스텀 진행

* fix: 닉네임 중복인 경우에 대해서도 추천 결과 보기로 리디렉션 되도록 수정

Author: RookieAND

src/hooks/gathering/useOpinionForm.ts src/hooks/gathering/useOpinionForm.tsxsrc/hooks/gathering/useOpinionForm.ts renamed to src/hooks/gathering/useOpinionForm.tsx

@@ -1,19 +1,19 @@
 "use client";
 
+import { compact } from "es-toolkit";
+import { useParams, useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+
+import { useCreateParticipant } from "#/hooks/apis";
+import { ToastLinkButton } from "#/pageComponents/gathering/opinion";
 import {
 	opinionFormSchema,
 	distanceRangeToKm,
 	type OpinionFormSchema,
 } from "#/schemas/gathering";
-import { useCreateParticipant } from "../apis/participant";
-import { useParams, useRouter } from "next/navigation";
 import { ERROR_CODES, isApiError } from "#/utils/api";
 import { toast } from "#/utils/toast";
-import { compact } from "es-toolkit";
-import { createElement } from "react";
-import { ArrowLeftIcon } from "#/icons/arrowLeftIcon";
 
 export function useOpinionForm() {
 	const router = useRouter();
@@ -53,29 +53,24 @@ export function useOpinionForm() {
 			router.replace(`/gathering/${accessKey}/opinion/pending`);
 		} catch (error) {
 			if (isApiError(error)) {
-				if (error.errorCode === ERROR_CODES.GATHERING_FULL) {
-					toast.warning(error.message, {
-						action: createElement(
-							"button",
-							{
-								type: "button",
-								className:
-									"ygi:flex ygi:ml-auto ygi:items-center ygi:gap-0.5 ygi:justify-center ygi:cursor-pointer ygi:text-palette-primary-500 ygi:body-14-sb",
-								onClick: () => {
-									router.push(
-										`/gathering/${accessKey}/opinion/result`,
-									);
-								},
-							},
-							"추천 결과 보기",
-							createElement(ArrowLeftIcon, {
-								size: 20,
-								className:
-									"ygi:text-palette-primary-500 ygi:rotate-180",
-							}),
-						),
-					});
-					return;
+				switch (error.errorCode) {
+					case ERROR_CODES.GATHERING_FULL:
+					case ERROR_CODES.DUPLICATE_NICKNAME:
+					case ERROR_CODES.RECOMMEND_ALREADY_PROCEEDED: {
+						toast.warning(error.message, {
+							action: (
+								<ToastLinkButton
+									label="추천 결과 보기"
+									onClick={() => {
+										router.push(
+											`/gathering/${accessKey}/opinion/result`,
+										);
+									}}
+								/>
+							),
+						});
+						return;
+					}
 				}
 
 				toast.warning(error.message);

src/pageComponents/gathering/opinion/form/ToastLinkButton.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { twJoin } from "tailwind-merge";
+
+import { ArrowLeftIcon } from "#/icons/arrowLeftIcon";
+
+interface ToastLinkButtonProps {
+	label: string;
+	onClick: () => void;
+}
+
+export const ToastLinkButton = ({ label, onClick }: ToastLinkButtonProps) => {
+	return (
+		<button
+			type="button"
+			className={twJoin(
+				"ygi:ml-auto ygi:flex ygi:items-center ygi:justify-center ygi:gap-0.5",
+				"ygi:cursor-pointer ygi:body-14-sb ygi:text-palette-primary-500",
+			)}
+			onClick={onClick}
+		>
+			{label}
+			<ArrowLeftIcon
+				size={20}
+				className="ygi:rotate-180 ygi:text-palette-primary-500"
+			/>
+		</button>
+	);
+};

src/pageComponents/gathering/opinion/form/index.ts

@@ -2,4 +2,5 @@ export { OpinionFormPage } from "./OpinionFormPage";
 export { NicknameStep } from "./NicknameStep";
 export { DistanceStep } from "./DistanceStep";
 export { DislikeStep } from "./DislikeStep";
+export { ToastLinkButton } from "./ToastLinkButton";
 export { PreferenceStep } from "./PreferenceStep";

src/pageComponents/gathering/opinion/index.ts

@@ -1,5 +1,5 @@
 export { LandingPage } from "./landing";
-export { OpinionFormPage } from "./form";
+export { OpinionFormPage, ToastLinkButton } from "./form";
 export { PendingPage } from "./pending";
 export { CompletePage } from "./complete";
 export { ResultPage } from "./result";