fix: 간헐적으로 select 선택시 submit 버튼 클릭되는 현상 방지

CollectingBox · May 19, 2024 · 433126b · 433126b
1 parent f235e78
commit 433126b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/ui/SelectVisitHistory.tsx b/src/components/ui/SelectVisitHistory.tsx
@@ -13,11 +13,15 @@ import { VisitHistoryType } from '@/types/collection';
 
 interface Props {
 	handleSelectOption: (value: VisitHistoryType) => void;
+	onOpenChange: (value: boolean) => void;
 }
 
-export function SelectVisitHistory({ handleSelectOption }: Props) {
+export function SelectVisitHistory({
+	handleSelectOption,
+	onOpenChange,
+}: Props) {
 	return (
-		<Select onValueChange={handleSelectOption}>
+		<Select onValueChange={handleSelectOption} onOpenChange={onOpenChange}>
 			<SelectTrigger className="h-S-56 w-full focus:border-Green-400">
 				<SelectValue placeholder="선택" />
 			</SelectTrigger>

diff --git a/src/components/ui/modal/LeaveVisitHistoryModal.tsx b/src/components/ui/modal/LeaveVisitHistoryModal.tsx
@@ -26,6 +26,7 @@ type Props = {
 const LeaveVisitHistoryModal = ({ setIsModalOpen }: Props) => {
 	const queryClient = useQueryClient();
 	const [option, setOption] = useState<VisitHistoryType>();
+	const [isSelectOpen, setIsSelectOpen] = useState(false);
 	const selectCollectionId = useSelectedCollectionId();
 	const { setIsComplete, setCompleteContent } = useContext(CompleteContext);
 	const { setIsSystemError, setType } = useContext(SystemContext);
@@ -35,7 +36,7 @@ const LeaveVisitHistoryModal = ({ setIsModalOpen }: Props) => {
 	const handleSelectOption = (value: VisitHistoryType) => setOption(value);
 	const handleLeaveVisitHistory = async (e: MouseEvent<HTMLButtonElement>) => {
 		e.preventDefault();
-		if (!selectCollectionId || !option) return;
+		if (!selectCollectionId || !option || !isSelectOpen) return;
 
 		try {
 			const reviewHistoryJSON = localStorage.getItem('reviewHistory');
@@ -102,7 +103,12 @@ const LeaveVisitHistoryModal = ({ setIsModalOpen }: Props) => {
 							<Close />
 						</button>
 					</header>
-					<SelectVisitHistory handleSelectOption={handleSelectOption} />
+					<SelectVisitHistory
+						handleSelectOption={handleSelectOption}
+						onOpenChange={(open) => {
+							setIsSelectOpen(open);
+						}}
+					/>
 					<section className="flex justify-between gap-10">
 						<Button onClick={() => setIsModalOpen(false)}>취소하기</Button>
 						<Button