diff --git a/src/assets/index.ts b/src/assets/index.ts
index 4e3b13a5..0078638d 100644
--- 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
new file mode 100644
index 00000000..1abc65c1
Binary files /dev/null and b/src/assets/meeteam_banner_icon.png differ
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 17d47f17..a2413385 100644
--- 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
index ba28f451..80729c74 100644
--- 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
index 06817769..9e5cd5ac 100644
--- 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
index f2216cb7..5b24bc53 100644
--- 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
index b5789911..749e8d32 100644
--- 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
index 9405754c..0d3eee8b 100644
--- 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
index bf87d5bf..73ffe3b8 100644
--- 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
index a33e7fc2..5d4af6a2 100644
--- 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) {
diff --git a/src/components/recruit/recruitDetail/modal/ApplyModal.tsx b/src/components/recruit/recruitDetail/modal/ApplyModal.tsx
index e8d44eb2..364ac773 100644
--- a/src/components/recruit/recruitDetail/modal/ApplyModal.tsx
+++ b/src/components/recruit/recruitDetail/modal/ApplyModal.tsx
@@ -17,6 +17,8 @@ const ApplyModal = () => {
 	const [isChecked, setIsChecked] = useState<boolean>(false);
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 	const [value, setValue] = useState<string>('신청 역할을 선택해주세요.');
+	const [isCheckboxWarning, setIsCheckboxWarning] = useState<boolean>(false);
+	const [isRoleWarning, setIsRoleWarning] = useState<boolean>(false);
 	const isValid = isChecked && value !== '신청 역할을 선택해주세요.';
 
 	const { data, isLoading } = useQuery({
@@ -26,11 +28,15 @@ const ApplyModal = () => {
 
 	const onClickCheckbox = () => {
 		setIsChecked(prev => !prev);
+		setIsCheckboxWarning(false);
 	};
 	const onClickConfirm = () => {
 		if (isValid) {
 			setUserInfo(prev => ({ ...prev, message: textAreaRef.current?.value }));
 			setApplyStep(prev => prev + 1);
+		} else {
+			if (!isChecked) setIsCheckboxWarning(true);
+			if (value === '신청 역할을 선택해주세요.') setIsRoleWarning(true);
 		}
 	};
 
@@ -41,6 +47,7 @@ const ApplyModal = () => {
 			...prev,
 			role: { applyRoleId: +(event.target as HTMLLIElement).id, name: innerText },
 		}));
+		setIsRoleWarning(false);
 	};
 
 	useEffect(() => {
@@ -67,7 +74,13 @@ const ApplyModal = () => {
 						정보 공개 동의 시, 내 정보가 멤버들에게 보이며 팀매칭에 유리해집니다.
 					</span>
 					<article className='agreement'>
-						<input type='checkbox' id='agree' onClick={onClickCheckbox} checked={isChecked} />
+						<input
+							type='checkbox'
+							id='agree'
+							onClick={onClickCheckbox}
+							checked={isChecked}
+							className={isCheckboxWarning ? 'warning' : ''}
+						/>
 						<label htmlFor='agree' className='agreement-word'>
 							개인정보 열람 동의
 						</label>
@@ -115,7 +128,10 @@ const ApplyModal = () => {
 				)}
 			</article>
 			<article className='container-role'>
-				<article className='container-select__box' onClick={() => setIsOpen(prev => !prev)}>
+				<article
+					className={`container-select__box ${isRoleWarning ? 'warning' : ''}`}
+					onClick={() => setIsOpen(prev => !prev)}
+				>
 					<span className='value'>{value}</span>
 					{isOpen && (
 						<ul>
@@ -136,7 +152,7 @@ const ApplyModal = () => {
 				<button type='button' className='cancel' onClick={() => setIsModal(false)}>
 					취소하기
 				</button>
-				<button className='confirm' type='button' onClick={onClickConfirm}>
+				<button type='button' className='confirm' onClick={onClickConfirm}>
 					다음
 				</button>
 			</article>
diff --git a/src/components/recruit/recruitDetail/modal/ConfirmModal.tsx b/src/components/recruit/recruitDetail/modal/ConfirmModal.tsx
index addb3022..01e60ba4 100644
--- a/src/components/recruit/recruitDetail/modal/ConfirmModal.tsx
+++ b/src/components/recruit/recruitDetail/modal/ConfirmModal.tsx
@@ -92,7 +92,7 @@ const ConfirmModal = () => {
 				<button type='button' className='cancel' onClick={onClickBack}>
 					뒤로가기
 				</button>
-				<button type='button' className='confirm submit' onClick={onClickNext}>
+				<button type='button' className='submit' onClick={onClickNext}>
 					제출하기
 				</button>
 			</article>
diff --git a/src/components/recruit/recruitDetail/modal/FinalModal.tsx b/src/components/recruit/recruitDetail/modal/FinalModal.tsx
index 143a4187..f262e655 100644
--- a/src/components/recruit/recruitDetail/modal/FinalModal.tsx
+++ b/src/components/recruit/recruitDetail/modal/FinalModal.tsx
@@ -1,27 +1,10 @@
 import React from 'react';
 import S from './ApplyModal.styled';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { applyModalState, userState, applyStepState, goProfileState } from '../../../../atom';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
-import { useLogin } from '../../../../hooks';
+import { useSetRecoilState } from 'recoil';
+import { goProfileState } from '../../../../atom';
 
 const FinalModal = () => {
-	const { id } = useParams();
-	const pageNum = Number(id);
-	const isLogin = useLogin();
-	const navigate = useNavigate();
-	const setIsModal = useSetRecoilState(applyModalState);
-	const setApplyStep = useSetRecoilState(applyStepState);
 	const setGoProfile = useSetRecoilState(goProfileState);
-	const user = useRecoilValue(userState);
-	const queryClient = useQueryClient();
-
-	const cancelHandler = () => {
-		setApplyStep(0);
-		setIsModal(false);
-		queryClient.invalidateQueries({ queryKey: ['detailedPage', { pageNum, isLogin }] });
-	};
 
 	const goProfileHandler = () => {
 		setGoProfile(true);
diff --git a/src/constant/index.ts b/src/constant/index.ts
index a8545ad0..cb413d0e 100644
--- a/src/constant/index.ts
+++ b/src/constant/index.ts
@@ -1,5 +1,13 @@
 import { INPUT_VALIDATION, TEXTAREA_VALIDATION } from './validation';
 import { SAFE_DEFAULT_VALUE } from './textEditor';
 import { PORTFOLIO_EDITOR_TEMPLATE } from './editorTemplate';
+import { INIT_FORM_DATA, INIT_FORM_DATA_VALID } from './initFormData';
 
-export { INPUT_VALIDATION, TEXTAREA_VALIDATION, SAFE_DEFAULT_VALUE, PORTFOLIO_EDITOR_TEMPLATE };
+export {
+	INPUT_VALIDATION,
+	TEXTAREA_VALIDATION,
+	SAFE_DEFAULT_VALUE,
+	PORTFOLIO_EDITOR_TEMPLATE,
+	INIT_FORM_DATA,
+	INIT_FORM_DATA_VALID,
+};
diff --git a/src/constant/initFormData.ts b/src/constant/initFormData.ts
new file mode 100644
index 00000000..f5425d62
--- /dev/null
+++ b/src/constant/initFormData.ts
@@ -0,0 +1,36 @@
+import { simpleDate } from '../utils';
+import { SAFE_DEFAULT_VALUE } from './textEditor';
+
+export const INIT_FORM_DATA = {
+	scope: '',
+	category: '',
+	fieldId: 1,
+	deadline: simpleDate(new Date()),
+	proceedType: '',
+	proceedingStart: simpleDate(new Date()),
+	proceedingEnd: simpleDate(new Date()),
+	courseTag: {
+		isCourse: false,
+		courseTagName: '',
+		courseProfessor: '',
+	},
+	recruitmentRoles: [{ roleName: '', roleId: null, count: null, skillIds: [], skills: [] }],
+	tags: [],
+	title: '',
+	content: SAFE_DEFAULT_VALUE,
+};
+
+export const INIT_FORM_DATA_VALID = {
+	isSubmitted: false,
+	isScope: false,
+	isCategory: false,
+	isDeadline: false,
+	isEndDate: false,
+	isProcedure: false,
+	isTitle: false,
+	isContent: false,
+	isRole: false,
+	isRoleCount: false,
+	isRoleName: false,
+	isRoleSubmitted: false,
+};
diff --git a/src/pages/create/recruitCreatePage/RecruitCreatePage.tsx b/src/pages/create/recruitCreatePage/RecruitCreatePage.tsx
index e5cee8b8..6e32efdc 100644
--- a/src/pages/create/recruitCreatePage/RecruitCreatePage.tsx
+++ b/src/pages/create/recruitCreatePage/RecruitCreatePage.tsx
@@ -9,7 +9,6 @@ import {
 	RecruitRoleForm,
 	WarnRoleDelete,
 	WarnRoleCount,
-	Toast,
 } from '../../../components/index';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useSetRecoilState, useRecoilValue, useRecoilState } from 'recoil';
@@ -23,13 +22,14 @@ import {
 import { getPostingData, editPostingRecruit, postingRecruit } from '../../../service';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { EditPosting, InputState, RoleInfo, RoleForPost } from '../../../types';
-import { fixModalBackground, resetFormData } from '../../../utils';
+import { fixModalBackground } from '../../../utils';
 import { useLogin } from '../../../hooks';
 import { NotFound } from '../../index';
+import { INIT_FORM_DATA } from '../../../constant';
 
 const RecruitCreatePage = () => {
 	const { id } = useParams();
-	const location = useLocation();
+	const locationObj = useLocation();
 	const navigate = useNavigate();
 	const { isLogin } = useLogin();
 	const validCheck = useRecoilValue(validState);
@@ -110,22 +110,30 @@ const RecruitCreatePage = () => {
 		if (!postAvailable) {
 			setBeforeSubmit(true);
 		}
-		if (postAvailable && !location.pathname.includes('edit')) {
+		if (postAvailable && !locationObj.pathname.includes('edit')) {
 			uploadPost.mutate(formData, {
-				onSuccess: () => resetFormData(),
+				onSuccess: () => setFormData(INIT_FORM_DATA),
 			});
 		}
-		if (postAvailable && location.pathname.includes('edit') && pageNum) {
+		if (postAvailable && locationObj.pathname.includes('edit') && pageNum) {
 			editPost.mutate(
 				{ pageNum, formData },
 				{
-					onSuccess: () => resetFormData(),
+					onSuccess: () => setFormData(INIT_FORM_DATA),
 				}
 			);
 		}
 	};
 
-	resetFormData();
+	const preventGoBack = () => {
+		history.pushState(null, '', location.href);
+		alert('나가시려면 하단의 취소 버튼을 눌러주세요.');
+	};
+
+	const preventClose = (e: BeforeUnloadEvent) => {
+		e.preventDefault();
+		e.returnValue = ''; // chrome에서는 설정이 필요해서 넣은 코드
+	};
 
 	useEffect(() => {
 		if (data) {
@@ -139,7 +147,7 @@ const RecruitCreatePage = () => {
 				};
 			};
 			const transformedRoles = data.recruitmentRoles.map(convertRoleInfo);
-			if (isSuccess && location.pathname.includes('edit') && transformedRoles) {
+			if (isSuccess && locationObj.pathname.includes('edit') && transformedRoles) {
 				setFormData({
 					scope: data.scope,
 					category: data.category,
@@ -160,12 +168,36 @@ const RecruitCreatePage = () => {
 				});
 			}
 		}
-	}, [data]);
+		return () => {
+			setFormData(INIT_FORM_DATA);
+		};
+	}, [data, isSuccess, locationObj.pathname, setFormData]);
 
 	useEffect(() => {
 		fixModalBackground(beforeSubmit || isWarnRoleDelete);
 	}, [beforeSubmit, isWarnRoleDelete]);
 
+	useEffect(() => {
+		(() => {
+			history.pushState(null, '', location.href);
+			window.addEventListener('popstate', preventGoBack);
+		})();
+
+		return () => {
+			window.removeEventListener('popstate', preventGoBack);
+		};
+	}, []);
+
+	useEffect(() => {
+		(() => {
+			window.addEventListener('beforeunload', preventClose);
+		})();
+
+		return () => {
+			window.removeEventListener('beforeunload', preventClose);
+		};
+	}, []);
+
 	if (userInfo?.userId !== data?.writerId && !isLoading && id) {
 		return <NotFound />;
 	}
diff --git a/src/pages/recruit/recruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/recruitDetailPage/RecruitDetailPage.tsx
index 8df7c383..4fd27beb 100644
--- a/src/pages/recruit/recruitDetailPage/RecruitDetailPage.tsx
+++ b/src/pages/recruit/recruitDetailPage/RecruitDetailPage.tsx
@@ -38,6 +38,12 @@ import {
 import { useParams, useNavigate } from 'react-router-dom';
 import { useLogin } from '../../../hooks';
 
+const stepLists: JsxElementComponentProps = {
+	0: <ApplyModal />,
+	1: <ConfirmModal />,
+	2: <FinalModal />,
+};
+
 const RecruitDetailPage = () => {
 	const { id } = useParams();
 	const navigate = useNavigate();
@@ -52,11 +58,7 @@ const RecruitDetailPage = () => {
 	const [isGoProfile, setGoProfile] = useRecoilState(goProfileState);
 	const isPostingDelete = useRecoilValue(recruitPostingDeleteModalState);
 	const queryClient = useQueryClient();
-	const stepLists: JsxElementComponentProps = {
-		0: <ApplyModal />,
-		1: <ConfirmModal />,
-		2: <FinalModal />,
-	};
+
 	const { isLogin } = useLogin();
 	const { data: detailedData, isSuccess } = useQuery({
 		queryKey: ['detailedPage', { pageNum, isLogin }],
diff --git a/src/pages/recruit/recruitPage/RecruitPage.styled.ts b/src/pages/recruit/recruitPage/RecruitPage.styled.ts
index b7177773..8a44ed59 100644
--- a/src/pages/recruit/recruitPage/RecruitPage.styled.ts
+++ b/src/pages/recruit/recruitPage/RecruitPage.styled.ts
@@ -56,6 +56,70 @@ const RecruitPage = styled.div<RecruitPage>`
 		font-weight: 600;
 	}
 
+	.main-banner {
+		margin-top: 5rem;
+		width: 100%;
+		height: 206px;
+		flex-shrink: 0;
+		border-radius: 20px;
+		background: linear-gradient(90deg, #3f80ff 0%, #c9deff 100%);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 11rem;
+		box-sizing: border-box;
+
+		.container-title {
+			display: flex;
+			flex-direction: column;
+			gap: 0.2rem;
+		}
+
+		.subtitle {
+			color: #fff;
+			font-family: Pretendard;
+			font-size: 21.6px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 34.8px;
+			letter-spacing: 0.864px;
+		}
+
+		.title {
+			color: #fff;
+			font-family: Pretendard;
+			font-size: 28.8px;
+			font-style: normal;
+			font-weight: 700;
+			line-height: 34.8px;
+			letter-spacing: 1.152px;
+		}
+
+		img {
+			width: 177px;
+			height: 178px;
+			flex-shrink: 0;
+		}
+
+		@media (max-width: 768px) {
+			font-size: 1rem;
+			padding: 0 2rem;
+			height: 160px;
+
+			.title {
+				font-size: 2rem;
+				line-height: 2rem;
+				letter-spacing: 0.06rem;
+			}
+
+			.subtitle {
+				font-size: 1.5rem;
+				line-height: 1.6rem;
+				letter-spacing: 0.04rem;
+			}
+		}
+	}
+
 	.wrapper-title {
 		display: flex;
 		align-items: center;
diff --git a/src/pages/recruit/recruitPage/RecruitPage.tsx b/src/pages/recruit/recruitPage/RecruitPage.tsx
index 905c7e27..0d9cf4bb 100644
--- a/src/pages/recruit/recruitPage/RecruitPage.tsx
+++ b/src/pages/recruit/recruitPage/RecruitPage.tsx
@@ -17,6 +17,7 @@ import {
 	DropdownArrow,
 	DropdownArrowUp,
 	FilledBookmark,
+	meeteam_banner_icon,
 	PlusWhite,
 	Portpolio,
 	Profile,
@@ -37,7 +38,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useLogin } from '../../../hooks';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { fixModalBackground } from '../../../utils';
-import { is } from 'date-fns/locale';
 
 const RecruitPage = () => {
 	const navigate = useNavigate();
@@ -154,6 +154,13 @@ const RecruitPage = () => {
 		}
 	};
 
+	const handleKeywordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setSearchKeyword(event.target.value);
+		if (event.target.value.length === 0) {
+			onClickDeleteKeyword();
+		}
+	};
+
 	const onClickClearField = () => {
 		setFilterState(prev => ({ ...prev, field: null }));
 		setFieldValue({ applied: false, value: { id: null, value: '분야를 선택해주세요' } });
@@ -328,6 +335,15 @@ const RecruitPage = () => {
 				$isDetailedClick={isOpen}
 				$isDetailSelected={isDetailSelected}
 			>
+				<section className='main-banner'>
+					<section className='container-title'>
+						<span className='subtitle'>팀원을 찾고 있나요?</span>
+						<span className='title'>밋팀으로 팀원을 만나보세요!</span>
+					</section>
+					<section>
+						<img src={meeteam_banner_icon} fetchpriority='high' />
+					</section>
+				</section>
 				<section>
 					<section className='wrapper-title' ref={fieldRef}>
 						<h2>분야 전체</h2>
@@ -414,7 +430,7 @@ const RecruitPage = () => {
 								<input
 									placeholder={placeholderText}
 									type='text'
-									onChange={event => setSearchKeyword(event.target.value)}
+									onChange={handleKeywordChange}
 									value={searchKeyword}
 									onKeyDown={onKeyPress}
 									onFocus={handleFocusedPlaceholder}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 023eaa24..bfe23fc3 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -11,7 +11,6 @@ import zipFile from './zipFile';
 import unzipFile from './unzipFile';
 import isNotNumber from './isNotNumber';
 import calculateDate from './calculateDate';
-import resetFormData from './resetFormData';
 import throttle from './throttle';
 import addClassToEmptyPTags from './addClassToEmptyPTags';
 
@@ -30,7 +29,6 @@ export {
 	unzipFile,
 	isNotNumber,
 	calculateDate,
-	resetFormData,
 	throttle,
 	addClassToEmptyPTags,
 };
diff --git a/src/utils/resetFormData.ts b/src/utils/resetFormData.ts
index 21a7e19d..8b137891 100644
--- a/src/utils/resetFormData.ts
+++ b/src/utils/resetFormData.ts
@@ -1,50 +1 @@
-import { useEffect } from 'react';
-import { recruitInputState, validState } from '../atom';
-import { useLocation } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
-import simpleDate from './simpleDate';
-import { SAFE_DEFAULT_VALUE } from '../constant';
 
-const resetFormData = () => {
-	const setFormData = useSetRecoilState(recruitInputState);
-	const setValidState = useSetRecoilState(validState);
-	const location = useLocation();
-
-	useEffect(() => {
-		setFormData({
-			scope: '',
-			category: '',
-			fieldId: 1,
-			deadline: simpleDate(new Date()),
-			proceedType: '',
-			proceedingStart: simpleDate(new Date()),
-			proceedingEnd: simpleDate(new Date()),
-			courseTag: {
-				isCourse: false,
-				courseTagName: '',
-				courseProfessor: '',
-			},
-			recruitmentRoles: [{ roleName: '', roleId: null, count: null, skillIds: [], skills: [] }],
-			tags: [],
-			title: '',
-			content: SAFE_DEFAULT_VALUE,
-		});
-
-		setValidState({
-			isSubmitted: false,
-			isScope: false,
-			isCategory: false,
-			isDeadline: false,
-			isEndDate: false,
-			isProcedure: false,
-			isTitle: false,
-			isContent: false,
-			isRole: false,
-			isRoleCount: false,
-			isRoleName: false,
-			isRoleSubmitted: false,
-		});
-	}, [location.pathname]);
-};
-
-export default resetFormData;