frontend-conference-hokkaido-2024/landing-page-2024

概要

これはフロントエンドカンファレンス北海道2024のラインディングページ用リポジトリです

開発環境構築

リポジトリをクローンする git clone https://github.com/frontend-conference-hokkaido-2024/landing-page-2024.git
Node.jsのバージョンを20台にする
依存関係をインストールする pnpm install
環境変数を設定する .env.local.sampleをコピーして.env.localを作成し、環境変数を設定する
開発サーバーを起動する pnpm dev

スポンサー一覧

実装概要

基本構造

sponsorSection.tsx: スポンサータイプに応じたレイアウトをグリッドで表示するスポンサー一覧表示時のエントリポイントとなるファイルスポンサータイプに応じてグリッドのカラム数を決定し、SponsorAvatarに画像と表示サイズを受け渡す
sponsorAvatar.tsx: スポンサーアイコンを表示するためのコンポーネント。画像と表示サイズはSponsorListが決定する
sponsorType.tsx: スポンサータイプに応じた情報（ロゴリスト、画像サイズ、レイアウト）を管理

レイアウトプロセスの詳細

グリッドのレイアウトを決定するスポンサーの layout プロパティでグリッドのレイアウトを決定しているレイアウトのタイプは2つ:
- layout: "grid gap-8" = 1列のグリッド (シルバー以外)
- layout: "grid grid-cols-2 gap-8" = 2列のグリッド (シルバー)
グリッドの横幅を決定するスポンサーの gridViewSize プロパティで任意のスポンサータイプが表示されるグリッドのサイズを決定しているグリッドの横幅を指定することで、間接的にロゴ画像サイズを制御しているサイズは3種:
- sponsorGridWidth: "w-11/12 mx-auto" = プラチナ
- sponsorGridWidth: "w-8/12 mx-auto" = 道内ゴールド, ゴールド, ローカル, デザイン
- sponsorGridWidth: "w-11/12 mx-auto" = シルバー
スポンサーロゴの画像を渡すスポンサーの logos プロパティで、スポンサー種別に応じたロゴの画像パス一覧を保持する画像は、配列のインデックス順に表示される

スポンサーのロゴ画像を変更する

スポンサーのロゴ画像を変更する手順は以下の通り

publicディレクトリ、sponsorLogos内にロゴ画像を配置する
sponsorType.tsxファイルを開く
変更したいスポンサータイプを特定する。例えば、プラチナスポンサーのロゴを変更する場合、PLATINUMタイプを探す
logos配列内の画像パスを新しい画像パスに置き換えるここで、配列のインデックス順に画像が表示される点に注意

任意のスポンサー種別のグリッドレイアウトを変更する

スポンサー種別のグリッドレイアウトを変更する手順は以下の通り

sponsorType.tsxファイルを開く
変更したいスポンサータイプを特定する。例えば、プラチナスポンサーのレイアウトを変更する場合、PLATINUMタイプを探す
layoutフィールドのクラスを新しいレイアウトクラスに置き換える

任意のスポンサー種別のロゴ画像表示サイズを変更する

スポンサー種別のロゴ画像表示サイズを変更する手順は以下の通り

sponsorType.tsxファイルを開く
変更したいスポンサータイプを特定する。例えば、プラチナスポンサーのレイアウトを変更する場合、PLATINUMタイプを探す
sponsorGridWidthフィールドのクラスを新しいレイアウトクラスに置き換える

ジョブボード

ジョブボードページは/job-boardに存在する。

実装概要

スポンサーの求人の表示関わる部分は@jobBoardSectionで実装している。特に、1求人あたりの表示の実装はJob.tsx(ジョブボードの単位コンポーネント)で実装している。スポンサーの求人に直接関係ない説明文などは、直接job-board/page.tsxにて実装している。

`@jobBoardSection`について

@jobBoardSection以下のファイルなどについての説明。

`/components`

Job.tsx
- スポンサー1社あたりの求人に関わるカードのようなコンポーネントである。
- ジョブの見た目や挙動を編集したい場合はこれを編集する。

`/data`

types.ts
- ジョブボードセクションにおいて使用する型を定義したファイル。
- Job.tsxとconstants.tsで使用される。
constants.ts
- スポンサーの求人を表示するために必要な情報を保持する。
- comment: 求人についてのコメント
- imageUrl: 求人に表示するスポンサーのロゴ
- href: スポンサーの求人ページへのリンク

`/page.tsx`

ここでスポンサーの求人をまとめて表示させる処理を記述している。以下がコア部分

<div className="grid grid-cols-1 gap-16 place-items-center">
  {JOB_BOARD_SECTION_DATA.map((jobData, index) => <Job {...jobData} key={index} />)}
</div>

グリッドレイアウトで表示しており、現状縦1列で表示されるようになっている。 JOB_BOARD_SECTION_DATA: JobProps[]をmapメソッドを使って、各要素をJobコンポーネントに渡している。

単純に求人を追加したい

landing-page-2024\src\app\job-board\@jobBoardSection\data\constants.tsのJOB_BOARD_SECTION_DATA配列に新しいJobオブジェクトを追記すればよい。上から順番に表示される。