スポンサー(パートナー)ページの実装 (#170)

* feat: partner page

* SAMPLE json / images

* fix: `desc` to `description`

* fix: simplify prop type name

* fix: `desc` to `description`

* fix: extract params from context

Author: snaka

data/partners.json

@@ -0,0 +1,50 @@
+{
+  "platinum": [
+    {
+      "id": "platinum-1",
+      "name": "株式会社 プラチナワン",
+      "description": "Sea tempor feugait et elit et sanctus kasd eirmod. Praesent amet qui iriure ipsum exerci clita sit et volutpat eos rebum elitr. Autem laoreet labore lorem commodo. At aliquyam sit est kasd diam nostrud adipiscing nonumy sit duo dolores in dolor suscipit. Consetetur quis ea dolore sed in magna facilisi delenit. Erat kasd at sea ex takimata feugiat. Eos tempor diam delenit adipiscing takimata. Autem diam accusam. Et nisl sanctus kasd ipsum diam odio nonumy amet. Nisl sed amet sea et clita autem nostrud dolore autem euismod invidunt. Augue blandit tempor no dolore. Et sit no duo. Diam takimata lobortis erat eos consetetur dolor ut ea amet justo eum eos invidunt ipsum nonummy justo ut."
+    },
+    {
+      "id": "platinum-2",
+      "name": "株式会社 プラチナツー",
+      "description": "Sea tempor feugait et elit et sanctus kasd eirmod. Praesent amet qui iriure ipsum exerci clita sit et volutpat eos rebum elitr. Autem laoreet labore lorem commodo. At aliquyam sit est kasd diam nostrud adipiscing nonumy sit duo dolores in dolor suscipit. Consetetur quis ea dolore sed in magna facilisi delenit. Erat kasd at sea ex takimata feugiat. Eos tempor diam delenit adipiscing takimata. Autem diam accusam. Et nisl sanctus kasd ipsum diam odio nonumy amet. Nisl sed amet sea et clita autem nostrud dolore autem euismod invidunt. Augue blandit tempor no dolore. Et sit no duo. Diam takimata lobortis erat eos consetetur dolor ut ea amet justo eum eos invidunt ipsum nonummy justo ut."
+    }
+  ],
+  "gold": [
+    {
+      "id": "gold-1",
+      "name": "株式会社 ゴールドワン",
+      "description": "Hendrerit duis te vel et possim et feugiat. Dolores clita lorem quis nibh no takimata dolores invidunt vero rebum tempor. Nibh sanctus accusam commodo facilisis eirmod no at consetetur feugiat erat et dolores justo labore vel vel et. Et tation euismod vel duo assum ipsum takimata est et vulputate no dolore."
+    },
+    {
+      "id": "gold-2",
+      "name": "株式会社 ゴールド・ツー",
+      "description": "Hendrerit duis te vel et possim et feugiat. Dolores clita lorem quis nibh no takimata dolores invidunt vero rebum tempor. Nibh sanctus accusam commodo facilisis eirmod no at consetetur feugiat erat et dolores justo labore vel vel et. Et tation euismod vel duo assum ipsum takimata est et vulputate no dolore."
+    }
+  ],
+  "silver": [
+    "silver-1",
+    "silver-2",
+    "silver-3",
+    "silver-4",
+    "silver-5",
+    "silver-6",
+    "silver-7",
+    "silver-8"
+  ],
+  "bronze": [
+    "bronze-1",
+    "bronze-2",
+    "bronze-3",
+    "bronze-4",
+    "bronze-5",
+    "bronze-6",
+    "bronze-7",
+    "bronze-8",
+    "bronze-9",
+    "bronze-10",
+    "bronze-11",
+    "bronze-12"
+  ]
+}

public/images/partners/gold-1.png

@@ -56,7 +56,7 @@ export const Layout: NextPage<LayoutProps> = ({ children }) => {
       <Box>
         <Header />
       </Box>
-      <Box component="main" sx={{ minHeight: 'calc(100vh - 124px)' }}>
+      <Box component="main" sx={{ minHeight: 'calc(100vh - 300px)' }}>
         {children}
       </Box>
       <Box>

public/images/partners/gold-2.png

@@ -0,0 +1,31 @@
+import { Box, Typography } from '@mui/material'
+import { NextPage } from 'next'
+import Image from 'next/image'
+import { Layout } from 'src/components/commons'
+import { Header } from 'src/components/organisms'
+
+export type PartnerRank = 'platinum' | 'gold'
+
+type Props = {
+  id: string
+  name: string
+  description: string
+}
+
+export const PagePartner = ({ id, name, description }: Props) => {
+  return (
+    <Layout>
+      <Box sx={{ mx: '160px' }} display="flex" flexDirection="column">
+        <Box sx={{ mt: '120px', py: '24px' }} display="flex">
+          <Image src={`/2023/images/partners/${id}.png`} width={'200px'} height={'120px'} alt={id} />
+          <Typography variant="h1" sx={{ ml: '24px', width: '100%', textAlign: 'center', alignContent: 'center' }}>
+            {name}
+          </Typography>
+        </Box>
+        <Box>
+          <Typography variant="body1">{description}</Typography>
+        </Box>
+      </Box>
+    </Layout>
+  )
+}

public/images/partners/platinum-1.png

@@ -0,0 +1,51 @@
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { PagePartner } from 'src/components/pages/PagePartner'
+
+import partners from 'data/partners.json'
+
+export type Rank = keyof typeof partners
+
+type PageProps = {
+  id: string
+  name: string
+  description: string
+  rank: Extract<Rank, 'platinum' | 'gold'>
+}
+
+export const PartnerPage = (props: PageProps) => {
+  return <PagePartner {...props} />
+}
+
+type PathProps = Pick<PageProps, 'id' | 'rank'>
+
+export const getStaticPaths: GetStaticPaths<PathProps> = async () => {
+  const platinumPartners = partners.platinum.map(p => ({ params: { rank: 'platinum' as const, id: p.id } }))
+  const goldPartners = partners.gold.map(p => ({ params: { rank: 'gold' as const, id: p.id } }))
+
+  return {
+    paths: [...platinumPartners, ...goldPartners],
+    fallback: false
+  }
+}
+
+/**
+ * partners.json から path params に対応した情報の抜き出し page の props として返す
+ */
+export const getStaticProps: GetStaticProps<PageProps> = async ({ params }) => {
+  const rank = params?.rank as Rank | undefined
+  if (!rank) throw new Error(`rank is required : ${params}`)
+  if (rank !== 'platinum' && rank !== 'gold') throw new Error('invalid rank')
+
+  const id = params?.id as string | undefined
+  if (!id) throw new Error(`id is required : ${params}`)
+
+  const { name, description } = partners[rank].find(p => p.id === id) ?? {}
+  if (!name) throw new Error(`name is required : ${params}`)
+  if (!description) throw new Error(`description is required : ${params}`)
+
+  return {
+    props: { id, name, rank, description }
+  }
+}
+
+export default PartnerPage