global.css設定、ヒーローエリア画像追加・実装、不要な画像削除

[pss-aileen]

概要

• ヒーローエリアの実装（PC版のみ）
• イラストの追加
• global.cssにテキストカラー設定

関連するIssue

closed #32

その他

• とりあえず形にしたほうが良いかと思ったので、PCレイアウトのみ作成しました。
  • この方針で良いでしょうか？
• コンポーネントに分けようと考えたのですが、ディレクトリで悩んだので page.tsx に記述した → issue化 必要なディレクトリ・ファイルを作成する #61
  • なにかディレクトリの案はありますでしょうか...？
  • そこまでパーツが多くないので分けなくても良いのか？と思いそのままです
  • →とりあえずコンポーネントとして使いまわせるものが発生したら切り分ける感じにしてひとまずそのまま書いていくのはどうか？(別issueでコンポーネント化する...？)

参考

• なし

残課題

• プライマリーカラーの設定
  • tailwind.config.ts に設定するのか、global.css に設定するのかわからなかった
  • 要調査
  • そのため一旦このプルリクと分けたい
• Tailwind CSSをスッキリさせること
  • classNameが長くなる点を改善したい
  • CSSを使い回せるようにしたい
    • プライマリーカラーの設定も含む
    • primary-color: XXXXとしてどこかで設定して、Tailwind CSSで text-red-600 のように設定しなくて良いようにする
    • もし色が変わったときに一発で変えられるように
  • 共有のCSSが現れると思うので、ある程度実装がすすんだらまとめたい
• first-contributions-ja というサイト名を定数化して必要箇所で読み込めるようにしたい

上記あたり #62 にて issue化済み

[kagomen]

ローカルで確認しました！
ビューはデザインカンプ通りなので良いと思いました……！

ディレクトリに関しては、まだApp Routerのキャッチアップをしてないので何とも言えないのですが、

• Header
• Hero
• About
• Footer

くらいは分けてもいいかな？と思いました。
というのも、更新されたファイルとコミットメッセージの関係性が明白で、更新内容の行方が追いやすいかな？と。
どうなんでしょうか……？

Tailwindは設定まわりのこと全然知らないので、自分も調べてみます……！

[kagomen]

追記です
src/appディレクトリの中に

• page.tsx（作成済み）
• layout.tsx（作成済み）
• Header.tsx
• Hero.tsx
• About.tsx
• Footer.tsx

を作成して、

• layout.tsxでHeader.tsxとFooter.tsxをimport
• page.tsxでHero.tsxとAbout.tsxをimport

するのはどうでしょうか？

コンポーネントファイルの作成は各コンポーネント作成者に任せる、という形でタスクの切り分けができるといいかなーと考えてます💭

[kazzyfrog]

さっそくありがとうございます！
ますPRの内容としては、下記でどうでしょう！

PCレイアウトのみ

良いと思います！余裕があれば、レスポンシブ対応を残課題にしてイシューにしても良いですね！

なにかディレクトリの案はありますでしょうか...？

こちら、srcの中で、appと同じ階層でcomponentsディレクトリを作成するのはどうでしょう？
例：

src/
├─app
|   ├─page.tsx
|   ├─layout.tsx
|   ├─loading.tsx
|   └─not-found.tsx
|
├─components
|   ├─header.tsx
|   ├─footer.tsx
|   └─ui
|     └─button.tsx

[kazzyfrog]

下記２点ご確認よろしくお願いいたします🙌

[pss-aileen]

遅くなりましたー！
コメントありがとうございます！

詳細

ディレクトリについて

from @kagomen さん

というのも、更新されたファイルとコミットメッセージの関係性が明白で、更新内容の行方が追いやすいかな？と。
どうなんでしょうか……？

• 確かに！追いやすくなりそうですね！
• そう考えると素直にセクションごとにファイルをわけても良いかもしれません！

from @kazzyfrog さん

こちら、srcの中で、appと同じ階層でcomponentsディレクトリを作成するのはどうでしょう？ 例：

kagomeさんのとの意見もあわせて
kazzyfrogさんに提示していただいたディレクトリ構成を元に
ファイル、フォルダを作成するのが良さそうだと感じました！

ディレクトリ、ちょっとこのプルリク以外でissue立てて整理します！

~ ~ ~

お二人ともありがとうございました！
ネットを見てると複雑そうなディレクトリ構造だったり、
何をどのくらい分けていけば良いのか不明瞭だったので大変勉強になりました！

実装の流れ

• @kazzyfrog さんがDiscordにも書いていた件
• 「とりあえず表示させることに振り切って、後でリファクタリング」
• ↑これ、個人的に良いなと思いました。

とりあえずディレクトリはほぼ仮で決まったような気がするので
ディレクトリのissueたてるので、そこで別タスクとして切り出してフォルダ整理して
各パーツ作っていくような流れにできればいいのかなと思いました。

CSSはとりあえずTailwindCSSをclassNameにちまちまと入れていき
最後にCSS変数や何か方法を使って
さいごにガシガシまとめていけると良いのかなと思いました。

（（それまでの間に個人的に理解できていないCSSについて調べられる...時間がかせげる...！というのもあります...笑））

ここで書きましたが、実装の流れDiscordにもっていきますね！

[pss-aileen]

残課題

• prettier入れて改行やインデントうまいことやってほしいと思った
• https://typescriptbook.jp/tutorials/prettier

[kazzyfrog]

LGTM✌️

[pss-aileen]

@kagomen さんにマージしてもらう!!!!

Squashで！！！！

[kagomen]

LGTM!
Squashしました！
Squashに際してタイトル変更するの忘れたので、あとから編集しました……！