Merge pull request #183 from MeeTeamNumdle/release-1.0

fix: 텍스트 에디터 버그 검토 및 개선 - 배포 사이트에 적용

src/components/header/Header.tsx

@@ -23,6 +23,7 @@ const Header = () => {
 		galary: false,
 		inform: false,
 	});
+	const { mutate: signOut } = useSignOut({ setUserState });
 
 	const goRecruit = () => {
 		navigate('/');
@@ -38,12 +39,10 @@ const Header = () => {
 			professor: null,
 		});
 	};
+
 	const goGalary = () => {
 		setIsWait(true);
 	};
-	const goInformationUse = () => {
-		setIsWait(true);
-	};
 
 	const onClickMy = () => {
 		if (!isLoggedIn) {
@@ -53,6 +52,15 @@ const Header = () => {
 		}
 	};
 
+	const handleLogOutButtonClick = () => {
+		const confirm = window.confirm('로그아웃 하시겠습니까?');
+		if (confirm) {
+			signOut();
+			navigate('/');
+			setOpenDrop(false);
+		}
+	};
+
 	useEffect(() => {
 		if (location.pathname === `/recruitment/postings/${id}` || location.pathname === '/') {
 			setIsHere({ recruit: true, galary: false, inform: false });
@@ -78,18 +86,6 @@ const Header = () => {
 		fixModalBackground(isWait);
 	}, [isWait]);
 
-	// 로그아웃
-	const { mutate: signOut } = useSignOut({ setUserState });
-
-	const handleLogOutButtonClick = () => {
-		const confirm = window.confirm('로그아웃 하시겠습니까?');
-		if (confirm) {
-			signOut();
-			navigate('/');
-			setOpenDrop(false);
-		}
-	};
-
 	resetFormData();
 
 	return (

src/components/meeteam/card/RecruitCard.tsx

@@ -40,7 +40,9 @@ const RecruitCard = ({
 	});
 	const setNeedLoginModal = useSetRecoilState(needLoginModalState);
 	const extractDeadline = new Date(deadline);
-	const convertedDeadline = `${extractDeadline.getFullYear()}/${extractDeadline.getMonth()}/${extractDeadline.getDate()}`;
+	const convertedDeadline = `${extractDeadline.getFullYear()}/${
+		extractDeadline.getMonth() + 1
+	}/${extractDeadline.getDate()}`;
 
 	const onClickContent = () => {
 		navigate(`/recruitment/postings/${id}`);

src/components/recruit/create/ControlButtons.tsx

@@ -1,38 +1,18 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
-import { recruitInputState } from '../../../atom';
-import { simpleDate } from '../../../utils';
+import { resetFormData } from '../../../utils';
 
 const ControlButtons = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
-	const setFormData = useSetRecoilState(recruitInputState);
-
-	const resetFormData = () => {
-		setFormData({
-			scope: '',
-			category: '',
-			fieldId: 1,
-			deadline: simpleDate(new Date()),
-			proceedType: '',
-			proceedingStart: simpleDate(new Date()),
-			proceedingEnd: simpleDate(new Date()),
-			courseTag: {
-				isCourse: false,
-				courseTagName: '',
-				courseProfessor: '',
-			},
-			recruitmentRoles: [],
-			tags: [],
-			title: '',
-			content: '',
-		});
-	};
 
 	const cancelHandler = () => {
+		if (location.pathname.includes('edit')) {
+			navigate(-1);
+		} else {
+			navigate('/');
+		}
 		resetFormData();
-		navigate('/');
 	};
 
 	return (

src/components/recruit/create/detailedInformation/DetailedInformation.styled.ts

@@ -28,6 +28,12 @@ const DetailedInformation = styled.section`
 				border-radius: 0.1rem;
 				width: 100%;
 				margin-top: 0.8rem;
+				strong {
+					font-weight: bold;
+				}
+				em {
+					font-style: italic;
+				}
 			}
 
 			.ql-container.ql-snow {

src/components/recruit/create/detailedInformation/DetailedInformation.tsx

@@ -12,10 +12,8 @@ const DetailedInformation = () => {
 	const [formData, setFormData] = useRecoilState(recruitInputState);
 	const { validMessage, isValid } = useValid(formData);
 
-	const preventInput = (event: React.KeyboardEvent<HTMLInputElement>) => {
-		const forbiddenKeys = ['\t'];
-
-		if (forbiddenKeys.includes(event.key)) {
+	const preventInput = (event: React.KeyboardEvent<ReactQuill>) => {
+		if (event.key === 'Tab') {
 			event.preventDefault();
 		}
 	};

src/components/recruit/recruitDetail/recruitDescription/RecruitDescription.styled.ts

@@ -15,9 +15,10 @@ const RecruitDescription = styled.article`
 		color: #373f41;
 		font-size: 1.6rem;
 		font-weight: 500;
-		line-height: 1.9rem;
+		font-family: Pretendard;
 		letter-spacing: 0.0032rem;
 		box-sizing: border-box;
+		line-height: 1.42;
 
 		h1 {
 			font-size: 3.2rem;
@@ -40,6 +41,15 @@ const RecruitDescription = styled.article`
 		strong {
 			font-weight: bold;
 		}
+		em {
+			font-style: italic;
+		}
+		blockquote {
+			border-left: 4px solid #ccc;
+			margin-bottom: 5px;
+			margin-top: 5px;
+			padding-left: 16px;
+		}
 		ul {
 			list-style-type: circle;
 			padding-left: 2rem;
@@ -60,16 +70,6 @@ const RecruitDescription = styled.article`
 		.ql-indent-3 {
 			margin-left: 15rem;
 		}
-
-		em {
-			font-style: italic;
-		}
-		blockquote {
-			border-left: 4px solid #ccc;
-			margin-bottom: 5px;
-			margin-top: 5px;
-			padding-left: 16px;
-		}
 	}
 `;
 

src/constant/textEditor.ts

@@ -3,46 +3,50 @@ import DOMPurify from 'dompurify';
 export const DEFAULT_VALUE = `
 
 
-1. 프로젝트 계기
+<h2>1. 프로젝트 계기</h2>
  
-- 해당 프로젝트를 시작하게된 계기를 적어주세요
-ex) 대학생 때는 전공을 불문하고, 굉장히 많은 팀프로젝트를 하게 됩니다. 하지만 프로젝트를 진행하면서 팀원 때문에 고통받는 사람들을 여럿 볼 수 있는데요! 그런 사람들에게 도움이 되는 플랫폼을 만들면 좋겠다고 생각했어요! 
+- <strong>해당 프로젝트를 시작하게된 계기를 적어주세요.</strong>
+ex) 대학생 때는 전공을 불문하고, 굉장히 많은 팀프로젝트를 하게 됩니다. 하지만 프로젝트를 진행하면서 팀원 때문에 고통받는 사람들을 여럿 볼 수 있는데요! 그런 사람들에게 도움이 되는 플랫폼을 만들면 좋겠다고 생각했어요!
  
-- 만들고자 하는 프로덕트에 대해 알려주세요 
+- <strong>만들고자 하는 프로덕트에 대해 알려주세요.</strong> 
 ex) 대학생을 위한 프로젝트 구인 플랫폼을 만들고자 합니다. 대학생동안 많은 팀프로젝트를 하면서 나랑 잘 어울리는 팀원과 만날 수 있는 플랫폼이에요. 궁극적인 목표는 프로젝트에서 팀원을 구할 때, 오픈된 프로필을 바탕으로 자신의 니즈에 맞는 팀원을 구하는데 도움을 주는 플랫폼을 만들고자 합니다. 더불어 우리는 해당 플랫폼을 바탕으로 팀 프로젝트 할 때 서로의 능력을 오픈하는 문화를 만들고 싶습니다!
-
  
-- 어떤 사용자들을 타겟하고 있는지 적어주세요 
+- <strong>어떤 사용자들을 타겟하고 있는지 적어주세요</strong> 
 ex) 아무래도 주 타겟은 전국 대학생이에요! 이후에는 직장인까지 확장해보고 싶어요!
  
  
-2. 회의 진행/모임 방식 
+<h2>2. 회의 진행/모임 방식</h2> 
  
-- 1주에 몇번정도 회의나 모임을 진행할 계획인가요? 
+- <strong>1주에 몇번정도 회의나 모임을 진행할 계획인가요?</strong> 
 ex) 1주일에 1~2회 정기회의가 있습니다.
  
-- 온/오프라인 회의 진행시 진행방식을 적어주세요 
+- <strong>온/오프라인 회의 진행시 진행방식을 적어주세요.</strong> 
 ex) 온라인은 줌을 활용하고, 공유 사무실 공간이 있습니다. 문서화는 노션을 지향합니다.
  
-
-3. 우리 팀 문화는요
  
-- 프로젝트 동안 지향하는 문화를 적어주세요.
+<h2>3. 우리 팀 문화는요</h2>
+ 
+- <strong>프로젝트 동안 지향하는 문화를 적어주세요.</strong>
 ex) 저희는 신속한 의사소통을 지향해요. \n회의시간은 1시간 내로 제한하려고 해요. 그리고 오버커뮤니케이션을 지향해요.\n
  
-- 프로젝트 동안 지양하는 문화를 적어주세요.
+- <strong>프로젝트 동안 지양하는 문화를 적어주세요.</strong>
 ex) 누군가 단독적인 의사결정을 기피하고 있어요.
  
-4. 저는 누구냐면요\n
-
-- 전문적으로 담당한 업무나, 별도로 진행하신 팀 프로젝트가 있으시다면 적어주세요.
+ 
+<h2>4. 저는 누구냐면요</h2>
+ 
+- <strong>전문적으로 담당한 업무나, 별도로 진행하신 팀 프로젝트가 있으시다면 적어주세요.</strong>
 ex) 실무에서 서버 개발 경험이 있습니다. 뿐만 아니라 작은 팀을 이끈 경험도 여러 번 있어요.
  
-- 이 프로젝트에서 나(리더) 역할을 적어주세요.
+- <strong>이 프로젝트에서 나(리더) 역할을 적어주세요.</strong>
 ex) 전체적인 프로덕트 매니징은 제가 주로 담당할 예정이에요! 여러분은 개발에만 집중할 수 있게끔 노력할게요!
  
-5. 기타사항
-- 이외에 미래의 팀원들에게 알려줄 내용이 있다면 적어주세요.
+ 
+<h2>5. 기타사항</h2>
+ 
+- <strong>이외에 미래의 팀원들에게 알려줄 내용이 있다면 적어주세요.</strong>
+ex) 매주 금요일 저녁 일정이 있습니다.
+ 
 `;
 
 const lines = DEFAULT_VALUE.split('\n')

src/pages/create/recruitCreatePage/RecruitCreatePage.tsx

@@ -102,43 +102,47 @@ const RecruitCreatePage = () => {
 		}
 	};
 
-	useEffect(() => {
-		fixModalBackground(beforeSubmit || isWarnRoleDelete);
-	}, [beforeSubmit, isWarnRoleDelete]);
+	resetFormData();
 
 	useEffect(() => {
-		const convertRoleInfo = (roleInfo: RoleInfo): RoleForPost => {
-			return {
-				roleId: roleInfo.roleId,
-				count: roleInfo.recruitCount,
-				skillIds: roleInfo.skills.map(e => e.id),
-				skills: roleInfo.skills,
-				roleName: roleInfo.roleName,
+		if (data) {
+			const convertRoleInfo = (roleInfo: RoleInfo): RoleForPost => {
+				return {
+					roleId: roleInfo.roleId,
+					count: roleInfo.recruitCount,
+					skillIds: roleInfo.skills.map(e => e.id),
+					skills: roleInfo.skills,
+					roleName: roleInfo.roleName,
+				};
 			};
-		};
-		const transformedRoles = data?.recruitmentRoles.map(convertRoleInfo);
-		if (isSuccess && location.pathname.includes('edit') && data && transformedRoles) {
-			setFormData({
-				scope: data.scope,
-				category: data.category,
-				deadline: data.deadline,
-				proceedingStart: data.proceedingStart,
-				proceedingEnd: data.proceedingEnd,
-				fieldId: 1,
-				proceedType: data.proceedType,
-				courseTag: {
-					courseTagName: data.courseName,
-					courseProfessor: data.courseProfessor,
-					isCourse: data.courseName || data.courseProfessor ? true : false,
-				},
-				recruitmentRoles: transformedRoles,
-				tags: data.tags.map(e => e.name),
-				title: data.title,
-				content: data.content,
-			});
+			const transformedRoles = data.recruitmentRoles.map(convertRoleInfo);
+			if (isSuccess && location.pathname.includes('edit') && transformedRoles) {
+				setFormData({
+					scope: data.scope,
+					category: data.category,
+					deadline: data.deadline,
+					proceedingStart: data.proceedingStart,
+					proceedingEnd: data.proceedingEnd,
+					fieldId: 1,
+					proceedType: data.proceedType,
+					courseTag: {
+						courseTagName: data.courseName,
+						courseProfessor: data.courseProfessor,
+						isCourse: data.courseName || data.courseProfessor ? true : false,
+					},
+					recruitmentRoles: transformedRoles,
+					tags: data.tags.map(e => e.name),
+					title: data.title,
+					content: data.content,
+				});
+			}
 		}
 	}, [data]);
 
+	useEffect(() => {
+		fixModalBackground(beforeSubmit || isWarnRoleDelete);
+	}, [beforeSubmit, isWarnRoleDelete]);
+
 	return (
 		<S.RecruitCreatePage>
 			<form onSubmit={handleSubmit}>