feat: 모임 찾기 상세 페이지 UI 및 페이지네이션

[HMRyu]

✏️ 작업 내용

• 모임 찾기 상세 페이지 UI
• 페이지네이션 컴포넌트

📷 스크린샷

Desktop

Mobile

Pagination

https://github.com/user-attachments/assets/94aa9288-07bc-4395-bd54-ab472506f028

✍️ 사용법

Pagination

const [currentPage, setCurrentPage] = useState<number>(1); // 현재 보여줄 페이지
const reviewsPerPage = 4; // 한 페이지에 보여줄 리뷰 수
const totalPages = Math.ceil(MOCK_REVIEWS.length / reviewsPerPage); // 전체 페이지 수

// 페이지 이동 함수
const handlePageChange = (page: number) => {
  setCurrentPage(page);
};

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={handlePageChange}
/>

🎸 기타

Tag

모임 찾기 페이지에서 Tag 를 사진 위에 올려야 했는데 border radius 를 디테일하게 조정해야 했습니다. 좌측 하단과 우측 상단을 조정해야 했는데 Tag 공통 컴포넌트를 많이 수정해야 할 것 같아서 다음과 같이 직접 구현했습니다. 확인 부탁드립니다!

<div className='absolute right-0 top-0 flex items-center gap-4 rounded-bl-[12px] rounded-tr-[20px] bg-orange-600 py-2 pl-4 pr-6 text-xs font-medium text-var-white'>
  <IconAlarm width='24' height='24' />
  <span className='text-12 font-semibold'>오늘 21시 마감</span>
</div>

Pagination

공통 컴포넌트로 Pagination 컴포넌트를 생성했습니다. 확인 부탁드려요!

리뷰 상세 페이지

현재 리뷰 상세 페이지 부분의 코드가 길어서 보기 어려우실 것 같습니다...! api 연동 후 페이지를 컴포넌트화 할 예정입니다!