@@ -370,6 +401,33 @@ const ClientManagement = () => {
}
required
/>
+
+
+
+
+
+
+ setNewClient({ ...newClient, age: e.target.value })
+ }
+ required
+ />
+
{
}
required
/>
+
{
}
required
/>
-
+
+
- setNewClient({ ...newClient, oldAddress: e.target.value })
- }
- required
+ name="road_Address"
+ value={newClient.road_Address}
+ placeholder="도로명 주소"
+ readOnly
/>
-
+
+
- setNewClient({ ...newClient, newAddress: e.target.value })
- }
- required
+ name="region_Address"
+ value={newClient.region_Address}
+ placeholder="지번 주소"
+ readOnly
/>
+
+
+
diff --git a/src/components/ClientRetention.js b/src/components/ClientRetention.js
new file mode 100644
index 0000000..9d4e91f
--- /dev/null
+++ b/src/components/ClientRetention.js
@@ -0,0 +1,280 @@
+import React, { useState } from "react";
+import {
+ PieChart,
+ Pie,
+ Cell,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from "recharts";
+import DummyData from "../data/DummyData";
+import "../styles/ClientRetention.css";
+
+const COLORS = [
+ "#8884d8",
+ "#82ca9d",
+ "#FFBB28",
+ "#FF8042",
+ "#00C49F",
+ "#0088FE",
+ "#D72638",
+ "#3A015C",
+ "#FF5700",
+ "#8E44AD",
+ "#16A085",
+ "#D35400",
+ "#C0392B",
+ "#1ABC9C",
+ "#F1C40F",
+ "#27AE60",
+ "#2C3E50",
+];
+
+const regions = [
+ "서울",
+ "부산",
+ "대구",
+ "인천",
+ "광주",
+ "대전",
+ "울산",
+ "세종",
+ "경기",
+ "강원",
+ "충북",
+ "충남",
+ "전북",
+ "전남",
+ "경북",
+ "경남",
+ "제주",
+];
+
+const ageGroups = ["10대", "20대", "30대", "40대", "50대", "60대 이상"];
+const genders = ["남자", "여자"];
+
+const ClientRetention = () => {
+ const [filterGender, setFilterGender] = useState(["전체"]);
+ const [filterRegion, setFilterRegion] = useState(["전체"]);
+ const [filterAgeGroup, setFilterAgeGroup] = useState(["전체"]);
+ const [dropdownOpen, setDropdownOpen] = useState({
+ gender: false,
+ region: false,
+ age: false,
+ });
+
+ const filteredClients = DummyData.filter((client) => {
+ const matchGender =
+ filterGender.includes("전체") || filterGender.includes(client.gender);
+ const matchRegion =
+ filterRegion.includes("전체") || filterRegion.includes(client.region);
+ const matchAge =
+ filterAgeGroup.includes("전체") ||
+ filterAgeGroup.some((ageLabel) => {
+ const index = ageGroups.indexOf(ageLabel);
+ if (index === -1) return false;
+ const minAge = index * 10 + 10;
+ const maxAge = index === 5 ? 100 : minAge + 9;
+ return client.age >= minAge && client.age <= maxAge;
+ });
+
+ return matchGender && matchRegion && matchAge;
+ });
+
+ const totalClients = filteredClients.length;
+
+ const transformData = (labels, key) =>
+ labels
+ .map((label) => ({
+ name: label,
+ value: filteredClients.filter((c) => c[key] === label).length,
+ }))
+ .filter((d) => d.value > 0);
+
+ const genderData = transformData(genders, "gender");
+ const regionData = transformData(regions, "region");
+
+ const ageData = ageGroups
+ .map((group, index) => {
+ const minAge = index * 10 + 10;
+ const maxAge = index === 5 ? 100 : minAge + 9;
+ return {
+ name: group,
+ value: filteredClients.filter(
+ (client) => client.age >= minAge && client.age <= maxAge
+ ).length,
+ };
+ })
+ .filter((d) => d.value > 0);
+
+ const handleFilterChange = (setFilter, value) => {
+ setFilter((prev) => {
+ if (value === "전체") return ["전체"];
+ if (prev.includes("전체")) return [value];
+ return prev.includes(value)
+ ? prev.filter((item) => item !== value)
+ : [...prev, value];
+ });
+ };
+
+ const toggleDropdown = (type) => {
+ setDropdownOpen((prev) => ({ ...prev, [type]: !prev[type] }));
+ };
+
+ const renderDropdown = (title, filter, setFilter, options, type) => (
+
+
+ {dropdownOpen[type] && (
+
+
+ {["전체", ...options].map((option) => (
+
+ ))}
+
+
+ )}
+
+ );
+
+ const CustomTooltip = ({ active, payload }) => {
+ if (active && payload && payload.length) {
+ const { name, value } = payload[0];
+ const percentage = ((value / totalClients) * 100).toFixed(1);
+ return (
+
+
+ {name}
+
+
인원: {value}명
+
비율: {percentage}%
+
+ );
+ }
+ return null;
+ };
+
+ return (
+
+
고객 유치 현황
+
+ {renderDropdown(
+ "성별",
+ filterGender,
+ setFilterGender,
+ genders,
+ "gender"
+ )}
+ {renderDropdown(
+ "지역",
+ filterRegion,
+ setFilterRegion,
+ regions,
+ "region"
+ )}
+ {renderDropdown(
+ "연령대",
+ filterAgeGroup,
+ setFilterAgeGroup,
+ ageGroups,
+ "age"
+ )}
+
+
+
+
+ {genderData.length > 0 && (
+
+
성별 비율
+
+
+ `${name}: ${value}명`}
+ >
+ {genderData.map((_, i) => (
+ |
+ ))}
+
+ } />
+
+
+
+
+ )}
+
+ {regionData.length > 0 && (
+
+
지역별 비율
+
+
+ `${name}: ${value}명`}
+ >
+ {regionData.map((_, i) => (
+ |
+ ))}
+
+ } />
+
+
+
+
+ )}
+
+ {ageData.length > 0 && (
+
+
연령별 비율
+
+
+ `${name}: ${value}명`}
+ >
+ {ageData.map((_, i) => (
+ |
+ ))}
+
+ } />
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default ClientRetention;
diff --git a/src/components/Header.js b/src/components/Header.js
index 7cd8f1b..9e72074 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -45,7 +45,14 @@ const Header = () => {
MyPage
-
+ {
+ e.preventDefault();
+ handleLogout();
+ }}
+ className="nav-link"
+ >
Logout
diff --git a/src/components/HeatMap.js b/src/components/HeatMap.js
new file mode 100644
index 0000000..f8677f1
--- /dev/null
+++ b/src/components/HeatMap.js
@@ -0,0 +1,245 @@
+import React, { useEffect, useState, useCallback } from "react";
+import "../styles/HeatMap.css";
+import DummyData from "../data/DummyData";
+
+const KAKAO_API_KEY = process.env.REACT_APP_KAKAO_API_KEY;
+
+const HeatMap = () => {
+ const [map, setMap] = useState(null);
+ const [customers] = useState(DummyData || []);
+ const [filteredCustomers, setFilteredCustomers] = useState(DummyData || []);
+ const [selectedAges, setSelectedAges] = useState([]);
+ const [customMinAge, setCustomMinAge] = useState("");
+ const [customMaxAge, setCustomMaxAge] = useState("");
+ const [selectedRegions, setSelectedRegions] = useState([]);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [clusterer, setClusterer] = useState(null);
+
+ const initializeMap = useCallback(() => {
+ if (!window.kakao || !window.kakao.maps || map) return;
+
+ const container = document.getElementById("heatmap");
+ if (!container) return;
+
+ const options = {
+ center: new window.kakao.maps.LatLng(36.5, 127.5),
+ level: 10,
+ };
+
+ const mapInstance = new window.kakao.maps.Map(container, options);
+ setMap(mapInstance);
+
+ const newClusterer = new window.kakao.maps.MarkerClusterer({
+ map: mapInstance,
+ averageCenter: true,
+ minLevel: 5,
+ });
+ setClusterer(newClusterer);
+ }, [map]);
+
+ useEffect(() => {
+ const scriptSrc = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_API_KEY}&libraries=services,clusterer,places`;
+ const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
+
+ if (!existingScript) {
+ const script = document.createElement("script");
+ script.src = scriptSrc;
+ script.async = true;
+ script.onload = () => {
+ window.kakao.maps.load(() => initializeMap());
+ };
+ document.head.appendChild(script);
+ } else {
+ initializeMap();
+ }
+ }, [initializeMap]);
+
+ const applyClusterer = useCallback(() => {
+ if (!map || !clusterer) return;
+
+ clusterer.clear();
+
+ const bounds = new window.kakao.maps.LatLngBounds();
+ const markers = filteredCustomers
+ .map((customer) => {
+ if (!customer.lat || !customer.lng) return null;
+ const position = new window.kakao.maps.LatLng(
+ customer.lat,
+ customer.lng
+ );
+ bounds.extend(position);
+ return new window.kakao.maps.Marker({ position });
+ })
+ .filter(Boolean);
+
+ clusterer.addMarkers(markers);
+ map.setBounds(bounds);
+ }, [map, clusterer, filteredCustomers]);
+
+ useEffect(() => {
+ if (map && clusterer) {
+ applyClusterer();
+ }
+ }, [map, clusterer, filteredCustomers, applyClusterer]);
+
+ const handleSearch = () => {
+ if (!searchTerm.trim()) {
+ alert("검색어를 입력하세요.");
+ return;
+ }
+
+ const places = new window.kakao.maps.services.Places();
+ places.keywordSearch(searchTerm, (data, status) => {
+ if (status === window.kakao.maps.services.Status.OK) {
+ const bounds = new window.kakao.maps.LatLngBounds();
+ data.forEach((place) =>
+ bounds.extend(new window.kakao.maps.LatLng(place.y, place.x))
+ );
+ map.setBounds(bounds);
+ } else {
+ alert("검색 결과가 없습니다.");
+ }
+ });
+ };
+
+ const handleKeyPress = (e) => {
+ if (e.key === "Enter") {
+ handleSearch();
+ }
+ };
+
+ const handleAddRegion = () => {
+ if (!searchTerm.trim()) {
+ alert("추가할 지역을 검색하세요.");
+ return;
+ }
+
+ setSelectedRegions((prev) => [...prev, searchTerm]);
+ setSearchTerm("");
+ };
+
+ const handleResetFilters = () => {
+ setSelectedAges([]);
+ setCustomMinAge("");
+ setCustomMaxAge("");
+ setSelectedRegions([]);
+
+ if (clusterer) clusterer.clear();
+ setFilteredCustomers([...DummyData]);
+ };
+
+ const handleFilter = () => {
+ let filtered = [...customers];
+
+ if (selectedAges.length > 0) {
+ filtered = filtered.filter((customer) =>
+ selectedAges.some(
+ (age) =>
+ customer.age >= age && customer.age < (age === 60 ? 150 : age + 10)
+ )
+ );
+ }
+
+ if (customMinAge && customMaxAge) {
+ filtered = filtered.filter(
+ (customer) =>
+ customer.age >= Number(customMinAge) &&
+ customer.age <= Number(customMaxAge)
+ );
+ }
+
+ if (selectedRegions.length > 0) {
+ filtered = filtered.filter((customer) =>
+ selectedRegions.some((region) => customer.region.includes(region))
+ );
+ }
+
+ if (clusterer) clusterer.clear();
+ setFilteredCustomers(filtered);
+ };
+
+ return (
+
+
+
+
고객 밀집도 필터
+
+
+
👤 연령대 선택
+
+ {[10, 20, 30, 40, 50, 60].map((age) => (
+
+ ))}
+
+
+
범위 입력
+
+ setCustomMinAge(e.target.value)}
+ />
+ ~
+ setCustomMaxAge(e.target.value)}
+ />
+
+
+
+
+
📍 지역 검색
+
+ setSearchTerm(e.target.value)}
+ onKeyPress={handleKeyPress}
+ />
+
+
+
+
+
+ {selectedRegions.map((region, index) => (
+
+ {region}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default HeatMap;
diff --git a/src/components/KakaoMap.js b/src/components/KakaoMap.js
index 6d57bd3..caa413e 100644
--- a/src/components/KakaoMap.js
+++ b/src/components/KakaoMap.js
@@ -1,53 +1,73 @@
import React, { useState, useEffect } from "react";
import { Map, MapMarker } from "react-kakao-maps-sdk";
+import "../styles/KakaoMap.css";
-const KakaoMap = ({ address, width = "100%", height = "300px" }) => {
+const KakaoMap = ({ lat, lng, width = "100%", height = "400px" }) => {
const [position, setPosition] = useState(null);
- const [loading, setLoading] = useState(true);
+ const [mapInstance, setMapInstance] = useState(null);
useEffect(() => {
- if (!window.kakao || !window.kakao.maps) {
- const script = document.createElement("script");
- script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=e952b2c5640cdd93c581a0c212caca9e&libraries=services,clusterer`;
- script.async = true;
- script.onload = () => loadMap();
- document.head.appendChild(script);
- } else {
- loadMap();
+ console.log(`📌 KakaoMap 컴포넌트 - lat: ${lat}, lng: ${lng}`);
+
+ if (!lat || !lng) {
+ console.warn("⚠️ 지도에 표시할 위치 정보가 없습니다.");
+ setPosition(null);
+ return;
+ }
+
+ const newPosition = { lat: parseFloat(lat), lng: parseFloat(lng) };
+ console.log(`✅ 위치 값 설정:`, newPosition);
+ setPosition(newPosition);
+ }, [lat, lng]);
+
+ useEffect(() => {
+ if (mapInstance && position) {
+ console.log("🔄 지도 재배치 (relayout) 실행됨!");
+
+ setTimeout(() => {
+ try {
+ if (mapInstance && typeof mapInstance.relayout === "function") {
+ mapInstance.relayout();
+ mapInstance.setCenter(position);
+ } else {
+ console.warn("⚠️ mapInstance가 아직 생성되지 않음.");
+ }
+ } catch (error) {
+ console.error("🚨 Kakao 지도 관련 오류 발생:", error);
+ }
+ }, 500);
}
- }, [address]);
-
- const loadMap = () => {
- setLoading(true);
- const geocoder = new window.kakao.maps.services.Geocoder();
-
- geocoder.addressSearch(address, (result, status) => {
- if (status === window.kakao.maps.services.Status.OK) {
- setPosition({
- lat: parseFloat(result[0].y),
- lng: parseFloat(result[0].x),
- });
- } else {
- console.error("주소 변환 실패:", address);
- }
- setLoading(false);
- });
- };
+ }, [mapInstance, position]);
+
+ useEffect(() => {
+ console.log("📍 KakaoMap useEffect 실행됨");
+ console.log(`📌 현재 position 상태:`, position);
+ }, [position]);
return (
-
- {loading || !position ? (
-
+
+ {!position ? (
+
📍 지도 로딩 중...
) : (
-
+ <>
+ {console.log("🗺️ Kakao Map 렌더링 시작!", position)}
+
+
)}
);
diff --git a/src/components/KakaoMapSearch.js b/src/components/KakaoMapSearch.js
index 5442f07..268d8bb 100644
--- a/src/components/KakaoMapSearch.js
+++ b/src/components/KakaoMapSearch.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import "../styles/KakaoMapSearch.css";
-const KAKAO_API_KEY = "e952b2c5640cdd93c581a0c212caca9e";
+const KAKAO_API_KEY = process.env.REACT_APP_KAKAO_API_KEY;
const KakaoMapSearch = () => {
const [searchTerm, setSearchTerm] = useState("");
diff --git a/src/components/MapFilterControls.js b/src/components/MapFilterControls.js
new file mode 100644
index 0000000..48bce16
--- /dev/null
+++ b/src/components/MapFilterControls.js
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import "../styles/MapFilterControls.css";
+
+const KAKAO_API_KEY = process.env.REACT_APP_KAKAO_API_KEY;
+
+const MapFilterControls = ({ customers, setFilteredCustomers }) => {
+ const [map, setMap] = useState(null);
+ const [bounds, setBounds] = useState(null);
+ const [searchTerm, setSearchTerm] = useState("");
+
+ useEffect(() => {
+ const script = document.createElement("script");
+ script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_API_KEY}&libraries=services`;
+ script.async = true;
+ document.head.appendChild(script);
+
+ script.onload = () => {
+ const container = document.getElementById("map-filter");
+ const options = {
+ center: new window.kakao.maps.LatLng(37.5665, 126.978),
+ level: 5,
+ };
+ const mapInstance = new window.kakao.maps.Map(container, options);
+ setMap(mapInstance);
+ };
+
+ return () => {
+ document.head.removeChild(script);
+ };
+ }, []);
+
+ const handleSearch = () => {
+ if (!map || !searchTerm.trim()) return;
+
+ const ps = new window.kakao.maps.services.Places();
+ ps.keywordSearch(searchTerm, (data, status) => {
+ if (status === window.kakao.maps.services.Status.OK) {
+ const bounds = new window.kakao.maps.LatLngBounds();
+
+ data.forEach((place) => {
+ bounds.extend(new window.kakao.maps.LatLng(place.y, place.x));
+ });
+
+ map.setBounds(bounds);
+ setBounds(bounds);
+ } else {
+ alert("검색 결과가 없습니다.");
+ }
+ });
+ };
+
+ const handleFilter = () => {
+ if (!bounds) {
+ alert("먼저 지역을 검색하세요.");
+ return;
+ }
+
+ const filtered = customers.filter((customer) =>
+ bounds.contains(new window.kakao.maps.LatLng(customer.lat, customer.lng))
+ );
+
+ setFilteredCustomers(filtered);
+ };
+
+ return (
+
+
setSearchTerm(e.target.value)}
+ />
+
+
+
+
+ );
+};
+
+export default MapFilterControls;
diff --git a/src/data/DummyData.js b/src/data/DummyData.js
new file mode 100644
index 0000000..95bbe44
--- /dev/null
+++ b/src/data/DummyData.js
@@ -0,0 +1,145 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DummyData = [
+ {
+ id: uuidv4(),
+ name: "강요한",
+ email: "yohan.kang@example.com",
+ phone: "010-1234-5678",
+ gender: "남자",
+ age: 30,
+ region_Address: "서울특별시 강남구 테헤란로 427",
+ road_Address: "서울특별시 강남구 테헤란로 427",
+ lat: 37.5035,
+ lng: 127.0487,
+ region: "서울",
+ },
+ {
+ id: uuidv4(),
+ name: "박민준",
+ email: "minjun.park@example.com",
+ phone: "010-2345-6789",
+ gender: "남자",
+ age: 28,
+ region_Address: "부산광역시 해운대구 해운대해변로 203",
+ road_Address: "부산광역시 해운대구 해운대해변로 203",
+ lat: 35.1596,
+ lng: 129.1603,
+ region: "부산",
+ },
+ {
+ id: uuidv4(),
+ name: "이지은",
+ email: "jieun.lee@example.com",
+ phone: "010-3456-7890",
+ gender: "여자",
+ age: 27,
+ region_Address: "대구광역시 중구 동성로2가 88",
+ road_Address: "대구광역시 중구 동성로2가 88",
+ lat: 35.8679,
+ lng: 128.5961,
+ region: "대구",
+ },
+ {
+ id: uuidv4(),
+ name: "이정훈",
+ email: "jeonghoon.lee@example.com",
+ phone: "010-4567-8901",
+ gender: "남자",
+ age: 43,
+ region_Address: "인천광역시 연수구 송도동 155",
+ road_Address: "인천광역시 연수구 송도동 155",
+ lat: 37.3787,
+ lng: 126.6468,
+ region: "인천",
+ },
+ {
+ id: uuidv4(),
+ name: "송준환",
+ email: "junhwan.song@example.com",
+ phone: "010-5678-9012",
+ gender: "남자",
+ age: 19,
+ region_Address: "광주광역시 서구 치평동 1202",
+ road_Address: "광주광역시 서구 치평동 1202",
+ lat: 35.1468,
+ lng: 126.8431,
+ region: "광주",
+ },
+];
+
+const regions = [
+ "서울",
+ "부산",
+ "대구",
+ "인천",
+ "광주",
+ "대전",
+ "울산",
+ "세종",
+ "경기",
+ "강원",
+ "충북",
+ "충남",
+ "전북",
+ "전남",
+ "경북",
+ "경남",
+ "제주",
+];
+
+const getRandomPhone = () =>
+ `010-${Math.floor(1000 + Math.random() * 9000)}-${Math.floor(
+ 1000 + Math.random() * 9000
+ )}`;
+
+const getRandomAge = () => Math.floor(Math.random() * 60) + 18;
+
+const getRandomCoords = (region) => {
+ const regionCoords = {
+ 서울: { lat: 37.5665, lng: 126.978 },
+ 부산: { lat: 35.1796, lng: 129.0756 },
+ 대구: { lat: 35.8714, lng: 128.6014 },
+ 인천: { lat: 37.4563, lng: 126.7052 },
+ 광주: { lat: 35.1595, lng: 126.8526 },
+ 대전: { lat: 36.3504, lng: 127.3845 },
+ 울산: { lat: 35.5384, lng: 129.3114 },
+ 세종: { lat: 36.48, lng: 127.289 },
+ 경기: { lat: 37.2636, lng: 127.0286 },
+ 강원: { lat: 37.8854, lng: 127.7298 },
+ 충북: { lat: 36.6357, lng: 127.4916 },
+ 충남: { lat: 36.5184, lng: 126.8003 },
+ 전북: { lat: 35.7175, lng: 127.153 },
+ 전남: { lat: 34.8194, lng: 126.8931 },
+ 경북: { lat: 36.576, lng: 128.5056 },
+ 경남: { lat: 35.237, lng: 128.692 },
+ 제주: { lat: 33.4996, lng: 126.5312 },
+ };
+
+ const offset = 0.1;
+ return {
+ lat: regionCoords[region].lat + (Math.random() * offset - offset / 2),
+ lng: regionCoords[region].lng + (Math.random() * offset - offset / 2),
+ };
+};
+
+regions.forEach((region) => {
+ for (let i = 0; i < 50; i++) {
+ const { lat, lng } = getRandomCoords(region);
+ DummyData.push({
+ id: uuidv4(),
+ name: `사용자${i + 1}`,
+ email: `user${i + 1}@example.com`,
+ phone: getRandomPhone(),
+ gender: i % 2 === 0 ? "남자" : "여자",
+ age: getRandomAge(),
+ region_Address: `${region}시 ${Math.floor(Math.random() * 100)}번길`,
+ road_Address: `${region}시 ${Math.floor(Math.random() * 1000)}번길`,
+ lat,
+ lng,
+ region,
+ });
+ }
+});
+
+export default DummyData;
diff --git a/src/pages/Info.js b/src/pages/Info.js
index 024e4ef..832aa5e 100644
--- a/src/pages/Info.js
+++ b/src/pages/Info.js
@@ -3,69 +3,128 @@ import "../styles/Info.css";
const Info = () => {
return (
-
-
🗺️ 여기 맞지?
-
- 서비스 소개
-
- "여기 맞지?"는 사용자가 입력한 주소 및 연락처를 보다
- 정확하고 최신 정보로 변환해주는 서비스입니다.
-
-
- 카카오 지도 API를 활용하여 주소를 변환하고, 유효하지 않은 연락처를
- 자동으로 검증하여 정확한 고객 정보를 제공합니다.
-
-
+
+
+
고객 관리 서비스
+
+ 🌐 서비스 소개
+
+ "여기 맞지?"는 사용자가 입력한 주소 및 연락처를
+ 보다 정확하고 최신 정보로 변환해주는 서비스입니다.
+
+
+ 카카오 지도 API를 활용하여 주소를 변환하고, 유효하지 않은 연락처를
+ 자동으로 검증하여 정확한 고객 정보를 제공합니다.
+
+
+ 해당 서비스는 기업이나 단체의 입장에서 클라이언트를 관리함에 있어
+ 편리성을 제공함과 동시에 카카오 지도 API의 기능들을 활용하여
+ 서비스의 집중 자원 투자 및 운영 방향에 도움을 주는 것에 목적이
+ 있습니다.
+
+
-
+
-
- 🚀 주요 기능
-
- - 📍 오래된 주소 → 최신 주소 변환
- - 📌 주소 검색 및 위치 확인 (카카오 지도 연동)
- - 📞 연락처 유효성 검사 및 오류 수정
- - 📜 변경 이력 저장 및 알림 제공
-
-
+
+ 🚀 주요 기능
+
+ - 📍 오래된 주소 → 최신 주소 변환
+ - 📌 주소 검색 및 위치 확인 (카카오 지도 연동)
+ - 📞 연락처 유효성 검사 및 오류 수정
+ - 🗓️ 변경 이력 저장 및 알림 제공
+
+
-
+
-
- 👨💻 우리 팀 소개
-
- 팀명: 여기 맞지?
-
-
- 팀원:
-
-
- - 🔹 강요한(팀장) - 관리자 관련 기능 개발
- - 🔹 박민준 - 멀티 모듈 설계, 성능 최적화
- - 🔹 이지은 - 배포 및 CI/CD 구축
- - 🔹 송준환 - 카카오 지도 API 활용 데이터 추출 기능 개발
- - 🔹 이정훈 - 서비스 이용 프로토 타입 개발, 코드 리펙토링
-
-
+
+ 👤 사용자 시나리오
+
+ -
+ ✅ 사용자는 최고 관리자로, 팀원에게 관리 서비스를 이용할 수 있는
+ 계정을 만들어 제공할 수 있다.
+
+ - ✅ 사용자는 관리자의 권한을 수정할 수 있다.
+ -
+ ✅ 사용자는 관리자를 삭제할 수 있다.(일반 관리자만 삭제 가능)
+
+ - ✅ 사용자는 관리자 목록을 출력할 수 있다.
+ - ✅ 사용자는 클라이언트의 상세정보를 볼 수 있다.
+ - ✅ 사용자는 클라이언트의 정보를 수정할 수 있다.
+ - ✅ 사용자는 클라이언트를 추가할 수 있다.
+ - ✅ 사용자는 클라이언트를 삭제할 수 있다.
+ - ✅ 사용자는 지도 기능을 이용할 수 있다.
+ - ✅ 사용자는 지역별 클라이언트의 밀집도를 확인할 수 있다.
+ - ✅ 사용자는 지역별 클라이언트의 정보를 볼 수 있다.
+
+
-
+
-
- 💾 작업물
- 더 궁금한 점이 있다면 깃허브에 방문해주세요!
-
-
+
+ 👍 서비스 이용 효과
+
+ -
+ 1️⃣ 서비스를 제공하는 기업이나 단체에서 고객의 위치, 연락처를
+ 포함한 정보를 편리하게 관리할 수 있다.
+
+ -
+ 2️⃣ 서비스를 이용하는 고객의 성별, 나이, 지역별 분포도를 분석하여
+ 마케팅 전략 수립에 활용한다.
+
+ -
+ 3️⃣ 고객의 정보가 변동되거나 불확실할 경우 정확한 정보를 수집 및
+ 수정하여 고객과 서비스 배포자 간 마찰을 줄여 서비스 만족도를
+ 상승시킨다.
+
+
+
+
+
+
+
+ 👨💻 우리 팀 소개
+
+ 팀명: 여기 맞지?
+
+
+ 팀원 및 역할
+
+
+ - 🔹 강요한(팀장) - 관리자 관련 기능 개발, 프로젝트 총괄
+ - 🔹 박민준 - 멀티 모듈 설계, 성능 최적화
+ - 🔹 이지은 - 배포 및 CI/CD 구축, 부가 기능 구현
+ -
+ 🔹 송준환 - 카카오 지도 API 활용 데이터 추출 기능 개발 및 연동
+
+ -
+ 🔹 이정훈 - 서비스 프로토 타입 개발, 카카오 지도 API 활용 기능
+ 개발
+
+
+
+
+
+
+
+ 🛜 접근
+ 더 궁금한 점이 있다면 깃허브에 방문해주세요!
+
+
+
+
);
};
diff --git a/src/pages/Login.js b/src/pages/Login.js
index cddcac6..7e44cff 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -12,14 +12,13 @@ const Login = () => {
localStorage.setItem("token", "dummy_token"); // 더미 로그인 처리
window.dispatchEvent(new Event("storage")); // 상태 변경 알림
- alert("Access Granted");
+ alert("로그인 성공!");
navigate("/");
};
return (
- {/* 로그인 폼 */}
사용자 관리 서비스에 오신 것을 환영합니다!
쉽고, 빠르게 연결되는 카카오의 다양한 서비스를 경험해보세요.
@@ -42,7 +41,6 @@ const Login = () => {
- {/* 로그인 이미지 */}
diff --git a/src/pages/Management.js b/src/pages/Management.js
index ea0dc5b..b758251 100644
--- a/src/pages/Management.js
+++ b/src/pages/Management.js
@@ -1,6 +1,8 @@
import React, { useState } from "react";
import "../styles/Management.css";
import ClientManagement from "../components/ClientManagement";
+import HeatMap from "../components/HeatMap";
+import ClientRetention from "../components/ClientRetention";
import AdminManagement from "../components/AdminManagement";
import KakaoMapSearch from "../components/KakaoMapSearch";
@@ -9,7 +11,6 @@ const Management = () => {
return (
- {/* 사이드바 */}
관리 메뉴
+
+
- {/* 메인 컨텐츠 - 선택된 메뉴에 따라 변경 */}
{selectedMenu === "clients" &&
}
+ {selectedMenu === "heatmap" &&
}
+ {selectedMenu === "retention" &&
}
{selectedMenu === "admins" &&
}
{selectedMenu === "search" &&
}
diff --git a/src/pages/MyPage.js b/src/pages/MyPage.js
index 9b754a7..5b268e4 100644
--- a/src/pages/MyPage.js
+++ b/src/pages/MyPage.js
@@ -20,10 +20,6 @@ const MyPage = () => {
}
}, []);
- const handleOpenModal = () => {
- setIsModalOpen(true);
- };
-
const handleCloseModal = () => {
setIsModalOpen(false);
setMessage("");
@@ -53,7 +49,6 @@ const MyPage = () => {
return (
<>
- {/* 마이페이지 전용 배경 */}
@@ -85,7 +80,7 @@ const MyPage = () => {