Merge pull request #164 from boostcampwm2023/perf/163-shapes-svg-image

[Perf] 모양 파일을 png에서 svg로 변경

BE/src/shapes/shapes.controller.ts

@@ -1,12 +1,4 @@
-import {
-  Controller,
-  Get,
-  Header,
-  InternalServerErrorException,
-  Param,
-  StreamableFile,
-  UseGuards,
-} from "@nestjs/common";
+import { Controller, Get, Header, Param, UseGuards } from "@nestjs/common";
 import { ShapesService } from "./shapes.service";
 import { Shape } from "./shapes.entity";
 import { GetUser } from "src/auth/get-user.decorator";
@@ -24,18 +16,11 @@ export class ShapesController {
 
   @Get("/:uuid")
   @UseGuards(JwtAuthGuard)
-  @Header("Content-Type", "image/png")
+  @Header("Content-Type", "image/svg+xml")
   async getShapeFilesByUuid(
     @Param("uuid") uuid: string,
     @GetUser() user: User,
-  ): Promise<StreamableFile> {
-    const stream = await this.shapesService.getShapeFileByUuid(uuid, user);
-    try {
-      return new StreamableFile(stream);
-    } catch (error) {
-      throw new InternalServerErrorException(
-        "파일을 읽어오는 도중 서버에서 문제가 발생했습니다.",
-      );
-    }
+  ): Promise<string> {
+    return this.shapesService.getShapeFileByUuid(uuid, user);
   }
 }

BE/src/shapes/shapes.default.ts

@@ -1,7 +1,19 @@
 import { Shape } from "./shapes.entity";
 
 export const defaultShapes: Partial<Shape>[] = [
-  { shapePath: "test-basic-shape-1.png" },
-  { shapePath: "test-basic-shape-2.png" },
-  { shapePath: "test-basic-shape-3.png" },
+  { shapePath: "BasicShape1.svg" },
+  { shapePath: "BasicShape2.svg" },
+  { shapePath: "BasicShape3.svg" },
+  { shapePath: "BasicShape4.svg" },
+  { shapePath: "BasicShape5.svg" },
+  { shapePath: "BasicShape6.svg" },
+  { shapePath: "BasicShape7.svg" },
+  { shapePath: "BasicShape8.svg" },
+  { shapePath: "BasicShape9.svg" },
+  { shapePath: "BasicShape10.svg" },
+  { shapePath: "BasicShape11.svg" },
+  { shapePath: "BasicShape12.svg" },
+  { shapePath: "BasicShape13.svg" },
+  { shapePath: "BasicShape14.svg" },
+  { shapePath: "BasicShape15.svg" },
 ];

BE/src/shapes/shapes.service.ts

@@ -1,10 +1,9 @@
 import { Injectable, UnauthorizedException } from "@nestjs/common";
 import { ShapesRepository } from "./shapes.repository";
-import { getFileFromS3 } from "src/utils/e3";
+import { getShapeFromS3 } from "src/utils/e3";
 import { defaultShapes } from "./shapes.default";
 import { Shape } from "./shapes.entity";
 import { User } from "src/auth/users.entity";
-import { Readable } from "stream";
 
 @Injectable()
 export class ShapesService {
@@ -19,13 +18,14 @@ export class ShapesService {
     return shapeFiles;
   }
 
-  async getShapeFileByUuid(uuid: string, user: User): Promise<Readable> {
+  async getShapeFileByUuid(uuid: string, user: User): Promise<string> {
     const shape = await this.shapesRepository.getShapeByUuid(uuid);
-    const { userId, id } = await shape.user;
+    const { userId, id } = shape.user;
 
     if (userId !== "commonUser" && id !== user.id) {
       throw new UnauthorizedException();
     }
-    return getFileFromS3(shape.shapePath);
+
+    return getShapeFromS3(shape.shapePath);
   }
 }

BE/src/utils/e3.ts

@@ -27,6 +27,31 @@ export function getFileFromS3(filePath: string): Readable {
   return readStream;
 }
 
+export async function getShapeFromS3(filePath: string): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const readStream = s3
+      .getObject({
+        Bucket: "byeolsoop-bucket",
+        Key: filePath,
+      })
+      .createReadStream();
+
+    let data = "";
+
+    readStream.on("data", (chunk) => {
+      data += chunk;
+    });
+
+    readStream.on("end", () => {
+      resolve(data);
+    });
+
+    readStream.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+
 // export async function uploadFileToS3(): Promise<void> {
 //   await s3
 //     .putObject({