モーダルコンポーネントの追加とSafariでの音声対応

概要

モーダルコンポーネントの追加
Safariで音声が対応できなかったので、録画ボタンクリック→モーダルを開いて再度クリックという流れに変えた

モーダルコンポーネントの使い方

import Modal from '../components/Modal'

        <Modal closeModal={() => setIsOpenModal(false)}>
          <SmallText> This app has audio</SmallText>
          <img
            src="/svgs/audio-icon.svg"
            alt="audio"
            width={100}
            height={100}
          />
          <DefaultButton onClick={handleStartClick}>OK</DefaultButton>
        </Modal>

モーダルには予めクローズボタンを付けてます。 closeModalに関してはモーダルを閉じる関数だけ入れて下さい。

その他はchildrenになってるのでなんでもいれてOKです。

画面確認

（safari）

https://user-images.githubusercontent.com/43722788/127782443-b7ffe638-b2fb-4450-8c7c-1a88829d06d7.mov

停止ボタンを押すとちゃんと音声は止まるようになった。ただ録画はまだSafariではできない

その他留意事項

スタイル割と雑なので気になる点あれば教えてください。一応大体はfigmaベースでやってます（スペースとかは調整した） src/styles/TopPage.tsに関してはトップページ用のstyleを入れていくものとして作りましたが今後そこまで使わないならTextだけをコンポーネントとしてあつかってもいいかなとは思ってます。

tommy19970714 / pictogram-san

モーダルコンポーネントの追加とSafariでの音声対応 #25

概要

モーダルコンポーネントの使い方

画面確認

その他留意事項