feat: 어드민에 수정 심사 반려 사유 기능 추가

Author: MU-Software

apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx

@@ -16,6 +16,7 @@ import {
   Typography,
 } from "@mui/material";
 import * as React from "react";
+import * as R from "remeda";
 
 type SharedPreviewFieldProps = {
   originalDataset: Record<string, unknown>;
@@ -164,33 +165,55 @@ type SimplifiedModificationAudit = {
   created_at: string;
   created_by: string;
   status: string;
+  comments?: {
+    content: string;
+    created_by: { is_superuser: boolean; nickname: string };
+  }[];
 };
 
-export const ModificationAuditProperties: React.FC<{ audit: SimplifiedModificationAudit }> = ({ audit }) => (
-  <Table>
-    <TableHead>
-      <TableRow>
-        <TableCell>속성</TableCell>
-        <TableCell>값</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell>심사 ID</TableCell>
-        <TableCell>{audit.id}</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>심사 요청 시간</TableCell>
-        <TableCell>{new Date(audit.created_at).toLocaleString()}</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>심사 요청자</TableCell>
-        <TableCell>{audit.created_by}</TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>심사 상태</TableCell>
-        <TableCell>{audit.status}</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
+export const ModificationAuditProperties: React.FC<{ audit: SimplifiedModificationAudit }> = ({ audit }) => {
+  let rejectReason: React.ReactNode = null;
+  if (R.isArray(audit.comments) && !R.isEmpty(audit.comments.filter((c) => c.created_by.is_superuser))) {
+    const comment = audit.comments.filter((c) => c.created_by.is_superuser)[0];
+    rejectReason = (
+      <>
+        <TableRow>
+          <TableCell>반려 사유</TableCell>
+          <TableCell>
+            <pre style={{ whiteSpace: "pre-wrap" }}>{comment.content}</pre>(by {comment.created_by.nickname})
+          </TableCell>
+        </TableRow>
+      </>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>속성</TableCell>
+          <TableCell>값</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>심사 ID</TableCell>
+          <TableCell>{audit.id}</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>심사 요청 시간</TableCell>
+          <TableCell>{new Date(audit.created_at).toLocaleString()}</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>심사 요청자</TableCell>
+          <TableCell>{audit.created_by}</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>심사 상태</TableCell>
+          <TableCell>{audit.status}</TableCell>
+        </TableRow>
+        {rejectReason}
+      </TableBody>
+    </Table>
+  );
+};

apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx

@@ -1,5 +1,5 @@
 import * as Common from "@frontend/common";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
 
@@ -42,22 +42,25 @@ export const ApproveSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({
         </Typography>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} color="error" children="취소" />
-        <Button onClick={onApproveClick} color="primary" variant="contained" children="승인" />
+        <Button loading={approveModificationAuditMutation.isPending} onClick={onClose} color="error" children="취소" />
+        <Button loading={approveModificationAuditMutation.isPending} onClick={onApproveClick} color="primary" variant="contained" children="승인" />
       </DialogActions>
     </Dialog>
   );
 };
 
 export const RejectSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
   const rejectModificationAuditMutation = Common.Hooks.BackendAdminAPI.useRejectModificationAuditMutation(backendAdminClient, modificationAuditId);
 
   const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const onRejectClick = () => {
-    rejectModificationAuditMutation.mutate(undefined, {
+    if (!inputRef.current) return;
+
+    rejectModificationAuditMutation.mutate(inputRef.current.value.trim(), {
       onSuccess: () => {
         addSnackbar("수정 심사가 반려되었습니다.", "success");
         onClose();
@@ -80,10 +83,13 @@ export const RejectSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({
           <br />
           반려 후에는 다시 승인할 수 없습니다!
         </Typography>
+        <Common.Components.Fieldset legend="반려 사유 (선택)">
+          <TextField fullWidth multiline minRows={4} inputRef={inputRef} label="반려 사유" />
+        </Common.Components.Fieldset>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} color="error" children="취소" />
-        <Button onClick={onRejectClick} color="primary" variant="contained" children="반려" />
+        <Button loading={rejectModificationAuditMutation.isPending} onClick={onClose} color="error" children="취소" />
+        <Button loading={rejectModificationAuditMutation.isPending} onClick={onRejectClick} color="primary" variant="contained" children="반려" />
       </DialogActions>
     </Dialog>
   );

apps/pyconkr-participant-portal/src/components/pages/modification_audit_preview.tsx

@@ -70,7 +70,7 @@ const RejectedAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language,
       <>
         {auditRejectedText + rejectReasonIsText}
         <br />
-        {rejectedReason}
+        <pre style={{ whiteSpace: "pre-wrap" }}>{rejectedReason}</pre>
       </>
     );
   }