Fix: Merge conflicts and update login design

sua-725 · sua-725 · commit 8c5fe7e09cc2 · 2026-02-19T17:54:30.000+09:00
diff --git a/backend-core/static/users/css/login.css b/backend-core/static/users/css/login.css
@@ -31,71 +31,84 @@ body {
     height: 100%;
 }
 
-/* 3. 헤더 레이아웃 수정 */
+/* 3. 헤더 레이아웃 수정 - 화살표와 텍스트 나란히 배치 */
 .header {
-    display: grid;
-    grid-template-columns: auto 1fr; /* 화살표 / 나머지 영역 */
-    column-gap: 15px; 
-    align-items: start; /* 요소를 위쪽 정렬하여 텍스트 첫 줄에 맞춤 */
-    margin-bottom: 35px;
     padding-top: 15px;
+    margin-bottom: 35px;
+    display: flex;         
+    align-items: flex-start; 
+    gap: 12px;             
+}
+
+.header > a, .header > i {
+    text-decoration: none;
+    color: inherit;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    height: 28px; 
 }
 
-/* 텍스트 정렬 및 로고 배치를 위한 영역 */
 .header-text {
-    grid-column: 2;
-    text-align: left; /* 상단 텍스트는 화살표 옆 왼쪽 정렬 */
+    flex: 1; 
 }
 
 .header h2 {
     font-size: 24px;
     font-weight: 700;
-    margin: 0;
+    margin: 0; 
     color: #101828;
     line-height: 1.2;
+    text-align: left;
 }
 
 .header p {
     font-size: 14px;
     color: #667085;
-    margin: 4px 0 0 0;
+    margin: 4px 0 0 0; 
+    text-align: left;
+}
+
+/* 4. 로고 및 문구 중앙 정렬 수정 (핵심 수정 부분) */
+.logo-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;    /* 로고와 문구 모두 가로 중앙 정렬 */
+    justify-content: center;
+    width: 100%;
+    margin-top: 40px;       /* 헤더와의 간격 */
+    margin-bottom: 40px;    /* 입력창과의 간격 */
 }
 
-/* 4. 로고 이미지 스타일 */
 .login-logo {
-    width: 370px;   
+    width: 80%;           
+    max-width: 280px;     
     height: auto;
     display: block;
-    margin: 50px 0 5px -25px; /* 왼쪽으로 25px 당김 */
+    margin: 0 auto;         /* 로고 자체 중앙 배치 */
 }
 
-/* 로고 밑에 '대학생 미션 중개 플랫폼' 문구 */
-.header-text::after {
-    content: "대학생 미션 중개 플랫폼";
+/* 로고 밑 문구 */
+.logo-subtext {
     display: block;
-    width: 370px;        
-    margin-left: -25px;  
+    margin-top: 15px;      
     text-align: center;
     font-size: 15px;     
     font-weight: 500;    
     color: #667085;
-    margin-top: 20px;    
-    margin-bottom: 20px;
 }
 
+/* 5. 입력창 및 버튼 디자인 */
 .input-section {
     display: flex;
     flex-direction: column;
-    text-align: center;
 }
 
-/* [순서 3] 입력창 영역 */
 .email-section, .input-group {
     text-align: left;
     margin-bottom: 18px;
 }
 
-/* 5. 입력창 및 버튼 디자인 */
 label {
     display: block;
     font-size: 14px;
@@ -117,7 +130,6 @@ input {
     background-size: 18px;
 }
 
-/* 아이콘 이미지 (Data URI 사용으로 별도 파일 없이 작동) */
 #email {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2398A2B3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' /%3E%3C/svg%3E");
 }
@@ -139,7 +151,6 @@ input {
     margin-top: 15px;
 }
 
-/* 로그인 없이 둘러보기 버튼 */
 .btn-guest {
     display: flex;
     align-items: center;
@@ -175,7 +186,6 @@ input {
     font-size: 14px;
 }
 
-/* 비밀번호 찾기 (회색 링크) */
 #search_key {
     display: inline-block;
     color: #98A2B3;
@@ -187,14 +197,12 @@ input {
     color: #667085;
 }
 
-/* 회원가입 하기 (파란색 링크) */
 #signup {
     color: #4DA6FF;
     text-decoration: none;
     font-weight: 600;
 }
 
-/* 두 메뉴 사이의 구분선 */
 #search_key::after {
     content: "|";
     margin-left: 15px;
diff --git a/backend-core/staticfiles/missions/js/mission_detail.js b/backend-core/staticfiles/missions/js/mission_detail.js
@@ -5,7 +5,7 @@
  * 
  * 역할:
  * - 미션 상세 정보 로드
- * - 지도에 미션 위치 표시 (카테고리별 색상)
+ * - 지도에 미션 위치 표시 (상태별 색상)
  * - 이미지 갤러리 렌더링 및 모달
  * - 햄버거 메뉴 토글 (작성자만)
  * - 삭제 기능
@@ -15,7 +15,7 @@
 
 (function () {
     let mapManager;
-    let missionStatus = null;
+    let missionStatus = null;  // ✨ 미션 상태 저장
 
     // URL에서 mission_id 추출
     const pathParts = window.location.pathname.split('/').filter(p => p !== "");
@@ -27,9 +27,9 @@
     // ==================== 지도 초기화 ====================
     
     /**
-     * 지도 초기화 (카테고리별 색상 마커)
+     * 지도 초기화 (상태별 마커 색상)
      */
-    async function initMap(lat, lng, status, category) {
+    async function initMap(lat, lng, status) {
         const container = document.getElementById('map');
         if (!container) return;
 
@@ -41,16 +41,15 @@
 
             await mapManager.init();
 
-            // ✅ 카테고리별 색상 + 상태 클래스 적용
+            // ✨ 상태별 마커 생성 (InfoWindow 제거)
             const marker = mapManager.addCustomMarker(lat, lng, {
-                category: category,  // 카테고리별 색상
-                status: status       // WAITING/MATCHED/COMPLETED
+                status: status  // WAITING/MATCHED/COMPLETED
             });
 
             mapManager.fitBoundsToLocations([{ lat, lng }]);
             mapManager.setLevel(3);
             
-            console.log("✅ 지도 초기화 완료 (카테고리:", category, "상태:", status, ")");
+            console.log("✅ 지도 초기화 완료 (상태:", status, ")");
         } catch (err) {
             console.error("지도 초기화 실패:", err);
         }
@@ -98,6 +97,7 @@
         }
 
         const imagesHTML = images.map(img => {
+            // 이미지 경로 처리
             let src = img.image;
             if (src && !src.startsWith('http') && !src.startsWith('/')) {
                 src = '/' + src; 
@@ -144,12 +144,16 @@
 
     // ==================== 햄버거 메뉴 ====================
     
+    /**
+     * 햄버거 메뉴 토글
+     */
     function toggleMenu() {
         const menu = document.getElementById('dropdown-menu');
         const backdrop = document.getElementById('menu-backdrop');
         
         if (menu && backdrop) {
             const isOpen = menu.classList.contains('show');
+            
             if (isOpen) {
                 closeMenu();
             } else {
@@ -159,6 +163,9 @@
         }
     }
 
+    /**
+     * 메뉴 닫기
+     */
     function closeMenu() {
         const menu = document.getElementById('dropdown-menu');
         const backdrop = document.getElementById('menu-backdrop');
@@ -167,8 +174,12 @@
         if (backdrop) backdrop.classList.remove('show');
     }
 
+    /**
+     * 햄버거 버튼 표시 (작성자만)
+     */
     function showMenuButton(isAuthor) {
         const menuButton = document.getElementById('menu-button');
+        
         if (menuButton && isAuthor) {
             menuButton.classList.add('visible');
         }
@@ -177,6 +188,7 @@
     // ==================== 미션 삭제 ====================
     
     async function deleteMission() {
+        // 메뉴 먼저 닫기
         closeMenu();
         
         if (!confirm('정말로 이 미션을 삭제하시겠습니까?\n삭제된 미션은 복구할 수 없습니다.')) {
@@ -217,16 +229,17 @@
                 return;
             }
 
+            // ✨ 미션 상태 저장
             missionStatus = mission.status;
 
             // 1. 이미지 표시
             renderImages(mission.images);
 
-            // 2. 지도 표시 (좌표가 있을 때만)
+            // 2. 지도 표시 (좌표가 있을 때만, 상태 포함)
             if (mission.location_lat && mission.location_lng) {
-                // ✅ category 추가 전달
-                initMap(mission.location_lat, mission.location_lng, mission.status, mission.category);
+                initMap(mission.location_lat, mission.location_lng, mission.status);
             } else {
+                // ✨ 위치 정보가 없으면 "장소 설정 없음" 메시지 표시
                 showNoLocationMessage();
             }
 
@@ -240,6 +253,9 @@
 
     // ==================== 이벤트 핸들러 ====================
     
+    /**
+     * 키보드 이벤트 (ESC로 모달/메뉴 닫기)
+     */
     function initKeyboardEvents() {
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape') {
@@ -249,15 +265,23 @@
         });
     }
 
+    /**
+     * 모달 배경 클릭으로 닫기
+     */
     function initModalEvents() {
         const modal = document.getElementById('imageModal');
         if (modal) {
             modal.addEventListener('click', function(e) {
-                if (e.target === this) closeImageModal();
+                if (e.target === this) {
+                    closeImageModal();
+                }
             });
         }
     }
 
+    /**
+     * 햄버거 메뉴 이벤트
+     */
     function initMenuEvents() {
         const menuButton = document.getElementById('menu-button');
         const backdrop = document.getElementById('menu-backdrop');
@@ -270,6 +294,7 @@
             });
         }
         
+        // 삭제 버튼 이벤트
         if (deleteBtn) {
             deleteBtn.addEventListener('click', function(e) {
                 e.preventDefault();
@@ -282,13 +307,16 @@
             backdrop.addEventListener('click', closeMenu);
         }
         
+        // 메뉴 외부 클릭 시 닫기
         document.addEventListener('click', function(e) {
             const menu = document.getElementById('dropdown-menu');
             const menuButton = document.getElementById('menu-button');
             
             if (menu && menuButton) {
                 if (!menu.contains(e.target) && !menuButton.contains(e.target)) {
-                    if (menu.classList.contains('show')) closeMenu();
+                    if (menu.classList.contains('show')) {
+                        closeMenu();
+                    }
                 }
             }
         });
@@ -297,14 +325,17 @@
     // ==================== 초기화 ====================
     
     function init() {
+        // 전역 함수 노출
         window.deleteMission = deleteMission;
         window.openImageModal = openImageModal;
         window.closeImageModal = closeImageModal;
 
+        // 이벤트 리스너 등록
         initKeyboardEvents();
         initModalEvents();
         initMenuEvents();
 
+        // 데이터 로드
         loadMissionDetail();
 
         console.log("✅ mission_detail.js 초기화 완료");
diff --git a/backend-core/templates/users/login.html b/backend-core/templates/users/login.html
