예약 내역 렌더링
이 부분이 web 에선 잘 나오는데, 모바일에서 보면, 가로스크롤이 생겨서 사용자가 불편하다. 모바일로 볼때는 가로 스크롤을 없애고, 큰div 안에 예약내역이 간단히 나오도록 하고싶었다.
혹시 화면 사이즈에 따라서 테이블 스타일이 카드형으로 나올 수 있는지 방법을 찾아보았다.
놀랍게도 방법이 있었다.
기존 테이블 코드는 그대로 두고, className 에 Hidden md:block 을 추가한다.
그리고 기존 테이블 코드 위에 모바일용 코드를 추가해주는데, 카드형식이므로, 테이블대신 div 를 써주었다. 그리고 중요한 모바일용 코드 className 에는 md:hidden 을 꼭 추가해준다.
| 클래스 | 의미 |
|---|---|
| md:hidden | md(768px) 이상에서는 보이지 않음(숨김) |
| hidden | 기본적으로 숨김 |
| md:block | md(768px) 이상에서는 block(보임) |
쉽게말해,
md:hidden : 모바일에서만 보임
hidden md:block : 데스크탑(태블릿 이상)에서만 보임
md:hidden과 hidden md:block은 Next.js나 React의 문법이 아니라, Tailwind CSS에서 제공하는 유틸리티 클래스이다.
React, Next.js 모두에서 Tailwind CSS를 사용하면 쓸 수 있다.
이 클래스들은 Tailwind CSS가 HTML(className)에 적용해주는 반응형 스타일이다.
이렇게 모바일에서는 카드형, 데스크탑에서는 테이블형으로 분리하면 가로 스크롤 없이 깔끔하게 예약 내역을 보여줄 수 있다. 꼭 필요한 정보만 보여주고, 버튼도 카드에 적절히 배치해줘 UX도 강화한다.
테스트해보니, 가로 767PX부터는 모바일용인 카드형식으로 보인다.
코드 비교
✔️ 모바일 카드형 코드 일부
<div className="md:hidden space-y-4">
{filteredReservations.map((reservation) => (
<div
key={reservation.id}
className="bg-white rounded-lg shadow p-4"
>✔️ PC용 코드 일부
<div className="hidden md:block bg-white rounded-lg shadow-md overflow-x-auto mb-5">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>