update: Headerの修正

src/frontend/src/components/Elements/Header/Header.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from 'react-router-dom'
+
+type HeaderProps = {
+  title: string
+  showHeaderIcon: boolean
+}
+const HeaderIcon = () => {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate('/setting')
+  }
+
+  return (
+    <button type="button" className="w-8 h-8 rounded-full bg-light-buttonSecondaryDefault" onClick={handleClick} aria-label="ブーケページへ移動" />
+  )
+}
+
+export const Header = ({ title, showHeaderIcon }: HeaderProps) => {
+  return (
+    <div className="flex items-center justify-between w-full">
+      {title && <h1 className="text-2xl text-light-textPlaceholder">{title}</h1>}
+      {showHeaderIcon && <HeaderIcon />}
+    </div>
+  )
+}

src/frontend/src/components/Elements/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header'

src/frontend/src/components/layout/ContentLayout.tsx

@@ -1,16 +1,17 @@
 import type React from 'react'
+import { Header } from '../Elements/Header'
 import { Tab } from '../Elements/Tab'
-
 type ContentLayoutProps = {
   children: React.ReactNode
   pagetitle: string
+  showHeaderIcon?: boolean
 }
 
-export const ContentLayout = ({ children, pagetitle }: ContentLayoutProps) => {
+export const ContentLayout = ({ children, pagetitle, showHeaderIcon = false }: ContentLayoutProps) => {
   return (
     <div className="flex flex-col h-screen">
       <div className="flex flex-col flex-grow overflow-auto p-5">
-        {pagetitle && <h1 className="text-2xl text-light-textPlaceholder pl-1 pb-2">{pagetitle}</h1>}
+        <Header title={pagetitle} showHeaderIcon={showHeaderIcon} />
         <div className="flex-grow pt-2 pl-1">{children}</div>
       </div>
       <Tab />

src/frontend/src/features/bouquet/routes/bouquet.tsx

@@ -2,7 +2,7 @@ import { ContentLayout } from '@/components/layout'
 
 export const Bouquet = () => {
   return (
-    <ContentLayout pagetitle="Bouquet">
+    <ContentLayout pagetitle="Bouquet" showHeaderIcon={true}>
       <div>aaa</div>
     </ContentLayout>
   )

src/frontend/src/features/diary/routes/calendar.tsx

@@ -10,7 +10,7 @@ import '../styles/calendar.css'
 export const Calendar = () => {
   return (
     <div>
-      <ContentLayout pagetitle="Calendar">
+      <ContentLayout pagetitle="Calendar" showHeaderIcon={true}>
         <div className="pt-5">
           <FullCalendar
             plugins={[dayGridPlugin, interactionPlugin]}

src/frontend/src/features/flower/routes/flower.tsx

@@ -31,7 +31,7 @@ export const Flower = () => {
   }
 
   return (
-    <ContentLayout pagetitle="Diary">
+    <ContentLayout pagetitle="Diary" showHeaderIcon={true}>
       <div className="flex flex-col w-full h-full gap-2 justify-between overflow-hidden">
         {/* 日付 */}
         <div className="flex flex-col gap-5">