|
|
@@ -1,45 +1,112 @@
|
|
|
-import React from 'react';
|
|
|
+import React, { useState, useEffect, useRef } from 'react';
|
|
|
|
|
|
const Directions = () => {
|
|
|
+ const [activeTab, setActiveTab] = useState('busan');
|
|
|
+ const mapRef = useRef(null);
|
|
|
+ const mapInstanceRef = useRef(null);
|
|
|
+ const markerRef = useRef(null); // ✅ 마커 참조 추가
|
|
|
+
|
|
|
+ const tabs = [
|
|
|
+ { id: 'busan', label: '부산 본사' },
|
|
|
+ { id: 'gimhae', label: '김해 공장' },
|
|
|
+ { id: 'seoul', label: '서울 경기지사' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const tabContent = {
|
|
|
+ busan: {
|
|
|
+ lat: 35.170833,
|
|
|
+ lng: 129.130833,
|
|
|
+ address: '부산 해운대구 센텀중앙로 78, 1308호(센텀그린타워)',
|
|
|
+ phone: '051-808-8556',
|
|
|
+ },
|
|
|
+ gimhae: {
|
|
|
+ lat: 35.207,
|
|
|
+ lng: 128.848,
|
|
|
+ address: '경남 김해시 주촌면 골든루트로 80-16',
|
|
|
+ phone: '055-123-4567',
|
|
|
+ },
|
|
|
+ seoul: {
|
|
|
+ lat: 37.501274,
|
|
|
+ lng: 127.039585,
|
|
|
+ address: '서울 강남구 테헤란로 123, 5층',
|
|
|
+ phone: '02-987-6543',
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ const { naver } = window;
|
|
|
+ if (!naver || !mapRef.current) return;
|
|
|
+
|
|
|
+ const location = tabContent[activeTab];
|
|
|
+ const position = new naver.maps.LatLng(location.lat, location.lng);
|
|
|
+
|
|
|
+ if (!mapInstanceRef.current) {
|
|
|
+ mapInstanceRef.current = new naver.maps.Map(mapRef.current, {
|
|
|
+ center: position,
|
|
|
+ zoom: 16,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ mapInstanceRef.current.setCenter(position);
|
|
|
+ }
|
|
|
+
|
|
|
+ // ✅ 기존 마커 제거 후 새로운 마커 설정
|
|
|
+ if (markerRef.current) {
|
|
|
+ markerRef.current.setMap(null);
|
|
|
+ }
|
|
|
+
|
|
|
+ markerRef.current = new naver.maps.Marker({
|
|
|
+ position,
|
|
|
+ map: mapInstanceRef.current,
|
|
|
+ });
|
|
|
+ }, [activeTab, tabContent]);
|
|
|
+
|
|
|
return (
|
|
|
<div className="px-[2vw] py-[4vw] space-y-[5vw]">
|
|
|
<div>
|
|
|
<div className="space-y-2 mb-2.5 pb-10">
|
|
|
<div className="text-5xl text-blue-900 font-bold font-['Inter']">찾아오시는 길</div>
|
|
|
</div>
|
|
|
- <div className="w-full">
|
|
|
- <div className="border h-40 relative">
|
|
|
- <div className="self-stretch self-stretch left-0 top-0 absolute inline-flex flex-col justify-start items-start gap-2.5 overflow-hidden">
|
|
|
- <div className="self-stretch flex-1 relative overflow-hidden">
|
|
|
- <div className="left-[144px] top-[24px] absolute justify-start text-black text-3xl font-semibold font-['Inter']">부산 본사</div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div className="h-40 flex text-center items-center justify-around">
|
|
|
+ {tabs.map((tab, idx) => (
|
|
|
+ <div
|
|
|
+ key={tab.id}
|
|
|
+ className={`w-full py-6 cursor-pointer text-4xl font-semibold font-['Inter'] ${
|
|
|
+ idx !== 0 ? 'border-l' : ''
|
|
|
+ } ${idx !== tabs.length - 1 ? 'border-r' : ''} ${
|
|
|
+ activeTab === tab.id ? 'text-black' : 'text-black/25'
|
|
|
+ }`}
|
|
|
+ style={{ borderColor: '#E0E1E2' }}
|
|
|
+ onClick={() => setActiveTab(tab.id)}
|
|
|
+ >
|
|
|
+ {tab.label}
|
|
|
</div>
|
|
|
- <div className="self-stretch self-stretch left-[414px] top-0 absolute border-l border-r border-black/10 inline-flex flex-col justify-start items-start gap-2.5 overflow-hidden">
|
|
|
- <div className="self-stretch flex-1 relative overflow-hidden">
|
|
|
- <div className="left-[144px] top-[24px] absolute justify-start text-black/25 text-3xl font-semibold font-['Inter']">김해 공장</div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="mx-30">
|
|
|
+ <div className="border" style={{ height: '500px' }}>
|
|
|
+ <div id="map" ref={mapRef} style={{ width: '100%', height: '100%' }} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="flex flex-wrap py-6">
|
|
|
+ <div className="w-1/2 px-4">
|
|
|
+ <div className="text-black text-2xl font-semibold font-['Inter'] mb-2">주소</div>
|
|
|
+ <div className="text-black text-xl font-normal font-['Inter']">
|
|
|
+ {tabContent[activeTab].address}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div className="self-stretch self-stretch left-[828px] top-0 absolute inline-flex flex-col justify-start items-start gap-2.5 overflow-hidden">
|
|
|
- <div className="self-stretch flex-1 relative overflow-hidden">
|
|
|
- <div className="left-[116px] top-[24px] absolute justify-start text-black/25 text-3xl font-semibold font-['Inter']">서울 경기지사</div>
|
|
|
+ <div className="w-1/2 px-4">
|
|
|
+ <div className="text-black text-2xl font-semibold font-['Inter'] mb-2">전화</div>
|
|
|
+ <div className="text-black text-xl font-normal font-['Inter']">
|
|
|
+ {tabContent[activeTab].phone}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div className="self-stretch h-96 relative rounded-lg overflow-hidden">
|
|
|
- <img className="w-[1263.97px] h-[622px] left-[-32px] top-[-61px] absolute" src="https://placehold.co/1264x622" />
|
|
|
- </div>
|
|
|
- <div className="self-stretch flex-1 relative overflow-hidden">
|
|
|
- <div className="w-24 h-7 left-[219px] top-[44px] absolute" />
|
|
|
- <div className="w-24 h-9 left-[710px] top-[46px] absolute" />
|
|
|
- <div className="w-[575px] left-[36px] top-[10px] absolute justify-start text-black text-2xl font-semibold font-['Inter']">주소</div>
|
|
|
- <div className="w-[575px] left-[621px] top-[10px] absolute justify-start text-black text-2xl font-semibold font-['Inter']">전화</div>
|
|
|
- <div className="left-[36px] top-[48.33px] absolute justify-start text-black text-xl font-normal font-['Inter']">부산 해운대구 센텀중앙로 78, 1308호(센텀그린타워)</div>
|
|
|
- <div className="w-[575px] left-[621px] top-[48.33px] absolute justify-start text-black text-xl font-normal font-['Inter']">051-808-8556</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- )
|
|
|
-}
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
-export default Directions;
|
|
|
+export default Directions;
|
home