theme name

frontend/src/pages/body.tsx

-import React, { MouseEventHandler, useEffect, MouseEvent } from "react";
+import React, { useEffect, MouseEvent } from "react";
 import { BrowserRouter, Route, Routes, Link, Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import getUrl from "../url"
 
-// const initSearchParams = ["theme", "city"]
 const initSearchParams = { "theme": "1", "city": "1" }
 export default function Body() {
     const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
@@ -17,37 +16,34 @@ export default function Body() {
         console.log(`theme id= ${event.currentTarget.id}`)
     }
 
-    // const imgs = [1, 2, 3, 4, 5]
-    let url=getUrl();
+    let url = getUrl();
     return (
-        <div>
-            <div className="flex flex-col px-5 py-5">
-                <Theme handleClick={handleClick} />
-                <div className="flex flex-col md:flex-row  px-5 py-40 ">
-                    <div className="flex flex-row md:flex-col md:basis-1/5 bg-gray-400 rounded ">
-                        <div>01</div>
-                        <div>02</div>
-                        <div>03</div>
-                        <div>04</div>
-                        <div>05</div>
-                        <div>06</div>
-                        <div>07</div>
-                        <div>08</div>
-                        <div>09</div>
-                        <div>10</div>
-                        {/* citylist */}
-                    </div>
-                    <div className="flex md:basis-4/5 grid grid-rows-3 grid-cols-5 outline">
-                        {url.map(url => (
-                            <div className="flex justify-items-center" key={url.url}>{url.url}</div>
-                        ))}
-                        {/* pic */}
-                    </div>
-                </div>
 
-                <Outlet />
+        <div className="flex flex-col px-5 py-5">
+            <Theme handleClick={handleClick} />
+            <div className="flex flex-col md:flex-row  px-5 py-40 ">
+                <div className="flex flex-row justify-evenly md:flex-col md:basis-1/5 bg-gray-400 rounded ">
+                    <button>01</button>
+                    <button>02</button>
+                    <button>03</button>
+                    <button>04</button>
+                    <button>06</button>
+                    <button>07</button>
+                    <button>05</button>
+                    <button>08</button>
+                    <button>09</button>
+                    <button>10</button>
+                    {/* citylist */}
+                </div>
+                <div className="flex md:basis-4/5 grid grid-rows-3 grid-cols-5 outline">
+                    {url.map(url => (
+                        <div className="flex justify-items-center" key={url.url}>{url.url}</div>
+                    ))}
+                    {/* pic */}
+                </div>
             </div>
-
-        </div> // Body Page
+            <Outlet />
+        </div>
+        // Body Page
     );
 };

frontend/src/pages/theme.tsx

@@ -4,22 +4,18 @@ type ThemeProps = {
   handleClick: MouseEventHandler;
 }
 export default function Theme({handleClick}: ThemeProps) {
-  // const handleClick = (event: MouseEvent<HTMLElement>) => {
-  //   console.log(event.currentTarget.id)
-  // }
-
   return (
     <div className="flex flex-cols-10 justify-evenly w-full bg-emerald-400 rounded ">
-      <button id={"01"} onClick={handleClick}>01</button>
-      <button>02</button>
-      <button>03</button>
-      <button>04</button>
-      <button>05</button>
-      <button>06</button>
-      <button>07</button>
-      <button>08</button>
-      <button>09</button>
-      <button>10</button>
+      <button id={"01"} onClick={handleClick}>서핑</button>
+      <button>액티비티</button>
+      <button>캠핑</button>
+      <button>스키</button>
+      <button>보트</button>
+      <button>사막</button>
+      <button>골프</button>
+      <button>동굴</button>
+      <button>문화재</button>
+      <button>동물원</button>
     </div> 
   ); 
 };
\ No newline at end of file