Feature/GEPT-138: peopleList 페이지 반응형으로 구현

[zladb]

✨ 구현한 기능

• @mui/material 라이브러리를 활용하여 useMediaQuery 훅을 사용해 반응형 페이지를 구현함
• 브라우저 창의 가로가 1200px 이하인 경우, 각 PeopleCard가 가로로 꽉 차 보이도록 구현함

✅ width 1200px 이하

✅ width 1200px 초과

📢 논의하고 싶은 내용

• 기존 한 줄이었던 comments를 두 줄로 변경했는데, 이 변경이 기존과 비교했을 때 어떤 것이 더 시각적으로 좋아 보이는지?
• 가로 1200px 이하일 때 comments의 가로 너비를 100%로 할지, 아니면 특정한 픽셀 값을 지정해주어야 할지 논의
• 100%로 지정하면 PeopleCard의 길이에 따라 comments의 내용이 늘어나거나 줄어들어 약간 어색한 느낌이 들기도 함

🎸 기타

• breakPoint의 tablet과 mobile 크기가 해당 페이지와는 좀 맞지 않아 보여 사용하지 않음
• 이미 병합된 GETP-137 브랜치의 noPrev 상수명을 isPrevBtnVisible로 변경하는 관련 커밋이 빠져 있는 상태라, 해당 커밋을 포함하여 PR을 날립니다.

[toothlessdev]

LGTM!

[toothlessdev]

mui 라이브러리의 useMediaQuery 를 사용하는것도 좋지만

�Emotion Styled 내부에서 css 미디어 쿼리를 사용해서
@media all and (max-width:1200px) @media all and (max-width:1200px) 로 사용하는것도 �좋은 방법이랍니다

자바스크립트 실행없이 브라우저 내부에서 reflow, repaint 를 처리하기 때문에 성능에도 좋고, 자바스크립트 실행전 브라우저에 의해 화면에 반영이 되는 등의 장점이 있겠네요

[toothlessdev]

flex grow, flex shrink flex basis 또는 grid 를 사용하면 미디어 쿼리 없이도 유연한 레이아웃 구성이 가능한데
이부분 추가적으로 공부해보시면 좋을 것 같습니다 :)