diff --git a/src/components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber.tsx b/src/components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber.tsx index 2512444f..b18a4346 100644 --- a/src/components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber.tsx +++ b/src/components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber.tsx @@ -25,7 +25,7 @@ const PhoneNumber = ({ phone }: PhoneNumProps) => { - } isVisible={isToastVisible} toastBottom={30}> + } isVisible={isToastVisible} isTop={true}> 클립보드에 복사되었습니다! diff --git a/src/components/commons/mapInput/MapInput.styled.ts b/src/components/commons/mapInput/MapInput.styled.ts index 84e282cd..ec5ad590 100644 --- a/src/components/commons/mapInput/MapInput.styled.ts +++ b/src/components/commons/mapInput/MapInput.styled.ts @@ -141,7 +141,8 @@ export const DropDownItem = styled.div` export const RoadName = styled.p` align-self: stretch; - color: ${({ theme }) => theme.colors.pink_200}; + color: ${({ theme }) => theme.colors.gray_0}; + //color: ${({ theme }) => theme.colors.pink_200}; ${({ theme }) => theme.fonts["body1-normal-semi"]}; white-space: nowrap; `; diff --git a/src/components/commons/mapInput/MapInput.tsx b/src/components/commons/mapInput/MapInput.tsx index 258f0524..9613f00f 100644 --- a/src/components/commons/mapInput/MapInput.tsx +++ b/src/components/commons/mapInput/MapInput.tsx @@ -71,6 +71,7 @@ const MapInput = ({ const temp = []; for (var i = 0; i < data.length; i++) { temp.push(data[i]); + console.log(data); } setPlaces(temp); } else if (status === kakao.maps.services.Status.ZERO_RESULT) { @@ -97,6 +98,16 @@ const MapInput = ({ } }; + const matchStringPink = (inputValue: string, result: string) => { + const regex = new RegExp(`(${_.escapeRegExp(inputValue)})`, "gi"); + const highlightedResult = result.replace( + regex, + (match) => `${match}` + ); + + return ; + }; + useEffect(() => { setInputValue(value as string); prevValueRef.current = value as string; @@ -190,8 +201,8 @@ const MapInput = ({ setLatitudeLongitude(place.y, place.x); //lat이 y값 }} > - {place.road_address_name} - {place.address_name} + {matchStringPink(inputValue, place.place_name)} + {place.road_address_name} {idx !== places.length - 1 && } diff --git a/src/components/commons/toast/Toast.tsx b/src/components/commons/toast/Toast.tsx index b7bb81a3..cea204a1 100644 --- a/src/components/commons/toast/Toast.tsx +++ b/src/components/commons/toast/Toast.tsx @@ -8,7 +8,6 @@ interface ToastProps extends HTMLAttributes { isTop?: boolean; } -//todo: 만약 모든 토스트 위에 위치하게 하고 싶다면, toastBottom 조정 필요 const Toast = ({ icon, children, diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 2c636050..491c92ed 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -3,5 +3,6 @@ import useHeader from "./useHeader.ts"; import useLogin from "./useLogin.ts"; import useModal from "./useModal.ts"; import useToast from "./useToast.ts"; +import useToastHandler from "./useToastHandler.ts"; -export { useHamburger, useHeader, useLogin, useModal, useToast }; +export { useHamburger, useHeader, useLogin, useModal, useToast, useToastHandler }; diff --git a/src/hooks/useToastHandler.ts b/src/hooks/useToastHandler.ts new file mode 100644 index 00000000..dbcd5b31 --- /dev/null +++ b/src/hooks/useToastHandler.ts @@ -0,0 +1,32 @@ +import { useToast } from "@hooks"; +import { useState } from "react"; + +interface ToastConfigProps { + message: string; + isTop: boolean; +} + +//top & bottom, 혹은 메세지를 변경해야하는 경우 사용하는 훅 (필수 아님) +const useToastHandler = () => { + const { showToast, isToastVisible } = useToast(); + const [toastConfig, setToastConfig] = useState({ + message: "클립보드에 복사되었습니다!", + isTop: true, + }); + + //토스트 메세지, 위치를 정하는 유틸 함수 + const handleToastVisible = (message: string, position: "top" | "bottom") => { + const isTop = position === "top" ? true : false; + setToastConfig({ message, isTop }); + showToast(); + }; + + /* + toastConfig: Toast 속성에 사용, + isToastVisible : Toast의 isVisible 속성에 사용 + handleToastVisible : Toast를 사용하기 위한 함수 + */ + return { toastConfig, isToastVisible, handleToastVisible }; +}; + +export default useToastHandler; diff --git a/src/pages/book/components/paidBook/PaidBook.tsx b/src/pages/book/components/paidBook/PaidBook.tsx index 00386681..b6f4165a 100644 --- a/src/pages/book/components/paidBook/PaidBook.tsx +++ b/src/pages/book/components/paidBook/PaidBook.tsx @@ -89,7 +89,7 @@ const PaidBook = ({ - } isVisible={isToastVisible} toastBottom={52}> + } isVisible={isToastVisible} isTop={true}> 클립보드에 복사되었습니다! diff --git a/src/pages/cancel/Cancel.tsx b/src/pages/cancel/Cancel.tsx index e2c04ed2..f459f641 100644 --- a/src/pages/cancel/Cancel.tsx +++ b/src/pages/cancel/Cancel.tsx @@ -80,7 +80,6 @@ const Cancel = () => { }; confirmCancelAction(requestData); - alert("hi"); }; if (!state) { diff --git a/src/pages/gig/components/performanceIntroduce/Contact.tsx b/src/pages/gig/components/performanceIntroduce/Contact.tsx index 16dbe83c..3f9a6245 100644 --- a/src/pages/gig/components/performanceIntroduce/Contact.tsx +++ b/src/pages/gig/components/performanceIntroduce/Contact.tsx @@ -34,7 +34,7 @@ const Contact = ({ contact }: ContactProps) => { )} - } isVisible={isToastVisible} toastBottom={100}> + } isVisible={isToastVisible} isTop={true}> 클립보드에 복사되었습니다! diff --git a/src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.tsx b/src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.tsx index fbafd8a3..d6523b50 100644 --- a/src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.tsx +++ b/src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.tsx @@ -127,7 +127,7 @@ const PerformanceIntroduce = ({
- } isVisible={isToastVisible} toastBottom={30}> + } isVisible={isToastVisible} isTop={true}> 클립보드에 복사되었습니다!
diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx index 0d962e63..7141b537 100644 --- a/src/pages/test/TestPage.tsx +++ b/src/pages/test/TestPage.tsx @@ -93,7 +93,7 @@ const TestPage = () => { - } isVisible={isToastVisible} toastBottom={30}> + } isVisible={isToastVisible} isTop={true}> 클립보드에 복사되었습니다! diff --git a/src/pages/test/modalTest/BankAccount.tsx b/src/pages/test/modalTest/BankAccount.tsx index 001b5099..fcdd1323 100644 --- a/src/pages/test/modalTest/BankAccount.tsx +++ b/src/pages/test/modalTest/BankAccount.tsx @@ -49,7 +49,7 @@ const BankAccount = ({ bankName, number, accountName, accountNumber, price }: Ba - } isVisible={isToastVisible} toastBottom={30}> + } isVisible={isToastVisible} isTop={true}> 클립보드에 복사되었습니다! diff --git a/src/pages/ticketholderlist/TicketHolderList.tsx b/src/pages/ticketholderlist/TicketHolderList.tsx index 0a7b4031..ab7ffacf 100644 --- a/src/pages/ticketholderlist/TicketHolderList.tsx +++ b/src/pages/ticketholderlist/TicketHolderList.tsx @@ -27,9 +27,9 @@ import SelectedChips from "./components/selectedChips/SelectedChips"; import { convertingBookingStatus } from "@constants/convertingBookingStatus"; import { IconCheck } from "@assets/svgs"; import Toast from "@components/commons/toast/Toast"; -import { useToast } from "@hooks"; import NonExistent from "./components/nonExistent/NonExistent."; import { getUA, isChrome } from "react-device-detect"; +import { useToastHandler } from "@hooks"; export type PaymentType = | "CHECKING_PAYMENT" @@ -66,10 +66,7 @@ const headers = [ ]; const TicketHolderList = () => { - const [toastConfig, setToastConfig] = useState({ - message: "클립보드에 복사되었습니다!", - isTop: false, - }); + const { toastConfig, isToastVisible, handleToastVisible } = useToastHandler(); const [paymentData, setPaymentData] = useState(); const [allBookings, setAllBookings] = useState([]); // 전체 예매자 정보 (필터 적용 안 된) @@ -102,9 +99,7 @@ const TicketHolderList = () => { filterList ); const { openConfirm, closeConfirm } = useModal(); - const [checkedBookingId, setCheckedBookingId] = useState([]); - const { showToast, isToastVisible } = useToast(); // 체크된 리스트 확인 const handleBookingIdCheck = (bookingId: number) => { setCheckedBookingId((prev) => @@ -114,13 +109,6 @@ const TicketHolderList = () => { const { mutate: updateMutate, isPending: updateIsPending } = useTicketUpdate(); - //토스트 메세지, 위치를 정하는 유틸 함수 - const handleToastVisible = (message: string, position: "top" | "bottom") => { - const isTop = position === "top" ? true : false; - setToastConfig({ message, isTop }); - showToast(); - }; - const handlePaymentFixAxiosFunc = () => { if (updateIsPending) { return; @@ -477,7 +465,7 @@ const TicketHolderList = () => { const handleCopyClipBoard = (text: string) => { navigator.clipboard.writeText(text); - handleToastVisible("클립보드에 복사되었습니다!", "bottom"); + handleToastVisible("클립보드에 복사되었습니다!", "top"); }; return (