Merge pull request #182 from MeeTeamNumdle/release-1.0

fix: 디자인 미적용사항 반영 및 일부 버그 수정 - 배포 사이트에 적용
MeeTeamIdle · May 11, 2024 · 48bf2cf · 48bf2cf
2 parents 5982e94 + 2fca463
commit 48bf2cf
Show file tree

Hide file tree

Showing 29 changed files with 423 additions and 142 deletions.
diff --git a/src/assets/SearchIcon.svg b/src/assets/SearchIcon.svg
diff --git a/src/atom.tsx b/src/atom.tsx
@@ -98,6 +98,11 @@ export const applicantModalState = atom({
 	},
 });
 
+export const warnRoleDeleteModalState = atom({
+	key: 'warnRoleDeleteModalState',
+	default: false,
+});
+
 export const recruitInputState = atom<InputState>({
 	key: 'recruitInputState',
 	default: {

diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
@@ -7,7 +7,7 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { applicantFilter, recruitFilterState } from '../../atom';
 import { ManageRole, Keyword } from '../../types';
 import { DropdownArrowUp, DropdownArrow, Clear } from '../../assets';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 
 interface Dropdown {
 	data?: string[];
@@ -24,13 +24,13 @@ type keyObj = {
 };
 
 const scopeObj: keyObj = {
-	'전체 보기': 0,
+	'모든 범위': 0,
 	교외: 1,
 	교내: 2,
 };
 
 const categoryObj: keyObj = {
-	전체: 0,
+	'모든 유형': 0,
 	프로젝트: 1,
 	스터디: 2,
 	공모전: 3,
@@ -69,11 +69,15 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		queryKey: ['searchCourse', keywordCourse],
 		queryFn: () => getCourseKeyword(keywordCourse),
 		enabled: isLoggedIn,
+		staleTime: Infinity,
+		gcTime: Infinity,
 	});
 	const { data: dataProfessor, isLoading: isLoadingProfessor } = useQuery({
 		queryKey: ['searchProfessor', keywordProfessor],
 		queryFn: () => getProfessorKeyword(keywordProfessor),
 		enabled: isLoggedIn,
+		staleTime: Infinity,
+		gcTime: Infinity,
 	});
 
 	const getKeyByValue = (obj: keyObj, value: number) => {
@@ -96,7 +100,7 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		if (applicant && id) {
 			setApplicantFilter(id);
 		} else {
-			if (innerText === '전체') {
+			if (innerText === '모든 유형') {
 				searchParams.delete('category');
 				setSearchParams(searchParams);
 				setShowDropdown(false);
@@ -118,14 +122,15 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		if (value !== '교내') {
 			setShowDropdown(false);
 		}
-		if (value === '전체 보기') {
+		if (value === '모든 범위') {
 			searchParams.delete('scope');
 			setSearchParams(searchParams);
-			return;
+			// return;
+		} else {
+			searchParams.set('scope', scopeObj[value].toString());
+			setSearchParams(searchParams);
+			setIsScopeSelected(true);
 		}
-		searchParams.set('scope', scopeObj[value].toString());
-		setSearchParams(searchParams);
-		setIsScopeSelected(true);
 	};
 
 	const onClickCheckbox = () => {
@@ -177,7 +182,6 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		searchParams.delete('course');
 		searchParams.delete('professor');
 		setSearchParams(searchParams);
-		setShowDropdown(false);
 	};
 	const submitInfo = (event: React.MouseEvent<HTMLButtonElement>) => {
 		event.stopPropagation();
@@ -216,7 +220,8 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		if (scope && filterState.scope !== null) {
 			setCurrentValue(getKeyByValue(scopeObj, filterState.scope));
 			setIsScopeSelected(true);
-		} else if (scope && filterState.scope === null) {
+		}
+		if (scope && filterState.scope === null) {
 			setCurrentValue('범위');
 			setIsScopeSelected(false);
 		}
@@ -226,7 +231,8 @@ const Dropdown = ({ data, initialData, scope, category, applicant, roleObj }: Dr
 		if (category && filterState.category !== null) {
 			setCurrentValue(getKeyByValue(categoryObj, filterState.category));
 			setIsCategorySelected(true);
-		} else if (category && filterState.category === null) {
+		}
+		if (category && filterState.category === null) {
 			setCurrentValue('유형');
 			setIsCategorySelected(false);
 		}

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -148,6 +148,7 @@ import ApproveModal from './recruit/applicants/modal/ApproveModal';
 import TabMenu from './tabMenu/TabMenu';
 import PostingDelete from './recruit/recruitDetail/modal/postingDelete/PostingDelete';
 import Modal from './modal/Modal';
+import WarnRoleDelete from './recruit/recruitDetail/modal/warnRoleDelete/WarnRoleDelete';
 
 export {
 	Header,
@@ -291,4 +292,5 @@ export {
 	TabMenu,
 	PostingDelete,
 	Modal,
+	WarnRoleDelete,
 };
diff --git a/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts b/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts
@@ -16,6 +16,7 @@ const InputRoleForm = styled.article<InputRoleForm>`
 	.txt-big {
 		color: #f7faff;
 		font-size: 1.6rem;
+		letter-spacing: 0.000032rem;
 	}
 
 	.txt4 {
@@ -62,6 +63,7 @@ const InputRoleForm = styled.article<InputRoleForm>`
 		width: 100%;
 		gap: 2.4rem;
 		position: relative;
+		margin-top: -1.2rem;
 
 		.inputs-subtitle {
 			margin-bottom: -1.6rem;
@@ -146,7 +148,7 @@ const InputRoleForm = styled.article<InputRoleForm>`
 
 		.dropdown-skill {
 			position: absolute;
-			top: 15rem;
+			top: 12.5rem;
 			width: 66rem;
 			border-radius: 1rem;
 			border: 1px solid #e3e3e3;
@@ -255,7 +257,7 @@ const InputRoleForm = styled.article<InputRoleForm>`
 
 		.container-skills {
 			position: relative;
-			width: 66rem;
+			width: 65.5rem;
 			height: 4.8rem;
 			display: flex;
 			align-items: center;
@@ -314,6 +316,14 @@ const InputRoleForm = styled.article<InputRoleForm>`
 			background: #5877fc;
 		}
 	}
+
+	.valid-length__msg {
+		color: #f85858;
+		font-family: Pretendard;
+		font-size: 1.4rem;
+		font-weight: 600;
+		margin-bottom: -1rem;
+	}
 `;
 
 const S = { InputRoleForm };

diff --git a/src/components/inputDropdown/inputRole/InputRoleForm.tsx b/src/components/inputDropdown/inputRole/InputRoleForm.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useRef, useEffect } from 'react';
+import S from './InputRoleForm.styled';
 import { useQuery } from '@tanstack/react-query';
+import { useRecoilState } from 'recoil';
+import { isNotNumber } from '../../../utils';
+import { recruitInputState } from '../../../atom';
+import { useDebounce, useValid } from '../../../hooks';
 import { DropdownArrow, Search, XBtn } from '../../../assets';
-import S from './InputRoleForm.styled';
 import { RoleForPost, InputState, Keyword } from '../../../types';
-import { useDebounce } from '../../../hooks';
 import { getRoleKeyword, getSkillKeyword } from '../../../service';
-import { useRecoilState } from 'recoil';
-import { recruitInputState } from '../../../atom';
-import { isNotNumber } from '../../../utils';
 
 const InputRoleForm = () => {
 	const [tagItem, setTagItem] = useState<string>('');
@@ -23,8 +23,8 @@ const InputRoleForm = () => {
 		roleName: '',
 		skills: [],
 	});
-
-	const [isValid, setIsValid] = useState({
+	const { validMessage, isValid } = useValid(info);
+	const [isValidBeforeSubmit, setisValidBeforeSubmit] = useState({
 		role: {
 			valid: false,
 			message: '',
@@ -33,6 +33,10 @@ const InputRoleForm = () => {
 			valid: false,
 			message: '',
 		},
+		roleLength: {
+			valid: false,
+			message: '',
+		},
 	});
 
 	const keywordRole = useDebounce(roleData.roleName, 500);
@@ -42,12 +46,15 @@ const InputRoleForm = () => {
 	const { data: dataRole, isLoading: isLoadingRole } = useQuery({
 		queryKey: ['searchRole', keywordRole],
 		queryFn: () => getRoleKeyword(keywordRole as string),
-		staleTime: 10000,
+		staleTime: Infinity,
+		gcTime: Infinity,
 	});
 
 	const { data: dataSkill, isLoading: isLoadingSkill } = useQuery({
 		queryKey: ['searchSkill', keywordSkill],
 		queryFn: () => getSkillKeyword(keywordSkill),
+		staleTime: Infinity,
+		gcTime: Infinity,
 	});
 
 	const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -68,15 +75,17 @@ const InputRoleForm = () => {
 		}));
 	};
 
-	const onClickHandler = () => {
+	const handleAddRole = () => {
 		if (
 			roleData.roleId !== null &&
 			roleData.count &&
-			!info.recruitmentRoles.some(obj => obj.roleId === roleData.roleId)
+			!info.recruitmentRoles.some(obj => obj.roleId === roleData.roleId) &&
+			info.recruitmentRoles.length < 10
 		) {
-			setIsValid({
+			setisValidBeforeSubmit({
 				role: { valid: true, message: '' },
 				count: { valid: true, message: '' },
+				roleLength: { valid: true, message: '' },
 			});
 
 			setInfos((prev: InputState) => ({
@@ -96,20 +105,28 @@ const InputRoleForm = () => {
 				skill: false,
 			}));
 		} else if (!roleData.roleId && roleData.count) {
-			setIsValid({
+			setisValidBeforeSubmit(prev => ({
+				...prev,
 				role: { valid: false, message: '해당 역할명을 입력해주세요.' },
 				count: { valid: true, message: '' },
-			});
+			}));
 		} else if (!roleData.roleId && !roleData.count) {
-			setIsValid({
+			setisValidBeforeSubmit(prev => ({
+				...prev,
 				role: { valid: false, message: '모집하는 역할을 입력해주세요.' },
 				count: { valid: true, message: '' },
-			});
+			}));
 		} else if (roleData.roleId && !roleData.count) {
-			setIsValid({
+			setisValidBeforeSubmit(prev => ({
+				...prev,
 				role: { valid: true, message: '' },
 				count: { valid: false, message: '모집 인원 수를 입력해주세요.' },
-			});
+			}));
+		} else if (info.recruitmentRoles.length === 10) {
+			setisValidBeforeSubmit(prev => ({
+				...prev,
+				roleLength: { valid: false, message: '최대 10개의 역할을 입력할 수 있습니다.' },
+			}));
 		}
 	};
 	const onChangeRole = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -124,7 +141,7 @@ const InputRoleForm = () => {
 		const countValue = event.target.value;
 
 		if (countValue.length) {
-			setIsValid(prev => ({
+			setisValidBeforeSubmit(prev => ({
 				...prev,
 				count: { valid: true, message: '' },
 			}));
@@ -156,7 +173,7 @@ const InputRoleForm = () => {
 			roleId: Number(target.id),
 			roleName: innerText,
 		}));
-		setIsValid(prev => ({
+		setisValidBeforeSubmit(prev => ({
 			...prev,
 			role: { valid: true, message: '' },
 		}));
@@ -175,6 +192,12 @@ const InputRoleForm = () => {
 		}
 	};
 
+	useEffect(() => {
+		if (info.recruitmentRoles.length < 10) {
+			setisValidBeforeSubmit(prev => ({ ...prev, roleLength: { valid: true, message: '' } }));
+		}
+	}, [info.recruitmentRoles.length]);
+
 	useEffect(() => {
 		const outsideClick = (event: MouseEvent) => {
 			const { target } = event;
@@ -206,9 +229,6 @@ const InputRoleForm = () => {
 			$isCount={roleData.count !== null}
 		>
 			<article className='inputs' ref={dropdownRef}>
-				<span className='inputs-subtitle body2-semibold'>
-					역할 입력 <span className='dot'> *</span>
-				</span>
 				<section className='inputs-top'>
 					<section className='container-role__input'>
 						<input
@@ -231,8 +251,11 @@ const InputRoleForm = () => {
 						)}
 						<img src={DropdownArrow} />
 					</section>
-					{!isValid.role.valid && (
-						<p className='valid-message__role txt4'>{isValid.role.message}</p>
+					{!isValidBeforeSubmit.role.valid && (
+						<p className='valid-message__role txt4'>{isValidBeforeSubmit.role.message}</p>
+					)}
+					{isValid.isSubmitted && !isValid.isRole && (
+						<p className='valid-message__role txt4'>{validMessage.recruitRole}</p>
 					)}
 					<input
 						className='count-input body1-medium'
@@ -241,8 +264,8 @@ const InputRoleForm = () => {
 						value={roleData.count?.toString()}
 						onChange={onChangeCount}
 					/>
-					{!isValid.count.valid && (
-						<p className='valid-message__count txt4'>{isValid.count.message}</p>
+					{!isValidBeforeSubmit.count.valid && (
+						<p className='valid-message__count txt4'>{isValidBeforeSubmit.count.message}</p>
 					)}
 				</section>
 				<section className='inputs-bottom'>
@@ -307,11 +330,14 @@ const InputRoleForm = () => {
 						</section>
 					)}
 					<article className='add-btn'>
-						<button type='button' className='txt-big' onClick={onClickHandler}>
+						<button type='button' className='txt-big' onClick={handleAddRole}>
 							추가
 						</button>
 					</article>
 				</section>
+				{!isValidBeforeSubmit.roleLength.valid && (
+					<p className='valid-length__msg'>{isValidBeforeSubmit.roleLength.message}</p>
+				)}
 			</article>
 		</S.InputRoleForm>
 	);