【FE】image componentの作成

チケット

closes #36 #38

内容

イメージコンポーネントを作成しました。トップページを作成している方には申し訳ないのですが一旦見本用としてコンポーネントを置かせていただきました。実装する際には消してください。

下記のコンポーネントを実装しました。

ImageComponent → イメージ単体
ImageCarousel → ImageComponentを入れ子にすることでカルーセルレイアウト
ImageGrid →ImageComponentを入れ子にすることでグリッドレイアウト

スクリーンショット 2023-06-21 22 20 39

また、実装する際にメインのレイアウトをある程度固めないとやりずらかったので適当にページを固めました。レスポンシブ対応やサイドバーは仮で作成しただけなのでFE担当の方はチケット切って対応をお願い致します。 https://github.com/qin-team-recipe/10-recipe-app/blob/039e53bb969bb86f8e1d1e5a937126e0e8720a66/src/app/layout.tsx#L1-L22

本来はPRを分けるべきですが、テキストサイズのテーマも勝手に作成しました。 figmaではフォントサイズが8種類くらい使われていたのですが、そこまで必要ないと思うので4種類にまとめました。実装する際はテーマで決められているフォントサイズのみを使用してください。（追加したい場合はSlackにてみんなで相談しましょう） https://github.com/qin-team-recipe/10-recipe-app/blob/039e53bb969bb86f8e1d1e5a937126e0e8720a66/tailwind.config.js#L18-L23

確認項目

品質に問題はないか。

レビューを依頼する前のチェック項目

[x] 要件を満たした
[x] 要件を知らない人が見ても内容を理解できるように PR を書いた
[x] 触った箇所以外も影響が出ていないか、想定内かを確認した

qin-team-recipe / 10-recipe-app