[FE] design : 모바일 사이즈에서 스크롤 바, body padding-right 수정

[BadaHertz52]

• resolves [FE] 모바일에서 스크롤을 투명하게 하고 body의 padding right를 없앤다. #626

---

🚀 어떤 기능을 구현했나요 ?

• 1024px 이하의 브라우저에서 스크롤 바 배경을 투명으로 변경하고, body의 padding-right를 없앴어요.
  

1024px 이하인 이유?

• 모바일 브라우저 환경이 적용되는 태블릿의 경우 768px를 넘는 디바이스들이 많아요 1024px이하를 모바일 환경으로 가정하고 적용했어요. (사이즈에 대한 다른 의견이 있다면 이야기해주세요)

• 추가록 globalStyle에서 theme을 사용할 수 있도록 변경했어요.

🔥 어떻게 해결했나요 ?

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 스타일로 스크롤 바를 없애는 것은 브라우저에서 적용하는 스크롤 바 스타일로 적용 안될 수 있는 위험성이 있다고 하네요.
• 디자인 회의에서 모바일 브라우저 환경에서는 스크롤 바 배경만 없애기로 했는데, 스크롤 바 높이는 클라이언트 단에서 변경하기 힘들다고 하네요. 스크롤 바 색상은 변경해도 괜찮을 것 같은데, 이에 대한 의견 있다면 말해주세요.
• 해당 스타일을 모바일 브라우저에서 봤으면 좋겠는데, 현재는 방법을 찾지 못했어요. develop에 올리지 않고 보는 방법이 있다면 알려주세요!!

📚 참고 자료, 할 말

• media 유틸 함수가 수정 중이라, 확정되면 해당 유틸 반영해서 수정할게요. -> 반영했습니다!

[ImxYJL]

스크롤바 추가 설정 사이즈 관련 코멘트 하나 남겼어요~~

모바일에서 로컬에 접속하는 방법은 사전 미션에 있으니 이미 아시겠지만 여기 한번 참고해보셔요~~
저는 지금 핫스팟 연결해서 시도해봤는데 일단 안 되긴 합니다..^_ㅜ

[ImxYJL]

저는 media 크기(태블릿 가로모드)까지는 스크롤에 별다른 설정을 하지 않고 그대로 보여줘도 된다고 생각해요. 아이패드 가로 모드로 몇 차례 리뷰미 사이트에 들어와봤는데 화면이 꽤 커서 스크롤바가 딱히 거슬리지 않더라구요! (그래서 제 반응형 작업을 small부터 padding-right 없애고 하긴 했습니다...ㅎㅎ)

[BadaHertz52]

어느 정도의 모바일 크기에서 스크롤을 투명으로 하고 body margin-right을 없앨 지 프론트 회의에서 이야기를 나눠봐야겠네요

[chysis]

개인적으로는 모바일 시작점(small, 768px 이하) 부터 padding-right를 0으로 설정하면 좋을 것 같아요 :)

[soosoo22]

반응형 작업하면서 스크롤이 살~짝 거슬렸는데 배경을 투명으로 바꿔주셨군요!! 훨씬 더 깔끔할 것 같네요!👍👍👍

[BadaHertz52]

body의 padding-right 삭제 및 스크롤 바 배경 투명색으로 변경되는 범위를 1024px에서 768px로 변경했습니다.

[chysis]

변경 사항 확인했습니다 :)