Merge pull request #211 from MeeTeamNumdle/fix/#210_modal_apply

fix: 디자인팀 QA - (긴급) 신청 모달 수정사항 반영
MeeTeamIdle · Jun 3, 2024 · 7fd6a5d · 7fd6a5d
2 parents dfd932f + 5fe98a7
commit 7fd6a5d
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 23 deletions.
diff --git a/src/atom.tsx b/src/atom.tsx
@@ -165,6 +165,11 @@ export const applyStepState = atom({
 	default: 0,
 });
 
+export const goProfileState = atom({
+	key: 'goProfileState',
+	default: false,
+});
+
 export const applyUserInfo = atom<ApplyRole>({
 	key: 'applyUserInfo',
 	default: {

diff --git a/src/components/recruit/recruitDetail/modal/ApplyModal.styled.ts b/src/components/recruit/recruitDetail/modal/ApplyModal.styled.ts
@@ -72,19 +72,38 @@ const Modal = styled.section<Modal>`
 			padding: 0;
 			gap: 0.6rem;
 
-			input {
+			input[type='checkbox'] {
 				margin: 0;
 				padding: 0;
+				width: 2rem;
+				height: 2rem;
+				cursor: pointer;
+				border: 1px solid #d3d3d3;
+				border-radius: 0.4rem;
+				appearance: none;
+
+				&:checked {
+					background-color: #5877fc;
+					border: 1px solid #5877fc;
+					background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+					background-size: 100% 100%;
+					background-position: 50%;
+					background-repeat: no-repeat;
+				}
 			}
 
-			label {
+			.agreement-word {
 				color: #373f41;
 				font-size: 1.4rem;
 				margin-top: 0.2rem;
 			}
 		}
 	}
 
+	.writing {
+		margin-bottom: 0.2rem;
+	}
+
 	.container-user__info {
 		width: 44rem;
 		border-radius: 0.8rem;
@@ -94,6 +113,16 @@ const Modal = styled.section<Modal>`
 		padding: 1.8rem 2rem;
 		box-sizing: border-box;
 
+		.container-subtitle {
+			display: flex;
+			gap: 1.25rem;
+			align-items: flex-end;
+		}
+
+		.highlighted {
+			color: #5877fc;
+		}
+
 		.confirm-title {
 			font-size: 1.8rem;
 		}
@@ -195,6 +224,10 @@ const Modal = styled.section<Modal>`
 				background: #fff;
 				z-index: 601;
 				box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+
+				li {
+					cursor: pointer;
+				}
 			}
 
 			img {
@@ -312,25 +345,35 @@ const FinalModal = styled.section`
 		letter-spacing: -0.036rem;
 	}
 
+	.btn-txt-big {
+		color: #373f41;
+		font-family: Pretendard;
+		font-size: 1.6rem;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 1.9rem;
+		letter-spacing: 0.0032rem;
+	}
+
 	.description {
 		display: flex;
 		flex-direction: column;
 		margin-top: 1.6rem;
 
-		span:nth-child(1) {
+		h4 {
 			color: #151515;
 			font-size: 1.8rem;
 			font-weight: 600;
 			line-height: 1.8rem;
 			letter-spacing: 0.0027rem;
 		}
-		span:nth-child(2) {
+
+		.darker {
 			color: #373f41;
-			font-size: 1.4rem;
-			font-weight: 400;
-			line-height: 1.8rem;
-			letter-spacing: 0.0021rem;
-			margin-top: 0.7rem;
+			margin-top: 0.8rem;
+		}
+		span:nth-child(1) {
+			margin-top: 0.8rem;
 		}
 
 		.agreement {
@@ -351,6 +394,7 @@ const FinalModal = styled.section`
 		display: flex;
 		justify-content: flex-end;
 		margin-top: 6.2rem;
+		gap: 1.6rem;
 
 		button {
 			display: flex;
@@ -359,8 +403,16 @@ const FinalModal = styled.section`
 			justify-content: center;
 			align-items: center;
 			gap: 0.75rem;
-			flex-shrink: 0;
 			border-radius: 0.6rem;
+		}
+
+		.cancel {
+			background-color: #fff;
+			color: #373f41;
+			border: 0.1rem solid #e3e3e3;
+		}
+
+		.btn-profile {
 			background-color: #5877fc;
 			color: #fff;
 		}

diff --git a/src/components/recruit/recruitDetail/modal/ApplyModal.tsx b/src/components/recruit/recruitDetail/modal/ApplyModal.tsx
@@ -67,12 +67,21 @@ const ApplyModal = () => {
 					</span>
 					<article className='agreement'>
 						<input type='checkbox' id='agree' onClick={onClickCheckbox} checked={isChecked} />
-						<label htmlFor='agree'>개인정보 열람 동의</label>
+						<label htmlFor='agree' className='agreement-word'>
+							개인정보 열람 동의
+						</label>
 					</article>
 				</section>
 			</article>
 			<article className='container-user__info'>
-				<h3>내 정보</h3>
+				<section className='container-subtitle'>
+					<h3>내 정보</h3>
+					{isChecked && (
+						<span className='body2-medium writing'>
+							추후 <span className='highlighted'>대표메일</span>을 통해 결과를 알려드립니다.
+						</span>
+					)}
+				</section>
 				{isLoading ? (
 					<section className='user-info'>사용자 정보를 불러오고 있습니다...</section>
 				) : (
@@ -97,7 +106,7 @@ const ApplyModal = () => {
 								<span>입학년도</span>
 							</section>
 							<section>
-								<span className='value'>{data?.score}</span>
+								<span className='value'>{data?.score === 0 ? '-' : data?.score}</span>
 								<span className='value'>{data?.year}</span>
 							</section>
 						</section>

diff --git a/src/components/recruit/recruitDetail/modal/ConfirmModal.tsx b/src/components/recruit/recruitDetail/modal/ConfirmModal.tsx
@@ -75,7 +75,7 @@ const ConfirmModal = () => {
 							<span>입학년도</span>
 						</section>
 						<section>
-							<span className='value'>{userInfo.score}</span>
+							<span className='value'>{userInfo.score === 0 ? '-' : userInfo.score}</span>
 							<span className='value'>{userInfo.year}</span>
 						</section>
 					</section>

diff --git a/src/components/recruit/recruitDetail/modal/FinalModal.tsx b/src/components/recruit/recruitDetail/modal/FinalModal.tsx
@@ -1,17 +1,53 @@
 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';
 
 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);
+	};
+
 	return (
 		<S.FinalModal>
 			<article className='container-final'>
 				<h1>신청 정보</h1>
 				<section className='description'>
-					<span>지원을 완료했습니다!</span>
-					<span>지원 결과는 추후 메일을 통해 알려드립니다.</span>
+					<h4>신청을 완료했습니다!</h4>
+					<span className='body2-medium darker'>신청 결과는 추후 메일을 통해 알려드립니다.</span>
+					<span className='body2-medium darker'>
+						학점 및 기타 정보를 입력하시면 승인률이 올라갑니다.
+					</span>
+					<span className='body2-medium darker'>
+						프로필 편집을 통해 신청 정보를 수정하시겠습니까?
+					</span>
 				</section>
 				<section className='container-button'>
-					<button type='submit'>확인</button>
+					<button type='submit' className='cancel btn-txt-big'>
+						나중에 하기
+					</button>
+					<button type='submit' className='btn-profile btn-txt-big' onClick={goProfileHandler}>
+						프로필로 가기
+					</button>
 				</section>
 			</article>
 		</S.FinalModal>

diff --git a/src/globalStyle.css b/src/globalStyle.css
@@ -150,6 +150,16 @@ button {
 	letter-spacing: 0.0032rem;
 }
 
+.body2-medium {
+	color: #8e8e8e;
+	font-family: Pretendard;
+	font-size: 1.4rem;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 1.6rem;
+	letter-spacing: 0.0028rem;
+}
+
 .h5 {
 	color: #373f41;
 	font-family: Pretendard;

diff --git a/src/pages/recruit/recruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/recruitDetailPage/RecruitDetailPage.tsx
@@ -21,17 +21,19 @@ import {
 } from '../../../components';
 import { calculateDate, fixModalBackground } from '../../../utils';
 import { JsxElementComponentProps } from '../../../types';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getPostingData } from '../../../service';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useRecoilState } from 'recoil';
 import {
 	applyCancelModalState,
+	userState,
 	applyCloseModalState,
 	applyModalState,
 	applyStepState,
 	commentDeleteModalState,
 	needLoginModalState,
 	recruitPostingDeleteModalState,
+	goProfileState,
 } from '../../../atom';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useLogin } from '../../../hooks';
@@ -40,14 +42,16 @@ const RecruitDetailPage = () => {
 	const { id } = useParams();
 	const navigate = useNavigate();
 	const pageNum = Number(id);
-	const isModal = useRecoilValue(applyModalState);
+	const user = useRecoilValue(userState);
+	const [isModal, setIsModal] = useRecoilState(applyModalState);
 	const isCancel = useRecoilValue(applyCancelModalState);
 	const isClose = useRecoilValue(applyCloseModalState);
 	const isDelete = useRecoilValue(commentDeleteModalState);
 	const isNeedLogin = useRecoilValue(needLoginModalState);
+	const [step, setIsApplyStep] = useRecoilState(applyStepState);
+	const [isGoProfile, setGoProfile] = useRecoilState(goProfileState);
 	const isPostingDelete = useRecoilValue(recruitPostingDeleteModalState);
-	const step = useRecoilValue(applyStepState);
-
+	const queryClient = useQueryClient();
 	const stepLists: JsxElementComponentProps = {
 		0: <ApplyModal />,
 		1: <ConfirmModal />,
@@ -73,6 +77,16 @@ const RecruitDetailPage = () => {
 		navigate(`/recruitment/postings/edit/${pageNum}`);
 	};
 
+	const submitHandler = async () => {
+		if (isGoProfile) {
+			setIsApplyStep(0);
+			setGoProfile(false);
+			queryClient.invalidateQueries({ queryKey: ['detailedPage', { pageNum, isLogin }] });
+			await setIsModal(false);
+			await navigate(`/profile/${user?.userId}`);
+		}
+	};
+
 	useEffect(() => {
 		fixModalBackground(
 			isModal || isCancel || isClose || isDelete.isDelete || isNeedLogin.isOpen || isPostingDelete
@@ -138,7 +152,7 @@ const RecruitDetailPage = () => {
 						</section>
 					</article>
 					{isModal && (
-						<form>
+						<form onSubmit={submitHandler}>
 							<section className='modal-background'>{stepLists[step]}</section>
 						</form>
 					)}

diff --git a/src/pages/recruit/recruitPage/RecruitPage.styled.ts b/src/pages/recruit/recruitPage/RecruitPage.styled.ts
@@ -458,6 +458,7 @@ const RecruitPage = styled.div<RecruitPage>`
 			align-items: center;
 			gap: 0.8rem;
 			cursor: pointer;
+			width: 15rem;
 
 			img {
 				width: 1.4rem;