企画フレームの作成

[tsukachan-24]

概要

企画フレーム(スマホ版)を作成する。

編集ファイルパス

app/components/ui/EventFrame.tsx（このファイル名で新規作成してください）

考えられる開発内容

• figmaを参考に、企画フレームを作成する。
• 企画名が14文字以内の場合
  • textbを用いる。
• 企画名が15文字以上の場合
  • フォントサイズ14px、行間20とする。
• 24文字を文字数のMAXとする。超えたら続きは・・・で表示。（去年24文字を超える企画名はなかったのでたぶんみんな収まるはず…？）
• ホバーはButtonMainと同様の雰囲気にする。
• 補足：塗りの箇所には企画画像が入ります。

備考

• app/(frontend)/styles.cssに、使用するフォント、カラー、パディングの値等の名前が定義してあるため、それらを用いる
• (基本的に、figmaで定義してある名前と対応しています。　例:figmaのspace ss⇒spacing-ss)

期限

作業会まで(5/27)

[kiyo-jin]

24文字数超えたら...にして、ツールチップで全文表示

[kiyo-jin]

@tsukachan-24
デザインについての質問です

• 企画名部分と画像部分の間は、どの文字数でも同じ間隔を空けなくて良いか
• 画像の表示はどの想定か（画像のものは画像表示領域に収まるように実装してる。）。画像の背景色はいらないよね？
• ツールチップの表示幅は画像のもので良いか(max-w-[220px]で適当に設定している)

[tsukachan-24]

• 画像と文字の間隔は同じでなくて大丈夫です。
  白枠のパディングを基準に、文字枠をサイズ固定で配置し、その枠内に文字を上下中央揃えで配置してください。文字数、文字サイズの設定的には枠から出ないはず…？
  
  企画名が25文字以上の場合は、24文字目を「…」としてください。3行がマックスの想定です。
  
• 画像表示領域に収まる形でOKです！背景色は不要です。
• ツールチップOKです！ツールチップの背景色は、PC上の外観の設定によって変わる感じですかね？ならそのままでOKです。
  色指定しているのであれば白も試してみてほしいです。

[kiyo-jin]

• デフォルトは外観によって変わるぽいけど、どちらもグレーです。デフォルトの色指定を白versionに変えたのが添付画像のものです。

[tsukachan-24]

ありがとうございます！
白の方が画面背景色や画像に対して目立ちそうなので、一旦白でお願いします！