[PDW-54] fix: 자원 예약 카드 클릭시 상세 예약페이지로 넘어가게 설정

src/components/resourceInfo/ResourceInfo.js

@@ -3,6 +3,7 @@ import styled from "styled-components"
 import Example from '../../assets/images/example.png'
 import Capsule from "components/capsule/Capsule";
 import { ResourceCard, CardText, DetailContainer, ResourceCardImage, InfoContainer, DescriptionContainer, OfficeContentText, ResourceTitle } from "components/card/Card";
+import { useNavigate } from "react-router-dom";
 
 // 자원명 컨테이너
 const ResourceTitleContainer = styled.div`
@@ -12,9 +13,17 @@ const ResourceTitleContainer = styled.div`
 `
 
 
+
+
+
 function ResourceInfo(props) {
+    const moveToDetail = () => {
+        window.location.href = "/resourceBooking/"+props.resourceId
+    }
+
+
     return (
-        <ResourceCard onClick={props.click}>
+        <ResourceCard  onClick={props.detail===true ? moveToDetail : {}}>
             <DetailContainer>
                 <ResourceCardImage src={Example} />
 

src/pages/booking/selectResource/SelectResource.js

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import ResourceInfo from "components/resourceInfo/ResourceInfo";
 import { ResourcesAxios } from "api/AxiosApi";
+import { useNavigate } from "react-router-dom";
 
 
 export const SearchTitleContainer = styled.div`
@@ -61,6 +62,7 @@ export const SearchDateInput = styled.input`
 `
 
 function SelectResource(props) {
+    const navigate = useNavigate();
 
     const [resourceList, setResourceList] = useState([]);
     const [resourceName, setResourceName] = useState("");
@@ -118,7 +120,7 @@ function SelectResource(props) {
 
             <WhiteContainer>
                 <div className="cardList">
-                    {resourceList.length === 0 ? <label>예약 가능한 자원이 없습니다.</label> : resourceList.map((resource) => <ResourceInfo key={resource.resourceId} name={resource.name} image={resource.imgUrl} category={resource.category} description={resource.description} />)}
+                    {resourceList.length === 0 ? <label>예약 가능한 자원이 없습니다.</label> : resourceList.map((resource, index) => <ResourceInfo key={resource.index} detail={true} resourceId={resource.resourceId} name={resource.name} image={resource.imgUrl} category={resource.category} description={resource.description} />)}
                 </div>
             </WhiteContainer>
         </RightContainer>