diff --git a/.env b/.env
index c5e03fe..9c16a0a 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-NEXT_PUBLIC_KAKAO_API_KEY=021dc3000bd4e8368bea279079c36944
\ No newline at end of file
+NEXT_PUBLIC_KAKAO_API_KEY=021dc3000bd4e8368bea279079c36944
+NEXT_PUBLIC_KAKAO_MAP_APP_KEY=6fdf3f59b292392fa72007a224286221
\ No newline at end of file
diff --git a/components/ ShareButton/ShareButton.tsx b/components/ ShareButton/ShareButton.tsx
index e3a1482..0a3547c 100644
--- a/components/ ShareButton/ShareButton.tsx
+++ b/components/ ShareButton/ShareButton.tsx
@@ -1,6 +1,10 @@
import { useModal } from '@/hooks/useModal';
import { usePopup } from '@/hooks/usePopup';
+import { darkModeState } from '@/states/themeState';
import Image from 'next/image';
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useRecoilValue } from 'recoil';
export function ShareButton({
type,
@@ -16,18 +20,15 @@ export function ShareButton({
const text = `${title}\n\n${description}`;
const encodedUrl = encodeURIComponent(url);
const encodedText = encodeURIComponent(text);
+ const isDarkMode = useRecoilValue(darkModeState);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
- alert('클립보드에 복사되었습니다.');
+ toast.success('클립보드에 복사되었습니다.');
} catch (error) {
console.error(error);
- openPopup({
- popupType: 'alert',
- content: '클립 보드 복사에 실패하였습니다.',
- btnName: ['확인'],
- });
+ toast.error('클립 보드 복사에 실패하였습니다.');
}
};
@@ -78,10 +79,23 @@ export function ShareButton({
objectFit="cover"
className="object-cover"
/>
+
{title}
-{description}
++ {description} +
체험 설명
- {activityData?.address} -
-
diff --git a/components/ActivityDetails/Map/Map.tsx b/components/ActivityDetails/Map/Map.tsx
index fbca170..49dad38 100644
--- a/components/ActivityDetails/Map/Map.tsx
+++ b/components/ActivityDetails/Map/Map.tsx
@@ -1,16 +1,24 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
import { MapProps } from './Map.types';
-import { appKey } from '@/static/appKey';
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useRecoilValue } from 'recoil';
+import { darkModeState } from '@/states/themeState';
export default function Map({ address }: MapProps) {
+ const [distance, setDistance] = useState
+ 현재 위치에서 체험 장소까지의 거리는 약 {distance} 입니다.
+
+ 거리를 계산 중입니다...
+
+ {address}
+
diff --git a/components/ActivityDetails/Reservation/Reservation.types.ts b/components/ActivityDetails/Reservation/Reservation.types.ts
index e08d232..1f6eeff 100644
--- a/components/ActivityDetails/Reservation/Reservation.types.ts
+++ b/components/ActivityDetails/Reservation/Reservation.types.ts
@@ -3,6 +3,7 @@ import { getActivityInfoResponse } from '@/pages/api/activities/apiactivities.ty
export interface ReservationModalProps {
selectedDate: Date | null;
handleDateChange: (date: Date | null) => void;
+ getAvailableDates: () => Date[];
getAvailableTimes: (date: Date | null) => string[];
selectedTime: string | null;
handleTimeChange: (time: string) => void;
diff --git a/components/ActivityDetails/Reservation/ReservationModal.tsx b/components/ActivityDetails/Reservation/ReservationModal.tsx
index 66586ac..c06564d 100644
--- a/components/ActivityDetails/Reservation/ReservationModal.tsx
+++ b/components/ActivityDetails/Reservation/ReservationModal.tsx
@@ -5,6 +5,7 @@ import CustomCalendar from '@/components/CustomCalendar/CustomCalendar';
export default function ReservationModal({
selectedDate,
handleDateChange,
+ getAvailableDates,
getAvailableTimes,
selectedTime,
handleTimeChange,
@@ -15,6 +16,7 @@ export default function ReservationModal({