Merge pull request #238 from MeeTeamNumdle/release-1.0

deploy: 구인 관련 1차 UT 피드백 반영
MeeTeamIdle · Jul 29, 2024 · c6d55a2 · c6d55a2
2 parents 25a6e6d + 21b4b09
commit c6d55a2
Show file tree

Hide file tree

Showing 21 changed files with 324 additions and 114 deletions.
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -65,6 +65,7 @@ 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';
 
 export {
 	Exit,
@@ -134,4 +135,5 @@ export {
 	Email,
 	GrayDelete,
 	NotFoundIcon,
+	meeteam_banner_icon,
 };
diff --git a/src/assets/meeteam_banner_icon.png b/src/assets/meeteam_banner_icon.png
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -6,7 +6,7 @@ import { ProfileImage, WaitModal } from '..';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { recruitFilterState, userState, waitModalState, loginState } from '../../atom';
 import { useSignOut, useLogin, useReadProfileImage } from '../../hooks';
-import { fixModalBackground, resetFormData } from '../../utils';
+import { fixModalBackground } from '../../utils';
 
 const Header = () => {
 	const navigate = useNavigate();
@@ -85,8 +85,6 @@ const Header = () => {
 		fixModalBackground(isWait);
 	}, [isWait]);
 
-	resetFormData();
-
 	return (
 		<S.Header $isLogin={isLogin}>
 			<div className='header'>

diff --git a/src/components/recruit/create/ControlButtons.tsx b/src/components/recruit/create/ControlButtons.tsx
@@ -1,18 +1,22 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { resetFormData } from '../../../utils';
+import { useSetRecoilState } from 'recoil';
+import { recruitInputState } from '../../../atom';
+import { INIT_FORM_DATA } from '../../../constant';
 
 const ControlButtons = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
+	const setFormData = useSetRecoilState(recruitInputState);
+
+	const cancelHandler = async () => {
+		await setFormData(INIT_FORM_DATA);
 
-	const cancelHandler = () => {
 		if (location.pathname.includes('edit')) {
 			navigate(-1);
 		} else {
 			navigate('/');
 		}
-		resetFormData();
 	};
 
 	return (

diff --git a/src/components/recruit/create/basicInformation/BasicInformation.styled.ts b/src/components/recruit/create/basicInformation/BasicInformation.styled.ts
@@ -74,6 +74,10 @@ const BasicInformation = styled.section<Basic>`
 					color: red;
 					font-size: 1rem;
 				}
+
+				.container-deadline__datepicker {
+					margin-top: 0.8rem;
+				}
 			}
 
 			.radio-btns {
@@ -153,6 +157,7 @@ const BasicInformation = styled.section<Basic>`
 					display: flex;
 					gap: 2rem;
 					width: 100%;
+					margin-top: 0.8rem;
 
 					.start-date {
 						width: 100%;

diff --git a/src/components/recruit/create/basicInformation/BasicInformation.tsx b/src/components/recruit/create/basicInformation/BasicInformation.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import {
-	DateSelect,
 	WrapperScopeCategory,
 	ContainerProcedure,
 	ContainerCourse,
@@ -59,6 +58,8 @@ const BasicInformation = () => {
 		}
 	};
 
+	//console.log(formData.title, formData.deadline);
+
 	return (
 		<S.BasicInformation $isTitled={formData.title}>
 			<section className='container-basic'>
@@ -86,10 +87,12 @@ const BasicInformation = () => {
 						<span className='input-subtitle'>
 							구인글 마감일 <span>{'*'}</span>
 						</span>
-						<MuiDatepicker handleChange={date => onChangeDate(date)} />
-						{isValid.isSubmitted && !isValid.isDeadline && (
-							<p className='valid-msg'>{validMessage.deadline}</p>
-						)}
+						<div className='container-deadline__datepicker'>
+							<MuiDatepicker value={deadlineDate} handleChange={date => onChangeDate(date)} />
+							{isValid.isSubmitted && !isValid.isDeadline && (
+								<p className='valid-msg'>{validMessage.deadline}</p>
+							)}
+						</div>
 					</article>
 					<WrapperScopeCategory />
 					<article className='inputs-dates'>
@@ -98,10 +101,18 @@ const BasicInformation = () => {
 						</span>
 						<section className='container-dates'>
 							<div className='start-date'>
-								<MuiDatepicker handleChange={date => onChangeStartDate(date)} type='start' />
+								<MuiDatepicker
+									value={startDate}
+									handleChange={date => onChangeStartDate(date)}
+									type='start'
+								/>
 							</div>
 							<div className='end-date'>
-								<MuiDatepicker handleChange={date => onChangeEndDate(date)} type='end' />
+								<MuiDatepicker
+									value={endDate}
+									handleChange={date => onChangeEndDate(date)}
+									type='end'
+								/>
 								{isValid.isSubmitted && !isValid.isEndDate && (
 									<p className='valid-msg'>{validMessage.endDate}</p>
 								)}

diff --git a/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx b/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx
@@ -5,6 +5,7 @@ import { useDebounce } from '../../../../../hooks';
 import { getCourseKeyword, getProfessorKeyword } from '../../../../../service';
 import { useRecoilState } from 'recoil';
 import { recruitInputState } from '../../../../../atom';
+import { Keyword } from '../../../../../types';
 
 const ContainerCourse = () => {
 	const dropdownRef = useRef<HTMLDivElement | null>(null);
@@ -35,9 +36,12 @@ const ContainerCourse = () => {
 
 	const onChangeCourse = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
 		setName(prev => ({ ...prev, course: event.target.value }));
+		setDropdown({ course: true, professor: false });
 	}, []);
+
 	const onChangeProfessor = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
 		setName(prev => ({ ...prev, professor: event.target.value }));
+		setDropdown({ course: false, professor: true });
 	}, []);
 
 	const onClickCheckbox = () => {
@@ -46,6 +50,7 @@ const ContainerCourse = () => {
 			...prev,
 			courseTag: { ...prev.courseTag, isCourse: true },
 		}));
+		setDropdown({ course: false, professor: false });
 	};
 
 	const onClickCourse = (event: React.MouseEvent<HTMLSpanElement>) => {
@@ -57,6 +62,7 @@ const ContainerCourse = () => {
 		}));
 		setDropdown(prev => ({ ...prev, course: false }));
 	};
+
 	const onClickProfessor = (event: React.MouseEvent<HTMLSpanElement>) => {
 		const { innerText } = event.target as HTMLElement;
 		setName(prev => ({ ...prev, professor: innerText }));
@@ -66,6 +72,7 @@ const ContainerCourse = () => {
 		}));
 		setDropdown(prev => ({ ...prev, professor: false }));
 	};
+
 	const onKeyDown = (event: React.KeyboardEvent) => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -90,7 +97,7 @@ const ContainerCourse = () => {
 		return () => {
 			document.removeEventListener('mousedown', outsideClick);
 		};
-	}, [dropdownRef.current, dropdown.course, dropdown.professor]);
+	}, [dropdown.course, dropdown.professor]);
 
 	return (
 		<S.ContainerCourse $isChecked={isChecked} ref={dropdownRef}>
@@ -113,12 +120,12 @@ const ContainerCourse = () => {
 						disabled={!isChecked ? true : false}
 						onChange={onChangeCourse}
 						onKeyDown={onKeyDown}
-						onClick={() => setDropdown(prev => ({ ...prev, course: true }))}
+						onFocus={() => setDropdown({ course: false, professor: false })}
 					/>
 					{dropdown.course && (
 						<section className='dropdown'>
 							{!isLoadingCourse &&
-								dataCourse?.map((keyword: any) => (
+								dataCourse?.map((keyword: Keyword) => (
 									<span key={keyword.id} onClick={onClickCourse} className='option'>
 										{keyword.name}
 									</span>
@@ -134,12 +141,12 @@ const ContainerCourse = () => {
 						disabled={!isChecked ? true : false}
 						onChange={onChangeProfessor}
 						onKeyDown={onKeyDown}
-						onClick={() => setDropdown(prev => ({ ...prev, professor: true }))}
+						onFocus={() => setDropdown({ course: false, professor: false })}
 					/>
 					{dropdown.professor && (
 						<section className='dropdown'>
 							{!isLoadingProfessor &&
-								dataProfessor?.map((keyword: any) => (
+								dataProfessor?.map((keyword: Keyword) => (
 									<span key={keyword.id} onClick={onClickProfessor} className='option'>
 										{keyword.name}
 									</span>

diff --git a/src/components/recruit/create/basicInformation/containers/ContainerProcedure.tsx b/src/components/recruit/create/basicInformation/containers/ContainerProcedure.tsx
@@ -50,11 +50,11 @@ const ContainerProcedure = () => {
 						type='radio'
 						id='any'
 						name='procedure'
-						value='상관없음'
-						checked={formData.proceedType === '상관없음'}
+						value='온/오프라인'
+						checked={formData.proceedType === '온/오프라인'}
 						onChange={handleProcedureChange}
 					/>
-					<label htmlFor='any'>상관없음</label>
+					<label htmlFor='any'>온/오프라인</label>
 				</section>
 			</section>
 			{isValid.isSubmitted && !isValid.isProcedure && (

diff --git a/src/components/recruit/create/detailedInformation/DetailedInformation.tsx b/src/components/recruit/create/detailedInformation/DetailedInformation.tsx
@@ -22,6 +22,8 @@ const DetailedInformation = () => {
 		setFormData({ ...formData, content: contents });
 	};
 
+	//console.log(formData.content);
+
 	return (
 		<S.DetailedInformation>
 			<section className='container-details'>

diff --git a/src/components/recruit/recruitDetail/modal/ApplyModal.styled.ts b/src/components/recruit/recruitDetail/modal/ApplyModal.styled.ts
@@ -90,6 +90,10 @@ const Modal = styled.section<Modal>`
 					background-position: 50%;
 					background-repeat: no-repeat;
 				}
+
+				&.warning {
+					border: 1px solid #f85858;
+				}
 			}
 
 			.agreement-word {
@@ -226,7 +230,13 @@ const Modal = styled.section<Modal>`
 				box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
 
 				li {
+					width: 100%;
 					cursor: pointer;
+
+					&:hover {
+						color: #000000;
+						transition: 0.2s ease-in-out;
+					}
 				}
 			}
 
@@ -235,6 +245,9 @@ const Modal = styled.section<Modal>`
 				right: 1rem;
 				top: 1.2rem;
 			}
+			&.warning {
+				border: 1px solid #f85858;
+			}
 		}
 	}
 
@@ -294,20 +307,49 @@ const Modal = styled.section<Modal>`
 
 		.cancel {
 			height: 4.8rem;
-			border-radius: 0.6rem;
 			border: 1px solid #e3e3e3;
 			background: #fff;
+
+			&:hover {
+				border: 1px solid #373f41;
+				transition: 0.2s ease-in-out;
+			}
+
+			&:active {
+				border: 1px solid #373f41;
+				background: #747b7f;
+				color: #ffffff;
+			}
 		}
 
 		.confirm {
 			background-color: ${props => (props.$isChecked ? '#5877fc' : '#E3E3E3')};
 			font-weight: 400;
 			color: ${props => (props.$isChecked ? '#fff' : '#8E8E8E')};
+
+			&:hover {
+				background: ${props => props.$isChecked && '#2f4fd9'};
+				transition: 0.2s ease-in-out;
+			}
+
+			&:active {
+				background: ${props => props.$isChecked && '#0e2690'};
+			}
 		}
 
 		.submit {
+			font-weight: 400;
 			background-color: #5877fc;
 			color: #ffffff;
+
+			&:hover {
+				background-color: #2f4fd9;
+				transition: 0.2s ease-in-out;
+			}
+
+			&:active {
+				background-color: #0e2690;
+			}
 		}
 	}
 
@@ -321,6 +363,11 @@ const Modal = styled.section<Modal>`
 		height: 0.1rem;
 		border: 0;
 	}
+
+	.warning {
+		border: 1px solid #f85858;
+	}
+
 	@media (max-width: 450px) {
 		height: 85%;
 		padding: 1.8rem 2rem;
@@ -388,6 +435,14 @@ const Modal = styled.section<Modal>`
 				width: auto;
 				padding: 1rem;
 				font-size: 1.4rem;
+
+				ul {
+					width: 100%;
+
+					li {
+						width: 100%;
+					}
+				}
 			}
 		}
 
@@ -502,11 +557,31 @@ const FinalModal = styled.section`
 			background-color: #fff;
 			color: #373f41;
 			border: 0.1rem solid #e3e3e3;
+
+			&:hover {
+				border: 1px solid #373f41;
+				transition: 0.2s ease-in-out;
+			}
+
+			&:active {
+				border: 1px solid #373f41;
+				background: #747b7f;
+				color: #ffffff;
+			}
 		}
 
 		.btn-profile {
 			background-color: #5877fc;
 			color: #fff;
+
+			&:hover {
+				background-color: #2f4fd9;
+				transition: 0.2s ease-in-out;
+			}
+
+			&:active {
+				background-color: #0e2690;
+			}
 		}
 	}
 	@media (max-width: 450px) {