fix: 수정 심사 시 이미지가 노출되지 않는 문제 수정

Author: MU-Software

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

@@ -17,6 +17,8 @@ import {
 } from "@mui/material";
 import * as React from "react";
 
+import { usePreviewImageData } from "./hooks";
+
 type SharedPreviewFieldProps = {
   originalDataset: Record<string, unknown>;
   previewDataset: Record<string, unknown>;
@@ -109,27 +111,40 @@ const WidthSpecifiedFallbackImage = styled(Common.Components.FallbackImage)({
 });
 
 export const PreviewImageField: React.FC<SharedPreviewFieldProps> = ({ originalDataset, previewDataset, name, label }) => {
-  const originalImage = originalDataset[name] as string;
-  const previewImage = previewDataset[name] as string;
+  const { originalImage, previewImage } = usePreviewImageData(originalDataset, previewDataset, name) || {};
 
-  return originalImage === previewImage ? (
+  return originalImage?.id === previewImage?.id ? (
     <Common.Components.Fieldset legend={label} style={{ width: "100%" }}>
-      <WidthSpecifiedFallbackImage src={previewImage} alt={label} errorFallback={<ImageFallback />} />
+      <Stack alignItems="center" justifyContent="center">
+        {previewImage?.file ? (
+          <WidthSpecifiedFallbackImage src={previewImage?.file || ""} alt={label} errorFallback={<ImageFallback />} />
+        ) : (
+          <Typography variant="caption" children="이미지를 지정하지 않았습니다." />
+        )}
+      </Stack>
     </Common.Components.Fieldset>
   ) : (
     <Box sx={{ my: 1 }}>
       <Accordion>
         <AccordionSummary>
           <Stack sx={{ width: "100%" }} direction="column" alignItems="flex-start" justifyContent="space-between">
             <Common.Components.Fieldset legend={label} style={{ width: "100%", backgroundColor: "rgba(255, 255, 0, 0.1)" }}>
-              <WidthSpecifiedFallbackImage src={previewImage} alt={label} errorFallback={<ImageFallback />} />
+              <Stack alignItems="center" justifyContent="center">
+                <WidthSpecifiedFallbackImage src={previewImage?.file || ""} alt={label} errorFallback={<ImageFallback />} />
+              </Stack>
             </Common.Components.Fieldset>
             <Typography variant="caption">기존 이미지를 보려면 여기를 클릭해주세요.</Typography>
           </Stack>
         </AccordionSummary>
         <AccordionDetails>
           <Common.Components.Fieldset legend={label} style={{ backgroundColor: "rgba(0, 64, 64, 0.1)" }}>
-            <WidthSpecifiedFallbackImage src={originalImage} alt={label} errorFallback={<ImageFallback />} />
+            <Stack alignItems="center" justifyContent="center">
+              {originalImage?.file ? (
+                <WidthSpecifiedFallbackImage src={originalImage?.file || ""} alt={label} errorFallback={<ImageFallback />} />
+              ) : (
+                <Typography variant="caption" children="기존 이미지를 지정하지 않았습니다." />
+              )}
+            </Stack>
           </Common.Components.Fieldset>
         </AccordionDetails>
       </Accordion>

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

@@ -1,5 +1,7 @@
 import * as Common from "@frontend/common";
 
+import BackendAdminAPISchemas from "../../../../../../packages/common/src/schemas/backendAdminAPI";
+
 const AdminAPIHooks = Common.Hooks.BackendAdminAPI;
 
 export const useModificationAuditData = <T extends Record<string, string>>(auditId: string) => {
@@ -14,3 +16,15 @@ export const useModificationAuditData = <T extends Record<string, string>>(audit
 
   return !audit || !originalData || !previewData ? null : { audit, originalData, previewData };
 };
+
+export const usePreviewImageData = (originalData: Record<string, unknown>, previewData: Record<string, unknown>, name: string) => {
+  const backendAdminClient = AdminAPIHooks.useBackendAdminClient();
+  const commonArgs = [backendAdminClient, "file", "publicfile"] as const;
+  const originalImageId = (originalData[name] as string) || "";
+  const previewImageId = (previewData[name] as string) || "";
+
+  const { data: originalImage } = AdminAPIHooks.useRetrieveQuery<BackendAdminAPISchemas.PublicFileSchema>(...commonArgs, originalImageId);
+  const { data: previewImage } = AdminAPIHooks.useRetrieveQuery<BackendAdminAPISchemas.PublicFileSchema>(...commonArgs, previewImageId);
+
+  return { originalImage, previewImage };
+};

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

@@ -13,7 +13,7 @@ export const UserExtPreviewSubPage: SubModificationAuditPageType = ({ originalDa
         <PreviewTextField originalDataset={originalData} previewDataset={previewData} name="username" label="계정 ID" />
         <PreviewTextField originalDataset={originalData} previewDataset={previewData} name="email" label="계정 이메일" />
       </Common.Components.Fieldset>
-      <PreviewImageField originalDataset={originalData} previewDataset={previewData} name="image" label="발표 이미지" />
+      <PreviewImageField originalDataset={originalData} previewDataset={previewData} name="image" label="프로필 이미지" />
       <Common.Components.Fieldset legend="별칭">
         <PreviewTextField originalDataset={originalData} previewDataset={previewData} multiline name="nickname_ko" label="별칭 (한국어)" />
         <PreviewTextField originalDataset={originalData} previewDataset={previewData} multiline name="nickname_en" label="별칭 (영어)" />