.

src/GlobalStyle.tsx

@@ -205,6 +205,32 @@ const GlobalStyle = createGlobalStyle`
   display: block;
 }
 
+.example-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.refresh {
+  padding: 10px;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+
+
 /* Spinner animation */
 @keyframes spinner {
   0% {

src/assets/option.ts

@@ -0,0 +1,9 @@
+import Nature from './nature.svg'
+import Local from './local.svg'
+import Tracking from './tracking.svg'
+
+export default {
+  자연경관: Nature,
+  트레킹: Tracking,
+  '동네 구경': Local,
+}

src/assets/serviceIcon.ts

@@ -0,0 +1,15 @@
+import elevatorAvailable from './elevatorAvailable.svg'
+import parkingAvailable from './parkingAvailable.svg'
+import pathExists from './pathExists.svg'
+import toiletAvailable from './toiletAvailable.svg'
+import wheelChairRentable from './wheelChairRentable.svg'
+
+const serviceIcon = {
+  elevatorAvailable,
+  parkingAvailable,
+  pathExists,
+  toiletAvailable,
+  wheelChairRentable,
+}
+
+export default serviceIcon

src/components/Search/DestinationCard.tsx

@@ -5,18 +5,28 @@ import { ReactComponent as Navigation } from 'assets/navigation.svg'
 import { ReactComponent as Phone } from 'assets/phone.svg'
 import { ReactComponent as WheelChair } from 'assets/wheelchair.svg'
 import { FC, useEffect, useMemo, useRef } from 'react'
+import serviceIcon from 'assets/serviceIcon'
+import store from 'store/index'
+import { useNavigate } from 'react-router-dom'
 
 const DestinationCard: FC<any> = ({ node, maxLength, idx, fetchMore }) => {
   const ref = useRef(null)
+  const setIsToggleOpen = store((state) => state.setIsToastOpen)
   const inView = useInView(ref, { once: true })
   const isLast = useMemo(() => maxLength === idx + 1, [idx, maxLength])
   useEffect(() => {
     if (isLast && inView) {
       fetchMore()
     }
   }, [isLast, inView])
+  const navigate = useNavigate()
   return (
-    <Destination ref={ref}>
+    <Destination
+      ref={ref}
+      onClick={() => {
+        navigate(node.id)
+      }}
+    >
       <Top className='scrollbar-hide'>
         <PlaceHolderWrapper>
           <img src={node.thumbnails[0]} />
@@ -25,7 +35,14 @@ const DestinationCard: FC<any> = ({ node, maxLength, idx, fetchMore }) => {
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <h4 className='title-medium text-bold'>{node.name}</h4>
             <span className='title-small main-text'>나와의 거리 {getDistance(node.distance)}</span>
-            <Address className='body-small2 text-subdark'>
+            <Address
+              className='body-small2 text-subdark'
+              onClick={() => {
+                window.navigator.clipboard.writeText(node.address).then(() => {
+                  setIsToggleOpen(true)
+                })
+              }}
+            >
               {node.address
                 .split(' ')
                 .filter((_, i) => i !== 0)
@@ -52,21 +69,31 @@ const DestinationCard: FC<any> = ({ node, maxLength, idx, fetchMore }) => {
         </LocationWrapper>
       </Top>
       <BottomButtons className='scrollbar-hide'>
-        <Button>
-          <WheelChair />
-        </Button>
-        <Button>
-          <WheelChair />
-        </Button>
-        <Button>
-          <WheelChair />
-        </Button>
-        <Button>
-          <WheelChair />
-        </Button>
-        <Button>
-          <WheelChair />
-        </Button>
+        {node.parkingAvailable ? (
+          <Button>
+            <img src={serviceIcon.parkingAvailable} />
+          </Button>
+        ) : null}
+        {node.wheelChairRentable ? (
+          <Button>
+            <img src={serviceIcon.wheelChairRentable} />
+          </Button>
+        ) : null}
+        {node.toiletAvailable ? (
+          <Button>
+            <img src={serviceIcon.toiletAvailable} />
+          </Button>
+        ) : null}
+        {node.pathExists ? (
+          <Button>
+            <img src={serviceIcon.pathExists} />
+          </Button>
+        ) : null}
+        {node.elevatorAvailable ? (
+          <Button>
+            <img src={serviceIcon.elevatorAvailable} />
+          </Button>
+        ) : null}
       </BottomButtons>
     </Destination>
   )
@@ -119,7 +146,7 @@ const PlaceHolderWrapper = styled.div`
     object-fit: cover;
   }
 `
-const TopButtons = styled.div`
+export const TopButtons = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -158,7 +185,7 @@ const Address = styled.span`
   width: inherit;
 `
 
-const Button = styled.button`
+export const Button = styled.button`
   width: 4.6rem;
   aspect-ratio: 1/1;
   display: flex;