Merge branch 'main' of https://github.com/SCBJ-7/SCBJ-FE into feature/#…

…349-feat-main

src/App.tsx

@@ -1,10 +1,12 @@
 import { OverlayProvider } from "@toss/use-overlay";
+
 import { AnimatePresence } from "framer-motion";
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 
 import { useToastStore } from "./store/store.ts";
 
+
 import IsLogin from "@/components/isLogin/IsLogin";
 import ScrollToTop from "@/components/scrollToTop/ScrollToTop";
 import Toast from "@/components/toast/Toast";

src/hooks/common/useToastConfig.ts

@@ -1,3 +1,5 @@
+import { useRef } from "react";
+
 import { useToastStore } from "@/store/store";
 
 interface ToastProps {
@@ -7,16 +9,28 @@ interface ToastProps {
 
 const useToastConfig = () => {
   const setToastConfig = useToastStore((state) => state.setToastConfig);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleToast = (isError: boolean, strings: React.ReactNode[]) => {
     const toastProps: ToastProps = { isError, strings };
 
+    setToastConfig({
+      isShow: true,
+      isError: toastProps.isError,
+      strings: [""],
+    });
+
     setToastConfig({
       isShow: true,
       isError: toastProps.isError,
       strings: toastProps.strings,
     });
-    setTimeout(() => {
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
       setToastConfig({
         isShow: false,
         isError: toastProps.isError,

src/hooks/common/useTransferNavigation.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+import useToastConfig from "./useToastConfig";
+
+import { useToastStore } from "@/store/store";
+
+export type PhaseType = "1stInput" | "2ndInput" | "finalConfirm";
+
+interface NavProps {
+  firstPrice: string;
+  setIs2ndChecked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const useTransferNavigation = ({ firstPrice, setIs2ndChecked }: NavProps) => {
+  const [phase, setPhase] = useState<PhaseType>("1stInput");
+  const [phaseHistory, setPhaseHistory] = useState<PhaseType[]>(["1stInput"]);
+
+  const { handleToast } = useToastConfig();
+  const resetToast = useToastStore((state) => state.resetToast);
+
+  const handleAddPhaseHistory = (newPhase: PhaseType) => {
+    const tempNum = Number(firstPrice.split(",").join(""));
+    if (firstPrice === "" || isNaN(tempNum) || tempNum < 100) {
+      if (newPhase === "2ndInput") {
+        handleToast(true, [
+          <>판매할 금액을 입력해야 2차 가격을 입력하실 수 있습니다.</>,
+        ]);
+      } else if (newPhase === "finalConfirm") {
+        handleToast(true, [
+          <>판매할 금액을 입력해야 정산 계좌를 등록할 수 있습니다.</>,
+        ]);
+      }
+      return;
+    }
+    setPhaseHistory([...phaseHistory, newPhase]);
+    setPhase(newPhase);
+
+    if (newPhase === "2ndInput") {
+      setIs2ndChecked(true);
+    }
+  };
+
+  const handleSubPhaseHistory = () => {
+    const newPhase = [...phaseHistory];
+    const pop = newPhase.pop();
+    setPhaseHistory(newPhase);
+    setPhase(newPhase[newPhase.length - 1] || "1stInput");
+
+    console.log(newPhase);
+
+    console.log(pop, "pop");
+
+    if (pop === "2ndInput") {
+      setIs2ndChecked(false);
+    }
+  };
+
+  useEffect(() => {
+    resetToast();
+  }, [phase, resetToast]);
+
+  return { handleAddPhaseHistory, handleSubPhaseHistory, phase };
+};
+
+export default useTransferNavigation;

src/pages/transferWritingPricePage/TransferWritingPrice.tsx

@@ -19,12 +19,11 @@ import useSubmitHandler from "../../hooks/common/useSubmitHandler";
 
 import { useUserInfoQuery } from "@/hooks/api/useUserInfoQuery";
 import usePreventLeave from "@/hooks/common/usePreventLeave";
+import useTransferNavigation from "@/hooks/common/useTransferNavigation";
 import { useSelectedItemStore } from "@/store/store";
 // import { ProfileData } from "@/types/profile";
 import { type SellerCommentType } from "@/types/sellerComments";
 
-export type PhaseType = "1stInput" | "2ndInput" | "finalConfirm";
-
 // const userData: ProfileData = {
 //   accountNumber: "123123123123123",
 //   bank: "신한",
@@ -76,44 +75,13 @@ const TransferWritingPrice = () => {
   // 제출 가능 여부
   const [readyToSubmit, setReadyToSubmit] = useState(false);
 
-  const [phase, setPhase] = useState<PhaseType>("1stInput");
-  const [phaseHistory, setPhaseHistory] = useState<PhaseType[]>(["1stInput"]);
-
   useEffect(() => {
     setBank(userData?.bank ?? null);
     setAccountNumber(userData?.accountNumber ?? null);
   }, [userData]);
 
-  useEffect(() => {
-    console.log(phase, "phase");
-
-    console.log(is2ndChecked, "is2ndChecked");
-    //eslint-disable-next-line
-  }, [phase]);
-
-  const handleAddPhaseHistory = (newPhase: PhaseType) => {
-    setPhaseHistory([...phaseHistory, newPhase]);
-    setPhase(newPhase);
-
-    if (newPhase === "2ndInput") {
-      setIs2ndChecked(true);
-    }
-  };
-
-  const handleSubPhaseHistory = () => {
-    const newPhase = [...phaseHistory];
-    const pop = newPhase.pop();
-    setPhaseHistory(newPhase);
-    setPhase(newPhase[newPhase.length - 1] || "1stInput");
-
-    console.log(newPhase);
-
-    console.log(pop, "pop");
-
-    if (pop === "2ndInput") {
-      setIs2ndChecked(false);
-    }
-  };
+  const { handleAddPhaseHistory, handleSubPhaseHistory, phase } =
+    useTransferNavigation({ firstPrice, setIs2ndChecked });
 
   const handleOpenAgreement = () => {
     setModalType("AGREEMENT");

src/pages/transferWritingPricePage/checkBox/CheckBoxSection.style.ts

@@ -34,6 +34,7 @@ export const CheckBox = styled.input.attrs({ type: "checkbox" })<{
 }>`
   width: 14px;
   height: 14px;
+
   border-radius: 1px;
   accent-color: ${({ theme }) => theme.color.percentBlue};
 `;

src/store/store.ts

@@ -62,6 +62,7 @@ export const useUserInfoStore = create<UserState>((set) => ({
 }));
 
 export type configType = {
+  isOverlap?: number;
   isShow: boolean;
   isError: boolean;
   strings: (string | ReactNode)[];
@@ -75,6 +76,7 @@ interface ToastStates {
 
 export const useToastStore = create<ToastStates>((set) => ({
   config: {
+    isOverlap: 0,
     isShow: false,
     isError: false,
     strings: [],
@@ -86,12 +88,13 @@ export const useToastStore = create<ToastStates>((set) => ({
         ...updated,
       },
     })),
+
   resetToast: () =>
-    set(() => ({
+    set((state) => ({
       config: {
         isShow: false,
-        isError: false,
-        strings: [],
+        isError: state.config.isError,
+        strings: state.config.strings,
       },
     })),
 }));