chore(deps): update dependency typescript to v4.9.5

.npmrc

@@ -0,0 +1 @@
+save-exact=true

package.json

@@ -22,12 +22,14 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "11.18.6",
-    "react-rewards": "^2.0.4",
+    "react-rewards": "2.0.4",
     "swr": "2.0.3",
-    "use-local-storage-state": "18.1.1"
+    "use-local-storage-state": "18.1.1",
+    "zod": "3.21.4"
   },
   "devDependencies": {
     "@babel/core": "7.19.3",
+    "@faker-js/faker": "7.6.0",
     "@storybook/addon-actions": "6.5.12",
     "@storybook/addon-essentials": "6.5.12",
     "@storybook/addon-interactions": "6.5.12",
@@ -48,8 +50,8 @@
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
     "storybook-addon-material-ui5": "1.0.0",
-    "storybook-addon-next": "^1.6.9",
-    "typescript": "4.8.2"
+    "storybook-addon-next": "1.6.9",
+    "typescript": "4.9.5"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/components/molecules/PlenumCard/PlenumCard.stories.tsx

@@ -0,0 +1,19 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import { PlenumCard } from '.'
+import { Box } from '@mui/material'
+
+const meta: ComponentMeta<typeof PlenumCard> = {
+  component: PlenumCard
+}
+export default meta
+
+const Template: ComponentStory<typeof PlenumCard> = args => (
+  <Box width="300px">
+    <PlenumCard {...args} />
+  </Box>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  title: 'Break'
+}

src/components/molecules/PlenumCard/index.tsx

@@ -0,0 +1,22 @@
+import { Typography, Box } from '@mui/material'
+import { Colors } from 'src/styles/color'
+
+export interface PlenumCardProps {
+  title: string
+}
+
+export const PlenumCard = ({ title }: PlenumCardProps) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: Colors.background.secondary_blue,
+        padding: '20px 16px',
+        borderRadius: '4px',
+        // TODO(@maito1201): タイムテーブルに組み込んだ時の適度な幅にする
+        width: '100vw'
+      }}
+    >
+      <Typography variant="body2">{title}</Typography>
+    </Box>
+  )
+}

src/components/molecules/TrackCard/TrackCard.stories.tsx

@@ -0,0 +1,36 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import { faker } from '@faker-js/faker'
+import { TrackCard } from '.'
+import { Box } from '@mui/material'
+import { Colors } from 'src/styles/color'
+
+const meta: ComponentMeta<typeof TrackCard> = {
+  component: TrackCard
+}
+export default meta
+
+const Template: ComponentStory<typeof TrackCard> = args => (
+  <Box width="300px">
+    <TrackCard {...args} />
+  </Box>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  id: 'A1-1',
+  title: faker.lorem.paragraph(),
+  minute: 20,
+  speaker: faker.name.fullName(),
+  speakerIcon: faker.image.avatar()
+}
+
+export const Green = Template.bind({})
+Green.args = {
+  id: 'A1-1',
+  title: faker.lorem.paragraph(),
+  minute: 20,
+  speaker: faker.name.fullName(),
+  speakerIcon: faker.image.avatar(),
+  color: Colors.background.secondary_green,
+  idColor: Colors.background.primary_green
+}

src/components/molecules/TrackCard/index.tsx

@@ -0,0 +1,63 @@
+import { Typography, Box } from '@mui/material'
+import { Colors } from 'src/styles/color'
+import Image, { StaticImageData } from 'next/image'
+
+export interface TrackCardProps {
+  id: string
+  title: string
+  minute: number
+  speaker: string
+  speakerIcon: string | StaticImageData
+  color?: string
+  idColor?: string
+}
+
+export const TrackCard = ({
+  id,
+  title,
+  minute,
+  speaker,
+  speakerIcon,
+  color = Colors.background.secondary_pink,
+  idColor = Colors.background.primary_pink
+}: TrackCardProps) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: color,
+        padding: '16px',
+        borderRadius: '4px',
+        width: '100%'
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          backgroundColor: idColor,
+          borderRadius: '2px',
+          width: 'fit-content',
+          padding: '0 4px',
+          mb: '4px'
+        }}
+      >
+        <Typography variant="caption" color={Colors.text.white}>
+          {id}
+        </Typography>
+      </Box>
+      <Box mb="4px">
+        <Typography variant="body2">{title}</Typography>
+      </Box>
+      <Box display="flex" alignItems="center">
+        <Box width="20px" height="20px" borderRadius="50%" overflow="hidden" margin="0 4px 0 0">
+          <Image src={speakerIcon} width={20} height={20} objectFit="contain" alt={`${speaker}'s icon`} quality={100} />
+        </Box>
+        <Typography variant="caption" fontWeight="bold">
+          {speaker}
+        </Typography>
+        <Typography variant="caption" margin="0 0 0 auto">
+          ({minute}min)
+        </Typography>
+      </Box>
+    </Box>
+  )
+}

src/components/organisms/SponsorsSection/index.tsx

@@ -1,8 +1,6 @@
 import type { FC } from 'react'
-import Link from 'next/link'
 import { Box, Typography } from '@mui/material'
-import { Button } from 'src/components/atoms'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { Colors, confettiColors } from 'src/styles/color'
 import {
   GopherConductor,
@@ -40,9 +38,11 @@ export const SponsorsSection: FC = () => {
       <Typography variant="h2" textAlign={'center'}>
         Sponsors
       </Typography>
-      {/* TODO: This description will be changed as soon as the official wording is fixed. */}
-      <Typography variant="body1" mb={{ md: 5, xs: 2 }}>
-        {t('sponsors_description')}
+      <Typography
+        variant="body1"
+        sx={{ mb: { md: 5, xs: 2 }, textAlign: 'center', wordBreak: 'keep-all', overflowWrap: 'break-word' }}
+      >
+        <Trans t={t} i18nKey="sponsors_application_closed" />
       </Typography>
       {/* NOTE: Hide SponsorsCard until the top level sponsors has fixed.
       <Box gap={3} mb={5} display={'flex'} flexDirection={'column'} width={'100%'} alignItems={'center'}>
@@ -51,47 +51,22 @@ export const SponsorsSection: FC = () => {
         <SponsorsCard planType="silver" logoImages={[]}/>
         <SponsorsCard planType="bronze" logoImages={[]}/>
       </Box> */}
-      <Box display="grid" gridTemplateColumns={isTabletOrOver ? '1fr 1fr 1fr' : '1fr'} gap={2}>
+      <Box display="flex" alignItems="flex-end" justifyContent="flex-end" gap={0.5}>
+        <Image src={GopherConductor} alt="gopher conductor" />
+        <Image src={GopherDrummer} alt="gopher drummer" />
+        <Image src={GopherTrumpeter} alt="gopher trumpeter" />
+        <Image src={GopherPomPom} alt="gopher pom pom" />
+        <Image src={GopherFlowerBlue} alt="gopher flower blue" />
         {isTabletOrOver && (
-          <Box display="flex" alignItems="flex-end" justifyContent="flex-end" gap={0.5}>
-            <Image src={GopherConductor} alt="gopher conductor" />
-            <Image src={GopherDrummer} alt="gopher drummer" />
-            <Image src={GopherTrumpeter} alt="gopher trumpeter" />
-            <Image src={GopherPomPom} alt="gopher pom pom" />
-          </Box>
-        )}
-        <Link href="https://drive.google.com/file/d/1wwFeJk0rT0SydwDi2wx4wVVAD6psDUrL/view?usp=share_link">
-          <a target="_blank">
-            <Button text={t('consider_a_sponsor')} />
-          </a>
-        </Link>
-        {isTabletOrOver && (
-          <Box display="flex" alignItems="flex-end" gap={0.5}>
-            <Image src={GopherFlowerBlue} alt="gopher flower blue" />
+          <>
             <Image src={GopherFlowerPink} alt="gopher flower pink" />
             <Box onClick={reward} sx={{ '&:hover': { cursor: 'pointer' } }}>
               <span id="confettiGopherPopper" />
               <Image src={GopherPartyPopper} alt="gopher party popper" />
             </Box>
-          </Box>
+          </>
         )}
       </Box>
-      {!isTabletOrOver && (
-        <Box
-          sx={{
-            position: 'absolute',
-            zIndex: 0,
-            top: '56px',
-            right: 0,
-            display: 'flex',
-            alignItems: 'flex-end',
-            opacity: 0.7
-          }}
-        >
-          <Image src={GopherConductor} alt="gopher conductor" width="56px" objectFit="contain" />
-          <Image src={GopherDrummer} alt="gopher drummer" width="52px" objectFit="contain" />
-        </Box>
-      )}
     </Box>
   )
 }

src/i18n/en.json

@@ -17,5 +17,6 @@
   "host": "organizer",
   "gophers_japan": "Institute Gophers Japan",
   "act_on_specified_commercial_transactions": "Act on Specified Commercial Transactions",
-  "sponsors_description": "We are looking for sponsors!"
+  "sponsors_description": "We are looking for sponsors!",
+  "sponsors_application_closed": "Sponsors application has been closed. We will reflect the information on our website in due course."
 }

src/i18n/ja.json

@@ -17,5 +17,6 @@
   "host": "主催",
   "gophers_japan": "一般社団法人Gophers Japan",
   "act_on_specified_commercial_transactions": "特定商取引法に基づく表記",
-  "sponsors_description": "スポンサー募集中です!"
+  "sponsors_description": "スポンサー募集中です!",
+  "sponsors_application_closed": "スポンサーの募集は<wbr/>終了いたしました。<wbr/>ホームページへの反映は<wbr/>順次行って参ります。"
 }

src/modules/sessionize/hooks.ts

@@ -1,6 +1,26 @@
-import useSWR, { Fetcher } from 'swr'
+import useSWR from 'swr'
+import { sessionizeViewAllSchema, SessionizeViewAllSchemaType } from './schema'
 
-const fetcher: Fetcher<string> = (url: string): Promise<any> => fetch(url).then(res => res.json())
-export const useSessionize = () => {
-  return useSWR(`https://sessionize.com/api/v2/${process.env.NEXT_PUBLIC_SESSIONIZE_ID}/view/All`, fetcher)
+const fetcher = (url: string): Promise<SessionizeViewAllSchemaType> => fetch(url).then(res => res.json())
+export const useSessionize = (): SessionizeViewAllSchemaType | null => {
+  const { data, error } = useSWR(
+    `https://sessionize.com/api/v2/${process.env.NEXT_PUBLIC_SESSIONIZE_ID}/view/All`,
+    fetcher
+  )
+
+  if (error) {
+    console.error(error)
+    return null
+  }
+  if (!data) {
+    return null
+  }
+
+  const parsedResult = sessionizeViewAllSchema.safeParse(data)
+  if (!parsedResult.success) {
+    console.error(parsedResult.error)
+    return null
+  }
+
+  return parsedResult.data
 }

src/modules/sessionize/schema.ts

@@ -0,0 +1,75 @@
+import { z } from 'zod'
+
+const sessionizeSessionSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  description: z.string(),
+  startsAt: z.string(),
+  endsAt: z.string(),
+  isServiceSession: z.boolean(),
+  isPlenumSession: z.boolean(),
+  speakers: z.array(z.string()),
+  categoryItems: z.array(z.number()),
+  questionAnswers: z.array(z.string()),
+  roomId: z.number(),
+  liveUrl: z.null(),
+  recordingUrl: z.null(),
+  status: z.literal('Accepted')
+})
+
+const sessionizeSpeakerSchema = z.object({
+  id: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  bio: z.string(),
+  tagLine: z.string(),
+  profilePicture: z.string(),
+  isTopSpeaker: z.boolean(),
+  links: z.array(
+    z.object({
+      linkType: z.string(),
+      title: z.string(),
+      url: z.string()
+    })
+  ),
+  sessions: z.array(z.number()),
+  fullName: z.string(),
+  categoryItems: z.array(z.number()),
+  questionAnswers: z.array(z.string())
+})
+
+const sessionizeCategorySchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  items: z.array(
+    z.object({
+      id: z.number(),
+      name: z.string(),
+      sort: z.number()
+    })
+  ),
+  sort: z.number(),
+  type: z.literal('session')
+})
+
+const sessionizeRoomSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  sort: z.number()
+})
+
+/**
+ * Zod schema object for parsing the response from Sessionize's "View All" API.
+ */
+export const sessionizeViewAllSchema = z.object({
+  sessions: z.array(sessionizeSessionSchema),
+  speakers: z.array(sessionizeSpeakerSchema),
+  questions: z.array(z.any()),
+  categories: z.array(sessionizeCategorySchema),
+  rooms: z.array(sessionizeRoomSchema)
+})
+
+/**
+ * Type definition for the parsed response from Sessionize's "View All" API.
+ */
+export type SessionizeViewAllSchemaType = z.infer<typeof sessionizeViewAllSchema>

src/styles/color.ts

@@ -24,7 +24,13 @@ export const Colors = {
     secondary: '#F7F9FB',
     gopher_blue: '#00ADD8',
     gradation_blue: 'linear-gradient(180deg, #4E96E9 19.27%, rgba(77, 148, 230, 0) 88.54%)',
-    darken_1: 'rgba(0,0,0,0.125)'
+    darken_1: 'rgba(0,0,0,0.125)',
+    // NOTE(@maito1201): primary_blue is brand_color
+    primary_pink: '#EF5DA8',
+    primary_green: '#61B236',
+    secondary_pink: '#F8D9E8',
+    secondary_green: '#D9EBD4',
+    secondary_blue: '#D5E5F7'
   },
   border: {
     primary: {