theme&city really done

frontend/src/Pages/pic.ts

@@ -51,7 +51,7 @@ let url = [
         { 
             themeid: "activity",
             cityid: "Busan",
-            url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
+            url:"https://cdn.pixabay.com/photo/2015/04/07/07/51/railroad-tracks-710614__480.jpg",
             name: "레일바이크"
         },
         { 
@@ -63,7 +63,7 @@ let url = [
         { 
             themeid: "activity",
             cityid: "Jeju",
-            url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
+            url: "https://cdn.pixabay.com/photo/2012/10/10/05/07/combat-diver-60545__340.jpg",
             name: "스카이다이빙"
         },
         { 
@@ -87,7 +87,7 @@ let url = [
         { 
             themeid: "activity",
             cityid: "Woolsan",
-            url: "https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg",
+            url: "https://cdn.pixabay.com/photo/2019/05/11/20/44/free-climbing-4196577__480.jpg",
             name: "클라이밍"
         },
         { 
@@ -108,8 +108,9 @@ let url = [
             url: "https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg",
             name: "서울 동굴" 
         },
+        
     ];
     
-export default function getpic(){
+export function getPicure(){
     return url;
 };
\ No newline at end of file

frontend/src/pages/body.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, MouseEvent } from "react";
 import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "./citylist";
-import getpic from "./pic";
+import {getPicure} from "./pic";
 
 const initSearchParams = { "theme": "", "city": "" }
 
 export default function Body() {
 
     const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
-    let getpics = getpic();
+    let getPics = getPicure();
 
     useEffect(() => {
         console.log(searchParams.get('theme'), searchParams.get('city'))
@@ -32,27 +32,29 @@ export default function Body() {
         })
     }
 
-    const Idpics = getpics.filter(p =>
-            p.themeid == searchParams.get('theme')&&            
-            p.cityid == searchParams.get('city')   
-        )
-    
-        return (
-            <div className="flex flex-col px-1 py-1">
-                <Theme handleClick={themeHandleClick} />
-                <div className="flex flex-col md:flex-row py-10 ">
-                    <Citylist handleClick={cityHandleClick} />
-                    <div className="overflow-y-auto flex mr:10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
-                        {Idpics.map((pic, index:number) => (
+    const Idpics = getPics.filter(p => {
+
+       return (p.themeid == searchParams.get('theme') && p.cityid == searchParams.get('city'))||(p.themeid == searchParams.get('theme') && searchParams.get('city') == "")
+       ||(searchParams.get('theme') == "" && p.cityid == searchParams.get('city'))||(searchParams.get('theme') == "" && searchParams.get('city') == "")
+    })
+
+
+    return (
+        <div className="flex flex-col px-1 py-1">
+            <Theme handleClick={themeHandleClick} />
+            <div className="flex flex-col md:flex-row py-10 ">
+                <Citylist handleClick={cityHandleClick} />
+                <div className="flex md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
+                    {Idpics.map((pic, index: number) => (
                         <div className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" key={index}>
-                            <img src={pic.url} className="w-full h-10 md:h-20 object-cover"/>
+                            <img src={pic.url} className="w-full h-10 md:h-20 object-cover" />
                             <p className="text-center text-xs">{pic.name}</p>
                         </div>
-                     ))}
-                    </div>
+                    ))}
                 </div>
-                <Outlet />
             </div>
-            // Body Page
-        );
-    };
+            <Outlet />
+        </div>
+        // Body Page
+    );
+};

frontend/src/pages/header.tsx

@@ -9,7 +9,7 @@ export default function Header() {
       <div className="flex flex-col ">
         <div className="flex flex-row px-5 py-20 md:place-content-between">
           <button className="px-5 py-2">
-            <Link to="/" className="hover:bg-gray-200 focus:text-purple-500 ">Travel Report</Link>
+            <Link to="/" className="hover:bg-gray-200 focus:text-purple-500">Travel Report</Link>
           </button>
           <div className="flex flex-row-reverse">
             <button className="px-5 py-2 bg-teal-400 rounded">

frontend/src/url.ts

-let url = [
-    {url : "1"},
-    {url : "2"},
-    {url : "3"},
-    {url : "4"},
-    {url : "5"},
-    {url : "6"},
-    {url : "7"},
-    {url : "8"},
-    {url : "9"},
-    {url : "10"},
-    {url : "11"},
-    {url : "12"},
-    {url : "13"},
-    {url : "14"},
-];
-
-
-export default function getUrl(){
-    return url;
-}