Merge pull request #449 from Marukome0743/pr449

♻️refactor: use avif image

app/components/button/scrollToTop.tsx

@@ -11,35 +11,40 @@ export function ScrollToTop(): React.JSX.Element {
   const [isScrollDown, setIsScrollDown] = useState<boolean>(false)
   const scrollPoint: number = 200
 
-  if (typeof window !== "undefined") {
-    window.addEventListener("scroll", () => setScrollY(window.scrollY))
-  }
-
   useEffect(() => {
-    if (scrollPoint < scrollY) {
+    window.addEventListener("scroll", () => setScrollY(window.scrollY))
+    if (
+      scrollPoint < scrollY &&
+      !scrollBtn.classList.contains("scroll-to-top")
+    ) {
+      scrollBtn.classList.remove("hidden")
+      scrollBtn.classList.remove("fade-out-down")
+      scrollBtn.classList.add("fade-in-up")
       setIsScrollDown(true)
     }
     if (scrollY < scrollPoint && isScrollDown) {
       scrollBtn.classList.remove("fade-in-up")
-      scrollBtn.classList.remove("hidden")
+      scrollBtn.classList.remove("scroll-to-top")
       scrollBtn.classList.add("fade-out-down")
     }
+    return () => {
+      window.removeEventListener("scroll", () => setScrollY(window.scrollY))
+    }
   })
 
   function scrollToTop(): void {
     scrollBtn.classList.remove("fade-in-up")
     scrollBtn.classList.add("fade-out-down")
+    scrollBtn.classList.add("scroll-to-top")
     window.scrollTo({ top: 0, behavior: "smooth" })
   }
 
   return (
     <button
       type="button"
       ref={ref}
-      className={`btn btn-square btn-primary fixed right-5 bottom-5 gap-0 hover:scale-110 ${
-        scrollY < scrollPoint ? "hidden" : "fade-in-up"
-      }`}
-      onClick={() => scrollToTop()}
+      className="btn btn-square btn-primary hidden fixed bottom-5 right-5 gap-0 hover:scale-110"
+      onClick={scrollToTop}
     >
       <ChevronDoubleUpIcon className="size-8 scroll-up" />
       TOP

app/components/layout/header.tsx

@@ -9,7 +9,7 @@ import {
 } from "@heroicons/react/24/outline"
 import Link from "next/link"
 import type React from "react"
-import { useState } from "react"
+import { type RefObject, useRef, useState } from "react"
 
 const themes: Theme[] = [
   { name: "デフォルト", value: "light" },
@@ -64,19 +64,22 @@ export function Header(): React.JSX.Element {
 
   return (
     <header
-      className={`transition duration-400 ease bg-base-100 navbar sticky top-0 z-10 ${
+      className={`transition duration-400 ease bg-base-100 navbar sticky z-10 ${
         headerHeight < scrollY.scrollY && scrollY.isScrollDown
           ? "-translate-y-20"
           : "translate-y-0"
       }`}
     >
       <div className="navbar-start">
         <DropdownMenu />
-        <Link href="/" className="btn btn-ghost text-xl tilt-shaking">
+        <Link
+          href="/"
+          className="btn btn-ghost navbar-center text-xl tilt-shaking"
+        >
           {SITE_TITLE}
         </Link>
       </div>
-      <nav className="navbar-center hidden lg:flex">
+      <nav className="hidden navbar-center lg:flex">
         <Navigation />
       </nav>
       <div className="navbar-end">
@@ -87,24 +90,34 @@ export function Header(): React.JSX.Element {
 }
 
 function DropdownMenu(): React.JSX.Element {
+  const ref: RefObject<HTMLDetailsElement> = useRef<HTMLDetailsElement>(null)
+
+  if (typeof window !== "undefined") {
+    window.addEventListener("click", () => {
+      if (ref.current) {
+        ref.current.open = false
+      }
+    })
+  }
+
   return (
-    <div className="dropdown">
-      <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+    <details ref={ref} className="dropdown">
+      <summary className="btn btn-ghost lg:hidden">
         <Bars3CenterLeftIcon className="size-7" />
-      </div>
+      </summary>
       <nav>
-        <ul className="menu menu-sm dropdown-content z-10 mt-3 w-52 rounded-box bg-base-100 p-2 shadow">
+        <ul className="bg-base-100 dropdown-content menu menu-sm mt-3 p-2 rounded-box z-10">
           {NAVIGATION.map((menu) => (
             <li key={menu.name}>
-              <Link href={menu.href} className="font-bold">
+              <Link href={menu.href} className="font-bold text-nowrap">
                 <menu.icon className={`size-5 ${menu.color}`} />
                 {menu.name}
               </Link>
             </li>
           ))}
         </ul>
       </nav>
-    </div>
+    </details>
   )
 }
 
@@ -126,18 +139,18 @@ function Navigation(): React.JSX.Element {
 function ThemeController(): React.JSX.Element {
   return (
     <div className="dropdown dropdown-end">
-      <div tabIndex={0} role="button" className="btn m-1">
+      <div tabIndex={0} role="button" className="btn gap-1">
         <SwatchIcon className="size-5 text-success" />
         テーマ
         <ChevronDownIcon className="size-5" />
       </div>
-      <ul className="dropdown-content z-10 h-52 w-40 overflow-y-auto rounded-box bg-base-300 p-2 shadow-2xl">
+      <ul className="bg-base-300 dropdown-content h-52 overflow-y-auto p-2 rounded-box shadow-2xl z-10">
         {themes.map((theme) => (
           <li key={theme.name}>
             <input
               type="radio"
               name="theme-dropdown"
-              className="theme-controller btn btn-sm btn-block btn-ghost justify-start"
+              className="btn btn-block btn-sm btn-ghost justify-start text-nowrap theme-controller"
               aria-label={theme.name}
               value={theme.value}
             />

app/components/layout/heading.tsx

@@ -5,25 +5,23 @@ import type React from "react"
 
 export function Heading({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
   return (
-    <section>
-      <div className="max-w-fit mx-auto">
-        <h1 className="typing font-bold text-3xl">
-          <menu.icon className={`inline size-9 mr-1 mb-1 ${menu.color}`} />
-          {menu.name}
-        </h1>
-      </div>
+    <section className="gap-4 grid">
       <Breadcrumb menu={menu} />
+      <h1 className="font-bold max-w-min mx-auto text-3xl typing">
+        <menu.icon className={`inline size-9 mr-1 mb-1 ${menu.color}`} />
+        {menu.name}
+      </h1>
     </section>
   )
 }
 
 function Breadcrumb({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
   return (
-    <div className="text-sm breadcrumbs">
+    <div className="breadcrumbs pl-6 text-sm">
       <ul>
         <li>
           <Link href="/">
-            <HomeIcon className="size-5 mr-1 text-primary" />
+            <HomeIcon className="mr-1 size-5 text-primary" />
             ホーム
           </Link>
         </li>

app/globals.css

@@ -19,9 +19,8 @@
 }
 
 .typing {
-  animation: typing 4s steps(20) infinite, blink .7s infinite;
+  animation: typing 8s steps(40) infinite, blink .7s infinite;
   border-right: .15em solid orange;
-  margin: auto;
   overflow: hidden;
   white-space: nowrap;
 }

app/lib/constant.ts

@@ -11,7 +11,7 @@ export const SITE_TITLE: string = "OPENUP ラボ滝沢"
 export const INFO: Menu = {
   name: "最新情報",
   href: "/info",
-  color: "text-primary",
+  color: "text-orange-400",
   icon: NewspaperIcon,
 }
 export const ABOUT: Menu = {

app/page.test.tsx

@@ -12,7 +12,7 @@ test("h1 test", () => {
 test("p test", () => {
   const p = document.querySelectorAll("p")
   expect(p[0]?.innerText).toEqual(
-    "岩手県立大学と滝沢市が産官学連携を目的として設立した滝沢市IPUイノベーションセンターにOPEN UPラボ滝沢は入居しています。",
+    "岩手県立大学と滝沢市が産官学連携を目的として設立した滝沢市IPUイノベーションセンターにOPENUP ラボ滝沢は入居しています。",
   )
   expect(p[1]?.innerText).toEqual(
     "ラボを取り巻くコミュニティとの協働や新たな取り組みで連携し、地域社会への貢献を行っています。",

app/page.tsx

@@ -1,40 +1,43 @@
-import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline"
+import { ABOUT, SITE_TITLE } from "@/app/lib/constant"
 import Link from "next/link"
 import type React from "react"
 
 export default function Home(): React.JSX.Element {
   return (
-    <div className="hero min-h-screen bg-[url('/iwate_mountain.webp')]">
-      <div className="hero-overlay bg-opacity-60" />
-      <div className="hero-content text-center text-neutral-content">
-        <div className="max-w-md">
-          <div className="max-w-fit mb-5 mx-auto">
-            <h1 className="typing font-bold text-3xl">
-              <span className="font-bold text-5xl text-primary">
-                テクノロジー
-              </span>
-              で
-              <br />
-              <span className="font-bold text-5xl text-accent">地域貢献</span>
-              に取り組む
-            </h1>
-          </div>
-          <p className="mb-5">
-            岩手県立大学と滝沢市が産官学連携を目的として設立した滝沢市IPUイノベーションセンターにOPEN
-            UPラボ滝沢は入居しています。
-          </p>
-          <p className="mb-5">
-            ラボを取り巻くコミュニティとの協働や新たな取り組みで連携し、地域社会への貢献を行っています。
-          </p>
-          <Link
-            href="/about"
-            className="[&:not(:hover)]:animate-bounce btn btn-warning"
-          >
-            <QuestionMarkCircleIcon className="size-5 text-accent" />
-            ラボ滝沢とは？
-          </Link>
-        </div>
-      </div>
-    </div>
+    <article className="hero min-h-screen bg-[url('/iwate_mountain.avif')]">
+      <div className="hero-overlay bg-opacity-70" />
+      <section className="hero-content gap-4 grid text-center text-neutral-content">
+        <h1 className="font-bold max-w-fit text-3xl typing">
+          <span className="text-5xl text-primary">テクノロジー</span>
+          で
+          <br />
+          <span className="text-5xl text-accent">地域貢献</span>
+          に取り組む
+        </h1>
+        <p>
+          岩手県立大学と滝沢市が
+          <br />
+          産官学連携を目的として設立した
+          <br />
+          滝沢市IPUイノベーションセンターに
+          <br />
+          {SITE_TITLE}は入居しています。
+        </p>
+        <p>
+          ラボを取り巻くコミュニティとの協働や
+          <br />
+          新たな取り組みで連携し、
+          <br />
+          地域社会への貢献を行っています。
+        </p>
+        <Link
+          href="/about"
+          className="[&:not(:hover)]:animate-bounce btn btn-warning mx-auto w-fit"
+        >
+          <ABOUT.icon className={`size-5 ${ABOUT.color}`} />
+          {ABOUT.name}
+        </Link>
+      </section>
+    </article>
   )
 }