+
+
+
{transitionContent.title}
-
+
{transitionContent.subtitle}
diff --git a/src/app/recommend/_components/MapView/RecommendationMarker.tsx b/src/app/recommend/_components/MapView/RecommendationMarker.tsx
new file mode 100644
index 0000000..5d966b0
--- /dev/null
+++ b/src/app/recommend/_components/MapView/RecommendationMarker.tsx
@@ -0,0 +1,45 @@
+import { CustomOverlayMap, MapMarker } from "react-kakao-maps-sdk";
+import { RecommendationResponse } from "@/lib/type";
+import Image from "next/image";
+import Temp from "@/assets/icons/temp.jpg";
+
+interface RecommendationMarkerProps extends RecommendationResponse {
+ onClick?: () => void;
+}
+
+export default function RecommendationMarker({
+ image,
+ coordinate,
+ onClick,
+}: RecommendationMarkerProps) {
+ if (!coordinate) return null;
+
+ const coord = { lat: coordinate.latitude, lng: coordinate.longitude };
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
diff --git a/src/app/recommend/_components/MapView/index.tsx b/src/app/recommend/_components/MapView/index.tsx
index 078c18b..b8d248f 100644
--- a/src/app/recommend/_components/MapView/index.tsx
+++ b/src/app/recommend/_components/MapView/index.tsx
@@ -1,22 +1,90 @@
"use client";
-import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk";
+import { Map, MapMarker, Polyline, useKakaoLoader } from "react-kakao-maps-sdk";
+import { RecommendationResponse } from "@/lib/type";
+import { COORDINATE } from "@/constants/spaceData";
+import { Coordinate, getMidpoint } from "@/utils/getMidpoint";
+import { getDestination } from "@/utils/getDestination";
+import RecommendationMarker from "./RecommendationMarker";
+import { useState } from "react";
-export default function MapView() {
+export default function MapView({
+ spaceData,
+}: {
+ spaceData: RecommendationResponse[];
+}) {
const [loading, error] = useKakaoLoader({
appkey: process.env.NEXT_PUBLIC_APPKEY!,
});
+ const [selectedSpace, setSelectedSpace] = useState
(null);
+
if (loading) return Loading
;
if (error) return Error
;
+
+ const origin = COORDINATE.SAEMANGEUM;
+ const destination = getDestination();
+ const midpoint = getMidpoint(origin, destination);
+
return (
);
}
diff --git a/src/app/recommend/_components/NavBar.tsx b/src/app/recommend/_components/NavBar.tsx
index e232f99..8fa3c92 100644
--- a/src/app/recommend/_components/NavBar.tsx
+++ b/src/app/recommend/_components/NavBar.tsx
@@ -1,18 +1,14 @@
import Image from "next/image";
-import Logo from "@/assets/icons/logo.png";
-import LogoDev from "@/assets/icons/logo_dev.png";
-import LogoKR from "@/assets/icons/logo_kr.png";
+import Logo from "../../../../public/logo/logo_simple.svg";
+import LogoDev from "../../../../public/logo/logo_dev.png";
+import LogoKR from "../../../../public/logo/logo_kr.png";
export default function NavBar() {
return (
-
-
+
diff --git a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
index 9fc7bdb..ebd9c2e 100644
--- a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
+++ b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
@@ -1,21 +1,23 @@
import { RecommendationResponse } from "@/lib/type";
import { getCity } from "@/utils/getCity";
import { CATEGORY } from "@/constants/spaceData";
+import { MapPin } from "lucide-react";
import Image from "next/image";
-import LocationIcon from "@/assets/icons/location.svg";
import Temp from "@/assets/icons/temp.jpg";
export default function SpaceCard({
- spaceData,
-}: {
- spaceData: RecommendationResponse;
-}) {
- const city = getCity(spaceData.position);
+ title,
+ position,
+ category,
+ image,
+ // url,
+}: RecommendationResponse) {
+ const city = getCity(position);
return (
-
- {spaceData.title}
-
+ {title}
-
-
- {spaceData.position}
+
+
+
{position}
- {CATEGORY[spaceData.category]}
+ {CATEGORY[category]}
{city && (
diff --git a/src/app/recommend/_components/RecommendationPanel/index.tsx b/src/app/recommend/_components/RecommendationPanel/index.tsx
index 47f5c67..ff64c1f 100644
--- a/src/app/recommend/_components/RecommendationPanel/index.tsx
+++ b/src/app/recommend/_components/RecommendationPanel/index.tsx
@@ -7,7 +7,7 @@ export default function RecommendationPanel({
spaceData: RecommendationResponse[];
}) {
return (
-
+
@@ -22,7 +22,7 @@ export default function RecommendationPanel({
{spaceData.map((space, index) => (
-
+
))}
diff --git a/src/app/recommend/_components/RetrySurveyButton.tsx b/src/app/recommend/_components/RetrySurveyButton.tsx
index 58df7eb..d92dae7 100644
--- a/src/app/recommend/_components/RetrySurveyButton.tsx
+++ b/src/app/recommend/_components/RetrySurveyButton.tsx
@@ -11,12 +11,11 @@ export default function RetrySurveyButton() {
return (
);
}
diff --git a/src/app/recommend/_components/SatisfactionModalButton.tsx b/src/app/recommend/_components/SatisfactionModalButton.tsx
index 93e9a46..23bc1f5 100644
--- a/src/app/recommend/_components/SatisfactionModalButton.tsx
+++ b/src/app/recommend/_components/SatisfactionModalButton.tsx
@@ -2,8 +2,12 @@ import Button from "@/components/Button";
export default function SatisfactionModalButton() {
return (
-