Merge pull request #74 from pirogramming/feat-chan

Feat chan

Author: chanwoongYoon

backend-core/staticfiles/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/staticfiles/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/staticfiles/users/css/homepage_guest.css

@@ -15,24 +15,30 @@ body {
     font-family: 'Noto Sans KR', sans-serif;
 }
 
-/* 2. 헤더 섹션 (WelcomeScreen 상단 블루 영역) */
+/* 2. 헤더 섹션 (상단 연한 블루 영역 수정) */
 .header {
-    background: linear-gradient(180deg, var(--primary-blue) 0%, #6BB6FF 100%);
-    padding: 60px 20px 60px;
+    background: #E6F1FF; /* 배경색 수정 */
+    padding: 60px 20px 80px;
     text-align: center;
-    color: var(--white);
 }
 
-.logo-circle {
-    width: 60px; height: 60px;
-    background: var(--white); color: var(--primary-blue);
-    border-radius: 18px; display: flex; align-items: center; justify-content: center;
-    font-size: 32px; font-weight: 800; margin: 0 auto 16px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+/* 실제 로고 이미지 스타일 */
+.login-logo {
+    width: 350px;        /* 로고 크기 */
+    height: auto;
+    display: block;
+    margin: 0 auto 12px; /* 가로 중앙 정렬 및 하단 여백 */
 }
 
-.brand-name { font-size: 30px; font-weight: 700; margin-bottom: 5px; }
-.brand-subtitle { font-size: 14px; opacity: 0.9; }
+.brand-subtitle { 
+    width: 350px;        /* 로고 너비와 똑같이 맞춰서 기준점을 잡습니다 */
+    margin: 0 auto;       /* 로고와 동일하게 가로 중앙에 배치 */
+    text-align: center;   /* 350px라는 영역 안에서 글자를 중앙으로 정렬 */
+    font-size: 15px; 
+    font-weight: 500;
+    color: #4DA6FF; 
+    line-height: 2;     /* 글자가 너무 붙어 보이지 않게 약간의 높이 추가 */
+}
 
 /* 3. 미션 리스트 섹션 (문구 위치 및 굵기 설정) */
 .mission-list-section {
@@ -52,7 +58,7 @@ body {
     color: var(--text-black); margin-bottom: 8px;
 }
 
-/* 설명 문구: 도움까지, 뒤에 줄바꿈(\A) 및 글자 크기 16px 적용 */
+/* 설명 문구 */
 .mission-list-section::after {
     content: "작은 부탁부터 과제 도움까지,\A학생들이 서로 돕는 미션 플랫폼";
     order: -1;
@@ -61,7 +67,7 @@ body {
     color: var(--text-gray); 
     line-height: 1.6;
     margin-bottom: 30px; 
-    white-space: pre-wrap; /* \A 줄바꿈 인식을 위해 필수 */
+    white-space: pre-wrap;
 }
 
 .section-title {
@@ -121,35 +127,45 @@ body {
 .price { font-size: 18px; font-weight: 700; color: var(--primary-blue); }
 
 /* 5. 하단 버튼 영역 (로그인/회원가입) */
-.guest-footer-area { padding: 30px 20px 100px; background: var(--white); }
+.guest-footer-area { 
+    padding: 30px 25px 100px; /* 양옆 여백을 20px에서 25px로 변경 */
+    background: var(--white); 
+}
 
-/* 안내 문구와 미션 카드 사이 간격 확보 */
 .guest-footer-text { 
     text-align: center; 
     font-size: 14px; 
     color: #98A2B3; 
     margin: 60px 0 20px; 
 }
 
-/* [수정] 로그인/회원가입 버튼 규격: 로그인 페이지의 .btn-main과 일치시킴 */
 .guest-cta {
-    display: flex; align-items: center; justify-content: center; gap: 10px;
-    width: calc(100% - 40px); 
-    height: 56px;           /* 높이 56px 적용 */
-    margin: 0 20px 12px; 
-    border-radius: 12px;    /* 테두리 반경 12px 적용 */
-    font-size: 18px;        /* 글자 크기 18px 적용 */
-    font-weight: 700;       /* 글자 굵기 700 적용 */
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    gap: 10px;
+    
+    /* 핵심 수정 부분: 가로 크기를 100%로 하고 양옆 마진을 0으로 합니다 */
+    width: 100%;          
+    margin: 0 0 12px 0;  /* 위 0, 오른쪽 0, 아래 12px, 왼쪽 0 */
+    
+    height: 56px;
+    border-radius: 12px;
+    font-size: 18px;
+    font-weight: 700;
     text-decoration: none;
     box-sizing: border-box;
 }
 
-/* 로그인 버튼 색상 */
-.guest-cta:nth-of-type(1) { background: var(--primary-blue); color: var(--white); }
+/* 첫 번째 버튼 (로그인): 배경색 적용 */
+.guest-cta:nth-of-type(1) { 
+    background: #4DA6FF; 
+    color: #ffffff; 
+}
 
-/* 회원가입 버튼 색상 */
+/* 두 번째 버튼 (회원가입): 테두리와 글자색 적용 */
 .guest-cta:nth-of-type(2) { 
-    background: var(--white); 
-    color: var(--primary-blue); 
-    border: 1px solid var(--primary-blue); 
+    background: #ffffff; 
+    color: #4DA6FF; 
+    border: 1px solid #4DA6FF; 
 }