img 형태별로 나누어서 태일윈드 적용하기 -작성중-

import React, { useState, useEffect } from 'react';

function ImageComponent({ src, card_benefit_title, card_benefit_summary }) {
    const [imageClass, setImageClass] = useState('');
    const [imageGapTop, setImageGapTop] = useState('');
    const [titleSum, setTitleSum] = useState('');

    useEffect(() => {
        const img = new Image();
        img.src = src;
        img.onload = () => {
            if (img.width > img.height) {
                // 이미지가 가로형일 때
                setImageClass('h-[80px] md:h-[100px] mt-[1px] md:mt-[30px]');
                setImageGapTop('gap-[30px] md:gap-[100px] top-[50px] md:top-[40px]')
                setTitleSum('mt-[30px]')
            } else {
                // 이미지가 세로형 또는 정사각형일 때
                setImageClass(' ml-[25px] md:ml-[30px] h-[120px] md:h-[150px]');
                setImageGapTop('gap-[55px] md:gap-[130px] top-[25px] md:top-[40px]')
                setTitleSum('mt-[50px]')
            }
        };
    }, [src]);

    return (
        <div className={`absolute md:left-[30px] ${imageGapTop}  p-4 m-2 flex justify-around`}>
            <img src={src} className={`${imageClass} rounded-lg shadow-lg`} alt="Dynamic styled image" />
            <div className={`md:flex md:gap-[100px] ${titleSum} 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 ><span className='font-bold'>제목 </span> <span className='md:hidden'>: </span><br className='hidden md:block ' />{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><span className='font-bold'>요약 </span><span className='md:hidden'>: </span><br className='hidden md:block ' />{card_benefit_summary}</span></div></p>
            </div>
        </div>
    );
}

export default ImageComponent;