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.

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

[Feat/#323] 430기준으로 반응형 뷰 적용 #324

Merged
merged 36 commits into from
Aug 31, 2024

Conversation

ljh0608
Copy link
Member

@ljh0608 ljh0608 commented Aug 22, 2024

🌀 해당 이슈 번호

🔹 어떤 것을 변경했나요?

  • 기존 375px로 고정되어있던 페이지에서 모든페이지 너비를 430px로 두고 그 이하의 뷰포트에서는 100%로 적용되게 반응형을 고려한 뷰로 변경하였습니다.
  • 이에 대한 변경으로 버튼 크기도 유동적으로 적용되도록 변경하였습니다.
  • btnWrapper styled-components가 중복되어 사용되는것을 확인하고 moleculesComponent로 재사용가능하게 만들었습니다. BottomBtnWrapper 컴포넌트 안에 children으로 버튼 컴포넌트를 넣으면 전체 너비에 맞게 버튼을 가운데로 정렬해주고, 버튼이 두개이상일 땐 gap을 적용합니다.
  • 달력 뷰를 확인해보니 피그마와 상이한 부분이 많아 년-월 텍스트 변경, 요일텍스트와 달력날짜와의 간격이 안맞는 부분을 수정하였습니다.
  • 바텀시트 역시 모바일뷰에 따라 다른 크기로 responsive하게 변경하였습니다.
  • QA에서 발견한 로딩스피너 중앙정렬을 적용하였습니다.

🔹 어떻게 구현했나요?

window.innerWidth || document.documentElement.clientWidth 로 뷰포트의 크기를 확인하여 뷰포트와 430px중 더 작은 너비로 전체 appWrapper의 크기를 지정해주면서 responsive한 모바일 뷰를 구현하였습니다.
데스크탑 환경에서는 430px이 더 작은 값이니 430px로 보입니다.

🔹 PR 포인트를 알려주세요!

BottomBtnWrapper 가 중복되고 atom 컴포넌트인 Button 컴포넌트를 활용할 수 있는 명확한 moleculesComponent라고 생각하는데 이부분에 대해 은서님의 생각도 궁금합니다

🔹 스크린샷을 남겨주세요!

default.mp4

ljh0608 added 29 commits August 21, 2024 16:48
@ljh0608 ljh0608 added the feat new feature label Aug 22, 2024
@ljh0608 ljh0608 requested a review from simeunseo August 22, 2024 11:34
@ljh0608 ljh0608 self-assigned this Aug 22, 2024
@simeunseo simeunseo changed the title [ Feat/#323 ] 430기준으로 반응형 뷰 적용 [Feat/#323] 430기준으로 반응형 뷰 적용 Aug 23, 2024
Copy link
Member

@simeunseo simeunseo left a comment

Choose a reason for hiding this comment

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

정말 고생 많으셨습니다!!! 🚀🚀🚀
그런데 아래와 같이 버튼이 두개 있는 경우에 width를 꽉채우는 처리가 안되어있는 것 같은데 확인해주시겠어요?
스크린샷 2024-08-24 오전 2 34 57

스크린샷 2024-08-24 오전 2 36 35

그리고 시간표도 lottie와 싱크 맞추기 위해서라도 반응형을 적용해야겠네요

@simeunseo simeunseo added the 재훈 재훈이의 개발 라벨 label Aug 23, 2024
@ljh0608
Copy link
Member Author

ljh0608 commented Aug 24, 2024

정말 고생 많으셨습니다!!! 🚀🚀🚀 그런데 아래와 같이 버튼이 두개 있는 경우에 width를 꽉채우는 처리가 안되어있는 것 같은데 확인해주시겠어요? 스크린샷 2024-08-24 오전 2 34 57

넵 해당 버튼은 디자인팀과 얼라인을 맞춘 후 진행하기 위해 킵해둔 후 디자인쪽에 확인요청 드렸습니다 gap을 그대로 유지한채 버튼으로 나머지 영역을 꽉채우는걸로 전달받아서 그렇게 반영하고 머지하겠습니다 :)

@ljh0608 ljh0608 merged commit 4ff219a into develop Aug 31, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat new feature size/L 재훈 재훈이의 개발 라벨
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feat] 모바일, 데스크탑에서 최대 뷰 430px로 맞추기.
2 participants