[SWEP-91] 메모장 사진/텍스트 저장 관련 API 에러 처리 및 @Middlewares() (#194)

[asjasj3964]

Sweepic Server PR List

close #193

⚒️develop의 최신 커밋을 pull 받았나요?

• 최신 커밋 업데이트

🔍️ 이 PR을 통해 해결하려는 문제가 무엇인가요?

어떤 기능을 구현한건지, 이슈 대응이라면 어떤 이슈인지 PR이 열리게 된 계기와 목적을 Reviewer 들이 쉽게 이해할 수 있도록 적어 주세요
일감 백로그 링크나 다이어그램, 피그마를 첨부해도 좋아요

• 메모장 사진/텍스트 저장 관련 API 에러 처리
• Express 라우팅 방식 대신 @Middlewares() 데코레이터로 미들웨어 적용
• app.post('/memo/image-format/folders', imageUploader.single('image')); 와 같이 미들웨어를 등록했을 때 발생하는 문제
  • 폴더명이 중복되거나 존재하지 않은 폴더를 조회했을 경우에 multerS3의 key 함수에서 callback(err)만 호출되고 Express의 next(err)로 전달되지 않습니다. -> 에러 처리 잘 넘어가지 않아서 CORS 관련 에러가 발생합니다.
  • swagger-autogen이 이를 자동 감지하여 불필요하게 docs/v1에 뜨게 됩니다.

✨ 이 PR에서 핵심적으로 변경된 사항은 무엇일까요? (핵심 작업 내용)

문제를 해결하면서 주요하게 변경된 사항들을 적어 주세요

• @middlewares() 데코레이터 사용 시 Express 표준 미들웨어로 변환해주어야 합니다.
• 사진 S3 저장 multer 미들웨어(imageUploader) 및 사진 업로드(저장 X) multer 미들웨어(upload)를 Express 표준 미들웨어로 구현

  // src/ai/ai-upload.middleware.ts
  
  import {Request, Response, NextFunction} from 'express';
  import upload from './ai-upload.js';
  
  export const uploadMiddleware = (
    req: Request,
    res: Response,
    next: NextFunction,
  ) => {
    upload.single('base64_image')(req, res, err => {
      if (err) {
        next(err);
      } else {
        next();
      }
    });
  };
  

  // src/s3/image.uploader.middleware.ts
  
  import {Request, Response, NextFunction} from 'express';
  import {imageUploader} from './image.uploader.js';
  
  export const ImageUploadMiddleware = (
    req: Request,
    res: Response,
    next: NextFunction,
  ) => {
    imageUploader.single('image')(req, res, err => {
      if (err) {
        next(err);
      }
      next();
    });
  };
  

  • imageUploader multer에서 에러가 발생하면 callback(err)를 호출하게 되며 이를 next(err)로 변환해줘야 Express의 에러 핸들러까지 전달됩니다.
• 해당 API controller 상단에 @Middlewares()로 미들웨어 적용

  // src/controllers/memo-createFolderOCR.Controller.ts
  
  @Route('memo')
  export class MemoCreateUpdateOCRController extends Controller {
    ...
    @Post('/text-format/folders')
    @Middlewares(uploadMiddleware)
    @Tags('memo-ai')
    ...
    public async createFolderOCR(
      @Request() req: ExpressRequest,
      @FormField('folder_name') folderName: string,
    ): Promise<ITsoaSuccessResponse<{folder_id: string; image_text: string}>> {
      try {
        ...
      }
    }
  }
  

  // src/controllers/memo-updateFolderOCR.Controller.ts
  
  @Route('memo')
  export class MemoCreateFolderOCRController extends Controller {
    ...
    @Patch('/text-format/folders/:folderId')
    @Middlewares(uploadMiddleware)
    @Tags('memo-ai')
    ...
    public async updateFolderOCR(
      @Request() req: ExpressRequest,
      @Path('folderId') folderId: number,
    ): Promise<ITsoaSuccessResponse<{folder_id: string; image_text: string}>> {
      try {
        ...
      } 
    }
  }
  

  // src/controllers/tsoa.memo-folder.controller.ts
  
  @Route('memo')
  export class MemoFolderController extends Controller {
     ...
    @Post('/image-format/folders')
    @Middlewares(ImageUploadMiddleware)
    @Tags('memo-folder-controller')
    ...
    public async handlerMemoFolderImageAdd(
      @Request() req: ExpressRequest,
      @FormField() folderName: string,
    ): Promise<ITsoaSuccessResponse<MemoFolderImageResponseDto>> {
      try {
       ...
      }
    }
  

  // src/controllers/tsoa.memo-image.controller.ts
  
  @Route('memo')
  export class MemoImageController extends Controller {
    ...
    @Post('/image-format/folders/:folderId')
    @Middlewares(ImageUploadMiddleware)
    @Tags('memo-image-controller')
    ...
    public async handlerMemoImageAdd(
      @Request() req: ExpressRequest,
      @Path('folderId') targetFolderId: string,
    ): Promise<ITsoaSuccessResponse<MemoFolderImageResponseDto>> {
      try {
        ...
      }
    }
  

🤚 동작 확인

기능을 실행했을 때 정상 동작하는지 여부를 확인하고 스크린 샷을 올려주세요

• yarn lint, compile, pretest, build, 타입 오류 검사
  
• 폴더 생성 및 사진 저장 API
  • 이미 존재하는 폴더명을 입력할 경우
    
    
  • 성공적으로 저장될 경우
    
    
• 사진 저장 API
  • 존재하지 않은 폴더에 저장할 경우
    
    
  • 성공적으로 저장될 경우
    
    
• 폴더 업데이트 및 OCR 수행 API
  • 존재하지 않은 폴더에 저장할 경우
    
    
  • 성공적으로 저장될 경우
    
    
• 폴더 생성 및 OCR 수행
  • 이미 존재하는 폴더명을 입력할 경우
    
    
  • 성공적으로 저장될 경우
    
    
• docs/v1에 Express 라우팅 방식으로 생겼던 불필요한 API들이 사라진 것을 확인할 수 있습니다.
  

🔖 핵심 변경 사항 외에 추가적으로 변경된 부분이 있나요?

없으면 "없음" 이라고 기재해 주세요

• 없음

🙏 Reviewer 분들이 이런 부분을 신경써서 봐 주시면 좋겠어요

개발 과정에서 다른 분들의 의견은 어떠한지 궁금했거나 크로스 체크가 필요하다고 느껴진 코드가 있다면 남겨주세요

• 배포 환경에서는 스웨거에 폴더 생성 및 OCR 수행 API / 폴더 업데이트 및 OCR 수행 API가 파일 업로드란만 나타날 뿐 아무 처리 되지 않은 채로 되어 있는데 로컬 환경에서는 위와 같이 정상적으로 나타납니다. 배포 과정에서 tsoa.json의 spec이 덮어쓰여진 건가 싶지만 확실하진 않습니다. 계속 찾아보겠지만 원인이 짐작되신다면 알려주시면 감사하겠습니다.

🩺 이 PR에서 테스트 혹은 검증이 필요한 부분이 있을까요?

테스트가 필요한 항목이나 테스트 코드가 추가되었다면 함께 적어주세요

• 없음

📌 PR 진행 시 이러한 점들을 참고해 주세요

• Reviewer 분들은 코드 리뷰 시 좋은 코드의 방향을 제시하되, 코드 수정을 강제하지 말아 주세요.
• Reviewer 분들은 좋은 코드를 발견한 경우, 칭찬과 격려를 아끼지 말아 주세요.
• Review는 특수한 케이스가 아니면 Reviewer로 지정된 시점 기준으로 2일 이내에 진행해 주세요.
• Comment 작성 시 Prefix로 P1, P2, P3 를 적어 주시면 Assignee가 보다 명확하게 Comment에 대해 대응할 수 있어요
  • P1 : 꼭 반영해 주세요 (Request Changes) - 이슈가 발생하거나 취약점이 발견되는 케이스 등
  • P2 : 반영을 적극적으로 고려해 주시면 좋을 것 같아요 (Comment)
  • P3 : 이런 방법도 있을 것 같아요~ 등의 사소한 의견입니다 (Chore)

---

📝 Assignee를 위한 CheckList

• To-Do Item