diff --git a/src/components/muiDatepicker/MuiDatepickerController.tsx b/src/components/muiDatepicker/MuiDatepickerController.tsx index 866a3d6f..ac481dda 100644 --- 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 } }) => ( { diff --git a/src/pages/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx index 58c7f4d4..2b6f3e35 100644 --- 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) => { + if (event.key === 'Tab') event.preventDefault(); + }; + return ( <> checkKeyDown(e)} + onKeyDown={e => checkEnterKeyDown(e)} > @@ -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} /> diff --git a/src/utils/addClassToEmptyPTags.ts b/src/utils/addClassToEmptyPTags.ts new file mode 100644 index 00000000..3e89cbf3 --- /dev/null +++ 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 === ' ') { + 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 index ba3514d5..023eaa24 100644 --- 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, };