[F-BAN] 신고하기 모달

src/app/panel/OthersProfile.tsx

@@ -1,7 +1,9 @@
 'use client'
 
+import ReportModal from '@/components/ReportModal'
 import { Box, Button, Popover, Typography } from '@mui/material'
 import { MouseEvent, ReactNode, useState } from 'react'
+import useModal from '@/hook/useModal'
 
 interface IOthersProfile {
   name: string
@@ -11,6 +13,7 @@ interface IOthersProfile {
 
 const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+  const { isOpen, openModal, closeModal } = useModal()
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
@@ -55,9 +58,14 @@ const OthersProfile = ({ name, userId, children }: IOthersProfile) => {
           <Typography>아이디: {userId}</Typography>
           <Button>프로필 보기</Button>
           <Button>쪽지 보내기</Button>
-          <Button>신고하기</Button>
+          <Button onClick={openModal}>신고하기</Button>
         </Box>
       </Popover>
+      <ReportModal
+        isModalOpen={isOpen}
+        handleClose={closeModal}
+        targetId={userId}
+      />
     </div>
   )
 }

src/components/ReportModal.tsx

@@ -0,0 +1,151 @@
+import CuModal from './CuModal'
+import React, { useState } from 'react'
+import { useForm, Controller, SubmitHandler } from 'react-hook-form'
+import CuTextFieldLabel from '@/components/CuTextFieldLabel'
+import CuTextField from '@/components/CuTextField'
+import useAxiosWithAuth from '@/api/config'
+import { Box, Typography } from '@mui/material'
+import ReportTypeSelect from '@/components/ReportTypeSelect'
+import useToast from '@/hook/useToast'
+import IToastProps from '@/types/IToastProps'
+
+interface IReportModalProps {
+  isModalOpen: boolean
+  handleClose: () => void
+  targetId: string
+}
+
+interface IReportFormInput {
+  userId: string
+  type: string
+  content: string
+}
+
+const ReportModal = ({
+  isModalOpen,
+  handleClose,
+  targetId,
+}: IReportModalProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [toastProps, setToastProps] = useState<IToastProps>({
+    severity: 'info',
+    message: '',
+  })
+  const { CuToast, isOpen, openToast, closeToast } = useToast()
+
+  const axiosInstance = useAxiosWithAuth()
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<IReportFormInput>({
+    defaultValues: {
+      userId: targetId ? targetId : '',
+      type: '',
+      content: '',
+    },
+  })
+
+  const onSubmit: SubmitHandler<IReportFormInput> = (data) => {
+    //console.log(data)
+    setIsSubmitting(true)
+    axiosInstance
+      .post(`api/v1/report`, data)
+      .then(() => {
+        setToastProps({
+          severity: 'success',
+          message: '신고가 접수되었습니다.',
+        })
+        handleClose()
+        openToast()
+      })
+      .catch((error) => {
+        if (error.response.status !== 401) {
+          setToastProps({
+            severity: 'error',
+            message: '신고 접수 중 오류가 발생했습니다.',
+          })
+          openToast()
+        }
+      })
+    setIsSubmitting(false)
+  }
+
+  return (
+    <>
+      <CuModal
+        open={isModalOpen}
+        onClose={handleClose}
+        title={'신고하기'}
+        mobileFullSize
+        containedButton={{
+          text: isSubmitting ? '제출 중' : '완료',
+          type: 'submit',
+          form: 'report-form',
+        }}
+        textButton={{
+          text: '취소',
+          onClick: handleClose,
+        }}
+      >
+        <Box sx={{ height: '100%', justifyContent: 'flex-start' }}>
+          <form id="report-form" onSubmit={handleSubmit(onSubmit)}>
+            <Controller
+              name="type"
+              control={control}
+              rules={{
+                required: '신고의 유형을 선택해주세요',
+              }}
+              render={({ field }) => (
+                <>
+                  <ReportTypeSelect field={field} label="신고 유형" />
+                  <Typography color="error" variant="Caption">
+                    {errors.type?.message || '\u00A0'}
+                  </Typography>
+                </>
+              )}
+            />
+            <Controller
+              name="content"
+              control={control}
+              rules={{
+                required: '신고 내용을 작성해주세요',
+              }}
+              render={({ field }) => (
+                <Box>
+                  <CuTextFieldLabel
+                    htmlFor="content"
+                    style={{ marginBottom: '10px' }}
+                  >
+                    <Typography variant="Body2">
+                      이 유저를 신고하시겠습니까?
+                    </Typography>
+                  </CuTextFieldLabel>
+                  <CuTextField
+                    {...field}
+                    id="content"
+                    style={{ width: '100%' }}
+                    placeholder="신고하는 이유를 적어주세요."
+                    multiline
+                    rows={5}
+                  />
+                  <Typography color="error" variant="Caption">
+                    {errors.content?.message || '\u00A0'}
+                  </Typography>
+                </Box>
+              )}
+            />
+          </form>
+        </Box>
+      </CuModal>
+      <CuToast
+        open={isOpen}
+        message={toastProps.message}
+        severity={toastProps.severity}
+        onClose={closeToast}
+      />
+    </>
+  )
+}
+
+export default ReportModal

src/app/report/panel/ReportTypeSelect.tsx → src/components/ReportTypeSelect.tsx

@@ -1,27 +1,24 @@
 import React from 'react'
-import { Select, MenuItem, Box } from '@mui/material'
+import { Select, MenuItem, Box, Typography } from '@mui/material'
 import CuTextFieldLabel from '@/components/CuTextFieldLabel'
 
 interface IReportTypeSelectProps {
   field: any
   label: string
-  options: string[]
 }
 
-const ReportTypeSelect = ({
-  field,
-  label,
-  options,
-}: IReportTypeSelectProps) => {
+const ReportTypeSelect = ({ field, label }: IReportTypeSelectProps) => {
+  const options = ['광고', '비방', '선전성', '도배', '기타']
   return (
     <Box style={{ display: 'flex', alignItems: 'center' }}>
       <CuTextFieldLabel htmlFor={field.name} style={{ width: '120px' }}>
-        {label}
+        <Typography variant="Body2">{label}</Typography>
       </CuTextFieldLabel>
       <Select
         labelId={`${field.name}-label`}
         {...field}
         sx={{ width: '200px' }}
+        placeholder="신고 유형을 선택해주세요."
       >
         {options.map((option) => (
           <MenuItem key={option} value={option}>