Merge pull request #452 from Marukome0743/pr452

♻️refactor: define react types

app/about/page.tsx

@@ -1,7 +1,7 @@
 import { Heading } from "@/app/components/layout/heading"
 import { ABOUT } from "@/app/lib/constant"
-import type React from "react"
+import type { JSX } from "react"
 
-export default function About(): React.JSX.Element {
+export default function About(): JSX.Element {
   return <Heading menu={ABOUT} />
 }

app/components/button/scrollToTop.tsx

@@ -2,9 +2,9 @@
 
 import { ChevronDoubleUpIcon } from "@heroicons/react/24/solid"
 import { type RefObject, useEffect, useRef, useState } from "react"
-import type React from "react"
+import type { JSX } from "react"
 
-export function ScrollToTop(): React.JSX.Element {
+export function ScrollToTop(): JSX.Element {
   const ref: RefObject<HTMLButtonElement> = useRef<HTMLButtonElement>(null)
   const scrollBtn: HTMLButtonElement = ref.current as HTMLButtonElement
   const [scrollY, setScrollY] = useState<number>(0)

app/components/layout/footer.tsx

@@ -1,8 +1,8 @@
 import Image from "next/image"
 import Link from "next/link"
-import type React from "react"
+import type { JSX } from "react"
 
-export function Footer(): React.JSX.Element {
+export function Footer(): JSX.Element {
   return (
     <footer className="footer flex flex-row items-center bg-base-300 justify-center p-4 text-base-content">
       <aside>

app/components/layout/header.tsx

@@ -8,8 +8,7 @@ import {
   SwatchIcon,
 } from "@heroicons/react/24/outline"
 import Link from "next/link"
-import type React from "react"
-import { type RefObject, useRef, useState } from "react"
+import { type JSX, type RefObject, useRef, useState } from "react"
 
 const themes: Theme[] = [
   { name: "デフォルト", value: "light" },
@@ -46,7 +45,7 @@ const themes: Theme[] = [
   { name: "サンセット", value: "sunset" },
 ] as const
 
-export function Header(): React.JSX.Element {
+export function Header(): JSX.Element {
   const [scrollY, setScrollY] = useState<{
     scrollY: number
     isScrollDown: boolean
@@ -89,7 +88,7 @@ export function Header(): React.JSX.Element {
   )
 }
 
-function DropdownMenu(): React.JSX.Element {
+function DropdownMenu(): JSX.Element {
   const ref: RefObject<HTMLDetailsElement> = useRef<HTMLDetailsElement>(null)
 
   if (typeof window !== "undefined") {
@@ -121,7 +120,7 @@ function DropdownMenu(): React.JSX.Element {
   )
 }
 
-function Navigation(): React.JSX.Element {
+function Navigation(): JSX.Element {
   return (
     <ul className="menu menu-horizontal px-1">
       {NAVIGATION.map((menu) => (
@@ -136,7 +135,7 @@ function Navigation(): React.JSX.Element {
   )
 }
 
-function ThemeController(): React.JSX.Element {
+function ThemeController(): JSX.Element {
   return (
     <div className="dropdown dropdown-end">
       <div tabIndex={0} role="button" className="btn gap-1">

app/components/layout/heading.tsx

@@ -1,9 +1,9 @@
 import type { Menu } from "@/app/interfaces/menu"
 import { HomeIcon } from "@heroicons/react/24/solid"
 import Link from "next/link"
-import type React from "react"
+import type { JSX } from "react"
 
-export function Heading({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
+export function Heading({ menu }: Readonly<{ menu: Menu }>): JSX.Element {
   return (
     <section className="gap-4 grid">
       <Breadcrumb menu={menu} />
@@ -15,7 +15,7 @@ export function Heading({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
   )
 }
 
-function Breadcrumb({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
+function Breadcrumb({ menu }: Readonly<{ menu: Menu }>): JSX.Element {
   return (
     <div className="breadcrumbs pl-6 text-sm">
       <ul>

app/contact/page.tsx

@@ -1,7 +1,7 @@
 import { Heading } from "@/app/components/layout/heading"
 import { CONTACT } from "@/app/lib/constant"
-import type React from "react"
+import type { JSX } from "react"
 
-export default function Contact(): React.JSX.Element {
+export default function Contact(): JSX.Element {
   return <Heading menu={CONTACT} />
 }

app/info/page.tsx

@@ -1,7 +1,7 @@
 import { Heading } from "@/app/components/layout/heading"
 import { INFO } from "@/app/lib/constant"
-import type React from "react"
+import type { JSX } from "react"
 
-export default function Info(): React.JSX.Element {
+export default function Info(): JSX.Element {
   return <Heading menu={INFO} />
 }

app/interfaces/menu.ts

@@ -1,8 +1,8 @@
-import type React from "react"
+import type { ElementType } from "react"
 
 export type Menu = {
   name: string
   href: string
   color: string
-  icon: React.ElementType
+  icon: ElementType
 }

app/layout.tsx

@@ -1,10 +1,10 @@
+import { ScrollToTop } from "@/app/components/button/scrollToTop"
+import { Footer } from "@/app/components/layout/footer"
+import { Header } from "@/app/components/layout/header"
+import { SITE_TITLE } from "@/app/lib/constant"
 import type { Metadata } from "next"
-import type React from "react"
-import { Footer } from "./components/layout/footer"
-import { Header } from "./components/layout/header"
+import type { JSX, ReactNode } from "react"
 import "./globals.css"
-import { ScrollToTop } from "./components/button/scrollToTop"
-import { SITE_TITLE } from "./lib/constant"
 
 export const metadata: Metadata = {
   title: SITE_TITLE,
@@ -14,9 +14,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
+}: Readonly<{ children: ReactNode }>): JSX.Element {
   return (
     <html lang="ja">
       <body>

app/member/page.tsx

@@ -1,7 +1,7 @@
 import { Heading } from "@/app/components/layout/heading"
 import { MEMBER } from "@/app/lib/constant"
-import type React from "react"
+import type { JSX } from "react"
 
-export default function Member(): React.JSX.Element {
+export default function Member(): JSX.Element {
   return <Heading menu={MEMBER} />
 }

app/page.tsx

@@ -1,8 +1,8 @@
 import { ABOUT, SITE_TITLE } from "@/app/lib/constant"
 import Link from "next/link"
-import type React from "react"
+import type { JSX } from "react"
 
-export default function Home(): React.JSX.Element {
+export default function Home(): JSX.Element {
   return (
     <article className="hero min-h-screen bg-[url('/iwate_mountain.avif')]">
       <div className="hero-overlay bg-opacity-70" />