taisei-13046 / life-timer

life-timer's Issues

バグなど気になった点

挙動としておかしいと思った点を記述する。

質問に対する回答

• Atomic Designは適切に使われているか

  • 今回はmaterial uiを使っているのでこれで良いと思いますが、ドロップダウンは汎用性が高いのでatomsで定義してください。
  • AgeQuestion.jsxとEndAgeQuestion.jsxは中身が違うだけなので1つにまとめられると思います。
  • ResultPage.jsxは「あなたに残された時間」みたいなところがAtomic Designになってなくないですか？

• Hooksをもっと有効に使う方法はないか？Router.jsxでuseStateしてコンポーネントに引数で渡しているのが良くない気がしている

  • useContextを使用することでpropsで渡す必要がなくなるのですがどうでしょうか？
    この辺の後半部分が参考になると思います。

• src/components/pages/ResultPage.jsxのmakestylesが冗長で、同じ内容があるが、いかにまとめることができるか？ top: ??%だけを変えたいです

  • コードレビューの方でも書きましたが、positionはここではふさわしくないので、marginとかで調節してみてください。
    あまり知識がないので間違っているかもしれませんが、今回コードで書かれているように画面の端からどの位置にあるのかという風に座標系で書くのは、ゲームとかが多いそうです(scratchとかもそうですよね)。
    しかし、webサイトは画面幅がパソコン、タブレット、スマホという風に画面幅や解像度などが異なるあらゆる機種に対応する必要があるため、座標系で書いてしまうとパソコンでは見えてもスマホだと画面の外にはみ出てしまうといったことが発生します。そのため余白が何pxなのかを考えることでデザイン崩れをできるだけ減らすといった方法がとられています。

    positionに関係しないところについては、同じ内容になっている部分をまとめた連想配列を用意して展開するとできると思います。

• レスポンシブなデザインにできなかったが、どのように改善するのがいいか？
  

  life-timer/src/components/molecules/AgeQuestion.jsx

  Line 20 in efae239

  margin: 50px 700px 0px 280px;

  • 右のmarginが700pxとかだからじゃないですか？
  • あと、スマホサイズとかでの対応はメディアクエリ使ってください。

• その他改善できる点があれば教えていただきたいです！

  • コードレビューを見てください。

コードレビュー

コードを読んで、気になった点を記述する。