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.
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
DNA 페이지 이미지 로직 변경 #451
DNA 페이지 이미지 로직 변경 #451
Conversation
Bundle SizesCompared against 1077694 Route: No significant changes found
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #451 +/- ##
=======================================
Coverage 89.34% 89.34%
=======================================
Files 44 44
Lines 338 338
Branches 61 61
=======================================
Hits 302 302
Misses 36 36 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
그당시에는 next.js를 쓰니까 뭔가 페이지 보이기전 server-side에서 이미지를 만들어야 한다는 생각에 갖혀있었던것 같아요!!
next의 api router를 이용해서 필요할 때 이미지를 만드니까, 페이지 로드에 들어가는 시간이 확실이 많이 단축된 것 같네요! 감사합니다 😀
style={{ | ||
width: '375px', | ||
height: '666px', | ||
}} | ||
src={HOISTING_IMAGE_BY_GROUP[group as Group]} | ||
alt={'dna_' + group} | ||
width={375} | ||
height={666} | ||
/> | ||
<span |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다운받는 사진의 화질이 안좋은 문제는 이부분에서 사진 비율에 맞게 이미지 자체 크기를 키우면 되지 않을까 싶어요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
width={375}
height={666}
이부분을 2, 3배수로 바꾸서 확인해보면 좋을 것 같습니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이미지 안의 요소들이 절대 주소로 되어 있어서, 다음 PR에 나눠서 해보겠읍니다 ~~ 의견 감사드려용 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
dynamic load를 위해 파일을 분리했어요
imageDownloadPC( | ||
`/api/dna-image?group=${group}&nickname=${userInfo?.nickname}&position=${userInfo?.position}`, | ||
'dna', | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
api route를 이용해 이미지를 저장해요
<DNAImageDownloadModal | ||
downloadableBase64={downloadableImage.base64} | ||
imageSrc={`/api/dna-image?group=${group}&nickname=${userInfo?.nickname}&position=${userInfo?.position}`} | ||
isShowing={isImageModalShowing} | ||
onClose={() => setIsImageModalShowing(false)} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
api route를 이용해 이미지를 렌더링해요
🤔 해결하려는 문제가 무엇인가요?
🎉 변경 사항
API route를 이용해서 필요할 때 이미지를 동적으로 만들도록 했어요
Modal을 lazy load 해 초기 이미지 요청을 지연시켜요