로그인 성공 페이지 UI/UX 수정

2026-04-10 14:06:23 +09:00
parent e6e501700a
commit c1ead98f80
2 changed files with 174 additions and 245 deletions
--- a/public/styles.css
+++ b/public/styles.css
@@ -218,4 +218,136 @@ input {
        padding: 28px 22px;
        border-radius: 24px;
    }
-}
+    }
+
+    /* Dashboard Specific Styles */
+    .dashboard-panel {
+        width: min(100%, 1000px); /* 대시보드 패널 너비 확장 (800px -> 1000px) */
+        padding: 64px; /* 패널 내부 여유 공간 확대 */
+    }
+
+    .dashboard-content {
+    display: grid;
+    gap: 24px;
+    margin-top: 32px;
+    }
+
+    .welcome-msg {
+    margin-bottom: 32px;
+    text-align: center;
+    }
+
+    .welcome-msg h2 {
+    font-size: 2.4rem; /* 환영 메시지 크기 확대 */
+    color: #0f3d2e;
+    margin: 0 0 12px 0;
+    }
+
+    .welcome-msg p {
+    color: #4a6659;
+    font-size: 1.2rem;
+    margin: 0;
+    }
+
+    .info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 카드 최소 너비 확대 */
+    gap: 28px;
+    }
+
+    .info-card {
+    background: rgba(255, 255, 255, 0.75); /* 투명도 살짝 조정 */
+    border-radius: 24px;
+    padding: 32px; /* 카드 내부 여백 확대 */
+    border: 1px solid rgba(15, 61, 46, 0.12);
+    box-shadow: 0 10px 30px rgba(15, 61, 46, 0.05); /* 카드에 미세한 그림자 추가 */
+    }
+
+    .card-title {
+    margin: 0 0 20px 0;
+    font-size: 1.4rem; /* 카드 제목 확대 */
+    color: #0f3d2e;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-bottom: 1px solid rgba(15, 61, 46, 0.1);
+    padding-bottom: 12px;
+    }
+
+    .info-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    }
+
+    .info-item {
+    display: flex;
+    flex-direction: column;
+    padding: 14px 0; /* 아이템 간격 확대 */
+    border-bottom: 1px dashed rgba(15, 61, 46, 0.1);
+    }
+
+    .info-item:last-child {
+    border-bottom: none;
+    }
+
+    .info-label {
+    font-size: 0.9rem;
+    color: #5a7369;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    }
+
+    .info-value {
+    font-size: 1.15rem; /* 값 텍스트 크기 확대 */
+    color: #0a291f;
+    font-weight: 600;
+    }
+
+    .badge {
+    display: inline-block;
+    padding: 6px 16px;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    font-weight: 650;
+    background-color: #0f3d2e;
+    color: #f8fbff;
+    border: 2px solid #185c45;
+    box-shadow: 0 4px 12px rgba(15, 61, 46, 0.15);
+    letter-spacing: 0.5px;
+    }
+
+    .footer-actions {
+    margin-top: 48px;
+    display: flex;
+    justify-content: center;
+    }
+
+    .secondary-button {
+    background: linear-gradient(180deg, #185c45 0%, #0f3d2e 100%);
+    border: none;
+    color: #f8fbff;
+    padding: 14px 48px; /* 버튼 크기 유지 및 소폭 조정 */
+    border-radius: 20px;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: none; /* 초기 그림자 없음 (로그인 입력 전과 동일) */
+    opacity: 0.54; /* 초기 투명도 (로그인 입력 전과 동일) */
+    transition: all 160ms ease;
+    }
+
+    .secondary-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 20px 40px rgba(15, 61, 46, 0.28); /* 마우스 오버 시 그림자 생성 */
+    opacity: 1; /* 마우스 오버 시 선명하게 */
+    }
+
+    /* Dashboard specific background override */
+    .dashboard-shell {
+        background: 
+            linear-gradient(rgba(15, 61, 46, 0.5), rgba(15, 61, 46, 0.7)),
+            url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80') !important;
+        background-size: cover !important;
+        background-position: center !important;
+    }