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,24 +16,23 @@ 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>
+                <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">
@@ -44,10 +42,8 @@ export default function Body() {
                     {/* pic */}
                 </div>
             </div>
-
             <Outlet />
         </div>
-
-        </div> // Body Page
+        // 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