use aspect-ratio

client/src/components/foundation/AspectRatioBox/AspectRatioBox.jsx

@@ -12,29 +12,9 @@ import React from 'react';
  * @type {React.VFC<Props>}
  */
 const AspectRatioBox = ({ aspectHeight, aspectWidth, children }) => {
-  /** @type {React.RefObject<HTMLDivElement>} */
-  const ref = React.useRef(null);
-  const [clientHeight, setClientHeight] = React.useState(0);
-
-  React.useEffect(() => {
-    // clientWidth とアスペクト比から clientHeight を計算する
-    function calcStyle() {
-      const clientWidth = ref.current.clientWidth;
-      setClientHeight((clientWidth / aspectWidth) * aspectHeight);
-    }
-    setTimeout(() => calcStyle(), 500);
-
-    // ウィンドウサイズが変わるたびに計算する
-    window.addEventListener('resize', calcStyle, { passive: true });
-    return () => {
-      window.removeEventListener('resize', calcStyle);
-    };
-  }, [aspectHeight, aspectWidth]);
-
   return (
-    <div ref={ref} className="relative w-full h-1" style={{ height: clientHeight }}>
-      {/* 高さが計算できるまで render しない */}
-      {clientHeight !== 0 ? <div className="absolute inset-0">{children}</div> : null}
+    <div className="relative w-full" style={{ aspectRatio: `${aspectWidth} / ${aspectHeight}` }}>
+      {children}
     </div>
   );
 };