Merge pull request #73 from pirogramming/feat-sy

feat: 카테고리별 마커 색상 다르게 함

Author: seoyoonii-banu

backend-core/static/missions/css/mission_list.css

@@ -134,23 +134,59 @@
     animation: pulse-pin 2s infinite;
 }
 
-/* 미션 마커 (노란색) */
+/* 미션 마커 - 색상은 JS(CATEGORY_COLORS)에서 inline style로 주입됨 */
 .mission-marker {
-    background: #FFC107;
     z-index: 50;
+    /* background 는 map_manager.js 의 CATEGORY_COLORS 에서 결정 */
 }
 
 .mission-marker:hover {
     transform: translate(-50%, -100%) rotate(-45deg) scale(1.1);
     z-index: 101;
 }
 
+/* 매칭 완료된 미션 마커는 약간 흐리게 처리 */
+.mission-marker.status-matched,
+.mission-marker.status-completed {
+    opacity: 0.5;
+}
+
 @keyframes pulse-pin {
     0% { transform: scale(1); opacity: 0.8; }
     100% { transform: scale(2.5); opacity: 0; }
 }
 
-/* ==================== 4. 헤더 & 필터 UI ==================== */
+/* ==================== 4. 지도 범례 ==================== */
+.map-legend {
+    position: absolute;
+    left: 12px;
+    bottom: 12px;
+    z-index: 10;
+    background: white;
+    border-radius: 10px;
+    padding: 8px 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    font-size: 11px;
+    color: #374151;
+    pointer-events: none; /* 지도 클릭 방해 안 하도록 */
+}
+
+.map-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 3px 0;
+    line-height: 1;
+}
+
+.map-legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+/* ==================== 5. 헤더 & 필터 UI ==================== */
 .mission-header {
     height: 70px;
     max-width: 450px;
@@ -205,10 +241,6 @@
 }
 
 
-
-
-
-
 /* 필터 버튼 활성화 상태 */
 .filter-btn {
     width: 40px;
@@ -240,7 +272,7 @@
     stroke: white;
 }
 
-/* ==================== 5. 기타 UI 요소 (툴바, 패널 등) ==================== */
+/* ==================== 6. 기타 UI 요소 (툴바, 패널 등) ==================== */
 .mission-toolbar {
     display: flex;
     flex-direction: column;
@@ -430,9 +462,6 @@
 }
 
 
-
-
-
 /* 전체화면 지도 컨테이너 */
 #fullscreen-map-container {
     position: fixed;

backend-core/static/missions/js/map_manager.js

@@ -14,9 +14,32 @@
  * 
  * 수정 사항:
  * - getUserLocation(): 3단계 폴백 전략
- * - 커스텀 마커: CSS 스타일 사용 (파란색 핀/노란색 핀)
+ * - 커스텀 마커: CSS 스타일 사용 (파란색 핀/카테고리별 색상 핀)
+ * - CATEGORY_COLORS: 카테고리별 색상 단일 소스 관리
  */
 
+// ==================== 카테고리 색상 단일 소스 ====================
+
+const CATEGORY_COLORS = {
+    ERRAND:  '#3679E3',  // 심부름 - 파랑
+    STUDY:   '#27C27B',  // 학업   - 초록
+    RENTAL:  '#FFB800',  // 대여   - 노랑
+    RECRUIT: '#8B5CF6',  // 구인   - 보라
+    LIFE:    '#FF6B9A',  // 생활   - 핑크
+    OTHER:   '#94A3B8',  // 기타   - 회색
+};
+
+const CATEGORY_LABELS = {
+    ERRAND:  '심부름',
+    STUDY:   '학업',
+    RENTAL:  '대여',
+    RECRUIT: '구인',
+    LIFE:    '생활',
+    OTHER:   '기타',
+};
+
+const CATEGORY_COLOR_DEFAULT = '#94A3B8'; // fallback
+
 class KakaoMapManager {
     constructor(containerId, options = {}) {
         this.containerId = containerId;
@@ -177,10 +200,10 @@ class KakaoMapManager {
     }
 
     /**
-     * 커스텀 마커 추가 (CSS 스타일 사용 - 노란색 핀)
+     * 커스텀 마커 추가 (카테고리별 색상 적용)
      * @param {number} lat 
      * @param {number} lng 
-     * @param {object} options { status: 'WAITING'|'MATCHED'|'COMPLETED', onClick: fn }
+     * @param {object} options { category: 'ERRAND'|'STUDY'|..., status: 'WAITING'|..., onClick: fn }
      * @returns {kakao.maps.CustomOverlay}
      */
     addCustomMarker(lat, lng, options = {}) {
@@ -191,13 +214,17 @@ class KakaoMapManager {
 
         const position = new kakao.maps.LatLng(lat, lng);
 
-        // CSS 마커 DOM 생성
+        // 카테고리 색상 결정 (단일 소스: CATEGORY_COLORS)
+        const color = CATEGORY_COLORS[options.category] ?? CATEGORY_COLOR_DEFAULT;
+
+        // CSS 마커 DOM 생성 (색상은 inline style로 주입)
         const markerEl = document.createElement('div');
         markerEl.className = 'mission-marker';
-        
-        // 상태별 클래스 추가
+        markerEl.style.background = color;
+
+        // 상태별 클래스 추가 (흐리게 처리 등 상태 UI에 활용)
         if (options.status) {
-            markerEl.classList.add(options.status.toLowerCase());
+            markerEl.classList.add(`status-${options.status.toLowerCase()}`);
         }
 
         // CustomOverlay 생성
@@ -404,6 +431,8 @@ function waitForKakaoMaps() {
 // ==================== 전역 노출 ====================
 
 window.KakaoMapManager = KakaoMapManager;
+window.CATEGORY_COLORS = CATEGORY_COLORS;
+window.CATEGORY_LABELS = CATEGORY_LABELS;
 window.MapUtils = {
     displayUserLocation,
     waitForKakaoMaps

backend-core/static/missions/js/mission_list.js

@@ -232,16 +232,11 @@
             const lng = parseFloat(mission.location_lng);
 
             if (isNaN(lat) || isNaN(lng)) return;
-            fullscreenMapManager.addCustomMarker(lat, lng, {
-            status: mission.status,
-            onClick: () => {
-                window.location.href = `/api/missions/${mission.id}/`;
-            }
-        });
 
-            // ✨ 마커 생성 + 클릭 시 상세페이지 이동
-            const marker = fullscreenMapManager.addCustomMarker(lat, lng, {
-                status: mission.status,  // WAITING/MATCHED/COMPLETED
+            // ✨ category 전달 → 카테고리별 색상 자동 적용
+            fullscreenMapManager.addCustomMarker(lat, lng, {
+                category: mission.category,
+                status: mission.status,
                 onClick: () => {
                     window.location.href = `/api/missions/${mission.id}/`;
                 }
@@ -292,7 +287,7 @@
 
     /**
      * 지도 마커 업데이트
-     * - map_manager: 마커 생성/표시 (CSS 스타일 적용)
+     * - map_manager: 마커 생성/표시 (카테고리별 색상 적용)
      * - mission_list: 클릭 시 상세페이지 이동
      */
     function updateMapMarkers(missions) {
@@ -311,9 +306,10 @@
                 return;
             }
 
-            // ✨ 마커 생성 + 클릭 시 상세페이지 이동
-            const marker = mapManager.addCustomMarker(lat, lng, {
-                status: mission.status,  // WAITING/MATCHED/COMPLETED
+            // ✨ category 전달 → 카테고리별 색상 자동 적용
+            mapManager.addCustomMarker(lat, lng, {
+                category: mission.category,
+                status: mission.status,
                 onClick: () => {
                     window.location.href = `/api/missions/${mission.id}/`;
                 }
@@ -432,28 +428,28 @@
     }
 
     window.moveToCurrentLocation = async function(isFullscreen = false) {
-    const targetManager = isFullscreen ? fullscreenMapManager : mapManager;
-    
-    if (!targetManager) return;
-    
-    console.log(isFullscreen ? "전체화면 현위치 탐색..." : "일반 지도 현위치 탐색...");
-    
-    try {
-        // KakaoMapManager 내부의 getUserLocation 활용
-        const loc = await targetManager.getUserLocation();
+        const targetManager = isFullscreen ? fullscreenMapManager : mapManager;
 
-        // 해당 지도의 중심 이동
-        targetManager.setCenter(loc.lat, loc.lng);
-        targetManager.setLevel(3);
+        if (!targetManager) return;
 
-        // 내 위치 마커 표시 (MapUtils 활용)
-        await MapUtils.displayUserLocation(targetManager);
+        console.log(isFullscreen ? "전체화면 현위치 탐색..." : "일반 지도 현위치 탐색...");
 
-    } catch (err) {
-        console.error("현위치 이동 실패:", err);
-        alert("위치 정보를 가져올 수 없습니다.");
-    }
-};
+        try {
+            // KakaoMapManager 내부의 getUserLocation 활용
+            const loc = await targetManager.getUserLocation();
+            
+            // 해당 지도의 중심 이동
+            targetManager.setCenter(loc.lat, loc.lng);
+            targetManager.setLevel(3);
+            
+            // 내 위치 마커 표시 (MapUtils 활용)
+            await MapUtils.displayUserLocation(targetManager);
+            
+        } catch (err) {
+            console.error("현위치 이동 실패:", err);
+            alert("위치 정보를 가져올 수 없습니다.");
+        }
+    };
 
     // ==================== 전역 함수 노출 ====================