[FE] fix: 작성한 리뷰 페이지에서의 상세 리뷰 maxWidth 수정

[ImxYJL]

• resolves [FE] 작성한 리뷰 페이지의 상세 리뷰를 고정 크기로 보여준다. #1176
  

---

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

• 작성한 리뷰 페이지에서의 상세 리뷰 maxWidth가 크게 걸려있었던 문제를 해결했습니다.
• 그리고 저 큰 사이즈가 화면이 작아질 때도 그대로 적용돼서, width: 100%가 걸린 자식 컴포넌트에서 줄바꿈 없이 내용이 길어질 경우 그대로 maxWidth 크기만큼 길어지는 문제도 해결했습니다.

🔥 어떻게 해결했나요 ?

• 기본 maxWidth값을 minWidth값과 같은 값으로 부여했습니다. (= 더 작아짐)
• 화면이 일정 크기 이하일 경우에는 width를 vw로 줘서 자연스러운 반응형이 되도록 했습니다.

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

• 왜 maxWidth값과 minWidth값을 따로 사용했었나?
  • 원래 작성한 리뷰 목록에서도 vw를 사용하고 있어서 화면 크기가 커지면 컴포넌트도 커졌습니다.
  • 이 유연함을 유지하되 언제까지나 width가 증가하면 안 됐기 때문에, 유도리 있게(?) 최대 사이즈 제한을 뒀었습니다.
  • 하지만 상기한 것처럼 줄바꿈 없는 자식 요소가 길게 들어오면 작은 화면에서도 저 긴 width를 그대로 사용하게 되기에 그냥 min과 max값을 통일했습니다.
  • 특정 사이즈 이상부터는 더 이상 크기가 커지지 않는 서비스들을 생각하시면 될 것 같아요.
• 왜 min-maxWidth를 모두 사용하는가?

  • min: 큰 화면에서 보이는 작성한 리뷰 페이지의 테두리 컴포넌트의 너비를 유지하기 위해 필요했습니다. (아래 이미지의 회색 테두리)
    

  • max: 지금 같은 케이스를 막기 위해서라도 필요합니다. 자식 요소들이 줄줄이 width: 100%와 flex를 달고 있기 때문에..

📚 참고 자료, 할 말

• 꺼진 css도 다시 보자
• 모킹 데이터 의존도를 낮추자... (스토리북 도입해야 하나🥲)

[chysis]

문제 발생 재현, 해결된 것 확인했습니다! 로컬에서는 로그인이 안 돼서 dev에서 스타일 적용해보면서 확인했네요😅

[soosoo22]

max-width의 중요성인가요..😂

사파리에서 봤는데 이상 없습니다~

[BadaHertz52]

시간날때 레이아웃쪽을 봐봐야겠넷요. 긴급하게 버그 고치느라 고생했어요