🆙bump: version up dependencies (#1152)

* 🆙bump: version up dependencies

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

app/@modal/(.)history/modal.tsx

@@ -15,8 +15,8 @@ export function Modal({
   children,
 }: Readonly<{ children: ReactNode }>): JSX.Element {
   const router = useRouter()
-  const dialogRef: RefObject<HTMLDialogElement> =
-    useRef<HTMLDialogElement>(null)
+  const dialogRef: RefObject<HTMLDialogElement | null> =
+    useRef<HTMLDialogElement | null>(null)
 
   useEffect(() => {
     if (!dialogRef.current?.open) {

app/carousel.tsx

@@ -68,7 +68,8 @@ export function IndicatorCarousel(): JSX.Element {
     { title: "プログラミング体験", alt: programmingPictures[0].alt },
     { title: "体験学習", alt: eventPictures[0].alt },
   ] as const
-  const carouselRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null)
+  const carouselRef: RefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null)
   const imagesRef: RefObject<Map<string, HTMLImageElement>> = useRef<
     Map<string, HTMLImageElement>
   >(new Map<string, HTMLImageElement>())
@@ -326,7 +327,8 @@ export function ReviewCarousel(): JSX.Element {
       areaAndUser: "第4回 広島 小5、中2",
     },
   ] as const
-  const carouselRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null)
+  const carouselRef: RefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null)
   const reviewsRef: RefObject<Map<string, HTMLDivElement>> = useRef<
     Map<string, HTMLDivElement>
   >(new Map<string, HTMLDivElement>())

app/components/animation/bounce.tsx

@@ -12,7 +12,9 @@ export function Bounce({
   children,
   className = "",
 }: Readonly<{ children: ReactNode; className?: string }>): JSX.Element {
-  const ref: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null)
+  const ref: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(
+    null,
+  )
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {

app/components/animation/fadeInUp.tsx

@@ -12,7 +12,9 @@ export function FadeInUp({
   children,
   className = "",
 }: Readonly<{ children: ReactNode; className?: string }>): JSX.Element {
-  const ref: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null)
+  const ref: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(
+    null,
+  )
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {

app/components/animation/opacityZero.tsx

@@ -12,7 +12,9 @@ export function OpacityZero({
   children,
   className = "",
 }: Readonly<{ children: ReactNode; className?: string }>): JSX.Element {
-  const ref: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null)
+  const ref: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(
+    null,
+  )
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {

app/header.tsx

@@ -64,7 +64,8 @@ export function Header(): JSX.Element {
 function DropdownMenu({
   isScrollDown,
 }: Readonly<{ isScrollDown: boolean }>): JSX.Element {
-  const ref: RefObject<HTMLDetailsElement> = useRef<HTMLDetailsElement>(null)
+  const ref: RefObject<HTMLDetailsElement | null> =
+    useRef<HTMLDetailsElement | null>(null)
 
   useEffect(() => {
     if (isScrollDown && ref.current) {

app/layout.tsx

@@ -8,7 +8,7 @@ import { Zen_Kaku_Gothic_New, Zen_Maru_Gothic } from "next/font/google"
 import {
   CLOUDFRONT_URL,
   DESCRIPTION,
-  HIROSHIMA,
+  KANTO,
   SITE_TITLE,
   SITE_URL,
 } from "./lib/constant.ts"
@@ -43,13 +43,34 @@ export const metadata: Metadata = {
     siteName: SITE_TITLE,
     locale: "ja_JP",
     type: "website",
+    images: [
+      {
+        url: `${CLOUDFRONT_URL}/logo/opengraph.png`,
+        width: 578,
+        height: 432,
+        alt: `${SITE_TITLE} - プログラミング×体験学習`,
+      },
+    ],
     videos: [
       {
-        url: `${CLOUDFRONT_URL}/movie${HIROSHIMA.pathname}/202407.webm`,
+        url: `${CLOUDFRONT_URL}/movie${KANTO.pathname}/202410.webm`,
         type: "video/webm",
       },
     ],
   },
+  twitter: {
+    card: "summary_large_image",
+    title: SITE_TITLE,
+    description: DESCRIPTION,
+    images: [
+      {
+        url: `${CLOUDFRONT_URL}/logo/opengraph.png`,
+        width: 578,
+        height: 432,
+        alt: `${SITE_TITLE} - プログラミング×体験学習`,
+      },
+    ],
+  },
 }
 
 export default function RootLayout({

app/scrollToTop.tsx

@@ -4,7 +4,8 @@ import { ChevronDoubleUpIcon } from "@heroicons/react/24/solid"
 import { type JSX, type RefObject, useEffect, useRef, useState } from "react"
 
 export function ScrollToTop(): JSX.Element {
-  const ref: RefObject<HTMLButtonElement> = useRef<HTMLButtonElement>(null)
+  const ref: RefObject<HTMLButtonElement | null> =
+    useRef<HTMLButtonElement | null>(null)
   const [scrollY, setScrollY] = useState<number>(0)
   const [isScrollDown, setIsScrollDown] = useState<boolean>(false)
   const scrollPoint: number = 200

package.json

@@ -16,19 +16,19 @@
     "@heroicons/react": "^2.2.0",
     "@line/bot-sdk": "^9.5.0",
     "next": "canary",
-    "react": "canary",
-    "react-dom": "canary"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@happy-dom/global-registrator": "^15.11.7",
     "@playwright/test": "next",
     "@tailwindcss/postcss": "^4.0.0-beta.5",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@types/bun": "^1.1.14",
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "babel-plugin-react-compiler": "experimental",
     "postcss": "^8.4.49",
     "tailwindcss": "^4.0.0-beta.5",