더보기 기능 패지징 -작성중-

import React, { useState } from 'react';

function CardList({ cardDetails }) {
    // 현재 표시할 카드의 최대 수
    const [visibleCount, setVisibleCount] = useState(5);

    // 더 보기 버튼을 클릭할 때 호출되는 함수
    const showMoreCards = () => {
        setVisibleCount(prevCount => prevCount + 5);  // 현재 보이는 수에 5를 추가
    };

    return (
        <div>
            <div className='text-2xl mb-4'>{cardDetails.length}개 <span className='text-lg'>카드 검색결과</span></div>
            {cardDetails.slice(0, visibleCount).map((card, index) => (
                <div key={index} className='relative h-[250px] w-[370px] mb-[10px] md:h-[280px] md:w-[850px] bg-white rounded-[20px]'>
                    <h1 className='absolute left-[150px] top-[40px] md:left-[250px] md:top-[50px] font-bold'>{card.card_company}</h1>
                    <div className="absolute md:left-[30px] gap-[10px] md:gap-[100px] p-4 m-2 flex justify-around top-[50px] md:top-[40px]">
                        <img src={card.card_img} alt="카드 이미지" className='h-[120px] md:h-[150px] md:pr-0 pr-[40px]' />
                        <div className='md:flex md:gap-[100px] mt-[15px] md:mt-0'>
                            <p className='md:mt-[50px] md:mb-0 mb-[10px] '><div></div><div className='flex relative'><span className='hidden md:absolute md:block md:text-[50px] md:font-thin md:text-gray-200 md:top-[-15px] md:left-[-10px]'>|</span><span>제목<br className='hidden md:block ' />{card.card_benefit_title}</span></div></p>
                            <p className='md:mt-[50px] md:mb-0 mb-[10px] '><div></div><div className='flex relative'><span className='hidden md:absolute md:block md:text-[50px] md:font-thin md:text-gray-200 md:top-[-15px] md:left-[-10px]'>|</span><span>제목<br className='hidden md:block ' />{card.card_benefit_summary}</span></div></p>
                        </div>
                    </div>
                </div>
            ))}
            {visibleCount < cardDetails.length && (
                <button onClick={showMoreCards} className="flex mx-auto my-4 bg-gray-300 hover:bg-brand2 text-white font-bold py-2 px-4 rounded">
                    더 보기
                </button>
            )}
        </div>
    );
}

export default CardList;