[FE] feat : 이미지 스켈레톤 적용 #1055
Open
[FE] feat : 이미지 스켈레톤 적용 #1055
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
- 이미지 컴포넌트를 children으로 받아서, 로드 전에는 스켈레톤을 띄우는 컴포넌트 구현
- 스켈레톤 배경색 변경 - 오타 수정
- 슬라이드 너비에 따라 이미지 사이즈 구하는 훅(useSlideImgSize) 생성 - 슬라이드 이미지 스타일 컴포넌트 분리
BadaHertz52
commented
Jan 14, 2025
| @@ -0,0 +1,38 @@ | |||
| import { useEffect, useState } from 'react'; | |||
There was a problem hiding this comment.
구현 배경
홈 페이지의 경우, 이미지가 퍼센트로 설정되어 있고 768px이하에서 height가 설정되어 있지 않아서 이미지에 따라 자동으로 설정되는 상황이었어요. slideRef로 width를 받아올 수 있어서 캐러셀 이미지 비율을 사용해 height를 지정하는 방식을 사용했어요.
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.
🚀 어떤 기능을 구현했나요 ?
이미지 사이즈
이미지에 대한 자유로운 스타일링과 기존에 사용된 이미지에 적용을 위해, children으로 이미지를 받아오도록 했어요.
다만, 스켈레톤이 화면에 제대로 표시되기 위해 이미지 로드되기 전부터 해당 이미지 사이즈가 필요했어요. 그래서 width, height를 사이즈로 받아오도록 했어요.
🔥 어떻게 해결했나요 ?
홈 페이지 캐러셀에 스켈레톤 적용 화면
-.mov
리뷰 연결 페이지에 스켈레톤 적용 화면
-.mov
📝 어떤 부분에 집중해서 리뷰해야 할까요?
스켈레톤 디자인
사전에 디자인 회의가 없어서, 제가 임의로 스타일링 했어요. 이에 대한 팀원들 의견이 궁금해요.
📚 참고 자료, 할 말