diff --git a/src/components/PlaceDirections.js b/src/components/PlaceDirections.js
index 30baeac330a1e28a2234088ab1df4691adab5bee..4f6904b7d0ad5658718b4bce77ff3c0ebbf74dbb 100644
--- a/src/components/PlaceDirections.js
+++ b/src/components/PlaceDirections.js
@@ -305,22 +305,22 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
}
};
- useEffect(() => {
- const handleClickOutside = (event) => {
- if (directionsRef.current && !directionsRef.current.contains(event.target)) {
- onClose();
- }
- };
-
- document.addEventListener('mousedown', handleClickOutside);
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, [onClose]);
+ // useEffect(() => {
+ // const handleClickOutside = (event) => {
+ // if (directionsRef.current && !directionsRef.current.contains(event.target)) {
+ // onClose();
+ // }
+ // };
+
+ // document.addEventListener('mousedown', handleClickOutside);
+ // return () => {
+ // document.removeEventListener('mousedown', handleClickOutside);
+ // };
+ // }, [onClose]);
return (
<div className="place-directions" ref={directionsRef}>
- <div className="direction-header">
+ <div className="directions-header">
<h2>길찾기</h2>
<button className="close-button" onClick={onClose}>×</button>
</div>
@@ -338,11 +338,11 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
</div>
{searchResults.length > 0 && (
- <div className="search-results-list">
+ <div className="directions-search-results-list">
{searchResults.map((place) => (
<div
key={place.id}
- className="search-result-item"
+ className="directions-search-result-item"
onClick={() => {
showPlaceInfo(place);
map.panTo(new window.kakao.maps.LatLng(place.coordinates.lat, place.coordinates.lng));
@@ -351,7 +351,7 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
<h3>{place.name}</h3>
<p>{place.address}</p>
{place.phone && <p className="phone">{place.phone}</p>}
- <div className="place-actions">
+ <div className="directions-place-actions">
<button onClick={() => setSelectedStart(place)}>출발지로 설정</button>
<button onClick={() => setSelectedEnd(place)}>도착지로 설정</button>
</div>
@@ -360,20 +360,20 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
</div>
)}
- <div className="route-info">
- <div className="place-select">
- <div className="start-place">
+ <div className="directions-route-info">
+ <div className="directions-place-select">
+ <div className="directions-start-place">
<label>출발지</label>
- <div className="selected-place">
+ <div className="directions-selected-place">
{selectedStart ? selectedStart.name : '출발지를 선택하세요'}
{selectedStart && (
<button onClick={() => setSelectedStart(null)}>×</button>
)}
</div>
</div>
- <div className="end-place">
+ <div className="directions-end-place">
<label>도착지</label>
- <div className="selected-place">
+ <div className="directions-selected-place">
{selectedEnd ? selectedEnd.name : '도착지를 선택하세요'}
{selectedEnd && (
<button onClick={() => setSelectedEnd(null)}>×</button>
@@ -383,7 +383,7 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
</div>
<button
- className="find-route-button"
+ className="directions-find-route-button"
onClick={findRoute}
disabled={loading || !selectedStart || !selectedEnd}
>
@@ -391,7 +391,7 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
</button>
{routeInfo && (
- <div className="route-summary">
+ <div className="directions-route-summary">
<p>총 거리: {routeInfo.distance}</p>
<p>예상 소요 시간: {routeInfo.duration}</p>
{routeInfo.fare && (
@@ -401,7 +401,7 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
</>
)}
<div
- className="route-guides-header"
+ className="directions-route-guides-header"
onClick={() => setShowGuides(!showGuides)}
>
<h4>상세 경로 안내</h4>
@@ -410,9 +410,9 @@ const PlaceDirections = ({ startPlace, endPlace, map, onClose }) => {
</span>
</div>
{showGuides && (
- <div className="route-guides">
+ <div className="directions-route-guides">
{routeInfo.guides.map((guide, index) => (
- <div key={index} className="guide-item">
+ <div key={index} className="directions-guide-item">
{guide.name && <strong>{guide.name}: </strong>}
<span>{guide.guidance}</span>
<small>({(guide.distance/1000).toFixed(1)}km)</small>
diff --git a/src/styles/PlaceDirections.css b/src/styles/PlaceDirections.css
index 9582c7afb28cef35eb49286a8f86887a0f058cf0..6e32507dbccbb246d10a98562392136e45625c83 100644
--- a/src/styles/PlaceDirections.css
+++ b/src/styles/PlaceDirections.css
@@ -40,14 +40,14 @@
background-color: #444;
}
-.direction-header {
+.directions-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
-.direction-header h2 {
+.directions-header h2 {
margin: 0;
}
@@ -80,7 +80,7 @@
cursor: pointer;
}
-.search-results-list {
+.directions-search-results-list {
max-height: 300px;
overflow-y: auto;
margin: 15px 0;
@@ -88,40 +88,40 @@
border-radius: 4px;
}
-.search-result-item {
+.directions-search-result-item {
padding: 15px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.2s;
}
-.search-result-item:hover {
+.directions-search-result-item:hover {
background-color: #f5f5f5;
}
-.search-result-item h3 {
+.directions-search-result-item h3 {
margin: 0;
font-size: 16px;
color: #333;
}
-.search-result-item p {
+.directions-search-result-item p {
margin: 5px 0 0;
font-size: 14px;
color: #666;
}
-.search-result-item .phone {
+.directions-search-result-item .phone {
color: #2196F3;
}
-.place-actions {
+.directions-place-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
-.place-actions button {
+.directions-place-actions button {
padding: 6px 12px;
font-size: 12px;
border: none;
@@ -130,12 +130,12 @@
transition: background-color 0.2s;
}
-.place-actions button:first-child {
+.directions-place-actions button:first-child {
background-color: #4285f4;
color: white;
}
-.place-actions button:last-child {
+.directions-place-actions button:last-child {
background-color: #34a853;
color: white;
}
@@ -144,14 +144,14 @@
margin-top: 20px;
}
-.place-select {
+.directions-place-select {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
-.selected-place {
+.directions-selected-place {
display: flex;
justify-content: space-between;
align-items: center;
@@ -161,14 +161,14 @@
margin-top: 5px;
}
-.selected-place button {
+.directions-selected-place button {
background: none;
border: none;
cursor: pointer;
color: #666;
}
-.find-route-button {
+.directions-find-route-button {
width: 100%;
padding: 12px;
background: #333;
@@ -179,18 +179,18 @@
margin-bottom: 15px;
}
-.find-route-button:disabled {
+.directions-find-route-button:disabled {
background: #ccc;
cursor: not-allowed;
}
-.route-summary {
+.directions-route-summary {
padding: 15px;
background: #f5f5f5;
border-radius: 4px;
}
-.route-summary p {
+.directions-route-summary p {
margin: 5px 0;
font-size: 14px;
}
@@ -265,33 +265,33 @@
background-color: #3367d6;
}
-.route-guides {
+.directions-route-guides {
margin-top: 20px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 8px;
}
-.guide-item {
+.directions-guide-item {
padding: 8px 0;
border-bottom: 1px solid #ddd;
font-size: 14px;
}
-.guide-item:last-child {
+.directions-guide-item:last-child {
border-bottom: none;
}
-.guide-item strong {
+.directions-guide-item strong {
color: #4A90E2;
}
-.guide-item small {
+.directions-guide-item small {
color: #666;
margin-left: 8px;
}
-.route-guides-header {
+.directions-route-guides-header {
display: flex;
justify-content: space-between;
align-items: center;
@@ -303,25 +303,25 @@
transition: background-color 0.2s;
}
-.route-guides-header:hover {
+.directions-route-guides-header:hover {
background-color: #e9e9e9;
}
-.route-guides-header h4 {
+.directions-route-guides-header h4 {
margin: 0;
font-size: 15px;
}
-.toggle-icon {
+.directions-toggle-icon {
font-size: 12px;
transition: transform 0.2s;
}
-.toggle-icon.open {
+.directions-toggle-icon.open {
transform: rotate(180deg);
}
-.route-guides {
+.directions-route-guides {
margin-top: 0;
border-top: none;
border-top-left-radius: 0;