diff --git a/app/static/styles.css b/app/static/styles.css index 5fd6424..2a9e988 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -1,3 +1,4 @@ +/* ── Pretendard 폰트 ─────────────────────────────── */ @font-face { font-family: "Pretendard"; src: url("/static/fonts/Pretendard-Thin.ttf") format("truetype"); @@ -5,7 +6,6 @@ font-style: normal; font-display: swap; } - @font-face { font-family: "Pretendard"; src: url("/static/fonts/Pretendard-Regular.ttf") format("truetype"); @@ -13,7 +13,6 @@ font-style: normal; font-display: swap; } - @font-face { font-family: "Pretendard"; src: url("/static/fonts/Pretendard-Bold.ttf") format("truetype"); @@ -22,201 +21,605 @@ font-display: swap; } +/* ── 디자인 토큰 ─────────────────────────────────── */ :root { - color-scheme: light; - --bg: #f5f7f9; - --surface: #ffffff; - --text: #17202a; - --muted: #5d6975; - --line: #d9e0e7; - --accent: #146c5f; - --accent-strong: #0e554b; - --shadow: 0 18px 50px rgba(22, 31, 42, 0.12); + --navy: #0d1b2a; + --navy-mid: #1b2e45; + --navy-light: #253d56; + --blue: #1e56a0; + --blue-hover: #17437d; + --blue-tint: #e8f1fb; + --bg: #f0f4f8; + --surface: #ffffff; + --border: #dce4ed; + --text: #1a2433; + --muted: #627590; + --success: #127a46; + --danger: #b91c1c; + --header-h: 64px; } -* { - box-sizing: border-box; -} +/* ── 리셋 & 기본 ─────────────────────────────────── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { - margin: 0; - min-height: 100vh; - background: var(--bg); + font-family: "Pretendard", "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif; + font-size: 15px; color: var(--text); - font-family: - "Pretendard", - "Segoe UI", - "Apple SD Gothic Neo", - system-ui, - sans-serif; + background: var(--bg); + min-height: 100vh; + -webkit-font-smoothing: antialiased; } -a { - color: inherit; - text-decoration: none; -} +a { color: inherit; text-decoration: none; } -.auth-page { +/* ════════════════════════════════════════════════════ + 로그인 / 접근 거부 페이지 + ════════════════════════════════════════════════════ */ + +/* 전체 레이아웃: 좌측 브랜드 패널 + 우측 폼 */ +.auth-layout { display: grid; - place-items: center; - padding: 28px; + grid-template-columns: 1fr 1fr; + min-height: 100vh; } -.auth-shell { - width: min(100%, 460px); +/* ── 좌측 브랜드 패널 ── */ +.brand-panel { + background: var(--navy); + background-image: + radial-gradient(circle at 20% 80%, rgba(30,86,160,.35) 0%, transparent 55%), + radial-gradient(circle at 80% 20%, rgba(13,27,42,.8) 0%, transparent 50%); + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 48px 52px; + position: relative; + overflow: hidden; } -.auth-panel { - background: var(--surface); - border: 1px solid var(--line); +/* 점 격자 장식 */ +.brand-panel::before { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); + background-size: 28px 28px; + pointer-events: none; +} + +.brand-logo { + display: flex; + align-items: center; + gap: 10px; + position: relative; +} + +.brand-logo-mark { + width: 38px; + height: 38px; + background: var(--blue); border-radius: 8px; - box-shadow: var(--shadow); - padding: 36px; -} - -.eyebrow { - margin: 0 0 8px; - color: var(--accent); - font-size: 13px; - font-weight: 700; - letter-spacing: 0; - text-transform: uppercase; -} - -h1 { - margin: 0; - font-size: clamp(30px, 4vw, 44px); - line-height: 1.1; - letter-spacing: 0; -} - -.lead { - margin: 18px 0 28px; - color: var(--muted); - font-size: 16px; - line-height: 1.6; -} - -.note { - margin: 18px 0 0; - color: var(--muted); - font-size: 13px; -} - -.primary-button, -.ghost-button { - display: inline-flex; + display: flex; align-items: center; justify-content: center; - min-height: 44px; - border-radius: 6px; +} + +.brand-logo-mark svg { color: #fff; } + +.brand-name { + font-size: 20px; font-weight: 700; + color: #fff; + letter-spacing: -.3px; +} + +.brand-body { + position: relative; + padding-bottom: 16px; +} + +.brand-tag { + display: inline-block; + background: rgba(30,86,160,.4); + border: 1px solid rgba(30,86,160,.6); + color: #93c5fd; + font-size: 11px; + font-weight: 700; + letter-spacing: 1.2px; + text-transform: uppercase; + padding: 4px 10px; + border-radius: 4px; + margin-bottom: 24px; +} + +.brand-headline { + font-size: clamp(28px, 3.2vw, 42px); + font-weight: 700; + color: #fff; + line-height: 1.25; + letter-spacing: -.5px; + margin-bottom: 16px; +} + +.brand-desc { + font-size: 15px; + color: rgba(255,255,255,.55); + line-height: 1.7; + max-width: 380px; +} + +.brand-divider { + width: 48px; + height: 3px; + background: var(--blue); + border-radius: 2px; + margin-top: 28px; +} + +.brand-footer { + font-size: 12px; + color: rgba(255,255,255,.3); + position: relative; +} + +/* ── 우측 폼 패널 ── */ +.form-panel { + background: var(--surface); + display: flex; + align-items: center; + justify-content: center; + padding: 48px 40px; +} + +.form-box { + width: min(100%, 400px); +} + +.form-eyebrow { + font-size: 12px; + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + color: var(--blue); + margin-bottom: 10px; +} + +.form-title { + font-size: clamp(22px, 2.8vw, 30px); + font-weight: 700; + color: var(--navy); + letter-spacing: -.4px; + line-height: 1.2; + margin-bottom: 8px; +} + +.form-subtitle { + font-size: 14px; + color: var(--muted); + line-height: 1.6; + margin-bottom: 36px; +} + +/* 구분선 */ +.form-divider { + display: flex; + align-items: center; + gap: 14px; + margin-bottom: 28px; +} + +.form-divider::before, +.form-divider::after { + content: ""; + flex: 1; + height: 1px; + background: var(--border); +} + +.form-divider span { + font-size: 12px; + color: var(--muted); white-space: nowrap; } -.primary-button { +/* Google 로그인 버튼 */ +.btn-google { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; width: 100%; - background: var(--accent); + min-height: 48px; + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 8px; + font-size: 15px; + font-weight: 700; + color: var(--text); + cursor: pointer; + transition: border-color .15s, box-shadow .15s, background .15s; + margin-bottom: 24px; +} + +.btn-google:hover { + border-color: var(--blue); + background: var(--blue-tint); + box-shadow: 0 0 0 3px rgba(30,86,160,.1); +} + +/* 기본 버튼 (접근거부 재시도 등) */ +.btn-primary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 48px; + padding: 0 24px; + background: var(--blue); color: #fff; - padding: 0 18px; + border-radius: 8px; + font-size: 15px; + font-weight: 700; + transition: background .15s; + width: 100%; } -.primary-button:hover { - background: var(--accent-strong); -} +.btn-primary:hover { background: var(--blue-hover); } -.ghost-button { - border: 1px solid var(--line); - background: #fff; - padding: 0 14px; +.form-note { + display: flex; + align-items: flex-start; + gap: 8px; + background: #f8fafc; + border: 1px solid var(--border); + border-radius: 8px; + padding: 14px 16px; + font-size: 13px; color: var(--muted); + line-height: 1.5; } -.topbar { +.form-note svg { flex-shrink: 0; margin-top: 1px; } + +/* 접근 거부 전용 */ +.form-error-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: #fef2f2; + border: 1px solid #fecaca; + border-radius: 8px; + padding: 10px 14px; + font-size: 13px; + font-weight: 700; + color: var(--danger); + margin-bottom: 28px; +} + + +/* ════════════════════════════════════════════════════ + 메인(대시보드) 페이지 + ════════════════════════════════════════════════════ */ + +/* ── 헤더 ── */ +.header { + position: sticky; + top: 0; + z-index: 100; + height: var(--header-h); + background: var(--navy); display: flex; align-items: center; justify-content: space-between; - gap: 24px; - padding: 28px clamp(20px, 5vw, 56px); - background: var(--surface); - border-bottom: 1px solid var(--line); + padding: 0 clamp(20px, 4vw, 48px); + box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 16px rgba(0,0,0,.35); } -.account { +.header-brand { + display: flex; + align-items: center; + gap: 10px; +} + +.header-logo-mark { + width: 32px; + height: 32px; + background: var(--blue); + border-radius: 7px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.header-logo-mark svg { color: #fff; } + +.header-brand-text { + display: flex; + flex-direction: column; + line-height: 1.2; +} + +.header-company { + font-size: 15px; + font-weight: 700; + color: #fff; + letter-spacing: -.2px; +} + +.header-portal { + font-size: 11px; + color: rgba(255,255,255,.45); + font-weight: 400; +} + +.header-user { display: flex; align-items: center; gap: 12px; - min-width: 0; } -.account img { - width: 42px; - height: 42px; +.header-avatar { + width: 34px; + height: 34px; border-radius: 50%; + border: 2px solid rgba(255,255,255,.2); + object-fit: cover; } -.account strong, -.account span { - display: block; - max-width: 240px; +.header-avatar-placeholder { + width: 34px; + height: 34px; + border-radius: 50%; + background: var(--blue); + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 700; + color: #fff; + flex-shrink: 0; +} + +.header-user-info { + display: flex; + flex-direction: column; + line-height: 1.25; + text-align: right; +} + +.header-user-name { + font-size: 14px; + font-weight: 700; + color: #fff; +} + +.header-user-email { + font-size: 11px; + color: rgba(255,255,255,.45); + max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.account span { - color: var(--muted); +.btn-logout { + display: inline-flex; + align-items: center; + gap: 6px; + height: 34px; + padding: 0 14px; + background: rgba(255,255,255,.08); + border: 1px solid rgba(255,255,255,.12); + border-radius: 6px; font-size: 13px; + font-weight: 700; + color: rgba(255,255,255,.75); + transition: background .15s, color .15s; + white-space: nowrap; } -.menu-grid { +.btn-logout:hover { + background: rgba(255,255,255,.15); + color: #fff; +} + +/* ── 히어로 배너 ── */ +.hero { + background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%); + padding: 36px clamp(20px, 4vw, 48px); + border-bottom: 1px solid rgba(255,255,255,.06); + position: relative; + overflow: hidden; +} + +.hero::after { + content: ""; + position: absolute; + right: -60px; + top: -60px; + width: 280px; + height: 280px; + background: radial-gradient(circle, rgba(30,86,160,.2) 0%, transparent 70%); + pointer-events: none; +} + +.hero-greeting { + font-size: clamp(20px, 2.5vw, 26px); + font-weight: 700; + color: #fff; + letter-spacing: -.3px; + margin-bottom: 4px; +} + +.hero-sub { + font-size: 14px; + color: rgba(255,255,255,.5); +} + +.hero-date { + font-size: 13px; + color: rgba(255,255,255,.35); + margin-top: 14px; + font-weight: 400; +} + +/* ── 메뉴 섹션 ── */ +.content { + padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px); + max-width: 1200px; +} + +.section-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 24px; +} + +.section-title { + font-size: 16px; + font-weight: 700; + color: var(--navy); + letter-spacing: -.2px; +} + +.section-count { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 22px; + height: 22px; + padding: 0 6px; + background: var(--blue-tint); + color: var(--blue); + border-radius: 99px; + font-size: 12px; + font-weight: 700; +} + +/* ── 카드 그리드 ── */ +.card-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 18px; - padding: clamp(20px, 5vw, 56px); + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; } .menu-card { - display: flex; - min-height: 150px; - flex-direction: column; - justify-content: space-between; - border: 1px solid var(--line); - border-radius: 8px; background: var(--surface); - padding: 24px; - box-shadow: 0 10px 30px rgba(22, 31, 42, 0.07); + border: 1px solid var(--border); + border-radius: 12px; + padding: 28px 28px 24px; + display: flex; + flex-direction: column; + gap: 0; + transition: border-color .2s, box-shadow .2s, transform .2s; + position: relative; + overflow: hidden; +} + +/* 상단 컬러 액센트 라인 */ +.menu-card::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: var(--blue); + border-radius: 12px 12px 0 0; + opacity: 0; + transition: opacity .2s; } .menu-card:hover { - border-color: var(--accent); - transform: translateY(-1px); + border-color: #b8cfe8; + box-shadow: 0 8px 32px rgba(13,27,42,.1); + transform: translateY(-2px); } -.menu-card span { - font-size: 22px; - font-weight: 800; - line-height: 1.3; +.menu-card:hover::before { opacity: 1; } + +/* 아이콘 배지 */ +.card-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: var(--blue-tint); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + color: var(--blue); + flex-shrink: 0; } -.menu-card small { +/* 카드 내용 영역이 flex로 늘어나게 */ +.card-body { + flex: 1; + display: flex; + flex-direction: column; +} + +.card-title { + font-size: 17px; + font-weight: 700; + color: var(--navy); + letter-spacing: -.3px; + line-height: 1.35; + margin-bottom: 8px; +} + +.card-desc { + font-size: 13px; color: var(--muted); - font-size: 14px; + line-height: 1.6; + flex: 1; } -@media (max-width: 720px) { - .topbar { - align-items: flex-start; - flex-direction: column; - } - - .account { - width: 100%; - align-items: flex-start; - flex-wrap: wrap; - } - - .ghost-button { - margin-left: auto; - } +.card-footer { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 22px; + padding-top: 18px; + border-top: 1px solid var(--border); +} + +.card-link { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 13px; + font-weight: 700; + color: var(--blue); + transition: gap .15s; +} + +.menu-card:hover .card-link { gap: 8px; } + + +/* ════════════════════════════════════════════════════ + 반응형 + ════════════════════════════════════════════════════ */ +@media (max-width: 768px) { + .auth-layout { + grid-template-columns: 1fr; + } + + .brand-panel { display: none; } + + .form-panel { + padding: 36px 24px; + align-items: flex-start; + padding-top: 60px; + } + + .header-user-info { display: none; } + + .hero-date { display: none; } +} + +@media (max-width: 480px) { + .header-portal { display: none; } + .btn-logout span { display: none; } } diff --git a/app/templates/denied.html b/app/templates/denied.html index 2e73255..ee53a66 100644 --- a/app/templates/denied.html +++ b/app/templates/denied.html @@ -3,17 +3,80 @@ - 접속 불가 + 접속 불가 — DBX 업무 포털 - -
-
-

Access denied

-

접속할 수 없습니다

-

{{ reason }}

- 다른 Google 계정으로 로그인 -
-
+ +
+ + + + + +
+
+
+ + + + + + 접속 불가 +
+ +

접속할 수 없습니다

+

+ {{ reason }} +

+ + + + + + + + 다른 Google 계정으로 로그인 + + +
+ + + + + + 접속 권한이 필요하시면 시스템 관리자에게 문의하세요. + +
+
+
+ +
diff --git a/app/templates/login.html b/app/templates/login.html index 26be61f..e5d6abd 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -3,18 +3,76 @@ - DBX 메인 페이지 로그인 + 로그인 — DBX 업무 포털 - -
-
-

DBX Workspace

-

메인 페이지

-

회사 Google Workspace 계정으로 로그인하세요.

- Google 계정으로 로그인 -

허용된 계정만 접속할 수 있습니다.

-
-
+ +
+ + + + + +
+
+

DBX Corp

+

업무 포털 로그인

+

+ 회사 Google Workspace 계정으로 로그인하세요.
+ 허용된 계정만 접속할 수 있습니다. +

+ + + + + + + + + + Google 계정으로 로그인 + + +
+ + + + + + + dbxcorp.co.kr 도메인 계정이며 + 접속 허용 목록에 등록된 임직원만 이용할 수 있습니다. + +
+
+
+ +
diff --git a/app/templates/main.html b/app/templates/main.html index e21e02d..99fa4bd 100644 --- a/app/templates/main.html +++ b/app/templates/main.html @@ -3,34 +3,137 @@ - DBX 메인 페이지 + 업무 포털 — DBX Corp -
-
-

DBX Workspace

-

업무 메뉴

-
-
- {% if user.picture %} - - {% endif %} -
- {{ user.name }} - {{ user.email }} + + +
+
+
+ + + + + +
- 로그아웃 +
+ DBX Corp + 업무 포털 +
+
+ +
+ + {% if user.picture %} + {{ user.name }} + {% else %} +
+ {{ user.name[0] | upper }} +
+ {% endif %} + + + + + + + 로그아웃 +
-
- {% for item in menu_items %} - - {{ item.title }} - {{ item.description }} - - {% endfor %} + +
+

안녕하세요, {{ user.name }}님 👋

+

오늘도 좋은 하루 되세요.

+

+
+ + +
+
+

업무 바로가기

+ {{ menu_items | length }} +
+ +
+ {% for item in menu_items %} + +
+ {% if loop.index == 1 %} + + + + + + + + {% elif loop.index == 2 %} + + + + + + + + + + {% elif loop.index == 3 %} + + + + + + + + {% else %} + + + + + + + {% endif %} +
+ +
+

{{ item.title }}

+

{{ item.description }}

+
+ +
+ + 바로가기 + + + + + +
+ + {% endfor %} +
+ + diff --git a/run-local.bat b/run-local.bat new file mode 100644 index 0000000..3693bb6 --- /dev/null +++ b/run-local.bat @@ -0,0 +1,63 @@ +@echo off +cd /d "%~dp0" + +set PROJECT=dbx-main +set COMPOSE=docker compose -p %PROJECT% -f docker-compose.local.yml + +if "%1"=="stop" goto STOP +if "%1"=="logs" goto LOGS +if "%1"=="ps" goto PS +if "%1"=="restart" goto RESTART + +:START +if not exist ".env.local" ( + echo. + echo [ERROR] .env.local not found. + echo Copy .env.local.example and fill in the values: + echo. + echo copy .env.local.example .env.local + echo. + pause + exit /b 1 +) +echo. +echo Starting DBX Main Page (local)... +echo. +%COMPOSE% up --build -d +if %errorlevel%==0 ( + echo. + echo [OK] Running at http://localhost:8080 + echo. + echo Logs : run-local.bat logs + echo Stop : run-local.bat stop + echo. +) +pause +exit /b + +:STOP +echo. +echo Stopping container... +%COMPOSE% down +echo. +pause +exit /b + +:LOGS +%COMPOSE% logs -f +exit /b + +:PS +echo. +%COMPOSE% ps +echo. +pause +exit /b + +:RESTART +echo. +echo Restarting... +%COMPOSE% restart +echo. +pause +exit /b \ No newline at end of file diff --git a/run-local.ps1 b/run-local.ps1 new file mode 100644 index 0000000..7b6acec --- /dev/null +++ b/run-local.ps1 @@ -0,0 +1,52 @@ +# DBX 메인 페이지 — 로컬 실행 스크립트 +# 사용법: .\run-local.ps1 [명령어] +# +# .\run-local.ps1 → 시작 (코드 변경 시 자동 재빌드) +# .\run-local.ps1 stop → 중지 +# .\run-local.ps1 logs → 로그 보기 +# .\run-local.ps1 ps → 상태 확인 +# .\run-local.ps1 restart → 재시작 + +$PROJECT = "dbx-main" +$COMPOSE = "docker compose -p $PROJECT -f docker-compose.local.yml" + +switch ($args[0]) { + "stop" { + Write-Host "컨테이너 중지 중..." -ForegroundColor Yellow + Invoke-Expression "$COMPOSE down" + } + "logs" { + Invoke-Expression "$COMPOSE logs -f" + } + "ps" { + Invoke-Expression "$COMPOSE ps" + } + "restart" { + Write-Host "재시작 중..." -ForegroundColor Yellow + Invoke-Expression "$COMPOSE restart" + } + default { + # .env.local 없으면 안내 후 종료 + if (-not (Test-Path ".env.local")) { + Write-Host "" + Write-Host "❌ .env.local 파일이 없습니다." -ForegroundColor Red + Write-Host " .env.local.example 을 복사하여 값을 채워주세요:" -ForegroundColor Yellow + Write-Host " copy .env.local.example .env.local" -ForegroundColor Cyan + Write-Host "" + exit 1 + } + + Write-Host "" + Write-Host "🚀 DBX 메인 페이지 로컬 시작..." -ForegroundColor Cyan + Invoke-Expression "$COMPOSE up --build -d" + + if ($LASTEXITCODE -eq 0) { + Write-Host "" + Write-Host "✅ 실행 중 → http://localhost:8080" -ForegroundColor Green + Write-Host "" + Write-Host " 로그 보기 : .\run-local.ps1 logs" -ForegroundColor Gray + Write-Host " 중지 : .\run-local.ps1 stop" -ForegroundColor Gray + Write-Host "" + } + } +}