絵文字の表示の不具合を修正

[kazzyfrog]

概要

絵文字の表示の不具合を修正しました！
具体的には、

• コンセクトセクション以下の、絵文字のアニメーションに使っている、emojiToUnicodeHex()関数をヒーローセクションでも使用しました。
  • これで、HTMLを直接埋め込んでます！（dangerouslySetInnerHTML）
• また、z-indexに関しては、削除するだけでホバーの問題は解決できました！おそらく。。

関連するIssue

closed #208

その他

• safariでも、noto emojiが表示されていることを確認しました！
• コンセクトセクション以下の絵文字をホバーしたら、反転することも確認しました！

[kazzyfrog]

これがマージされたら、
ローンチまでに実装するタスクは全部完了ですかね？？😎

[pss-aileen]

スマホで確認しました！！
絵文字表示されるようになってました！
ありがとうございます🙇

そうですね、おおかた終了ではないでしょうか？☺️

ただ、ちょっとまた不具合を見つけてしまったのですが
ヒーローエリアのボタンたちが、headerの上にのっかってました😭

あと、スマホで見た時に、絵文字が右側から飛び出てるのがまだきちんと解決されていないので、そちらも解決した方が良いかもしれません。

ただ、それはまぁ修正といったら修正、大きな実装ではない...？ので、どこで区切るかではありますが、おおよそ終了ですかね！！

[pss-aileen]

z-index調整しました

[pss-aileen]

横幅から飛び出る問題はちょっと今ぱっとわからないので、一旦おいておきますが、とにかく現状で区切ってよければほぼほぼ終了です！

[kazzyfrog]

確認、z-indexの調整ありがとうございます！！

[kazzyfrog]

絵文字が横の境界からはみ出す問題に関して、修正しました！

調べたところ、こちらの記事を見つけ、
「デスクトップでもスマホでも、確実に横スクロールを防止するには、htmlとbodyの両方に"overflow-x: hidden"を設定する必要がある」
らしいので、それで実装したら何とか解決できました！おそらく。！

[pss-aileen]

絵文字が横の境界からはみ出す問題に関して、修正しました！

調べたところ、こちらの記事を見つけ、
「デスクトップでもスマホでも、確実に横スクロールを防止するには、htmlとbodyの両方に"overflow-x: hidden"を設定する必要がある」

こちら確認しました！！

調査ありがとうございます！そうなんですね！HTMLにつけるのは初めて知りました！
iPhoneのChrome、Safariで再度確認したところ完璧でした✨
では、マージしますね...！

[pss-aileen]

LGTM🏝️