처음에 각 device별 breakpoint의 이름을 정할 때,
smarphone/tablet/pc 이렇게 익숙한 naming으로 했었는데
Airbnb CSS-in-JavaScript naming guide에서는 디바이스별로 정해진 크기가 없고, 각각 다를 수 있기 때문에
small/medium/large로 나눠서 naming 하는것을 권고하고 있었다.
생각해보니 위와 같이 좀 더 유연하게 포괄적으로 나눠서 하는게 맞는것 같아 breakpoint name을 수정해주었다.

🔻참고
https://github.com/airbnb/javascript/tree/master/css-in-javascript

각각의 기준을 정해놓고 하면 좀 더 Viewport에 따라 특징적으로 할 수 있을것 같아 기준을 세워봤다.

Small

• Viewport가 상대적으로 제일 작아지기때문에, 너무 많은 section이 한 화면에 보여지면 복잡하고 지저분해 보일 수 있음
  -> section or 기능별로 가로 비율을 꽉 채우는 느낌으로 시원하고 깔끔한 느낌의 UI 구성하기

• 클릭하는 동선이 크지 않기 때문에, 깔끔한 느낌의 UI를 해치지 않는 선에서 UI 나란히 배치하기

Mediium : Small과 Large의 중간이기때문에 두 viewport의 balance를 적절하게 맞출것

Large : 상대적으로 Viewport가 제일 크기 때문에, 많은 정보를 한 눈에 쉽게 볼 수 있게 UI 구성하기

• Small/Medium : 축구장 라인이 없어지고 잔디만 보여지도록 구성

• Large : 상대적으로 Viewport가 클 때 축구장 라인이 넓게 보이는것이 더 좋을것 같아 축구장 라인 그대로 유지