Merge pull request #212 from MeeTeamNumdle/release-1.0

deploy: 디자인팀 QA 신청모달 수정사항 반영(긴급) - 배포 사이트에 적용
MeeTeamIdle · Jun 3, 2024 · f75b517 · f75b517
2 parents 4e81810 + 7fd6a5d
commit f75b517
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 41 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,6 @@ import { Header } from './components/index';
 import { ScrollToTop } from './utils/index';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import ko from 'date-fns/locale/ko';
@@ -21,7 +20,6 @@ function App() {
 	return (
 		<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ko}>
 			<QueryClientProvider client={queryClient}>
-				<ReactQueryDevtools initialIsOpen={false} />
 				<RecoilRoot>
 					<Header />
 					<main>

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/constant/editorTemplate.ts b/src/constant/editorTemplate.ts
@@ -0,0 +1,8 @@
+const PORTFOLIO_EDITOR_TEMPLATE = `
+<h3 style="color:#8e8e8e;">1. 프로젝트 설명</h3>\n\n
+<h3 style="color:#8e8e8e;">2. 내가 기여한 부분</h3>\n\n
+<h3 style="color:#8e8e8e;">3. 트러블 슈팅</h3>\n\n
+<h3 style="color:#8e8e8e;">4. 깨달은 점</h3>\n\n
+`;
+
+export { PORTFOLIO_EDITOR_TEMPLATE };
diff --git a/src/constant/index.ts b/src/constant/index.ts
@@ -1,4 +1,5 @@
 import { INPUT_VALIDATION, TEXTAREA_VALIDATION } from './validation';
 import { SAFE_DEFAULT_VALUE } from './textEditor';
+import { PORTFOLIO_EDITOR_TEMPLATE } from './editorTemplate';
 
-export { INPUT_VALIDATION, TEXTAREA_VALIDATION, SAFE_DEFAULT_VALUE };
+export { INPUT_VALIDATION, TEXTAREA_VALIDATION, SAFE_DEFAULT_VALUE, PORTFOLIO_EDITOR_TEMPLATE };
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/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx
@@ -36,7 +36,8 @@ import type ReactQuill from 'react-quill';
 import { useRecoilValue } from 'recoil';
 import { uploadImageListState } from '../../../atom';
 import { differenceInDays } from 'date-fns';
-import NotFound from '../../notFound/NotFound';
+import { NotFound } from '../..';
+import { PORTFOLIO_EDITOR_TEMPLATE } from '../../../constant';
 
 interface FormValues {
 	mainImage?: Image;
@@ -62,17 +63,7 @@ const PortfolioEditPage = () => {
 	const { portfolioId } = useParams() as { portfolioId: string }; // undefined 인 경우(생성하는 경우) 로직 필요
 	const navigate = useNavigate();
 
-	const {
-		data: portfolio,
-		isSuccess: isSuccessReadPortfolio,
-		isLoading,
-	} = useReadPortfolio(portfolioId);
-	// 작성자가 아닌 경우, 편집 방지(상세페이지로 이동)
-	// useEffect(() => {
-	// 	if (isSuccessReadPortfolio) {
-	// 		portfolioId && !portfolio?.isWriter && navigate(`/portfolio/${portfolioId}`);
-	// 	}
-	// }, [isSuccessReadPortfolio]);
+	const { data: portfolio, isSuccess: isSuccessReadPortfolio } = useReadPortfolio(portfolioId);
 
 	const { register, formState, handleSubmit, control, watch, getValues, setValue } =
 		useForm<FormValues>({
@@ -271,7 +262,7 @@ const PortfolioEditPage = () => {
 		if (isSuccessReadPortfolio) {
 			setProceedType(portfolio?.proceedType);
 			setSkillList(portfolio?.skills ? portfolio?.skills : []);
-			setValue('content', portfolio?.content);
+			setValue('content', portfolio?.content ?? PORTFOLIO_EDITOR_TEMPLATE);
 		}
 	}, [isSuccessReadPortfolio]);
 
@@ -487,7 +478,7 @@ const PortfolioEditPage = () => {
 											if (quillRef) quillRef.current = e;
 										}}
 										value={watch('content')}
-										defaultValue={portfolio?.content}
+										defaultValue={portfolio?.content ?? PORTFOLIO_EDITOR_TEMPLATE}
 										onChange={handleChangeEditor}
 										modules={modules}
 										formats={formats}
@@ -541,7 +532,6 @@ const PortfolioEditPage = () => {
 					<PortfolioModal formState={formState} handleClick={() => setRequiredAlertOpen(false)} />
 				</ModalPortal>
 			)}
-			<DevTool control={control} />
 		</>
 	);
 };