Merge pull request #263 from MeeTeamIdle/refactor/#258-ux-개선사항-적용-loa…

…der-적용 chore: 일부 버그 수정 및 드롭다운 수정 / 웹 사이트 분석을 위한 코드 추가
MeeTeamIdle · Oct 24, 2024 · 942e214 · 942e214
2 parents d7e7d92 + f238b58
commit 942e214
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -27,6 +27,17 @@
 		<meta property="og:image" content="https://www.meeteam.co.kr/meeteam-og.png" />
 		<meta property="og:description" content="대학생을 위한 포트폴리오 기반 구인 플랫폼" />
 		<title>밋팀</title>
+		<!-- Google tag (gtag.js) -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=G-VBQGWM8M4D"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+
+			gtag('config', 'G-VBQGWM8M4D');
+		</script>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -17,9 +17,9 @@ const Footer = () => {
 					<section className='container-logo'>
 						<img
 							className='logo'
-							src='logo_typo_large.webp'
-							srcSet='logo_typo_small.webp 600w,  logo_typo_medium.webp 900w, logo_typo_large.webp 1280w'
-							alt='logo_typo'
+							src='/logo_typo_large.webp'
+							srcSet='/logo_typo_small.webp 600w,  /logo_typo_medium.webp 900w, /logo_typo_large.webp 1280w'
+							alt='/logo_typo'
 							decoding='async'
 						/>
 					</section>
@@ -57,8 +57,26 @@ const Footer = () => {
 				</section>
 				{!isMobile && (
 					<section className='wrapper-menu'>
-						<h5>서비스이용약관</h5>
-						<h5>개인정보처리방침</h5>
+						<h5
+							onClick={() =>
+								window.open(
+									'https://www.notion.so/e4b205e0f9f54e0685766ba2795b043e?pvs=4',
+									'_blank'
+								)
+							}
+						>
+							서비스이용약관
+						</h5>
+						<h5
+							onClick={() =>
+								window.open(
+									'https://www.notion.so/10e6ef13aebb42e5b87d4bd873eef04f?pvs=4',
+									'_blank'
+								)
+							}
+						>
+							개인정보처리방침
+						</h5>
 						<h5 onClick={() => window.open('https://forms.gle/CVVDm4gnF21GpwM78', '_blank')}>
 							피드백주기
 						</h5>

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -83,10 +83,10 @@ const Header = () => {
 					<div className='header__logo' onClick={goRecruit}>
 						<img
 							className='logo'
-							src='logo_typo_large.webp'
-							srcSet='logo_typo_small.webp 600w,  logo_typo_medium.webp 900w, logo_typo_large.webp 1280w'
-							// eslint-disable-next-line react/no-unknown-property
-							fetchpriority='high'
+							src='/logo_typo_large.webp'
+							srcSet='/logo_typo_small.webp 600w, /logo_typo_medium.webp 900w, /logo_typo_large.webp 1280w'
+							loading='eager'
+							sizes='(max-width: 600px) 600px, (max-width: 900px) 900px, 1280px'
 							alt='logo_typo'
 						/>
 						{isLogin && <span className='university'>{userInfo?.university}</span>}

diff --git a/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts b/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts
@@ -56,7 +56,6 @@ const InputRoleForm = styled.article<InputRoleForm>`
 
 	.dropdown-loading {
 		width: 100%;
-		height: 5rem;
 	}
 
 	.option {

diff --git a/src/components/inputDropdown/inputRole/InputRoleForm.tsx b/src/components/inputDropdown/inputRole/InputRoleForm.tsx
@@ -49,15 +49,15 @@ const InputRoleForm = (props: InputRoleObj) => {
 	const dropdownRef = useRef<HTMLDivElement | null>(null);
 	const { isValid } = useValid(info);
 
-	const { data: dataRole, isLoading: isLoadingRoleQuery } = useQuery({
+	const { data: dataRole, isFetching: isFetchingRole } = useQuery({
 		queryKey: ['searchRole', keywordRole],
 		queryFn: () => getRoleKeyword(keywordRole as string),
 		staleTime: Infinity,
 		gcTime: Infinity,
 		enabled: !!keywordRole,
 	});
 
-	const { data: dataSkill, isLoading: isLoadingSkill } = useQuery({
+	const { data: dataSkill, isFetching: isFetchingSkill } = useQuery({
 		queryKey: ['searchSkill', keywordSkill],
 		queryFn: () => getSkillKeyword(keywordSkill),
 		staleTime: Infinity,
@@ -81,7 +81,7 @@ const InputRoleForm = (props: InputRoleObj) => {
 								...role,
 								skills: role.skills?.filter(skill => skill.id !== deletedId),
 								skillIds: role.skillIds.filter(id => id !== deletedId),
-						  }
+							}
 						: role
 				),
 			}));
@@ -104,12 +104,13 @@ const InputRoleForm = (props: InputRoleObj) => {
 
 	const onChangeRole = (event: React.ChangeEvent<HTMLInputElement>) => {
 		event.preventDefault();
+		const roleKeyword = event.target.value;
 		setRoleData(prev => ({
 			...prev,
-			roleName: event.target.value,
+			roleName: roleKeyword,
 			count: prev.count,
 		}));
-		if (event.target.value === '') {
+		if (roleKeyword === '') {
 			setRoleData(prev => ({
 				...prev,
 				roleName: '',
@@ -121,13 +122,13 @@ const InputRoleForm = (props: InputRoleObj) => {
 					role.roleId === id
 						? {
 								...role,
-								roleName: event.target.value,
-						  }
+								roleName: roleKeyword,
+							}
 						: role
 				),
 			}));
 		}
-		setDropdown(prev => ({ ...prev, role: true }));
+		setDropdown(prev => ({ ...prev, role: roleKeyword.length > 0 }));
 	};
 	const onChangeCount = (event: React.ChangeEvent<HTMLInputElement>) => {
 		event.preventDefault();
@@ -241,7 +242,7 @@ const InputRoleForm = (props: InputRoleObj) => {
 										...role.skillIds,
 										...(role.skillIds.includes(Number(target.id)) ? [] : [Number(target.id)]),
 									],
-							  }
+								}
 							: role
 					),
 				}));
@@ -274,7 +275,7 @@ const InputRoleForm = (props: InputRoleObj) => {
 											...role.skillIds,
 											...(role.skillIds.includes(Number(target.id)) ? [] : [Number(target.id)]),
 										],
-								  }
+									}
 								: role
 						),
 					}));
@@ -391,11 +392,11 @@ const InputRoleForm = (props: InputRoleObj) => {
 					/>
 					{dropdown.role && (
 						<section className='dropdown'>
-							{isLoadingRoleQuery ? (
+							{isFetchingRole ? (
 								<article className='dropdown-loading'>
 									<span>검색중...</span>
 								</article>
-							) : (
+							) : dataRole && dataRole.length > 0 ? (
 								dataRole?.map((keyword: Keyword) => (
 									<span
 										key={keyword.id}
@@ -406,6 +407,10 @@ const InputRoleForm = (props: InputRoleObj) => {
 										{keyword.name}
 									</span>
 								))
+							) : (
+								<article className='dropdown-loading'>
+									<span>검색결과가 없습니다.</span>
+								</article>
 							)}
 						</section>
 					)}
@@ -480,7 +485,7 @@ const InputRoleForm = (props: InputRoleObj) => {
 					{dropdown.skill && (
 						<section className='dropdown-skill'>
 							<section className='list-skill'>
-								{!isLoadingSkill &&
+								{!isFetchingSkill &&
 									dataSkill?.map(elem => (
 										<span
 											key={elem.id}
@@ -491,7 +496,12 @@ const InputRoleForm = (props: InputRoleObj) => {
 											{elem.name}
 										</span>
 									))}
-								{!isLoadingSkill && dataSkill?.length === 0 && (
+								{!isFetchingSkill && keywordSkill?.length === 0 && (
+									<section className='no-result'>
+										<span className='body1-medium'>기술스택을 검색해주세요.</span>
+									</section>
+								)}
+								{!isFetchingSkill && dataSkill?.length === 0 && (
 									<section className='no-result'>
 										<span className='body1-medium'>검색 결과가 없습니다.</span>
 									</section>

diff --git a/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx b/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx
@@ -26,14 +26,14 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
 	});
 	const keywordCourse = useDebounce(name.course, 500);
 	const keywordProfessor = useDebounce(name.professor, 500);
-	const { data: dataCourse, isLoading: isLoadingCourse } = useQuery({
+	const { data: dataCourse, isFetching: isFetchingCourse } = useQuery({
 		queryKey: ['searchCourse', keywordCourse],
 		queryFn: () => getCourseKeyword(keywordCourse ?? ''),
 		enabled: !!keywordCourse,
 		staleTime: Infinity,
 		gcTime: Infinity,
 	});
-	const { data: dataProfessor, isLoading: isLoadingProfessor } = useQuery({
+	const { data: dataProfessor, isFetching: isFetchingProfessor } = useQuery({
 		queryKey: ['searchProfessor', keywordProfessor],
 		queryFn: () => getProfessorKeyword(keywordProfessor ?? ''),
 		enabled: !!keywordProfessor,
@@ -42,8 +42,9 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
 	});
 
 	const onChangeCourse = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-		setName(prev => ({ ...prev, course: event.target.value }));
-		setDropdown({ course: true, professor: false });
+		const keyword = event.target.value;
+		setName(prev => ({ ...prev, course: keyword }));
+		setDropdown({ course: keyword.length > 0, professor: false });
 	}, []);
 
 	const onChangeProfessor = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -118,12 +119,15 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
 					/>
 					{dropdown.course && (
 						<section className='dropdown'>
-							{!isLoadingCourse &&
+							{isFetchingCourse ? (
+								<article>검색중입니다...</article>
+							) : (
 								dataCourse?.map((keyword: Keyword) => (
 									<span key={keyword.id} onClick={onClickCourse} className='option'>
 										{keyword.name}
 									</span>
-								))}
+								))
+							)}
 						</section>
 					)}
 				</section>
@@ -139,12 +143,15 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
 					/>
 					{dropdown.professor && (
 						<section className='dropdown'>
-							{!isLoadingProfessor &&
+							{isFetchingProfessor ? (
+								<article>검색중입니다...</article>
+							) : (
 								dataProfessor?.map((keyword: Keyword) => (
 									<span key={keyword.id} onClick={onClickProfessor} className='option'>
 										{keyword.name}
 									</span>
-								))}
+								))
+							)}
 						</section>
 					)}
 				</section>

diff --git a/src/components/tag/MeeteamTag.tsx b/src/components/tag/MeeteamTag.tsx
@@ -20,7 +20,7 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
 	const dropdownRef = useRef<HTMLDivElement | null>(null);
 	const keywordTag = useDebounce(tagItem, 500);
 
-	const { data, isSuccess } = useQuery({
+	const { data, isSuccess, isFetching } = useQuery({
 		queryKey: ['keywordTag', keywordTag],
 		queryFn: () => getTagKeyword(keywordTag),
 		staleTime: Infinity,
@@ -30,6 +30,11 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
 
 	const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
 		const target = event.currentTarget;
+
+		if (target.value.length > 0) {
+			setIsDropdownVisible(true);
+		}
+
 		if (target.value.length !== 0 && event.key === 'Enter') {
 			event.preventDefault();
 			submitTagItem();
@@ -61,10 +66,6 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
 		});
 	};
 
-	const onClickInput = () => {
-		setIsDropdownVisible(true);
-	};
-
 	const onClickTagOptions = (selectedTag: string, event: React.MouseEvent<HTMLSpanElement>) => {
 		event.stopPropagation();
 		if (!tagList.includes(selectedTag) && tagList.length < 5) {
@@ -100,7 +101,7 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
 
 	return (
 		<S.MeeteamTag ref={dropdownRef}>
-			<section className='tag__box' onClick={onClickInput}>
+			<section className='tag__box'>
 				<input
 					type='text'
 					placeholder={'태그는 최대 5개까지 가능합니다.'}
@@ -139,6 +140,11 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
 								</section>
 							</section>
 						)}
+						{isFetching && keywordTag.length === 0 && (
+							<section className='no-result'>
+								<span className='body1-medium'>태그를 입력해주세요.</span>
+							</section>
+						)}
 					</div>
 				)}
 			</section>