refactor: update layout components to use 'import type' for ReactNode and enhance Header component with dynamic title retrieval

src/app/inquiry/layout.tsx

@@ -1,3 +1,5 @@
-export default function layout({ children }: { children: React.ReactNode }) {
+import type { ReactNode } from 'react'
+
+export default function layout({ children }: { children: ReactNode }) {
   return <div className="container">{children}</div>
 }

src/app/pw-reset/layout.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react'
+
+interface PwResetLayoutProps {
+  children: ReactNode
+}
+
+export default function layout({ children }: PwResetLayoutProps) {
+  return (
+    <>
+      <div className="container">
+        <div className="sale-contents">
+          <div className="border-frame">
+            <div className="pw-guide">
+              <div className="pw-guide-tit">パスワードをリセットする</div>
+              <div className="pw-guide-txt">新しいパスワードを入力してください.</div>
+            </div>
+          </div>
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

src/app/pw-reset/page.tsx

@@ -0,0 +1,9 @@
+import PwResetForm from '@/components/pw-reset/PwResetForm'
+
+export default function page() {
+  return (
+    <>
+      <PwResetForm />
+    </>
+  )
+}

src/app/suitable/layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 interface SuitableLayoutProps {
   children: ReactNode

src/app/survey-sale/layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 interface SurveySaleLayoutProps {
   children: ReactNode

src/components/pw-reset/PwResetForm.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function PwResetForm() {
+  const [pwShow01, setPwShow01] = useState(false) //비밀번호 확인 보이기 숨기기
+  const [pwShow02, setPwShow02] = useState(false) //비밀번호 재확인 보이기 숨기기
+  const router = useRouter()
+
+  return (
+    <>
+      <div className="border-frame">
+        <div className="data-form-wrap">
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">
+              新規パスワード再入力 <i className="import">*</i>
+            </div>
+            <div className="data-input">
+              <div className="login-input pw change">
+                <input type={`${pwShow01 ? 'text' : 'password'}`} className="login-frame" placeholder="●●●●" />
+                <button className={`login-icon ${pwShow01 ? 'act' : ''}`} onClick={() => setPwShow01(!pwShow01)}>
+                  <i className="show-icon"></i>
+                </button>
+              </div>
+            </div>
+            <div className="data-input-guide">10文字以内</div>
+          </div>
+          <div className="data-input-form-bx">
+            <div className="data-input-form-tit">
+              新規パスワード入力 <i className="import">*</i>
+            </div>
+            <div className="data-input">
+              <div className="login-input pw change">
+                <input type={`${pwShow02 ? 'text' : 'password'}`} className="login-frame" placeholder="●●●●" />
+                <button className={`login-icon ${pwShow02 ? 'act' : ''}`} onClick={() => setPwShow02(!pwShow02)}>
+                  <i className="show-icon"></i>
+                </button>
+              </div>
+            </div>
+            <div className="data-input-guide">10文字以内</div>
+          </div>
+        </div>
+        <div className="btn-flex-wrap">
+          <div className="btn-bx">
+            <button className="btn-frame n-blue icon" onClick={() => router.back()}>
+              戻る<i className="btn-arr"></i>
+            </button>
+          </div>
+          <div className="btn-bx">
+            <button className="btn-frame red icon">
+              リセットする<i className="btn-arr"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/ui/common/Header.tsx

@@ -14,6 +14,7 @@ import 'swiper/css'
 import { axiosInstance } from '@/libs/axios'
 import { useSessionStore } from '@/store/session'
 import { useQueryClient } from '@tanstack/react-query'
+import { useTitle } from '@/hooks/useTitle'
 
 // type HeaderProps = {
 //   name: string //header 이름
@@ -25,10 +26,13 @@ export default function Header({ name }: HeaderProps) {
   const pathname = usePathname()
   const { sideNavIsOpen, setSideNavIsOpen } = useSideNavState()
   const { backBtn } = useHeaderStore()
+  const { getTitle } = useTitle()
 
   const { session, reset } = useSessionStore()
   const queryClient = useQueryClient()
 
+  let title = ''
+
   if (pathname === '/login') {
     return null
   }
@@ -53,7 +57,7 @@ export default function Header({ name }: HeaderProps) {
               </div>
             )}
             <h2 className="logo">
-              <Link href={'/'}>{name}</Link>
+              <Link href={'/'}>{getTitle(pathname)}</Link>
             </h2>
             <div className="side-button-wrap">
               <button className="side-button" onClick={() => setSideNavIsOpen(true)}></button>

src/hooks/useTitle.ts

@@ -0,0 +1,37 @@
+export const useTitle = () => {
+  const getTitle = (pathname: string) => {
+    // Handle dynamic routes first
+    if (pathname.startsWith('/survey-sale/') && pathname !== '/survey-sale/basic-info' && pathname !== '/survey-sale/roof-info') {
+      return '調査物件一覧'
+    }
+
+    if (pathname.startsWith('/inquiry/') && pathname !== '/inquiry/list' && pathname !== '/inquiry/regist') {
+      return '1:1お問い合わせ詳細'
+    }
+
+    // Handle static routes
+    switch (pathname) {
+      case '/':
+        return 'Hanasys 現地調査'
+      case '/suitable':
+        return '屋根材適合性の確認'
+      case '/survey-sale':
+        return '調査物件一覧'
+      case '/survey-sale/basic-info':
+        return '調査物件登録'
+      case '/survey-sale/roof-info':
+        return '調査物件新規登録'
+      case '/inquiry/list':
+        return '1:1お問い合わせ'
+      case '/inquiry/regist':
+        return '1:1お問い合わせ'
+      case '/pw-reset':
+        return 'パスワードリセット'
+
+      default:
+        return 'Hanasys 現地調査'
+    }
+  }
+
+  return { getTitle }
+}