Feature/46 award

package.json

@@ -26,6 +26,7 @@
     "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
     "babel-plugin-react-compiler": "1.0.0",
+    "baseline-browser-mapping": "^2.9.19",
     "typescript": "^5"
   }
 }

src/app/events/[eventId]/page.tsx

@@ -3,7 +3,7 @@ import CardList from "@/components/CardList";
 import MarkdownContent from "@/components/ui/MarkdownContent";
 import PageTitle from "@/components/ui/PageTitle";
 import Paper from "@/components/ui/Paper";
-import { getAllEventIds, getEvent, getWorks } from "@/lib/microcms";
+import { getEvent, getWorks } from "@/lib/microcms";
 import { unstable_noStore as noStore } from "next/cache";
 import { notFound } from "next/navigation";
 import styles from "./page.module.css";
@@ -13,17 +13,6 @@ type EventDetailsPageProps = {
   searchParams: Promise<{ draftKey?: string }>;
 };
 
-export const revalidate = 60;
-
-// 静的パスを生成
-export async function generateStaticParams() {
-  // getAllEventIdsを使用して全てのイベントIDを取得
-  const allEventIds = await getAllEventIds();
-  return allEventIds.map((content) => ({
-    eventId: content.id,
-  }));
-}
-
 // propsを直接受け取り、paramsをawaitで解決する
 export default async function EventDetailsPage(props: EventDetailsPageProps) {
   // paramsオブジェクト自体をawaitで解決

src/app/works/[workId]/page.module.css

@@ -23,6 +23,30 @@
       }
     }
 
+    .awards-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .awards-label {
+      font-size: 1.6rem;
+      font-weight: 700;
+      margin-bottom: 0;
+      white-space: nowrap;
+      min-width: 5.2rem;
+    }
+
+    .awards {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+      font-size: 1.6rem;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
     .links {
       display: flex;
       flex-direction: column;
@@ -88,5 +112,5 @@
   align-items: center;
   height: calc(100vh - 200px);
   font-size: 1.6rem;
-  font-weight: 600;;
+  font-weight: 600;
 }

src/app/works/[workId]/page.tsx

@@ -3,11 +3,12 @@ import Hero from "@/components/ui/Hero";
 import MarkdownContent from "@/components/ui/MarkdownContent";
 import Paper from "@/components/ui/Paper";
 import Tag from "@/components/ui/Tag";
-import { getAllWorkIds, getWork } from "@/lib/microcms";
+import { getWork } from "@/lib/microcms";
 import { unstable_noStore as noStore } from "next/cache";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import styles from "./page.module.css";
+import awardFormatter from "@/lib/awardsFormatter";
 
 interface WorkDetailsParams {
   workId: string;
@@ -24,15 +25,6 @@ interface WorkDetailsPageProps {
   searchParams: Promise<WorkDetailsSearchParams>;
 }
 
-export const revalidate = 60; // ページデータの再検証間隔
-
-export async function generateStaticParams() {
-  const allWorkIds = await getAllWorkIds(); // getAllWorkIdsを使用
-  return allWorkIds.map((content) => ({
-    workId: content.id,
-  }));
-}
-
 export default async function WorkDetailsPage(props: WorkDetailsPageProps) {
   const params = await props.params;
   const searchParams = await props.searchParams;
@@ -124,6 +116,19 @@ export default async function WorkDetailsPage(props: WorkDetailsPageProps) {
             </Paper>
           )}
         </div>
+        {workData.awards && workData.awards.length > 0 && (
+          <Paper>
+            <div className={styles["awards-row"]}>
+              <p className={styles["awards-label"]}>受賞歴</p>
+              <div className={styles.awards}>
+                {awardFormatter(workData.awards)
+                  .map((award) => `${award.eventTitle} - ${award.awardTitle}`)
+                  .join("、")}
+              </div>
+            </div>
+          </Paper>
+        )}
+
         {workData.details && workData.details.length > 0 && (
           <div className={styles.details}>
             {workData.details.map((detail, index) => (

src/components/CardList/index.tsx

@@ -3,6 +3,7 @@ import EventCard from "@/components/EventCard";
 import WorkCard from "@/components/WorkCard";
 import type { Event, Work } from "@/lib/microcms";
 import dateFormatter from "@/lib/dateFormater";
+import awardFormatter from "@/lib/awardsFormatter";
 
 interface EventCardListProps {
   contents: Event[];
@@ -38,6 +39,7 @@ const CardList = ({ contents, isEvent, ...props }: CardListProps) => {
                 id={work.id}
                 title={work.title}
                 thumbnailUrl={work.thumbnail?.url || "/dummy.jpg"}
+                awards={awardFormatter(work.awards)}
                 tags={
                   work.tags?.map((tag) => tag.name).filter(Boolean) as
                     | string[]

src/components/WorkCard/index.tsx

@@ -3,11 +3,14 @@ import Image from "next/image";
 import styles from "./styles.module.css";
 import Tag from "@/components/ui/Tag";
 import Link from "next/link";
+import Badge from "@/components/ui/Badge";
+import type { formattedAward } from "@/lib/awardsFormatter";
 
 interface WorkCardProps {
   id: string; // idを追加
   title: string;
   thumbnailUrl: string;
+  awards?: formattedAward[];
   tags: string[];
   eventId?: string;
   eventTitle?: string;
@@ -17,6 +20,7 @@ const WorkCard = ({
   id,
   title,
   thumbnailUrl,
+  awards,
   tags,
   eventId,
   eventTitle,
@@ -26,9 +30,20 @@ const WorkCard = ({
       ? `/works/${id}?eventId=${eventId}&eventTitle=${encodeURIComponent(eventTitle)}`
       : `/works/${id}`;
 
+  const displayAwards = eventId
+    ? awards?.filter((a) => a.eventId === eventId)
+    : awards;
+
   return (
     <Card>
-      <Link href={href}>
+      <Link href={href} className={styles.link}>
+        {displayAwards && displayAwards.length > 0 && (
+          <div className={styles.badges}>
+            {displayAwards.map((award) => (
+              <Badge key={award.awardTitle}>{award.awardTitle}</Badge>
+            ))}
+          </div>
+        )}
         <div className={styles.thumbnail}>
           <Image
             src={thumbnailUrl}

src/components/WorkCard/styles.module.css

@@ -14,6 +14,24 @@
   }
 }
 
+.link {
+  position: relative;
+  display: block;
+  height: 100%;
+}
+
+.badges {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 14px;
+  align-items: flex-start;
+  z-index: 2;
+  white-space: nowrap;
+}
+
 .info {
   display: flex;
   flex-direction: column;