html resize event

import { useState, useEffect } from "react";

export default function UpcomingOverview({ overview }: { overview: string }) {
  const [truncatedText, setTruncatedText] = useState("");

  useEffect(() => {
    const updateText = () => {
      if (window.innerWidth <= 1280) {
        setTruncatedText(overview); // 1280px 이하 → 전체 글자 표시
      } else {
        setTruncatedText(overview.length > 500 ? overview.substring(0, 500) + "..." : overview);
      }
    };

    updateText(); // 초기 설정
    window.addEventListener("resize", updateText); // 화면 크기 변경 시 업데이트

    return () => window.removeEventListener("resize", updateText); // 이벤트 해제
  }, [overview]);

  return (
    <div className="w-[329px] border border-white max-[1280px]:w-full h-auto">
      <div className="text-white02 mt-[10px] text-[20px] max-[320px]:text-[16px]">
        줄거리
      </div>
      <div className="text-white03 mt-[20px] text-[16px] max-[320px]:text-[14px] break-words whitespace-pre-wrap">
        {truncatedText || "해당 영화의 줄거리는 아직 준비중입니다..."}
      </div>
    </div>
  );
}