refactor: 관리자 메인 페이지에서 썸네일을 png대신 svg로 보여주도록 수정

frontend/src/__mocks__/mockData.ts

@@ -30,7 +30,7 @@ export const guestMaps: GuestMaps = {
     mapName: 'GUEST_TEST_MAP',
     mapDrawing:
       '{"width":800,"height":600,"mapElements":[{"id":2,"type":"rect","stroke":"#333333","points":["210,90","650,230"]},{"id":3,"type":"rect","stroke":"#333333","width":440,"height":140,"x":210,"y":90,"points":["210, 90","650, 230"]}]}',
-    mapImageUrl: '',
+    thumbnail: '',
     sharingMapId: 'JMTGR',
   },
 };

frontend/src/api/managerMap.ts

@@ -14,14 +14,14 @@ export interface QueryManagerMapParams {
 interface PostMapParams {
   mapName: string;
   mapDrawing: string;
-  mapImageSvg: string;
+  thumbnail: string;
 }
 
 interface PutMapParams {
   mapId: number;
   mapName: string;
   mapDrawing: string;
-  mapImageSvg: string;
+  thumbnail: string;
 }
 
 interface DeleteMapParams {
@@ -53,17 +53,17 @@ export const queryManagerMap: QueryFunction<
 export const postMap = ({
   mapName,
   mapDrawing,
-  mapImageSvg,
+  thumbnail,
 }: PostMapParams): Promise<AxiosResponse<never>> =>
-  api.post('/managers/maps', { mapName, mapDrawing, mapImageSvg });
+  api.post('/managers/maps', { mapName, mapDrawing, thumbnail });
 
 export const putMap = ({
   mapId,
   mapName,
   mapDrawing,
-  mapImageSvg,
+  thumbnail,
 }: PutMapParams): Promise<AxiosResponse<never>> =>
-  api.put(`/managers/maps/${mapId}`, { mapName, mapDrawing, mapImageSvg });
+  api.put(`/managers/maps/${mapId}`, { mapName, mapDrawing, thumbnail });
 
 export const deleteMap = ({ mapId }: DeleteMapParams): Promise<AxiosResponse<never>> =>
   api.delete(`/managers/maps/${mapId}`);

frontend/src/api/managerSpace.ts

@@ -21,7 +21,7 @@ export interface PostManagerSpaceParams {
     description: string;
     area: string;
     settingsRequest: ReservationSettings;
-    mapImageSvg: string;
+    thumbnail: string;
   };
 }
 
@@ -32,7 +32,7 @@ export interface PutManagerSpaceParams extends PostManagerSpaceParams {
 export interface DeleteManagerSpaceParams {
   mapId: number;
   spaceId: number;
-  mapImageSvg: string;
+  thumbnail: string;
 }
 
 export const queryManagerSpaces: QueryFunction<
@@ -71,6 +71,6 @@ export const putManagerSpace = ({
 export const deleteManagerSpace = ({
   mapId,
   spaceId,
-  mapImageSvg,
+  thumbnail,
 }: DeleteManagerSpaceParams): Promise<AxiosResponse<never>> =>
-  api.delete(`/managers/maps/${mapId}/spaces/${spaceId}`, { data: { mapImageSvg } });
+  api.delete(`/managers/maps/${mapId}/spaces/${spaceId}`, { data: { thumbnail } });

frontend/src/components/MapListItem/MapListItem.stories.tsx

@@ -10,10 +10,7 @@ export default {
 
 const Template: Story<Props> = (args) => <MapListItem {...args} />;
 
-const thumbnail = {
-  src: './images/luther.png',
-  alt: '루터회관 14F 공간',
-};
+const thumbnail = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="600px" viewBox="0 0 800 600"> <rect x="260" y="180" width="130" height="210" stroke="#333333" fill="none" strokewidth="3"></rect> </svg>`;
 
 export const Default = Template.bind({});
 Default.args = {

frontend/src/components/MapListItem/MapListItem.styles.ts

@@ -28,11 +28,10 @@ export const ImageInner = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`;
 
-export const Image = styled.img`
-  max-width: 100%;
-  max-height: 100%;
+  svg {
+    z-index: -1;
+  }
 `;
 
 export const TitleWrapper = styled.div`

frontend/src/components/MapListItem/MapListItem.tsx

@@ -1,12 +1,8 @@
-import { ReactNode, useState } from 'react';
-import MapDefault from 'assets/images/map-default.jpg';
+import { ReactNode } from 'react';
 import * as Styled from './MapListItem.styles';
 
 export interface Props {
-  thumbnail: {
-    src: string;
-    alt: string;
-  };
+  thumbnail: string;
   title: string;
   control?: ReactNode;
   selected?: boolean;
@@ -20,23 +16,10 @@ const MapListItem = ({
   selected = false,
   onClick = () => null,
 }: Props): JSX.Element => {
-  const [thumbnailSrc, setThumbnailSrc] = useState(thumbnail.src);
-
-  const onImgError = () => {
-    setThumbnailSrc(MapDefault);
-  };
-
   return (
     <Styled.Container role="listitem" selected={selected}>
       <Styled.ImageWrapper onClick={onClick}>
-        <Styled.ImageInner>
-          <Styled.Image
-            src={thumbnailSrc}
-            alt={thumbnail.alt}
-            onError={onImgError}
-            loading="lazy"
-          />
-        </Styled.ImageInner>
+        <Styled.ImageInner dangerouslySetInnerHTML={{ __html: `${thumbnail}` }} />
       </Styled.ImageWrapper>
       <Styled.TitleWrapper>
         <Styled.Title>{title}</Styled.Title>

frontend/src/pages/ManagerMain/units/MapDrawer.tsx

@@ -32,11 +32,11 @@ const MapDrawer = ({
           <Drawer.HeaderText>{organization}</Drawer.HeaderText>
           <Drawer.CloseButton />
         </Drawer.Header>
-        {maps.map(({ mapId, mapName, mapImageUrl }) => (
+        {maps.map(({ mapId, mapName, thumbnail }) => (
           <Styled.SpaceWrapper key={`map-${mapId}`}>
             <MapListItem
               onClick={() => onSelectMap(mapId, mapName)}
-              thumbnail={{ src: mapImageUrl, alt: mapName }}
+              thumbnail={thumbnail}
               title={mapName}
               selected={mapId === selectedMapId}
               control={

frontend/src/pages/ManagerMapEditor/ManagerMapEditor.tsx

@@ -129,20 +129,20 @@ const ManagerMapEditor = (): JSX.Element => {
       mapElements: mapElements.map(({ ref, ...props }) => props),
     });
 
-    const mapImageSvg = createMapImageSvg({
+    const thumbnail = createMapImageSvg({
       mapElements,
       spaces,
       width,
       height,
     });
 
     if (isEdit) {
-      updateMap.mutate({ mapId: Number(mapId), mapName: name, mapDrawing, mapImageSvg });
+      updateMap.mutate({ mapId: Number(mapId), mapName: name, mapDrawing, thumbnail });
 
       return;
     }
 
-    createMap.mutate({ mapName: name, mapDrawing, mapImageSvg });
+    createMap.mutate({ mapName: name, mapDrawing, thumbnail });
   };
 
   useListenManagerMainState({ mapId: Number(mapId) }, { enabled: isEdit });

frontend/src/pages/ManagerSpaceEditor/units/Form.tsx

@@ -67,13 +67,13 @@ const Form = ({
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
 
-    const mapImageSvg = generateSvg({ ...mapData, spaces: getSpacesForSvg() });
+    const thumbnail = generateSvg({ ...mapData, spaces: getSpacesForSvg() });
     const valuesForRequest = getRequestValues();
 
     if (selectedSpaceId === null) {
       onCreateSpace({
         space: {
-          mapImageSvg,
+          thumbnail,
           ...valuesForRequest.space,
           settingsRequest: { ...valuesForRequest.space.settings },
         },
@@ -85,7 +85,7 @@ const Form = ({
     onUpdateSpace({
       spaceId: selectedSpaceId,
       space: {
-        mapImageSvg,
+        thumbnail,
         ...valuesForRequest.space,
         settingsRequest: { ...valuesForRequest.space.settings },
       },
@@ -97,11 +97,11 @@ const Form = ({
     if (!window.confirm(MESSAGE.MANAGER_SPACE.DELETE_SPACE_CONFIRM)) return;
 
     const filteredSpaces = spaces.filter(({ id }) => id !== selectedSpaceId);
-    const mapImageSvg = generateSvg({ ...mapData, spaces: filteredSpaces });
+    const thumbnail = generateSvg({ ...mapData, spaces: filteredSpaces });
 
     onDeleteSpace({
       spaceId: selectedSpaceId,
-      mapImageSvg,
+      thumbnail,
     });
 
     resetForm();

frontend/src/types/common.ts

@@ -40,7 +40,7 @@ export interface MapItem {
   mapId: number;
   mapName: string;
   mapDrawing: MapDrawing;
-  mapImageUrl: string;
+  thumbnail: string;
   sharingMapId: string;
 }