07.md

7. 発展的な課題

課題1: 商品一覧ページのレイアウトを改善しよう

src/app/page.tsx のページ送り部分はまだレイアウトを改善していません。src/app/items/[id]/page.tsx で行った変更を参考に、商品詳細ページも自由に改善してみましょう。

課題2: 商品を売れた数の順位でソートしてみよう

items.json には totalSales というフィールドがあります。これは商品の売れた数を表しています。

このフィールドを使って、商品を売れた数の順位でソートしてみましょう。

課題3: カテゴリーごとに商品を一覧しよう

items.json には category というフィールドがあります。カテゴリーごとに商品を一覧するページを作成してみましょう。

課題4: 絵文字を変更してみよう

src/app/items/[id]/like.tsx で表示する絵文字を変更・追加してみましょう。

下記のCSSに変更すると、アニメーションの種類を追加できます。追加したアニメーションがランダムが出るように変更してみてください。

@keyframes spiral {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes zigzag {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}