7/31 TIL

TIL: React 컴포넌트 수정

1. BackgroundTitle 컴포넌트

   • <BarTextProvider>를 사용하여 leftText와 rightText를 제공.
   • 텍스트를 이미지 중앙에 위치시키기 위해 CSS Flexbox 사용.
   • 이미지 블러가 밖으로 삐져나오지 않도록 overflow-hidden 클래스 추가.

   const BackgroundTitle = ({ title, backgroundImage, leftText, rightText }) => {
     const barTextValue = { leftText, rightText, setLeftText: () => {}, setRightText: () => {} };
   
     return (
       <BarTextProvider value={barTextValue}>
         <div className="relative w-full h-[360px] overflow-hidden">
           <img src={backgroundImage} alt={title} className="absolute inset-0 w-full h-full object-cover blur-sm" />
           <div className="absolute inset-0 bg-black opacity-50" />
           <div className="relative z-10 flex flex-col items-center justify-center h-full text-white">
             <h1 className="text-4xl font-bold">{title}</h1>
             <BarText />
           </div>
         </div>
       </BarTextProvider>
     );
   };

2. SmCard 컴포넌트

   • BarTextProvider를 사용하여 텍스트 상태 관리.
   • CardTitle과 CardSubTitle에 props 전달하여 실제 데이터 표시.

   const SmCard = ({ src, alt, title, subtitle, leftText, rightText, id }) => {
     const router = useRouter();
   
     const barTextValue = { leftText, rightText, setLeftText: () => {}, setRightText: () => {} };
   
     return (
       <ImageProvider value={{ src, alt, title, subtitle }}>
         <BarTextProvider value={barTextValue}>
           <div className="mb-[56px]" onClick={() => router.push(`/magazine/${id}`)}>
             <SmImage />
             <CardTitle title={title} />
             <CardSubTitle subtitle={subtitle} />
             <BarText />
           </div>
         </BarTextProvider>
       </ImageProvider>
     );
   };

3. LgImage 컴포넌트

   • useImage 훅 대신 props를 사용하여 src와 alt를 직접 받도록 수정.

   const LgImage = ({ src, alt }) => {
     return (
       <div className="w-[790px] h-[430px] border border-brand-gray-300 rounded-[20px] overflow-hidden">
         <img src={src} alt={alt} className="w-full h-full object-cover" />
       </div>
     );
   };