Merge pull request #252 from MeeTeamNumdle/release-1.0

deploy: #248. 모달 관련 커스텀훅 적용 및 이미지 webp 적용

src/assets/index.ts

@@ -57,15 +57,15 @@ import FloatingBackground from './FloatingBackground.svg';
 import Alert from './Alert.svg';
 import MeeteamLogoLarge from './MeeteamLogoLarge.svg';
 import Congratulation from './Congratulation.png';
-import NaverIcon from './NaverIcon.png';
+import NaverIcon from './NaverIcon.webp';
 import Clip from './Clip.svg';
 import Valid from './Valid.svg';
 import Invalid from './Invalid.svg';
 import LogoFooter from './LogoFooter.svg';
 import Email from './Email.svg';
 import GrayDelete from './GrayDelete.svg';
-import NotFoundIcon from './NotFoundIcon.png';
-import meeteam_banner_icon from './meeteam_banner_icon.png';
+import NotFoundIcon from './NotFoundIcon.webp';
+import meeteam_banner_icon from './meeteam_banner_icon.webp';
 
 export {
 	Exit,

src/components/dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import S from './Dropdown.styled';
-import { useDebounce, useLogin } from '../../hooks';
+import { useDebounce, useLogin, useOutsideClick } from '../../hooks';
 import { useQuery } from '@tanstack/react-query';
 import { getCourseKeyword, getProfessorKeyword } from '../../service';
 import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -195,26 +195,13 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		event.stopPropagation();
 	};
 
-	useEffect(() => {
-		const outsideClick = (event: MouseEvent) => {
-			const { target } = event;
-			if (showDropdown && dropdownRef.current && !dropdownRef.current.contains(target as Node)) {
-				setShowDropdown(false);
-			}
-
-			if (dropdown.course && insideRef.current && !insideRef.current.contains(target as Node)) {
-				setDropdown(prev => ({ ...prev, course: false }));
-			}
-
-			if (dropdown.professor && insideRef.current && !insideRef.current.contains(target as Node)) {
-				setDropdown(prev => ({ ...prev, professor: false }));
-			}
-		};
-		document.addEventListener('mousedown', outsideClick);
-		return () => {
-			document.removeEventListener('mousedown', outsideClick);
-		};
-	}, [dropdownRef.current, showDropdown, dropdown.course, dropdown.professor]);
+	useOutsideClick(dropdownRef, showDropdown, setShowDropdown);
+	useOutsideClick(insideRef, dropdown.course, () =>
+		setDropdown(prev => ({ ...prev, course: false }))
+	);
+	useOutsideClick(insideRef, dropdown.professor, () =>
+		setDropdown(prev => ({ ...prev, professor: false }))
+	);
 
 	useEffect(() => {
 		if (scope && filterState.scope !== null) {
@@ -225,7 +212,7 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 			setCurrentValue('범위');
 			setIsScopeSelected(false);
 		}
-	}, [filterState.scope]);
+	}, [filterState.scope, scope]);
 
 	useEffect(() => {
 		if (category && filterState.category !== null) {
@@ -236,7 +223,7 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 			setCurrentValue('유형');
 			setIsCategorySelected(false);
 		}
-	}, [filterState.category]);
+	}, [filterState.category, category]);
 
 	return (
 		<S.Dropdown

src/components/header/Header.tsx

@@ -5,8 +5,13 @@ import { DropdownArrow, Logo, LogoName } from '../../assets';
 import { ProfileImage, WaitModal } from '..';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { recruitFilterState, userState, waitModalState, loginState } from '../../atom';
-import { useSignOut, useLogin, useReadProfileImage } from '../../hooks';
-import { fixModalBackground } from '../../utils';
+import {
+	useSignOut,
+	useLogin,
+	useReadProfileImage,
+	useOutsideClick,
+	useFixModalBackground,
+} from '../../hooks';
 
 const Header = () => {
 	const navigate = useNavigate();
@@ -60,6 +65,9 @@ const Header = () => {
 		setOpenDrop(false);
 	};
 
+	useOutsideClick(dropdownRef, openDrop, setOpenDrop);
+	useFixModalBackground(isWait);
+
 	useEffect(() => {
 		if (location.pathname === `/recruitment/postings/${id}` || location.pathname === '/') {
 			setIsHere({ recruit: true, galary: false, inform: false });
@@ -68,23 +76,6 @@ const Header = () => {
 		}
 	}, [location.pathname, id]);
 
-	useEffect(() => {
-		const outsideClick = (event: MouseEvent) => {
-			const { target } = event;
-			if (openDrop && dropdownRef.current && !dropdownRef.current.contains(target as Node)) {
-				setOpenDrop(false);
-			}
-		};
-		document.addEventListener('mousedown', outsideClick);
-		return () => {
-			document.removeEventListener('mousedown', outsideClick);
-		};
-	}, [openDrop]);
-
-	useEffect(() => {
-		fixModalBackground(isWait);
-	}, [isWait]);
-
 	return (
 		<S.Header $isLogin={isLogin}>
 			<div className='header'>

src/components/inputDropdown/inputRole/InputRoleForm.styled.ts

@@ -54,6 +54,11 @@ const InputRoleForm = styled.article<InputRoleForm>`
 		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
 	}
 
+	.dropdown-loading {
+		width: 100%;
+		height: 5rem;
+	}
+
 	.option {
 		cursor: pointer;
 	}

src/components/inputDropdown/inputRole/InputRoleForm.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useRecoilState } from 'recoil';
 import { isNotNumber } from '../../../utils';
 import { recruitInputState } from '../../../atom';
-import { useDebounce, useValid } from '../../../hooks';
+import { useDebounce, useOutsideClick, useValid } from '../../../hooks';
 import { GrayDelete, SearchIcon, XBtn } from '../../../assets';
 import { RoleForPost, Keyword } from '../../../types';
 import { getRoleKeyword, getSkillKeyword } from '../../../service';
@@ -49,7 +49,7 @@ const InputRoleForm = (props: InputRoleObj) => {
 	const dropdownRef = useRef<HTMLDivElement | null>(null);
 	const { isValid } = useValid(info);
 
-	const { data: dataRole, isLoading: isLoadingRole } = useQuery({
+	const { data: dataRole, isLoading: isLoadingRoleQuery } = useQuery({
 		queryKey: ['searchRole', keywordRole],
 		queryFn: () => getRoleKeyword(keywordRole as string),
 		staleTime: Infinity,
@@ -329,34 +329,26 @@ const InputRoleForm = (props: InputRoleObj) => {
 		}
 	};
 
+	useOutsideClick(dropdownRef, dropdown.role, () => {
+		setDropdown(prev => ({
+			...prev,
+			role: false,
+		}));
+	});
+
+	useOutsideClick(dropdownRef, dropdown.skill, () => {
+		setDropdown(prev => ({
+			...prev,
+			skill: false,
+		}));
+	});
+
 	useEffect(() => {
 		if (containerRef.current) {
 			applyEllipsis(containerRef.current);
 		}
 	}, [dropdown.skill, roleData.skills]);
 
-	useEffect(() => {
-		const outsideClick = (event: MouseEvent) => {
-			const { target } = event;
-			if (dropdown.role && dropdownRef.current && !dropdownRef.current.contains(target as Node)) {
-				setDropdown(prev => ({
-					...prev,
-					role: false,
-				}));
-			}
-			if (dropdown.skill && dropdownRef.current && !dropdownRef.current.contains(target as Node)) {
-				setDropdown(prev => ({
-					...prev,
-					skill: false,
-				}));
-			}
-		};
-		document.addEventListener('mousedown', outsideClick);
-		return () => {
-			document.removeEventListener('mousedown', outsideClick);
-		};
-	}, [dropdownRef.current, dropdown.role, dropdown.skill]);
-
 	useEffect(() => {
 		if (isValid.isRoleSubmitted) {
 			if (roleData.roleName === '') {
@@ -399,12 +391,22 @@ const InputRoleForm = (props: InputRoleObj) => {
 					/>
 					{dropdown.role && (
 						<section className='dropdown'>
-							{!isLoadingRole &&
-								dataRole?.map((keyword: any) => (
-									<span key={keyword.id} onClick={onClickRole} id={keyword.id} className='option'>
+							{isLoadingRoleQuery ? (
+								<article className='dropdown-loading'>
+									<span>검색중...</span>
+								</article>
+							) : (
+								dataRole?.map((keyword: Keyword) => (
+									<span
+										key={keyword.id}
+										onClick={onClickRole}
+										id={keyword.id.toString()}
+										className='option'
+									>
 										{keyword.name}
 									</span>
-								))}
+								))
+							)}
 						</section>
 					)}
 					{isValid.isRoleSubmitted && !isValidBeforeSubmit.role.valid && (
@@ -479,7 +481,7 @@ const InputRoleForm = (props: InputRoleObj) => {
 						<section className='dropdown-skill'>
 							<section className='list-skill'>
 								{!isLoadingSkill &&
-									dataSkill?.map((elem, _) => (
+									dataSkill?.map(elem => (
 										<span
 											key={elem.id}
 											className='skill-element body1-medium option'

src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import S from '../BasicInformation.styled';
 import { useQuery } from '@tanstack/react-query';
-import { useDebounce } from '../../../../../hooks';
+import { useDebounce, useOutsideClick } from '../../../../../hooks';
 import { getCourseKeyword, getProfessorKeyword } from '../../../../../service';
 import { useRecoilState } from 'recoil';
 import { recruitInputState } from '../../../../../atom';
@@ -86,25 +86,12 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
 		}
 	};
 
-	useEffect(() => {
-		const outsideClick = (event: MouseEvent) => {
-			const { target } = event;
-			if (dropdown.course && dropdownRef.current && !dropdownRef.current.contains(target as Node)) {
-				setDropdown(prev => ({ ...prev, course: false }));
-			}
-			if (
-				dropdown.professor &&
-				dropdownRef.current &&
-				!dropdownRef.current.contains(target as Node)
-			) {
-				setDropdown(prev => ({ ...prev, professor: false }));
-			}
-		};
-		document.addEventListener('mousedown', outsideClick);
-		return () => {
-			document.removeEventListener('mousedown', outsideClick);
-		};
-	}, [dropdown.course, dropdown.professor]);
+	useOutsideClick(dropdownRef, dropdown.course, () =>
+		setDropdown(prev => ({ ...prev, course: false }))
+	);
+	useOutsideClick(dropdownRef, dropdown.professor, () =>
+		setDropdown(prev => ({ ...prev, professor: false }))
+	);
 
 	return (
 		<S.ContainerCourse $isChecked={isChecked} ref={dropdownRef}>

src/components/tag/MeeteamTag.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import S from './MeeteamTag.styled';
 import { useRecoilState } from 'recoil';
 import { recruitInputState } from '../../atom';
-import { useDebounce } from '../../hooks';
+import { useDebounce, useOutsideClick } from '../../hooks';
 import { useQuery } from '@tanstack/react-query';
 import { getTagKeyword } from '../../service';
 import { Search, XBtn } from '../../assets';
@@ -78,23 +78,12 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
 		}
 	};
 
-	useEffect(() => {
-		const outsideClick = (event: MouseEvent) => {
-			const { target } = event;
-			if (
-				isDropdownVisible &&
-				dropdownRef.current &&
-				!dropdownRef.current.contains(target as Node)
-			) {
-				setIsDropdownVisible(false);
-				setTagItem('');
-			}
-		};
-		document.addEventListener('mousedown', outsideClick);
-		return () => {
-			document.removeEventListener('mousedown', outsideClick);
-		};
-	}, [isDropdownVisible]);
+	const handleClickOutside = () => {
+		setIsDropdownVisible(false);
+		setTagItem('');
+	};
+
+	useOutsideClick(dropdownRef, isDropdownVisible, handleClickOutside);
 
 	useEffect(() => {
 		if (tags) {

src/hooks/index.ts

@@ -29,6 +29,9 @@ import { useBookmark } from './useBookMark';
 import useLogin from './useLogin';
 import { useComment, useCommentDelete, useCommentEdit } from './useComment';
 import useScrollToTop from './useScrollToTop';
+import { useOutsideClick } from './useOutsideClick';
+import { useFocusToTop } from './useFocusOnTop';
+import { useFixModalBackground } from './useFixModalBackground';
 
 export {
 	useCheckExist,
@@ -61,4 +64,7 @@ export {
 	useScrollToTop,
 	useSignOut,
 	useReadProfileImage,
+	useOutsideClick,
+	useFocusToTop,
+	useFixModalBackground,
 };

src/hooks/useFixModalBackground.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+import { fixModalBackground } from '../utils';
+
+export const useFixModalBackground = (isOpen: boolean) => {
+	useEffect(() => {
+		fixModalBackground(isOpen);
+	}, [isOpen]);
+};

src/hooks/useFocusOnTop.ts

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+
+export const useFocusToTop = <T>(trigger: T) => {
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, [trigger]);
+};

src/hooks/useOutsideClick.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+export const useOutsideClick = (
+	ref: React.RefObject<HTMLElement>,
+	isOpen: boolean,
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (isOpen && ref.current && !ref.current.contains(event.target as Node)) {
+				setIsOpen(false);
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [isOpen, ref, setIsOpen]);
+};

src/hooks/useScrollToTop.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const useScrollToTop = () => {
 	const scrollToTop = () => {
 		window.scrollTo({