Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/toast UI 이미지 핸들러 #454 #895

Merged
merged 7 commits into from
May 23, 2024
Merged

Feature/toast UI 이미지 핸들러 #454 #895

merged 7 commits into from
May 23, 2024

Conversation

publdaze
Copy link
Contributor

@publdaze publdaze commented May 18, 2024 •
edited
Loading

연관 이슈

작업 요약

  • Toast UI 에디터에 이미지 업로드 시 서버에 이미지 저장 후 url 받아와 해당 url의 이미지 띄워주도록 처리

작업 상세 설명

  • Toast UI 에디터에서 기본적으로 제공하는 이미지 업로드 로직은 파일이 base64로 인코딩되어 삽입되는 형태여서 글자수가 길어져 게시글 전체 글자수 제한에 걸리게 되는 이슈가 있었습니다.
  • 서버에 이미지 업로드하여 해당 url로 처리하는 방식으로 변경하여 해당 이슈 해결하였습니다.
  • 로딩 처리 및 이미리 업로드 중 텍스트 입력 가능하도록 처리하기 위해 Toast UI Editor에서 기본적으로 제공하는 addImageBlobHook의 callback 파라미터 사용하는 대신 선택 범위에 텍스트 넣어주는 방식으로 처리하였습니다.
  • 파일 사이즈 제한 초과 및 업로드 실패 시 에러 토스트 메시지 띄워주도록 처리하였습니다.
BEFORE AFTER
image image

리뷰 요구사항

  • 궁금한 부분 편하게 질문 주셔도 됩니다~!

Preview

Note

로딩 상태 확인을 위해 throttling slow 3g로 맞춰놓고 시연하였습니다. 실제로는 훨씬 빨리 업로드 완료됩니다.

2024-05-18.11.11.17.mov

@publdaze publdaze added the Feature 기능 추가 label May 18, 2024
@publdaze publdaze requested review from redzzzi and oxomi May 18, 2024 13:38
@publdaze publdaze self-assigned this May 18, 2024
publdaze
publdaze commented May 18, 2024
View reviewed changes
src/constants/apiResponseMessage.ts
Comment on lines +61 to +68
export const MAX_FILE_SIZE = 30 * 1024 * 1024; // Byte
export const FILE = {
success: {},
error: {
uploadFail: '업로드가 실패하였습니다.',
exceedFileSize: `파일이 제한된 크기(${formatFileSize(MAX_FILE_SIZE)})를 초과하였습니다.`,
},
} as const;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@redzzzi

  • 파일 업로더 세부 기능 구현 #479 assignee 맡으셨던데 해당 이슈 처리중인가요? 백엔드에 문의해봤는데 이미지 포함한 파일 요청 모두 동일한 크기로 제한 걸려있다고 하더라구요! 해당 이슈 처리하면서 요부분 가져다 사용하시면 될 것 같아요!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 감사합니다!

oxomi
oxomi approved these changes May 23, 2024
View reviewed changes
Copy link
Collaborator

@oxomi oxomi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 감사합니다!

@publdaze publdaze merged commit 1d46312 into develop May 23, 2024
1 check passed
@publdaze publdaze deleted the feature/toast_UI_이미지_핸들러_#454 branch May 23, 2024 14:06
@redzzzi
Copy link
Collaborator

redzzzi commented Jun 2, 2024

두 개 이상의 이미지 파일을 업로드 하는 경우, 하나만 반영이 되는 것 같습니다!

@publdaze
Copy link
Contributor Author

publdaze commented Jun 4, 2024

두 개 이상의 이미지 파일을 업로드 하는 경우, 하나만 반영이 되는 것 같습니다!

@redzzzi
Toast UI 에디터에서 다중 이미지 업로드 기능은 따로 제공 안 해주는 걸로 알아서 별도의 자체 기능 구현이 필요합니다!
필요한 기능이면 따로 이슈 파서 구현해보셔도 좋을 것 같네용~! 👍👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oxomi oxomi oxomi approved these changes

@redzzzi redzzzi Awaiting requested review from redzzzi

Assignees

@publdaze publdaze

Labels
Feature 기능 추가
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

toast UI 이미지 핸들러
3 participants
@publdaze @redzzzi @oxomi