[FE] feature: 전역 스타일에 커스텀 스크롤바 스타일 적용

[ImxYJL]

• resolves [FE] 스크롤바 커스텀 디자인을 전역 스타일에 적용한다. #312

---

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

• 스크롤바 스타일을 커스텀했습니다.
• 스크롤바 스타일을 전역 스타일에 적용했습니다.
  

🔥 어떻게 해결했나요 ?

• ::-webkit-scrollbar는 전역 선택자라서 별도의 태그(body, html 등) 안에 넣을 필요가 없었습니다.
  • 오히려 html이나 body 안에 넣으면 브라우저의 기본 스타일이 우선이 되어 커스텀 스크롤이 나타나지 않을 수 있습니다.
• 스크롤바 자체에 달리 margin이나 padding을 줄 수는 없지만, 스크롤 대상인 요소에 margin-right를 줘서 스크롤바와 요소 사이에 gap을 줄 수 있습니다. (를 알아낸 쑤쑤 굿~)

export const Contents = styled.div`
  padding-right: 1.2rem;

  overflow-y: auto;
`;

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

• 과연 모달이 아닌 일반 페이지에서도 잘 적용되는지 확인해주세요

📚 참고 자료, 할 말

• 전역에 스크롤바 스타일을 적용해두긴 했는데 스크롤바를 사용하고 싶으면 해당 컴포넌트 안에서 overflow-y:auto나 scroll을 줘야 합니다. (위 코드에서도 content 안에 overflow-y가 적용되어 있음)
• 왜 안 됐다가 됐는지 모르겠다...

[BadaHertz52]

고생했어요

[soosoo22]

멋진 스크롤바네요!! 고생했어요! 올리!

[chysis]

스크롤바 고생했어요!