codedang icon indicating copy to clipboard operation
codedang copied to clipboard

feat(be): implement image upload

Open Jaehyeon1020 opened this issue 1 year ago • 9 comments
trafficstars

Description

Closes #1495

이미지 업로드 기능을 구현합니다. Problem description에 이미지를 삽입하는 용도로 사용이 가능합니다.

Additional context

  • 이미지의 최대 크기는 5MB입니다.
  • src 속성에 업로드된 이미지의 url이 담겨 반환됩니다. img 태그의 src 속성에 넣어 이미지 삽입 기능의 구현이 가능합니다.

참고 스크린샷 스크린샷 2024-02-28 오후 10 01 17


Before submitting the PR, please make sure you do the following

  • [x] Read the Contributing Guidelines
  • [x] Read the Contributing Guidelines and follow the Commit Convention
  • [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • [ ] Ideally, include relevant tests that fail without this PR but pass with it.

Jaehyeon1020 avatar Feb 27 '24 04:02 Jaehyeon1020

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
codedang ✅ Ready (Inspect) Visit Preview May 29, 2024 1:23am

vercel[bot] avatar Feb 27 '24 04:02 vercel[bot]

균서님이랑 저랑 branch 전환해서 이미지 파일 바꿔서 시도했는데 아래 에러가 공통적으로 떠서.. 혹시 확인가능하실까요?

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field Image.src.",
      "locations": [
        {
          "line": 1,
          "column": 64
        }
      ],
      "path": [
        "uploadImage",
        "src"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "stacktrace": [
          "Error: Cannot return null for non-nullable field Image.src.",
          "    at completeValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:605:13)",
          "    at executeField (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:500:19)",
          "    at executeFields (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:414:22)",
          "    at completeObjectValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:925:10)",
          "    at completeValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:646:12)",
          "    at completeValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:595:23)",
          "    at /workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:497:9",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
          "    at execute (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/requestPipeline.ts:547:31)",
          "    at processGraphQLRequest (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/requestPipeline.ts:433:26)",
          "    at internalExecuteOperation (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/ApolloServer.ts:1313:12)",
          "    at runHttpQuery (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/runHttpQuery.ts:232:27)",
          "    at runPotentiallyBatchedHttpQuery (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/httpBatching.ts:85:12)",
          "    at ApolloServer.executeHTTPGraphQLRequest (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/ApolloServer.ts:1087:14)"
        ]
      }
    }
  ],
  "data": null
}

cho-to avatar Feb 29 '24 09:02 cho-to

균서님이랑 저랑 branch 전환해서 이미지 파일 바꿔서 시도했는데 아래 에러가 공통적으로 떠서.. 혹시 확인가능하실까요?

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field Image.src.",
      "locations": [
        {
          "line": 1,
          "column": 64
        }
      ],
      "path": [
        "uploadImage",
        "src"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "stacktrace": [
          "Error: Cannot return null for non-nullable field Image.src.",
          "    at completeValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:605:13)",
          "    at executeField (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:500:19)",
          "    at executeFields (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:414:22)",
          "    at completeObjectValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:925:10)",
          "    at completeValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:646:12)",
          "    at completeValue (/workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:595:23)",
          "    at /workspace/node_modules/.pnpm/[email protected]/node_modules/graphql/execution/execute.js:497:9",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
          "    at execute (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/requestPipeline.ts:547:31)",
          "    at processGraphQLRequest (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/requestPipeline.ts:433:26)",
          "    at internalExecuteOperation (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/ApolloServer.ts:1313:12)",
          "    at runHttpQuery (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/runHttpQuery.ts:232:27)",
          "    at runPotentiallyBatchedHttpQuery (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/httpBatching.ts:85:12)",
          "    at ApolloServer.executeHTTPGraphQLRequest (/workspace/node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/server/src/ApolloServer.ts:1087:14)"
        ]
      }
    }
  ],
  "data": null
}

아마 일건님이 추가로 작업하신 내용과 관련해서 문제가 있을 것 같은데, 제가 아직 코드를 정리를 하지 못해서 확인 후 수정하고 나서 다시 알려드리겠습니다!

Jaehyeon1020 avatar Feb 29 '24 10:02 Jaehyeon1020

Images automagically compressed by Calibre's image-actions

Compression reduced images by 25.2%, saving 19.63 KB.

Filename Before After Improvement Visual comparison
backend/apps/admin/src/problem/mock/sample.png 77.86 KB 58.24 KB -25.2% View diff

19 images did not require optimisation.

github-actions[bot] avatar Mar 01 '24 07:03 github-actions[bot]

@cho-to 오류 해결 되었습니다~

Jaehyeon1020 avatar Mar 01 '24 07:03 Jaehyeon1020

#1536 PR에서 AWS 에 S3 bucket 생성할 수 있도록 코드 작성해놨습니다. 나중에 머지할 때 #1536번 먼저 머지하고 나서 해당 PR 머지할 수 있도록 확인부탁드려요!

  • 머지되는대로 다시 커멘트 남길게요!

k1g99 avatar Mar 02 '24 16:03 k1g99

머지하기전에 백엔드채널이나 공지?..일반?..에 백엔드 서버 실행시키전에 Rebuild 해야하는거 공지하면 더 좋을 듯 함다

cho-to avatar Apr 02 '24 07:04 cho-to

@cho-to 넵 남기고 머지할게요~

Jaehyeon1020 avatar Apr 02 '24 07:04 Jaehyeon1020