diff --git a/src/components/ErrorBoundary.module.css b/src/components/ErrorBoundary.module.css index 39bf7a2..80130ff 100644 --- a/src/components/ErrorBoundary.module.css +++ b/src/components/ErrorBoundary.module.css @@ -12,7 +12,8 @@ padding: var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); text-align: center; } @@ -34,8 +35,8 @@ padding: 10px 20px; background: var(--brand-primary); border: none; - border-radius: var(--fowoco-radius-6); - color: #fff; + border-radius: var(--fowoco-radius-8); + color: var(--fowoco-white); font-size: 13px; font-weight: 500; cursor: pointer; diff --git a/src/components/layout/AppLayout.module.css b/src/components/layout/AppLayout.module.css index 5d1a894..4f28057 100644 --- a/src/components/layout/AppLayout.module.css +++ b/src/components/layout/AppLayout.module.css @@ -1,180 +1,139 @@ .shell { display: flex; + flex-direction: column; height: 100svh; overflow: hidden; font-family: var(--font-sans); + background: var(--surface-page); } -@media (max-width: 768px) { - .shell { - flex-direction: column; - height: auto; - min-height: 100svh; - overflow: visible; - } -} - -.sidebar { - flex: 0 0 208px; +.topBar { display: flex; - flex-direction: column; - padding: 28px 20px 22px; - overflow-y: auto; - background: var(--brand-dark); - color: var(--fowoco-white); + align-items: center; + gap: 24px; + flex-shrink: 0; + min-height: 64px; + padding: 0 32px; + background: var(--surface-default); + border-bottom: 1px solid var(--border-default); + box-shadow: var(--shadow-sm); + position: relative; + z-index: 1; } -@media (max-width: 768px) { - .sidebar { - flex: 0 0 auto; - padding: 16px; - overflow-y: visible; - } - - .kicker, - .help { - display: none; - } - - .nav { - flex-direction: row; - flex-wrap: wrap; - gap: 8px; - } +.topBarBrandGroup { + display: flex; + align-items: center; + gap: 28px; + min-width: 0; } .brand { - height: 32px; - margin: 0 0 0 4px; - font-size: 20px; - font-weight: 700; - line-height: 28px; -} - -.kicker { - height: 19px; - margin: 20px 0 19px 4px; - font-size: 11px; - font-weight: 500; - line-height: 19px; - color: var(--fowoco-teal-100); + flex-shrink: 0; + font-size: 18px; + font-weight: 800; + letter-spacing: -0.02em; + color: var(--text-primary); } .nav { display: flex; - flex-direction: column; - gap: 8px; + align-items: center; + gap: 4px; + overflow-x: auto; + scrollbar-width: none; +} + +.nav::-webkit-scrollbar { + display: none; } .navLink { position: relative; display: flex; align-items: center; - gap: 12px; - height: 44px; - padding: 0 16px; - border-radius: var(--fowoco-radius-6); - font-size: 14px; - color: var(--fowoco-teal-100); + gap: 8px; + flex-shrink: 0; + height: 36px; + padding: 0 14px; + border-radius: var(--fowoco-radius-999); + font-size: 13px; + font-weight: 500; + color: var(--text-secondary); text-decoration: none; + white-space: nowrap; transition: background-color var(--fowoco-motion-fast) var(--fowoco-easing-standard), color var(--fowoco-motion-fast) var(--fowoco-easing-standard); } .navIcon { - width: 18px; - height: 18px; - flex: 0 0 18px; + width: 16px; + height: 16px; + flex: 0 0 16px; } .navLink:hover { - background: rgba(255, 255, 255, 0.06); - color: var(--fowoco-white); + background: var(--surface-subtle); + color: var(--text-primary); } .navLinkActive { - background: rgba(255, 255, 255, 0.08); + background: var(--brand-primary); color: var(--fowoco-white); - font-weight: 500; + font-weight: 600; } -.navLinkActive::before { - position: absolute; - top: 10px; - bottom: 10px; - left: 0; - width: 3px; - border-radius: 2px; - background: var(--brand-primary); - content: ''; +.navLinkActive .navIcon { + filter: brightness(0) invert(1); } -.sidebarFooter { - margin-top: auto; - display: flex; - flex-direction: column; - gap: 2px; +.navLinkActive:hover { + background: var(--brand-primary-hover); + color: var(--fowoco-white); } -.help { - padding: 10px 16px; - background: none; - border: none; - text-align: left; +.topBarBack { + flex-shrink: 0; font-size: 13px; - color: var(--fowoco-teal-100); - cursor: pointer; -} - -.main { - flex: 1; - display: flex; - flex-direction: column; - min-width: 0; - min-height: 0; - background: var(--surface-page); + color: var(--text-secondary); + text-decoration: none; } -@media (max-width: 768px) { - .main { - min-height: auto; - } +.topBarBack:hover { + color: var(--text-primary); } -.topBar { +.topBarActions { display: flex; align-items: center; - justify-content: space-between; gap: 12px; + margin-left: auto; flex-shrink: 0; - min-height: 64px; - padding: 12px 32px; - background: var(--surface-default); - border-bottom: 1px solid var(--border-default); } -.topBarBack { +.help { + padding: 0 12px; + height: 36px; + background: none; + border: none; + border-radius: var(--fowoco-radius-999); + text-align: left; font-size: 13px; color: var(--text-secondary); - text-decoration: none; + cursor: pointer; + transition: background-color var(--fowoco-motion-fast) var(--fowoco-easing-standard); } -.topBarBack:hover { +.help:hover { + background: var(--surface-subtle); color: var(--text-primary); } -.topBarActions { - display: flex; - align-items: center; - gap: 16px; - margin-left: auto; -} - .content { flex: 1; min-height: 0; - padding: 32px 40px; + padding: 36px 48px; overflow-y: auto; } @@ -194,10 +153,27 @@ } } -@media (max-width: 768px) { +@media (max-width: 900px) { .topBar { + flex-wrap: wrap; + height: auto; + min-height: 0; padding: 12px 16px; + gap: 12px; + } + + .topBarBrandGroup { + width: 100%; flex-wrap: wrap; + gap: 12px; + } + + .nav { + width: 100%; + } + + .help { + display: none; } .content { diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx index 9e9dabc..ee0ad0d 100644 --- a/src/components/layout/AppLayout.tsx +++ b/src/components/layout/AppLayout.tsx @@ -42,52 +42,46 @@ export function AppLayout() { return (
- - -
-
- {isTaskDetail && ( - - ← 업무함 - - )} -
- -
-
+ -
- -
-
+
+ +
- - - + + + diff --git a/src/components/layout/nav-icons/settings.svg b/src/components/layout/nav-icons/settings.svg index 55844a8..1be2f15 100644 --- a/src/components/layout/nav-icons/settings.svg +++ b/src/components/layout/nav-icons/settings.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/components/layout/nav-icons/today.svg b/src/components/layout/nav-icons/today.svg index b538fee..472d0b9 100644 --- a/src/components/layout/nav-icons/today.svg +++ b/src/components/layout/nav-icons/today.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/layout/nav-icons/work.svg b/src/components/layout/nav-icons/work.svg index b0ded0b..a693010 100644 --- a/src/components/layout/nav-icons/work.svg +++ b/src/components/layout/nav-icons/work.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/components/layout/nav-icons/workers.svg b/src/components/layout/nav-icons/workers.svg index 7901084..f51a080 100644 --- a/src/components/layout/nav-icons/workers.svg +++ b/src/components/layout/nav-icons/workers.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/components/onboarding/OnboardingTour.module.css b/src/components/onboarding/OnboardingTour.module.css index 4e8ca88..8a9efc7 100644 --- a/src/components/onboarding/OnboardingTour.module.css +++ b/src/components/onboarding/OnboardingTour.module.css @@ -57,9 +57,9 @@ padding: 8px 16px; background: var(--brand-primary); border: none; - border-radius: var(--fowoco-radius-6); + border-radius: var(--fowoco-radius-8); font-size: 13px; font-weight: 500; - color: #fff; + color: var(--fowoco-white); cursor: pointer; } diff --git a/src/components/ui/Button/Button.module.css b/src/components/ui/Button/Button.module.css index 21f1502..d29a8ea 100644 --- a/src/components/ui/Button/Button.module.css +++ b/src/components/ui/Button/Button.module.css @@ -4,7 +4,7 @@ justify-content: center; height: 40px; padding: var(--fowoco-spacing-8) var(--fowoco-spacing-16); - border-radius: var(--fowoco-radius-6); + border-radius: var(--fowoco-radius-8); font-family: var(--font-sans); font-size: 14px; font-weight: 500; @@ -13,6 +13,7 @@ transition: background-color var(--fowoco-motion-fast) var(--fowoco-easing-standard), border-color var(--fowoco-motion-fast) var(--fowoco-easing-standard), + box-shadow var(--fowoco-motion-fast) var(--fowoco-easing-standard), transform var(--fowoco-motion-fast) var(--fowoco-easing-standard); } @@ -20,10 +21,11 @@ background: var(--brand-primary); color: var(--fowoco-white); border: none; + box-shadow: var(--shadow-sm); } .primary:hover:not(:disabled) { - background: var(--brand-dark); + background: var(--brand-primary-hover); } .secondary { @@ -47,8 +49,8 @@ } .button:focus-visible { - outline: 2px solid var(--brand-primary); - outline-offset: 2px; + outline: none; + box-shadow: var(--shadow-focus); } .loading { diff --git a/src/components/ui/Dropdown/Dropdown.module.css b/src/components/ui/Dropdown/Dropdown.module.css index 36a11f8..4dcd10b 100644 --- a/src/components/ui/Dropdown/Dropdown.module.css +++ b/src/components/ui/Dropdown/Dropdown.module.css @@ -14,12 +14,15 @@ padding: 0 16px 0 15px; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-6); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); font-family: var(--font-sans); font-size: 13px; color: var(--text-primary); cursor: pointer; - transition: border-color var(--fowoco-motion-fast) var(--fowoco-easing-standard); + transition: + border-color var(--fowoco-motion-fast) var(--fowoco-easing-standard), + box-shadow var(--fowoco-motion-fast) var(--fowoco-easing-standard); } .trigger:hover { @@ -27,8 +30,8 @@ } .trigger:focus-visible { - outline: 2px solid var(--brand-primary); - outline-offset: 2px; + outline: none; + box-shadow: var(--shadow-focus); } .triggerOpen { @@ -65,8 +68,8 @@ list-style: none; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-6); - box-shadow: 0 4px 12px rgba(23, 43, 45, 0.12); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-md); } .option { diff --git a/src/components/ui/ListRow/ListRow.module.css b/src/components/ui/ListRow/ListRow.module.css index a8e3c14..716be97 100644 --- a/src/components/ui/ListRow/ListRow.module.css +++ b/src/components/ui/ListRow/ListRow.module.css @@ -5,7 +5,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } @media (max-width: 720px) { diff --git a/src/components/ui/Modal/Modal.module.css b/src/components/ui/Modal/Modal.module.css index 0e74694..d949677 100644 --- a/src/components/ui/Modal/Modal.module.css +++ b/src/components/ui/Modal/Modal.module.css @@ -15,8 +15,8 @@ max-height: calc(100svh - 48px); overflow-y: auto; background: var(--surface-default); - border-radius: var(--fowoco-radius-8); - box-shadow: 0 12px 32px rgba(7, 132, 127, 0.2); + border-radius: var(--fowoco-radius-14); + box-shadow: var(--shadow-lg); } .wide { diff --git a/src/components/ui/ToastViewport/ToastViewport.module.css b/src/components/ui/ToastViewport/ToastViewport.module.css index 07cb1a7..ce3a9ee 100644 --- a/src/components/ui/ToastViewport/ToastViewport.module.css +++ b/src/components/ui/ToastViewport/ToastViewport.module.css @@ -16,10 +16,10 @@ gap: 12px; max-width: 320px; padding: 12px 16px; - background: var(--brand-dark); - color: var(--fowoco-white); - border-radius: var(--fowoco-radius-8); - box-shadow: 0 8px 24px rgba(7, 132, 127, 0.24); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; animation: rise var(--fowoco-motion-base) var(--fowoco-easing-decelerate); @@ -40,7 +40,7 @@ flex-shrink: 0; background: none; border: none; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); cursor: pointer; padding: 0; font-size: 12px; diff --git a/src/components/ui/WorkItemRow/WorkItemRow.module.css b/src/components/ui/WorkItemRow/WorkItemRow.module.css index b030e76..0ee3f64 100644 --- a/src/components/ui/WorkItemRow/WorkItemRow.module.css +++ b/src/components/ui/WorkItemRow/WorkItemRow.module.css @@ -7,7 +7,8 @@ padding: 8px var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; transition: @@ -17,12 +18,12 @@ .row:hover { border-color: var(--brand-primary); - box-shadow: 0 1px 2px rgba(7, 132, 127, 0.12); + box-shadow: var(--shadow-md); } .row:focus-visible { - outline: 2px solid var(--brand-primary); - outline-offset: 2px; + outline: none; + box-shadow: var(--shadow-focus); } @media (max-width: 720px) { @@ -48,7 +49,7 @@ } .railInfo { - background: #3976d3; + background: var(--status-info); } .railNeutral { diff --git a/src/pages/CaseDetailPage/CaseDetailPage.module.css b/src/pages/CaseDetailPage/CaseDetailPage.module.css index 2ae76e7..645bc42 100644 --- a/src/pages/CaseDetailPage/CaseDetailPage.module.css +++ b/src/pages/CaseDetailPage/CaseDetailPage.module.css @@ -27,8 +27,8 @@ list-style: none; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); - box-shadow: 0 4px 12px rgba(23, 43, 45, 0.12); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-md); z-index: 10; } @@ -102,7 +102,8 @@ padding: var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .contextLabel { @@ -146,7 +147,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .gatesCardBlocked { @@ -326,7 +328,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .stateWrap { @@ -391,7 +394,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .documentName { @@ -419,7 +423,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .commTime { @@ -453,7 +458,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .timelineRow { @@ -497,7 +503,8 @@ padding: var(--fowoco-spacing-12) var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .nextStep { diff --git a/src/pages/CaseDetailPage/overlays/overlays.module.css b/src/pages/CaseDetailPage/overlays/overlays.module.css index 43d5751..e24ff7e 100644 --- a/src/pages/CaseDetailPage/overlays/overlays.module.css +++ b/src/pages/CaseDetailPage/overlays/overlays.module.css @@ -333,7 +333,8 @@ padding: 20px; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); font-size: 13px; font-family: inherit; color: var(--text-primary); diff --git a/src/pages/CreateWorkPage/importWizard/importWizard.module.css b/src/pages/CreateWorkPage/importWizard/importWizard.module.css index 90529b4..ab27485 100644 --- a/src/pages/CreateWorkPage/importWizard/importWizard.module.css +++ b/src/pages/CreateWorkPage/importWizard/importWizard.module.css @@ -41,8 +41,8 @@ padding: 10px 20px; background: var(--brand-primary); border: none; - border-radius: var(--fowoco-radius-6); - color: #fff; + border-radius: var(--fowoco-radius-8); + color: var(--fowoco-white); font-size: 13px; font-weight: 500; cursor: pointer; diff --git a/src/pages/DashboardPage/DashboardPage.module.css b/src/pages/DashboardPage/DashboardPage.module.css index 2e0f6c7..381058e 100644 --- a/src/pages/DashboardPage/DashboardPage.module.css +++ b/src/pages/DashboardPage/DashboardPage.module.css @@ -28,9 +28,10 @@ margin-top: 19px; padding: 13px 13px 12px; overflow: hidden; - background: #f4faf9; - border: 1px solid #95cecb; - border-radius: var(--fowoco-radius-8); + background: var(--fowoco-teal-50); + border: 1px solid var(--fowoco-teal-100); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .agentRequestTitle { @@ -63,13 +64,13 @@ margin: 6px 18px 0; padding: 3px 13px; overflow: hidden; - background: rgba(207, 227, 227, 0.7); - border: 0; - border-radius: 21px; + background: var(--surface-default); + border: 1px solid var(--fowoco-teal-100); + border-radius: var(--fowoco-radius-999); } .commandForm:focus-within { - box-shadow: 0 0 0 2px rgba(7, 132, 127, 0.18); + box-shadow: var(--shadow-focus); } .commandInput { @@ -83,12 +84,12 @@ font-size: 13px; font-weight: 500; line-height: 22px; - color: #465b5d; + color: var(--text-secondary); text-align: left; } .commandInput::placeholder { - color: #465b5d; + color: var(--text-secondary); opacity: 1; } @@ -139,19 +140,23 @@ } .promptChip[aria-pressed='true'] { - background: #d7ebea; + background: var(--fowoco-teal-100); color: var(--brand-primary); } .dashboardGrid { display: grid; grid-template-columns: minmax(0, 767px) minmax(0, 359px); + grid-template-areas: + 'metrics metrics' + 'main aside'; align-items: stretch; - gap: 26px; + gap: 20px 26px; margin-top: 16px; } .primaryColumn { + grid-area: main; display: flex; flex-direction: column; gap: 16px; @@ -159,9 +164,10 @@ } .metricStrip { + grid-area: metrics; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 30px; + gap: 16px; height: 72px; } @@ -174,10 +180,19 @@ padding: 16px; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); font-family: inherit; text-align: left; cursor: pointer; + transition: + box-shadow var(--fowoco-motion-fast) var(--fowoco-easing-standard), + border-color var(--fowoco-motion-fast) var(--fowoco-easing-standard); +} + +.metricCard:hover { + border-color: var(--border-strong); + box-shadow: var(--shadow-md); } .metricText { @@ -240,9 +255,10 @@ height: 183px; padding: 15px 24px; background: var(--surface-default); - border: 1px solid var(--status-warning); - border-radius: var(--fowoco-radius-8); - box-shadow: 0 2px 8px rgba(23, 43, 46, 0.08); + border: 1px solid var(--border-default); + border-left: 3px solid var(--status-warning); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .priorityHeader { @@ -264,7 +280,7 @@ .priorityHeader span { font-size: 11px; line-height: 18px; - color: #bbc3c4; + color: var(--text-secondary); white-space: nowrap; } @@ -424,6 +440,7 @@ } .agentPrepared { + grid-area: aside; display: flex; height: 100%; min-width: 0; @@ -433,8 +450,9 @@ padding: 16px; overflow: hidden; background: var(--fowoco-teal-50); - border: 1px solid rgba(7, 132, 127, 0.7); - border-radius: var(--fowoco-radius-8); + border: 1px solid var(--fowoco-teal-100); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .agentPreparedTitle { @@ -546,7 +564,7 @@ } .nextMark { - color: #3976d3; + color: var(--status-info); } .reviewSection { @@ -590,6 +608,10 @@ @media (max-width: 1080px) { .dashboardGrid { grid-template-columns: 1fr; + grid-template-areas: + 'metrics' + 'main' + 'aside'; } .agentPrepared { diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx index 03d2fe4..8e3b234 100644 --- a/src/pages/DashboardPage/DashboardPage.tsx +++ b/src/pages/DashboardPage/DashboardPage.tsx @@ -127,26 +127,26 @@ export function DashboardPage() { {status === 'success' && (
-
-
- {metrics.map((metric) => ( - - ))} -
+
+ {metrics.map((metric) => ( + + ))} +
+

먼저 검토할 승인 업무

diff --git a/src/pages/DocumentDetailPage/DocumentDetailPage.module.css b/src/pages/DocumentDetailPage/DocumentDetailPage.module.css index ebe8c97..6b1c6d2 100644 --- a/src/pages/DocumentDetailPage/DocumentDetailPage.module.css +++ b/src/pages/DocumentDetailPage/DocumentDetailPage.module.css @@ -56,7 +56,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .cardTitle { @@ -116,5 +117,6 @@ padding: var(--fowoco-spacing-12) var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } diff --git a/src/pages/DocumentListPage/DocumentListPage.module.css b/src/pages/DocumentListPage/DocumentListPage.module.css index d26dc38..9d6eb86 100644 --- a/src/pages/DocumentListPage/DocumentListPage.module.css +++ b/src/pages/DocumentListPage/DocumentListPage.module.css @@ -31,7 +31,8 @@ padding: 16px 19px; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .metricLabel { @@ -58,8 +59,8 @@ padding: 8px 16px; background: var(--brand-primary); border: none; - border-radius: var(--fowoco-radius-6); - color: #fff; + border-radius: var(--fowoco-radius-8); + color: var(--fowoco-white); font-size: 13px; font-weight: 500; cursor: pointer; diff --git a/src/pages/DocumentListPage/FileUploadModal.module.css b/src/pages/DocumentListPage/FileUploadModal.module.css index a843e02..20a4744 100644 --- a/src/pages/DocumentListPage/FileUploadModal.module.css +++ b/src/pages/DocumentListPage/FileUploadModal.module.css @@ -27,8 +27,8 @@ padding: 8px 16px; background: var(--brand-primary); border: none; - border-radius: var(--fowoco-radius-6); - color: #fff; + border-radius: var(--fowoco-radius-8); + color: var(--fowoco-white); font-size: 13px; font-weight: 500; cursor: pointer; diff --git a/src/pages/EmailSentPage/EmailSentPage.module.css b/src/pages/EmailSentPage/EmailSentPage.module.css index 5017e6d..9c13d67 100644 --- a/src/pages/EmailSentPage/EmailSentPage.module.css +++ b/src/pages/EmailSentPage/EmailSentPage.module.css @@ -14,8 +14,8 @@ .promo { flex: 0 0 460px; padding: 52px 56px; - background: var(--brand-dark); - color: var(--fowoco-white); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); display: flex; flex-direction: column; } @@ -37,7 +37,7 @@ margin: 208px 0 0; font-size: 12px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .headline { @@ -51,14 +51,14 @@ margin: 24px 0 0; font-size: 14px; line-height: 24px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .disclaimer { margin-top: auto; padding-top: 24px; font-size: 12px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .formSide { diff --git a/src/pages/ForgotPasswordPage/ForgotPasswordPage.module.css b/src/pages/ForgotPasswordPage/ForgotPasswordPage.module.css index fa5505b..f52ed0b 100644 --- a/src/pages/ForgotPasswordPage/ForgotPasswordPage.module.css +++ b/src/pages/ForgotPasswordPage/ForgotPasswordPage.module.css @@ -14,8 +14,8 @@ .promo { flex: 0 0 460px; padding: 52px 56px; - background: var(--brand-dark); - color: var(--fowoco-white); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); display: flex; flex-direction: column; } @@ -37,7 +37,7 @@ margin: 208px 0 0; font-size: 12px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .headline { @@ -51,14 +51,14 @@ margin: 24px 0 0; font-size: 14px; line-height: 24px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .disclaimer { margin-top: auto; padding-top: 24px; font-size: 12px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .formSide { diff --git a/src/pages/IntroPage/IntroPage.module.css b/src/pages/IntroPage/IntroPage.module.css index 09148cd..183be80 100644 --- a/src/pages/IntroPage/IntroPage.module.css +++ b/src/pages/IntroPage/IntroPage.module.css @@ -202,7 +202,7 @@ margin: 0; font-size: 12px; font-weight: 600; - color: var(--brand-dark); + color: var(--text-primary); opacity: 0.7; } @@ -218,7 +218,7 @@ padding: 12px 18px; font-size: 14px; font-weight: 700; - color: var(--brand-dark); + color: var(--text-primary); border-radius: var(--fowoco-radius-999); transition: background var(--fowoco-motion-fast) var(--fowoco-easing-standard); } @@ -236,7 +236,7 @@ color: var(--fowoco-white); background: var(--brand-primary); border-radius: var(--fowoco-radius-999); - box-shadow: 0 6px 0 var(--brand-dark); + box-shadow: 0 6px 0 var(--brand-primary-hover); transition: transform var(--fowoco-motion-fast) var(--fowoco-easing-standard); } @@ -269,7 +269,7 @@ padding: 8px 16px; font-size: 13px; font-weight: 800; - color: var(--brand-dark); + color: var(--text-primary); background: var(--fowoco-white); border-radius: var(--fowoco-radius-999); } @@ -292,7 +292,7 @@ margin: 20px 0 0; font-size: 17px; line-height: 28px; - color: var(--brand-dark); + color: var(--text-primary); opacity: 0.85; } @@ -313,7 +313,7 @@ color: var(--fowoco-white); background: var(--brand-primary); border-radius: var(--fowoco-radius-999); - box-shadow: 0 6px 0 var(--brand-dark); + box-shadow: 0 6px 0 var(--brand-primary-hover); transition: transform var(--fowoco-motion-fast) var(--fowoco-easing-standard); } @@ -328,7 +328,7 @@ padding: 0 24px; font-size: 15px; font-weight: 700; - color: var(--brand-dark); + color: var(--text-primary); background: var(--fowoco-white); border-radius: var(--fowoco-radius-999); transition: transform var(--fowoco-motion-fast) var(--fowoco-easing-standard); @@ -354,7 +354,7 @@ gap: 8px; font-size: 13px; font-weight: 700; - color: var(--brand-dark); + color: var(--text-primary); } .heroHighlightIcon { @@ -415,7 +415,7 @@ margin: 0; font-size: 22px; font-weight: 800; - color: var(--brand-dark); + color: var(--text-primary); } .previewMetricLabel { @@ -461,7 +461,7 @@ margin: 0; font-size: 18px; font-weight: 800; - color: var(--brand-dark); + color: var(--text-primary); } .agentPreviewSubtext { @@ -543,7 +543,7 @@ padding: 7px 14px; font-size: 12px; font-weight: 800; - color: var(--brand-dark); + color: var(--text-primary); background: var(--fowoco-teal-50); border-radius: var(--fowoco-radius-999); } @@ -707,7 +707,7 @@ } .workflowKindMaster { - color: var(--brand-dark); + color: var(--text-primary); background: var(--fowoco-teal-100); } @@ -927,7 +927,7 @@ padding: 0 22px; font-size: 14px; font-weight: 700; - color: var(--brand-dark); + color: var(--text-primary); background: var(--fowoco-white); border-radius: var(--fowoco-radius-999); transition: transform var(--fowoco-motion-fast) var(--fowoco-easing-standard); diff --git a/src/pages/LinkExpiredPage/LinkExpiredPage.module.css b/src/pages/LinkExpiredPage/LinkExpiredPage.module.css index 70369a3..46e4a48 100644 --- a/src/pages/LinkExpiredPage/LinkExpiredPage.module.css +++ b/src/pages/LinkExpiredPage/LinkExpiredPage.module.css @@ -67,7 +67,8 @@ padding: 15px 19px; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .contactName { diff --git a/src/pages/LoginPage/LoginPage.module.css b/src/pages/LoginPage/LoginPage.module.css index 58f26eb..f04e06a 100644 --- a/src/pages/LoginPage/LoginPage.module.css +++ b/src/pages/LoginPage/LoginPage.module.css @@ -14,8 +14,8 @@ .promo { flex: 0 0 460px; padding: 52px 56px; - background: var(--brand-dark); - color: var(--fowoco-white); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); display: flex; flex-direction: column; } @@ -50,7 +50,7 @@ margin: 208px 0 0; font-size: 12px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .headline { @@ -64,7 +64,7 @@ margin: 24px 0 0; font-size: 15px; line-height: 25px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .promiseList { @@ -80,14 +80,14 @@ margin: 0; font-size: 13px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .disclaimer { margin-top: auto; padding-top: 40px; font-size: 12px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .formSide { @@ -264,7 +264,8 @@ align-items: flex-start; background: var(--surface-default); border: 2px solid var(--brand-primary); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .demoEyebrow { diff --git a/src/pages/OnboardingImportPage/OnboardingImportPage.module.css b/src/pages/OnboardingImportPage/OnboardingImportPage.module.css index 392459a..d28c186 100644 --- a/src/pages/OnboardingImportPage/OnboardingImportPage.module.css +++ b/src/pages/OnboardingImportPage/OnboardingImportPage.module.css @@ -98,7 +98,8 @@ text-align: left; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); cursor: pointer; } @@ -287,7 +288,8 @@ text-align: center; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .resultCount { diff --git a/src/pages/ProfilePage/ProfilePage.module.css b/src/pages/ProfilePage/ProfilePage.module.css index 9bcc816..b3f176b 100644 --- a/src/pages/ProfilePage/ProfilePage.module.css +++ b/src/pages/ProfilePage/ProfilePage.module.css @@ -32,7 +32,8 @@ padding: var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .avatar { @@ -128,7 +129,8 @@ padding: var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .cardTitle { diff --git a/src/pages/ResetCompletePage/ResetCompletePage.module.css b/src/pages/ResetCompletePage/ResetCompletePage.module.css index d6ae574..df3c1fc 100644 --- a/src/pages/ResetCompletePage/ResetCompletePage.module.css +++ b/src/pages/ResetCompletePage/ResetCompletePage.module.css @@ -14,8 +14,8 @@ .promo { flex: 0 0 460px; padding: 52px 56px; - background: var(--brand-dark); - color: var(--fowoco-white); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); display: flex; flex-direction: column; } @@ -37,7 +37,7 @@ margin: 208px 0 0; font-size: 12px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .headline { @@ -51,14 +51,14 @@ margin: 24px 0 0; font-size: 14px; line-height: 24px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .disclaimer { margin-top: auto; padding-top: 24px; font-size: 12px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .formSide { @@ -112,7 +112,7 @@ margin-top: 24px; font-size: 14px; font-weight: 500; - color: var(--fowoco-white); + color: var(--ink-panel-text); background: var(--brand-primary); border-radius: var(--fowoco-radius-6); } diff --git a/src/pages/ResetPasswordPage/ResetPasswordPage.module.css b/src/pages/ResetPasswordPage/ResetPasswordPage.module.css index 0929312..db6ff84 100644 --- a/src/pages/ResetPasswordPage/ResetPasswordPage.module.css +++ b/src/pages/ResetPasswordPage/ResetPasswordPage.module.css @@ -14,8 +14,8 @@ .promo { flex: 0 0 460px; padding: 52px 56px; - background: var(--brand-dark); - color: var(--fowoco-white); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); display: flex; flex-direction: column; } @@ -37,7 +37,7 @@ margin: 208px 0 0; font-size: 12px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .headline { @@ -51,14 +51,14 @@ margin: 24px 0 0; font-size: 14px; line-height: 24px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .disclaimer { margin-top: auto; padding-top: 24px; font-size: 12px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .formSide { diff --git a/src/pages/ReviewWorkPage/ReviewWorkPage.module.css b/src/pages/ReviewWorkPage/ReviewWorkPage.module.css index fa856a3..b00f508 100644 --- a/src/pages/ReviewWorkPage/ReviewWorkPage.module.css +++ b/src/pages/ReviewWorkPage/ReviewWorkPage.module.css @@ -80,7 +80,8 @@ padding: var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .panelTitle { @@ -318,7 +319,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } @media (max-width: 640px) { diff --git a/src/pages/SignupPage/SignupPage.module.css b/src/pages/SignupPage/SignupPage.module.css index f9ff500..f3a1e5a 100644 --- a/src/pages/SignupPage/SignupPage.module.css +++ b/src/pages/SignupPage/SignupPage.module.css @@ -14,8 +14,8 @@ .promo { flex: 0 0 460px; padding: 52px 40px; - background: var(--brand-dark); - color: var(--fowoco-white); + background: var(--ink-panel-bg); + color: var(--ink-panel-text); display: flex; flex-direction: column; } @@ -37,7 +37,7 @@ margin: 208px 0 0; font-size: 12px; font-weight: 500; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } @media (max-width: 860px) { @@ -57,14 +57,14 @@ margin: 24px 0 0; font-size: 14px; line-height: 24px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .disclaimer { margin-top: auto; padding-top: 24px; font-size: 12px; - color: var(--fowoco-teal-100); + color: var(--ink-panel-text-secondary); } .formSide { diff --git a/src/pages/TicketDetailPage/TicketDetailPage.module.css b/src/pages/TicketDetailPage/TicketDetailPage.module.css index 3c45d57..8c45dc2 100644 --- a/src/pages/TicketDetailPage/TicketDetailPage.module.css +++ b/src/pages/TicketDetailPage/TicketDetailPage.module.css @@ -52,7 +52,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .cardTitle { @@ -140,7 +141,8 @@ padding: var(--fowoco-spacing-12) var(--fowoco-spacing-20); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .statusNote { diff --git a/src/pages/WorkListPage/WorkListPage.module.css b/src/pages/WorkListPage/WorkListPage.module.css index 98d925a..eac9d90 100644 --- a/src/pages/WorkListPage/WorkListPage.module.css +++ b/src/pages/WorkListPage/WorkListPage.module.css @@ -83,8 +83,10 @@ margin-top: 0; overflow: hidden; background: var(--surface-default); - border-radius: var(--fowoco-radius-8); - box-shadow: inset 0 0 0 1px var(--border-default); + border-radius: var(--fowoco-radius-10); + box-shadow: + inset 0 0 0 1px var(--border-default), + var(--shadow-sm); } .noticeStack + .workspace { @@ -374,7 +376,7 @@ font-size: 16px; font-weight: 700; line-height: 20px; - color: var(--brand-dark); + color: var(--text-primary); } .textLink { @@ -565,7 +567,7 @@ } .decisionHeader .sectionTitle { - color: var(--brand-dark); + color: var(--text-primary); } .decisionMeta { diff --git a/src/pages/WorkerDetailPage/WorkerDetailPage.module.css b/src/pages/WorkerDetailPage/WorkerDetailPage.module.css index 8139620..5ae5a75 100644 --- a/src/pages/WorkerDetailPage/WorkerDetailPage.module.css +++ b/src/pages/WorkerDetailPage/WorkerDetailPage.module.css @@ -56,7 +56,8 @@ padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24); background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .cardTitle { diff --git a/src/pages/WorkerListPage/WorkerListPage.module.css b/src/pages/WorkerListPage/WorkerListPage.module.css index 0592242..f93e1e0 100644 --- a/src/pages/WorkerListPage/WorkerListPage.module.css +++ b/src/pages/WorkerListPage/WorkerListPage.module.css @@ -36,8 +36,8 @@ .workspace { display: grid; - grid-template-columns: 520px 1fr; - gap: 16px; + grid-template-columns: 340px 1fr; + gap: 20px; margin-top: 16px; align-items: start; } @@ -51,7 +51,8 @@ .listPanel { background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); overflow: hidden; } @@ -148,7 +149,8 @@ padding: 19px 23px; background: var(--surface-default); border: 1px solid var(--border-default); - border-radius: var(--fowoco-radius-8); + border-radius: var(--fowoco-radius-10); + box-shadow: var(--shadow-sm); } .detailHeader { diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 6ff4857..622f89b 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -1,29 +1,39 @@ :root { - --brand-primary: #07847f; - --brand-dark: #075e5b; + --brand-primary: #4361ee; + --brand-primary-hover: #3651d4; + --brand-dark: #fafafb; + --brand-dark-elevated: #f1f2f5; + --brand-dark-border: #ebecef; - --surface-page: #f6f8f8; - --surface-default: #fff; - --surface-subtle: #eef4f4; - --border-default: #dce5e4; + --surface-page: #ffffff; + --surface-default: #ffffff; + --surface-subtle: #f5f6f8; + --border-default: #eceef1; + --border-strong: #d7dae0; - --text-primary: #172b2d; - --text-secondary: #5f6f72; + --text-primary: #0a0a0a; + --text-secondary: #6b7280; --fowoco-white: #fff; - --fowoco-teal-50: #eef4f4; - --fowoco-teal-100: #d8eceb; - --fowoco-violet-50: #f4f0ff; - --fowoco-violet-600: #7657c8; - --fowoco-red-50: #fff1f1; - --fowoco-red-600: #d84a4a; - --fowoco-amber-50: #fff7e8; - --fowoco-amber-600: #d79222; - --fowoco-green-50: #ecf8f1; - --fowoco-green-600: #2c8a5b; - - --status-critical: #d84a4a; - --status-warning: #d79222; + --fowoco-teal-50: #eaefff; + --fowoco-teal-100: #d7e0ff; + --fowoco-violet-50: #f2effe; + --fowoco-violet-600: #7a5cd6; + --fowoco-red-50: #fdedee; + --fowoco-red-600: #d8434a; + --fowoco-amber-50: #fdf3e3; + --fowoco-amber-600: #c9821c; + --fowoco-green-50: #e9f6ee; + --fowoco-green-600: #1f8a51; + + --status-critical: #d8434a; + --status-warning: #c9821c; + --status-info: #4361ee; + + /* 로그인류 히어로 패널·토스트처럼 앱 테마와 무관하게 항상 어두워야 하는 곳 전용. */ + --ink-panel-bg: #0b0e1a; + --ink-panel-text: #f5f6fa; + --ink-panel-text-secondary: #a7addc; --fowoco-spacing-4: 4px; --fowoco-spacing-8: 8px; @@ -34,9 +44,16 @@ --fowoco-radius-4: 4px; --fowoco-radius-6: 6px; - --fowoco-radius-8: 8px; + --fowoco-radius-8: 6px; + --fowoco-radius-10: 6px; + --fowoco-radius-14: 8px; --fowoco-radius-999: 999px; + --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04); + --shadow-md: 0 8px 20px rgba(10, 10, 10, 0.08), 0 2px 6px rgba(10, 10, 10, 0.05); + --shadow-lg: 0 24px 56px rgba(10, 10, 10, 0.14), 0 8px 20px rgba(10, 10, 10, 0.08); + --shadow-focus: 0 0 0 3px rgba(67, 97, 238, 0.22); + --fowoco-motion-fast: 120ms; --fowoco-motion-base: 200ms; --fowoco-motion-slow: 320ms;