[온보딩] 썸네일 미리보기 이미지 짤리는 현상 #395
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
hoeun0723
approved these changes
Feb 22, 2024
| accept='.jpg, .jpeg, .png, .svg' | ||
| accept='.jpg, .jpeg, .png' |
There was a problem hiding this comment.
맞아요 ㅠㅠ svg는 어떤 파일을 하든 깨지더라구요 step06 썸네일 부분에서!
src/hooks/common/usePreviewImage.tsx
Outdated
Comment on lines
9
to
11
| /**@todo 이미지 최소 height 상의 필요*/ | ||
| const MIN_IMAGE_HEIGHT = 400; | ||
|
|
There was a problem hiding this comment.
흠 그러게요.. 이 부분은 기디와 함께 이야기 해봐도 좋을 거 같습니다. 아무래도 작은 이미지에 대한 예외처리가 필요할거 같긴 하군요.
There was a problem hiding this comment.
그러게요🤔 기디와 논의하는 게 아무래도 좋을 것 같아요..!
urjimyu
approved these changes
Feb 23, 2024
| @@ -49,7 +49,7 @@ const ThumbnailInput = (props: ThumbnailInputProps) => { | |||
| <S.IcEmptyThumbnailWrapper> | |||
| <input | |||
| type='file' | |||
| accept='.jpg, .jpeg, .png, .svg' | |||
| accept='.jpg, .jpeg, .png' | |||
There was a problem hiding this comment.
폰 이미지 형식인 '.heic'도 추가하면 좋을 것 같아요~!
There was a problem hiding this comment.
아하 지민님 코드리뷰 하면서 .heic 도 있구나 했는 폰 이미지 형식이군요~!
src/hooks/common/usePreviewImage.tsx
Outdated
Comment on lines
9
to
11
| /**@todo 이미지 최소 height 상의 필요*/ | ||
| const MIN_IMAGE_HEIGHT = 400; | ||
|
|
There was a problem hiding this comment.
그러게요🤔 기디와 논의하는 게 아무래도 좋을 것 같아요..!
|
다양한 경우를 섬세하게 테스트하고 사용성을 고려해서 수정작업한 게 느껴집니다!👍👍 너무너무 고생 많으셨고 논의사항 기디와 이야기하고 공유해주시면 될 것 같아요:) |
imeureka
approved these changes
Feb 23, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
이슈 넘버
구현 사항
Need Review
제 컴퓨터에 저장되어 있는 이미지 파일을 이용하여 모든 경우의 수를 대비하고자 하였습니다.
그에 따른 고민을 적어볼게요!!
미리 보기 이미지가 짤릴 때
파일명 한글일 때??
-> 스윗 장정안 사원증 프로필.png 1542x 1980
-> 최종 post에서 안됨. imageUrl값 길어서.
-> 서버에게 최대 imageUrl 값을 늘려달라고 요청하는 방법과 파일명이 한글일 경우 따로 파싱하는 방법이 있을 것 같습니다.
파일 확장자가 svg일 때?
-> svg파일은 모든 파일이 미리보기는 잘 되나, 최종 post 후 안됨.
-> jpg jpeg png 전부 다 잘됨. 이 중에 안되는 경우는 파일 자체가 이상한 경우.
-> 따라서 svg의 업로드를 전부 막아놨습니다.
이미지의 크기가 작을 때,
-> png의 경우에도, 24 x 24 의 경우 보이질 않음.
-> height 100% 하니 잘 보임.
-> 그러나 height를 100%를 하면 세로가 긴 이미지 파일의 위치가 이상해짐.
-> height: inherit 방법도 있지만 이 방법도 세로가 긴 이미지 파일의 위치가 이상해짐.
그래서 생각한 해결책은, 이미지의 width나 height의 조건을 줘서 일정 부분보다 작으면 아예 업로드가 안되게 만들어 버리는 것입니다.
width나 height에 어떤 부분에 대해 최소 값을 줄 것인지에 대한 여러분들의 의견이 궁금합니다!!.
현재는 제가 임의로 height > 400px인 경우에만 업로드 되도록 해놨습니다!
📸 스크린샷
Reference