diff --git a/src/page/AddingEvent/AddingEvent.module.scss b/src/page/AddingEvent/AddingEvent.module.scss index a0fa6f87..248de853 100644 --- a/src/page/AddingEvent/AddingEvent.module.scss +++ b/src/page/AddingEvent/AddingEvent.module.scss @@ -129,3 +129,11 @@ width: 55%; height: 50px; } + +.error-message { + color: #f7941e; +} + +.error-border { + border: 1px solid #f7941e; +} diff --git a/src/page/AddingEvent/index.tsx b/src/page/AddingEvent/index.tsx index fdcdb4e4..9bdcbecd 100644 --- a/src/page/AddingEvent/index.tsx +++ b/src/page/AddingEvent/index.tsx @@ -7,6 +7,7 @@ import { FileResponse, getCoopUrl } from 'api/uploadFile'; import axios from 'axios'; import showToast from 'utils/ts/showToast'; import { ReactComponent as Delete } from 'assets/svg/mystore/delete.svg'; +import cn from 'utils/ts/className'; import styles from './AddingEvent.module.scss'; /* eslint-disable no-await-in-loop */ @@ -69,8 +70,15 @@ interface ImageList { file: FileList | null; } +const initialError = { + title: false, + content: false, + date: false, +}; + export default function AddingEvent() { const [eventInfo, setEventInfo] = useState(initialState); + const [error, setError] = useState(initialError); const [editor, setEditor] = useState(''); const param = useParams(); const [preImages, setPreImages] = useState<(string | ArrayBuffer | null)[]>([]); @@ -82,42 +90,72 @@ export default function AddingEvent() { const changeTitle = (e: React.ChangeEvent) => { if (e.target.value.length <= 25) setEventInfo({ ...eventInfo, title: e.target.value }); + setError({ ...error, title: false }); }; const changeStartYear = (e: React.ChangeEvent) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (value.length <= 4) { setEventInfo({ ...eventInfo, start_date: { ...eventInfo.start_date, year: value } }); } + setError({ ...error, date: false }); }; const changeStartMonth = (e: React.ChangeEvent) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (value.length <= 2) { setEventInfo({ ...eventInfo, start_date: { ...eventInfo.start_date, month: value } }); } + setError({ ...error, date: false }); }; const changeStartDate = (e: React.ChangeEvent) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (value.length <= 2) { setEventInfo({ ...eventInfo, start_date: { ...eventInfo.start_date, date: value } }); } + setError({ ...error, date: false }); }; const changeEndYear = (e: React.ChangeEvent) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (value.length <= 4) { setEventInfo({ ...eventInfo, end_date: { ...eventInfo.end_date, year: value } }); } + setError({ ...error, date: false }); }; const changeEndMonth = (e: React.ChangeEvent) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (value.length <= 2) { setEventInfo({ ...eventInfo, end_date: { ...eventInfo.end_date, month: value } }); } + setError({ ...error, date: false }); }; const changeEndDate = (e: React.ChangeEvent) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (value.length <= 2) { setEventInfo({ ...eventInfo, end_date: { ...eventInfo.end_date, date: value } }); } + setError({ ...error, date: false }); + }; + + const validation = () => { + let flag = false; + if (eventInfo.title.length === 0) { + setError((prevError) => ({ ...prevError, title: true })); + flag = true; + } + if (editor.length === 0) { + setError((prevError) => ({ ...prevError, content: true })); + flag = true; + } + if (eventInfo.start_date.year.length === 0 + || eventInfo.start_date.month.length === 0 + || eventInfo.start_date.date.length === 0 + || eventInfo.end_date.year.length === 0 + || eventInfo.end_date.month.length === 0 + || eventInfo.end_date.date.length === 0 + ) { + setError((prevError) => ({ ...prevError, date: true })); + flag = true; + } + return flag; }; const handleImages = async (e: React.ChangeEvent) => { @@ -145,6 +183,8 @@ export default function AddingEvent() { }; const postEvent = () => { + if (validation()) return; + const startDate = `${eventInfo.start_date.year}-${eventInfo.start_date.month}-${eventInfo.start_date.date}`; const endDate = `${eventInfo.end_date.year}-${eventInfo.end_date.month}-${eventInfo.end_date.date}`; @@ -227,10 +267,14 @@ export default function AddingEvent() { + {error.title &&
필수 입력 항목입니다.
}
@@ -241,11 +285,18 @@ export default function AddingEvent() { { + setError({ ...error, content: false }); + return setEditor(e); + }} modules={modules} placeholder="이벤트/공지 내용을 입력해 주세요." + className={cn({ + [styles['error-border']]: error.content, + })} />
+ {error.content &&
필수 입력 항목입니다.
}

이벤트/공지 등록 기간

@@ -254,21 +305,30 @@ export default function AddingEvent() { / /
@@ -277,24 +337,34 @@ export default function AddingEvent() { / / + {error.date &&
필수 입력 항목입니다.
}
diff --git a/src/page/MyShopPage/index.tsx b/src/page/MyShopPage/index.tsx index 977f284b..1c45a1c4 100644 --- a/src/page/MyShopPage/index.tsx +++ b/src/page/MyShopPage/index.tsx @@ -63,6 +63,7 @@ export default function MyShopPage() { <>

가게정보

+ {shopData && 이벤트 추가}