feat: Add scroll to top button at InquiryList page

src/components/inquiry/InquiryDetail.tsx

@@ -2,6 +2,24 @@
 
 import { useParams } from 'next/navigation'
 
+const inquiryDummyData = {
+  writer: {
+    name: 'writer',
+    email: 'writer@example.com',
+  },
+  title: 'title',
+  content: 'content',
+  files: ['file1.jpg', 'file2.jpg', 'file3.jpg'],
+  createdAt: '2021-01-01',
+  answer: {
+    writer: '佐藤一貴',
+    content:
+      '一次側接続は、自動切替開閉器と住宅分電盤主幹ブレーカの間に蓄電システムブレーカを配線する方法です。\n二次側接続は、住宅分電盤主幹ブレ―カの二次側に蓄電システムブレーカを接続する',
+    createdAt: '2021-01-01 12:00:00',
+    files: ['file4.jpg', 'file5.jpg', 'file6.jpg'],
+  },
+}
+
 export default function InquiryDetail() {
   const params = useParams()
   const id = params.id
@@ -9,6 +27,47 @@ export default function InquiryDetail() {
     <div>
       <h1>InquiryDetail</h1>
       <p>{id}</p>
+      <div className="mt-5">
+        <div className="grid grid-cols-2 gap-4">
+          <p>writer</p>
+          <p>{inquiryDummyData.writer.name}</p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <p>email</p>
+          <p>{inquiryDummyData.writer.email}</p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <p>title</p>
+          <p>{inquiryDummyData.title}</p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <p>content</p>
+          <p>{inquiryDummyData.content}</p>
+        </div>
+        <div>
+          <p>files</p>
+          <div className="flex flex-col gap-2">
+            {inquiryDummyData.files.map((file) => (
+              <span key={file}>{file}</span>
+            ))}
+          </div>
+        </div>
+        {inquiryDummyData.answer && (
+          <div className="mt-4">
+            <h1>Reply: Hanwha Japan</h1>
+            <div>
+              <p>{inquiryDummyData.answer.writer}</p>
+              <p>{inquiryDummyData.answer.createdAt}</p>
+              <p>{inquiryDummyData.answer.content}</p>
+              <div className="flex flex-col gap-2">
+                {inquiryDummyData.answer.files.map((file) => (
+                  <span key={file}>{file}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

src/components/inquiry/InquiryList.tsx

@@ -142,6 +142,10 @@ export default function InquiryList() {
     setSearch(e.target.value)
   }
 
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
   return (
     <div className="flex flex-col gap-2">
       <InquirySearch handleSearch={handleSearch} />
@@ -157,7 +161,11 @@ export default function InquiryList() {
       </select>
       <span>total {inquriyData().length}</span>
       <InquiryItems inquiryData={inquriyData().slice(0, visibleItems)} />
-      {visibleItems < inquriyData().length && <button onClick={handleLoadMore}>more</button>}
+      {visibleItems < inquriyData().length ? (
+        <button onClick={handleLoadMore}>more</button>
+      ) : (
+        <button onClick={handleScrollToTop}>top</button>
+      )}
     </div>
   )
 }