diff --git a/src/api/index.ts b/src/api/index.ts index 6554a24..aae0a28 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,3 +1,4 @@ export * from "./auth" export * from "./snapshot" export * from "./group" +export * from "./report" diff --git a/src/api/report.ts b/src/api/report.ts new file mode 100644 index 0000000..e2d2219 --- /dev/null +++ b/src/api/report.ts @@ -0,0 +1,29 @@ +import axiosInstance from "./axiosInstance" + +interface ReportResData { + data: { + id: number + uid: number + email: string + type: string + title: string + content: string + createdAt: string + modifiedAt: string + } +} + +interface ReportParam { + email: string + title: string + content: string +} + +export const requestSendReportAPI = async (param: ReportParam): Promise => { + try { + const res = await axiosInstance.post(`/discussion`, { ...param, type: "QNA" }) + return res.data + } catch (e) { + throw e + } +} diff --git a/src/components/Modal/Modals.tsx b/src/components/Modal/Modals.tsx index 0765d63..0719b29 100644 --- a/src/components/Modal/Modals.tsx +++ b/src/components/Modal/Modals.tsx @@ -5,6 +5,7 @@ import CreateCrewModal from "./CreateCrewModal" import GoodPostureGuidePopupModal from "./GoodPostureGuideModal" import InviteCrewModal from "./InviteCrewModal" import JoinCrewModal from "./JoinCrewModal" +import ReportModal from "./ReportModal" import ToWithdrawModal from "./ToWithdrawModal" import WithdrawCrewModal from "./WithdrawCrewModal" @@ -15,6 +16,7 @@ export const modals = { withdrawCrewModal: WithdrawCrewModal, ToWithdrawModal: ToWithdrawModal, postureGuideModal: GoodPostureGuidePopupModal, + reportModal: ReportModal, } const Modals = (): React.ReactNode => { diff --git a/src/components/Modal/ReportModal.tsx b/src/components/Modal/ReportModal.tsx new file mode 100644 index 0000000..1a12d57 --- /dev/null +++ b/src/components/Modal/ReportModal.tsx @@ -0,0 +1,117 @@ +import { requestSendReportAPI } from "@/api" +import { ModalProps } from "@/contexts/ModalsContext" +import ModalContainer from "@components/ModalContainer" +import { useState } from "react" + +const ReportModal = (props: ModalProps): React.ReactElement => { + const { onClose, onSubmit } = props + + const [title, setTitle] = useState("") + const [email, setEmail] = useState("") + const [isValidEmail, setIsValidEmail] = useState(false) + const [description, setDescription] = useState("") + + const onChangeName = (e: React.ChangeEvent): void => { + setTitle(e.target.value) + } + + const onChangeDescription = (e: React.ChangeEvent): void => { + if (e.target.value.length <= 500) setDescription(e.target.value) + } + + const isValidForm = (): boolean => { + return Boolean(title.trim() && email.trim() && description.trim()) && isValidEmail + } + + const handleSubmit = (): void => { + if (!isValidForm()) { + return + } + + requestSendReportAPI({ + title, + email, + content: description, + }).then(({ data }) => { + if (onSubmit && typeof onSubmit === "function") onSubmit() + }) + } + + const onChangeEmail = (event: any) => { + setEmail(event.target.value.trim()) + + const emailRegex = /^[\w-\.]+@([\w-]+)\.?([\w-]+)\.+[\w-]{2,4}$/ + const validEmail = emailRegex.test(event.target.value) + setIsValidEmail(validEmail) + } + + return ( + +
+ {/* header */} +
+
의견 보내기
+
+ +
+ {/* crew owner */} +
+
제목
+
+ +
+
+ +
+
이메일
+
+ +
+ {email && !isValidEmail && ( +
올바른 이메일을 입력해주세요.
+ )} +
+ + {/* crew description */} +
+
상세 내용
+
+