Merge pull request #199 from MeeTeamNumdle/release-1.0

fix: 5차 QA 피드백 배포 브랜치에 적용
MeeTeamIdle · May 16, 2024 · b73a737 · b73a737
2 parents d4b7f36 + 29774fa
commit b73a737
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 6 deletions.
diff --git a/src/components/muiDatepicker/MuiDatepickerController.tsx b/src/components/muiDatepicker/MuiDatepickerController.tsx
@@ -39,6 +39,7 @@ const MuiDatepickerController = ({ name, control, formState, rules }: Date) => {
 				render={({ field: { onChange, ref, value } }) => (
 					<MuiDatepicker
 						defaultValue={new Date(value)}
+						value={new Date(value)}
 						handleChange={onChange}
 						inputRef={ref}
 						invalid={!!inputError}

diff --git a/src/pages/portfolio/details/PortfolioDetails.styled.ts b/src/pages/portfolio/details/PortfolioDetails.styled.ts
@@ -117,6 +117,62 @@ const PortfolioDetailsContent = styled.article`
 	padding: 0 clamp(5%, 9.8rem, 8%);
 	font-weight: 500;
 	white-space: pre-wrap; // 줄바꿈
+
+	/* 상세 내용 스타일링 */
+	.empty-p {
+		line-height: 1.2;
+	}
+
+	h1 {
+		font-size: 3.2rem;
+	}
+	h2 {
+		font-size: 2.4rem;
+	}
+	h3 {
+		font-size: 1.872rem;
+	}
+	h4 {
+		font-size: 1.6rem;
+	}
+	h5 {
+		font-size: 1.328rem;
+	}
+	h6 {
+		font-size: 1.072rem;
+	}
+	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;
+	}
+	ol {
+		list-style-type: decimal;
+		padding-left: 2rem;
+	}
+
+	.ql-indent-1 {
+		margin-left: 5rem;
+	}
+
+	.ql-indent-2 {
+		margin-left: 10rem;
+	}
+
+	.ql-indent-3 {
+		margin-left: 15rem;
+	}
 `;
 
 const PortfolioDetailsButtonContainer = styled.div`

diff --git a/src/pages/portfolio/details/PortfolioDetailsPage.tsx b/src/pages/portfolio/details/PortfolioDetailsPage.tsx
@@ -13,7 +13,7 @@ import {
 import { useNavigate, useParams } from 'react-router-dom';
 import { useReadPortfolio, useDeletePortfolio } from '../../../hooks';
 import { Image, BlobFile } from '../../../types';
-import { fixModalBackground, unzipFile } from '../../../utils';
+import { addClassToEmptyPTags, fixModalBackground, unzipFile } from '../../../utils';
 import { useRecoilState } from 'recoil';
 import { uploadImageListState } from '../../../atom';
 import { TrashCan } from '../../../assets';
@@ -148,7 +148,7 @@ const PortfolioDetailsPage = () => {
 								<S.PortfolioDetailsContent
 									className='container-contents'
 									dangerouslySetInnerHTML={{
-										__html: DOMPurify.sanitize(portfolio?.content as string),
+										__html: DOMPurify.sanitize(addClassToEmptyPTags(portfolio?.content as string)),
 									}}
 								/>
 							</S.PortfolioDetailsArticle>

diff --git a/src/pages/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx
@@ -248,15 +248,19 @@ const PortfolioEditPage = () => {
 		}
 	}, [isSuccessReadPortfolio]);
 
-	const checkKeyDown = (e: React.KeyboardEvent) => {
+	const checkEnterKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === 'Enter') e.preventDefault();
 	};
 
+	const checkTabKeyDown = (event: React.KeyboardEvent<ReactQuill>) => {
+		if (event.key === 'Tab') event.preventDefault();
+	};
+
 	return (
 		<>
 			<S.PortfolioEditLayout
 				onSubmit={handleSubmit(submitHandler)}
-				onKeyDown={e => checkKeyDown(e)}
+				onKeyDown={e => checkEnterKeyDown(e)}
 			>
 				<S.PortfolioEditColumn $gap='4rem'>
 					<S.PortfolioEditHeader>
@@ -350,7 +354,7 @@ const PortfolioEditPage = () => {
 														differenceInDays(
 															new Date(watch('endDate') as string),
 															new Date(startDate)
-														) < 0 && '시작일을 종료일보다 빠르게 설정해주세요'
+														) >= 0 || '시작일을 종료일보다 빠르게 설정해주세요'
 													);
 												},
 											}}
@@ -425,10 +429,11 @@ const PortfolioEditPage = () => {
 										ref(e);
 										if (quillRef) quillRef.current = e;
 									}}
-									defaultValue={portfolio?.content}
+									value={portfolio?.content}
 									onChange={handleChangeEditor}
 									modules={modules}
 									formats={formats}
+									onKeyDown={checkTabKeyDown}
 									{...PORTFOLIO_EDIT_DATA.content}
 								/>
 							</S.PortfolioEditColumn>

diff --git a/src/utils/addClassToEmptyPTags.ts b/src/utils/addClassToEmptyPTags.ts
@@ -0,0 +1,15 @@
+const addClassToEmptyPTags = (html: string) => {
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(html, 'text/html');
+	const pTags = doc.getElementsByTagName('p');
+
+	for (let i = 0; i < pTags.length; i++) {
+		if (pTags[i].innerHTML === '&nbsp;') {
+			pTags[i].classList.add('empty-p');
+		}
+	}
+
+	return doc.body.innerHTML;
+};
+
+export default addClassToEmptyPTags;
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -13,6 +13,7 @@ import isNotNumber from './isNotNumber';
 import calculateDate from './calculateDate';
 import resetFormData from './resetFormData';
 import throttle from './throttle';
+import addClassToEmptyPTags from './addClassToEmptyPTags';
 
 export {
 	modules,
@@ -31,4 +32,5 @@ export {
 	calculateDate,
 	resetFormData,
 	throttle,
+	addClassToEmptyPTags,
 };