무엇을 도와드릴까요?
diff --git a/src/components/customer-support/SupportModal.tsx b/src/components/customer-support/SupportModal.tsx
index 800ab56..c8c4430 100644
--- a/src/components/customer-support/SupportModal.tsx
+++ b/src/components/customer-support/SupportModal.tsx
@@ -15,7 +15,6 @@ import { useMutation } from "@tanstack/react-query";
import { postInquiry } from "@/api/inquiry";
import { getErrorMessage } from "@/utils/error";
-
interface SupportModalProps {
isOpen: boolean;
onClose: () => void;
diff --git a/src/components/customer-support/faqData.ts b/src/components/customer-support/faqData.ts
index e355448..c1b4ba5 100644
--- a/src/components/customer-support/faqData.ts
+++ b/src/components/customer-support/faqData.ts
@@ -1,4 +1,4 @@
-export interface FaqItem {
+interface FaqItem {
id: number;
category: string;
question: string;
diff --git a/src/components/map/KakaoMap.tsx b/src/components/map/KakaoMap.tsx
index 83776f8..e812e06 100644
--- a/src/components/map/KakaoMap.tsx
+++ b/src/components/map/KakaoMap.tsx
@@ -1,10 +1,14 @@
import { loadKakaoMapSdk } from "@/lib/kakao";
+import type {
+ KakaoInfoWindowInstance,
+ KaKaoMapInstance,
+ KakaoMarkerInstance,
+ LatLng,
+ MarkerWithLocation,
+} from "@/types/map";
import type { RestaurantSummary } from "@/types/store";
import { useEffect, useMemo, useRef, useState } from "react";
-type LatLng = { lat: number; lng: number };
-type MarkerWithLocation = RestaurantSummary & { location: LatLng };
-
type Props = {
center: LatLng;
markers: RestaurantSummary[];
@@ -14,22 +18,17 @@ type Props = {
defaultLevel?: number;
selectedLevel?: number;
};
-declare global {
- interface Window {
- kakao: any;
- }
-}
-
const toNum = (v: unknown) => {
const n = typeof v === "string" ? parseFloat(v) : Number(v);
return Number.isFinite(n) ? n : null;
};
-const normalizeLatLng = (loc: any): LatLng | null => {
- if (!loc) return null;
+const normalizeLatLng = (loc: unknown): LatLng | null => {
+ if (!loc || typeof loc !== "object") return null;
+ const maybeLoc = loc as { lat?: unknown; lng?: unknown };
- let lat = toNum(loc.lat);
- let lng = toNum(loc.lng);
+ let lat = toNum(maybeLoc.lat);
+ let lng = toNum(maybeLoc.lng);
if (lat == null || lng == null) return null;
@@ -52,17 +51,17 @@ export default function KakaoMap({
selectedLevel,
}: Props) {
const containerRef = useRef(null);
- const mapRef = useRef(null);
- const markersRef = useRef>(new Map());
- const infoRef = useRef(null);
+ const mapRef = useRef(null);
+ const markersRef = useRef>(new Map());
+ const infoRef = useRef(null);
const prevSelectedIdRef = useRef(null);
const safeMarkers = useMemo(() => {
return markers
- .map((m) => {
- const norm = normalizeLatLng((m as any).location);
+ .map((marker) => {
+ const norm = normalizeLatLng((marker as MarkerWithLocation).location);
if (!norm) return null;
- return { ...m, location: norm } as MarkerWithLocation;
+ return { ...marker, location: norm } as MarkerWithLocation;
})
.filter(Boolean) as MarkerWithLocation[];
}, [markers]);
@@ -70,16 +69,15 @@ export default function KakaoMap({
const [sdkReady, setSdkReady] = useState(!!window.kakao?.maps);
const [sdkError, setSdkError] = useState(null);
- const centerRef = useRef(center);
- centerRef.current = center;
-
const relayout = () => {
const kakao = window.kakao;
if (!kakao?.maps || !mapRef.current) return;
try {
mapRef.current.relayout();
- } catch {}
+ } catch {
+ //지도 초기화 타이밍에서 발생 가능
+ }
};
//1. 지도 최초 1회 생성
@@ -90,10 +88,11 @@ export default function KakaoMap({
try {
await loadKakaoMapSdk();
if (cancelled) return;
+
setSdkReady(true);
const kakao = window.kakao;
- if (!containerRef.current) return;
+ if (!kakao?.maps || !containerRef.current) return;
if (mapRef.current) return;
const options = {
@@ -115,7 +114,7 @@ export default function KakaoMap({
return () => {
cancelled = true;
};
- }, [defaultLevel]);
+ }, [defaultLevel, center.lat, center.lng]);
// 2. 컨테이너 사이즈 변하면 relayout
useEffect(() => {
@@ -163,21 +162,22 @@ export default function KakaoMap({
//5. 마커 바뀌면 마커 재생성
useEffect(() => {
const kakao = window.kakao;
- if (!kakao?.maps || !mapRef.current) return;
+ const maps = kakao?.maps;
+ if (!maps || !mapRef.current) return;
markersRef.current.forEach((mk) => mk.setMap(null));
markersRef.current.clear();
safeMarkers.forEach((store) => {
- const pos = new kakao.maps.LatLng(store.location.lat, store.location.lng);
- const marker = new kakao.maps.Marker({
+ const pos = new maps.LatLng(store.location.lat, store.location.lng);
+ const marker = new maps.Marker({
map: mapRef.current,
position: pos,
clickable: true,
zIndex: 1,
});
- kakao.maps.event.addListener(marker, "click", () => {
+ maps.event.addListener(marker, "click", () => {
mapRef.current?.panTo(pos);
if (selectedLevel != null) {
mapRef.current?.setLevel(selectedLevel);
@@ -195,7 +195,7 @@ export default function KakaoMap({
markersRef.current.set(store.id, marker);
});
relayout();
- }, [safeMarkers, onSelectMarker]);
+ }, [safeMarkers, onSelectMarker, selectedLevel]);
//6. 선택변경시 zIndex 처리
useEffect(() => {
@@ -215,22 +215,22 @@ export default function KakaoMap({
//7. 선택 없으면 bounds 맞추기
useEffect(() => {
const kakao = window.kakao;
- if (!kakao?.maps || !mapRef.current) return;
- if (selectedId != null) return;
- if (safeMarkers.length === 0) return;
- const bounds = new kakao.maps.LatLngBounds();
+ const maps = kakao?.maps;
+ if (!maps || !mapRef.current) return;
+ if (selectedId != null || safeMarkers.length === 0) return;
+ const bounds = new maps.LatLngBounds();
safeMarkers.forEach((store) => {
- bounds.extend(
- new kakao.maps.LatLng(store.location.lat, store.location.lng),
- );
+ bounds.extend(new maps.LatLng(store.location.lat, store.location.lng));
});
requestAnimationFrame(() => {
try {
- mapRef.current.relayout();
- mapRef.current.setBounds(bounds);
- } catch {}
+ mapRef.current?.relayout();
+ mapRef.current?.setBounds(bounds);
+ } catch {
+ //지도 초기화 타이밍 이슈무시
+ }
});
if (safeMarkers.length === 1 && defaultLevel != null) {
diff --git a/src/components/owner/BreakTimeModal.tsx b/src/components/owner/BreakTimeModal.tsx
index 93a649f..8d691a7 100644
--- a/src/components/owner/BreakTimeModal.tsx
+++ b/src/components/owner/BreakTimeModal.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { X, Clock } from 'lucide-react';
+import React, { useState } from "react";
+import { X, Clock } from "lucide-react";
export interface BreakTime {
start: string;
- end: string;
+ end: string;
}
interface Props {
@@ -13,34 +13,48 @@ interface Props {
onConfirm: (breakTime: BreakTime) => void;
}
-
const BreakTimeModal: React.FC = ({
openTime,
closeTime,
onClose,
onConfirm,
}) => {
- const [start, setStart] = useState('14:00');
- const [end, setEnd] = useState('15:00');
+ const [start, setStart] = useState("14:00");
+ const [end, setEnd] = useState("15:00");
+ const toMinutes = (t: string) => {
+ const [h, m] = t.split(":").map(Number);
+ return h * 60 + m;
+ };
const isInvalid =
- start >= end ||
- start < openTime ||
- end > closeTime;
-
+ toMinutes(start) >= toMinutes(end) ||
+ toMinutes(start) < toMinutes(openTime) ||
+ toMinutes(end) > toMinutes(closeTime);
return (
-
e.stopPropagation()}>
-
