Merge pull request #71 from pirogramming/feat-sua

feat: 로그인 및 게스트 페이지 로고 적용

Author: sua-725

backend-core/static/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; 
 }

backend-core/static/users/css/login.css

@@ -41,60 +41,52 @@ body {
     padding-top: 15px;
 }
 
-.header h2 {
-    grid-row: 1; /* 첫 번째 줄 */
+/* 텍스트 정렬 및 로고 배치를 위한 영역 */
+.header-text {
     grid-column: 2;
-    font-size: 24px; /* 시안처럼 조금 더 크게 조절 가능 */
+    text-align: left; /* 상단 텍스트는 화살표 옆 왼쪽 정렬 */
+}
+
+.header h2 {
+    font-size: 24px;
     font-weight: 700;
     margin: 0;
     color: #101828;
     line-height: 1.2;
 }
 
 .header p {
-    grid-row: 2; /* 두 번째 줄 */
-    grid-column: 2;
     font-size: 14px;
     color: #667085;
     margin: 4px 0 0 0;
 }
 
-/* 4. 요소 순서 강제 조정 (로고 -> 명칭 -> 입력창) */
-.input-section {
-    display: flex;
-    flex-direction: column;
+/* 4. 로고 이미지 스타일 */
+.login-logo {
+    width: 370px;   
+    height: auto;
+    display: block;
+    margin: 50px 0 5px -25px; /* 왼쪽으로 25px 당김 */
+}
+
+/* 로고 밑에 '대학생 미션 중개 플랫폼' 문구 */
+.header-text::after {
+    content: "대학생 미션 중개 플랫폼";
+    display: block;
+    width: 370px;        
+    margin-left: -25px;  
     text-align: center;
+    font-size: 15px;     
+    font-weight: 500;    
+    color: #667085;
+    margin-top: 20px;    
+    margin-bottom: 20px;
 }
 
-/* [순서 1] 로고 박스 */
-.input-section::before {
-    content: 'U';
-    order: -2;
+.input-section {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 60px;
-    height: 60px;
-    background: #FFFFFF;
-    border-radius: 15px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    margin: 10px auto 15px;
-    font-size: 30px;
-    font-weight: 800;
-    color: #57A6FF;
-}
-
-/* [순서 2] Uniquest 서비스 명칭 및 설명 */
-.input-section::after {
-    content: "Uniquest\A 대학생 미션 중개 플랫폼";
-    order: -1;
-    display: block;
-    white-space: pre;
-    font-size: 22px;
-    font-weight: 700;
-    color: #344054;
-    margin-bottom: 35px;
-    line-height: 1.3;
+    flex-direction: column;
+    text-align: center;
 }
 
 /* [순서 3] 입력창 영역 */
@@ -137,7 +129,7 @@ input {
 .btn-main {
     width: 100%;
     height: 56px;
-    background-color: #57A6FF;
+    background-color: #4DA6FF;
     color: #ffffff;
     border: none;
     border-radius: 12px;
@@ -176,35 +168,35 @@ input {
 /* 6. 하단 푸터 및 이용약관 */
 .footer {
     margin-top: 25px;
-    display: flex;               /* 나란히 배치하기 위해 flex 적용 */
-    justify-content: center;     /* 가로 중앙 정렬 */
-    align-items: center;         /* 세로 중앙 정렬 */
-    gap: 15px;                  /* 두 링크 사이의 간격 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
     font-size: 14px;
 }
 
 /* 비밀번호 찾기 (회색 링크) */
 #search_key {
-    display: inline-block;       /* display: none 제거 */
-    color: #98A2B3;             /* 약간 회색 */
+    display: inline-block;
+    color: #98A2B3;
     text-decoration: none;
     transition: color 0.2s;
 }
 
 #search_key:hover {
-    color: #667085;             /* 호버 시 조금 더 진한 회색 */
+    color: #667085;
 }
 
 /* 회원가입 하기 (파란색 링크) */
 #signup {
-    color: #57A6FF;             /* 파란색 */
+    color: #4DA6FF;
     text-decoration: none;
     font-weight: 600;
 }
 
-/* 두 메뉴 사이에 구분선(c)을 넣고 싶을 때 추가하는 스타일 (선택 사항) */
+/* 두 메뉴 사이의 구분선 */
 #search_key::after {
-    content: "|";                /* 구분선 텍스트 제거 */
+    content: "|";
     margin-left: 15px;
 }
 

backend-core/static/users/images/logo.png

@@ -6,46 +6,13 @@
 {% block extra_css %}
     <link rel="stylesheet" href="{% static 'users/css/homepage_guest.css' %}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    {% comment %} <style>
-        .welcome-header {
-            text-align: center;
-            padding: 20px 0 30px;
-        }
-        .logo-circle {
-            width: 64px;
-            height: 64px;
-            background: rgba(255,255,255,0.3);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            font-weight: bold;
-            margin: 0 auto 16px;
-        }
-        .brand-name { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
-        .brand-subtitle { font-size: 14px; opacity: 0.9; }
-        .guest-cta {
-            display: block;
-            text-align: center;
-            margin: 24px 20px;
-            padding: 14px 24px;
-            background: var(--white);
-            color: var(--primary-blue);
-            border-radius: 14px;
-            font-weight: 600;
-            text-decoration: none;
-        }
-        .guest-cta:hover { opacity: 0.95; }
-    </style> {% endcomment %}
 {% endblock %}
 
 {% block content %}
 <header class="header">
     <div class="header-top">
         <section class="welcome-header">
-            <div class="logo-circle">U</div>
-            <h1 class="brand-name">Uniquest</h1>
+            <img src="{% static 'users/images/logo.png' %}" alt="Uniquest Logo" class="login-logo">
             <p class="brand-subtitle">대학생 미션 중개 플랫폼</p>
         </section>
     </div>
@@ -61,7 +28,8 @@ <h2>진행 중인 미션</h2>
     </div>
 </section>
 
-<div style="padding: 0 20px 100px;"> <p class="guest-footer-text">로그인 후 이용 가능합니다</p>
+<div style="padding: 0 20px 100px;"> 
+    <p class="guest-footer-text">로그인 후 이용 가능합니다</p>
     <a href="{% url 'users:login' %}" class="guest-cta">로그인</a>
     <a href="{% url 'users:signup_view' %}" class="guest-cta">회원가입</a>
 </div>
@@ -72,5 +40,5 @@ <h2>진행 중인 미션</h2>
 {% endblock %}
 
 {% block extra_scripts %}
-    <script src="{% static 'users/js/homepage_guest.js' %}"></script>
-{% endblock %}
+    <script src="{% static 'users/js/homepage_guest.js' %} %"></script>
+{% endblock %}

backend-core/templates/users/homepage_guest.html

@@ -10,14 +10,13 @@
 
 {% block content %}
 <div class="signup-wrapper">
-
-
 <div class="signup-container">
     <div class="header">
         <button type="button" class="back-arrow" onclick="history.back()">←</button>
         <div class="header-text">
             <h2>로그인</h2>
             <p>Uniquest에 오신 것을 환영합니다</p>
+            <img src="{% static 'users/images/logo.png' %}" alt="Uniquest Logo" class="login-logo">
         </div>
     </div>
 
@@ -50,6 +49,7 @@ <h2>로그인</h2>
         </p>
     </div>
 </div>
+</div>
 {% endblock %}
 
 {%block extra_scripts %}