[Feat] UI 사용성 개선사항 반영 #115
Merged
Conversation
This file contains hidden or 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
🎉 Deploy Previewhttps://lettering-3xnxdd1lf-yyypearls-projects.vercel.app |
🎉 Deploy Previewhttps://lettering-kjjb5ednm-yyypearls-projects.vercel.app |
hyo-4
approved these changes
Dec 20, 2024
Member
|
스크롤 오류 공유 고마워!! 확인확인 |
hyo-4
reviewed
Dec 20, 2024
| name="viewport" | ||
| content="width=device-width, initial-scale=1, maximumScale=1, user-scalable=no" | ||
| /> | ||
| <link rel="apple-touch-icon" href="/favicon_114.png"></link> |
Contributor
Author
There was a problem hiding this comment.
응응 근데 북마크는 확인해보니 잘 적용이 안 된 거 같아ㅜ 다른 방법으로도 적용해볼게!
| ${theme.fonts.caption04} | ||
| } | ||
| } */ | ||
| @media (max-height: 628px) { |
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.
연관 이슈
close #114
개요
UI 사용성 개선사항 반영
✅ 작업 내용
🖥 구현 결과
KakaoTalk_20241218_183209401.mp4
편지 이미지 해상도 개선
북마크 (홈화면 추가) 아이콘 적용
행성 관리 특정 행성명 클릭시 해당 행성으로 이동
20241218_183626.mp4
ScreenRecording_12-19-2024.16-00-05_1.mp4
리뷰 요구사항
이슈 사항 없습니다.
📝 기타 사항
16px 이하에서의 input focus 확대 현상은 아래 블로그를 참고하여, 폰트를 기본 16px로 고정하고 scale을 사용해서 조정하였습니다. 이때, scale을 적용할 경우 폰트 자체의 크기만 작아지는 것이 아닌 input 영역이 모두 해당 배율만큼 줄어드는 문제가 있어, 줄어든 만큼의 여백을 확보하기 위해 width를 113%로 지정하고 편지 내용 작성 input 하단의 사진을 입력하는 부분은 position: absolute로 바로 아래 여백 없이 보여질 수 있도록 하였습니다! (그렇지 않을 경우, scale로 조정한 영역의 height는 고정이 되어 하단 여백이 남아 편지 내용 입력 항목과 사진 입력 항목 사이에 여백이 발생하였습니다!)
[iOS/Safari] 의 focus 확대 방지하기
이미지 해상도는 압축하면서 생기는 화질저하인듯한데, 우선 최대한 압축크기를 줄여보긴 했습니다. 모바일로 확인했을 때는 기존보다는 많이 좋아지긴 하였으나, 근본적으로는 서버에서 용량 제한이 해결이 되어야 할 것 같습니다!
스크롤 오류의 경우 아래 블로그 참고했어요! 다른 사이트들 찾아보니까 스크롤시에 주소창이 아래로 내려가게 설정되어있더라구요.
height: 100vh;대신,height: auto; min-height: 100vh적용해서 저도 그렇게 설정되도록 수정하였습니다. 알아두면 좋을 것 같아 공유해요![React] 모바일 웹 스크롤 시 주소창, 하단바 없애기