ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wr: css ㅍ

Browse Source
This commit is contained in:
mind-one005
2026-07-09 15:39:48 +09:00
parent 34811d4571
commit a623c53fa5
10 changed files with 385 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
+19 -19
View File
@@ -205,16 +205,16 @@ export default function AgedPipePopupPage() {
};
return (
<main className="flex h-screen w-full max-w-full min-w-0 flex-col overflow-x-hidden overflow-y-hidden bg-white">
<main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
<LoadingOverlay isLoading={isLoading} />
<header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
<h1 className="text-[1.45rem] font-semibold text-white">노후관로 현황</h1>
<header className="sn-popup-header">
<h1 className="sn-popup-title">노후관로 현황</h1>
<div className="flex items-center gap-2">
<Button
type="button"
color="white"
size="xs"
className="border border-white/30 px-3 py-1 text-[1.05rem] text-white"
className="sn-popup-header-button"
onClick={handleMinimize}
>
최소화
@@ -223,17 +223,17 @@ export default function AgedPipePopupPage() {
</header>
{downloadProgressText ? (
<div className="border-b border-slate-200 bg-emerald-50 px-5 py-2 text-[1rem] text-emerald-700">
<div className="sn-popup-success-bar">
{downloadProgressText}
</div>
) : null}
<section className="flex min-h-0 flex-1 flex-col overflow-x-hidden px-4 pb-3 pt-3">
<div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-3 md:grid-cols-[140px_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
<label className="block min-w-0">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">경과년도</div>
<div className="sn-popup-filter-panel-compact grid grid-cols-1 gap-3 md:grid-cols-[140px_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
<label className="sn-popup-field">
<div className="sn-popup-field-label">경과년도</div>
<Input
className="h-10 !text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
type="text"
inputMode="numeric"
pattern="[0-9]*"
@@ -252,10 +252,10 @@ export default function AgedPipePopupPage() {
/>
</label>
<label className="block min-w-0">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시도</div>
<select
className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
value={filters.ctpvCd}
onChange={(event) =>
setFilters({
@@ -274,10 +274,10 @@ export default function AgedPipePopupPage() {
</select>
</label>
<label className="block min-w-0">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시군구</div>
<select
className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
value={filters.sggCd}
onChange={(event) => setFilters({ ...filters, sggCd: event.target.value })}
>
@@ -290,12 +290,12 @@ export default function AgedPipePopupPage() {
</select>
</label>
<div className="flex flex-wrap items-end justify-end gap-2">
<div className="sn-popup-actions">
<Button
type="button"
size="sm"
color="primary"
className="h-10 px-5 !text-[1.1rem]"
className="sn-popup-primary-button !text-[1.1rem]"
onClick={() => void handleSearch(1)}
>
조회
@@ -303,8 +303,8 @@ export default function AgedPipePopupPage() {
<Button
type="button"
size="sm"
color="green"
className="h-10 px-5 !text-[1.1rem]"
color="primary"
className="sn-popup-primary-button !text-[1.1rem]"
onClick={handleDownload}
>
다운로드
apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx
+24 -24
View File
@@ -193,19 +193,19 @@ export default function FloodHistoryPopupPage() {
};
return (
<main className="flex h-screen min-w-0 flex-col overflow-hidden bg-white">
<header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
<h1 className="text-[1.45rem] font-semibold text-white">침수흔적도 목록</h1>
<main className="sn-popup-page">
<header className="sn-popup-header">
<h1 className="sn-popup-title">침수흔적도 목록</h1>
<div />
</header>
<section className="flex min-h-0 flex-1 flex-col overflow-hidden p-4">
<div className="border-b border-slate-200 bg-slate-50 pb-4">
<section className="sn-popup-section">
<div className="sn-popup-filter-panel-compact">
<div className="grid grid-cols-1 gap-3 md:grid-cols-[180px_180px_180px_minmax(0,1fr)_auto] md:items-end">
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시도</div>
<select
className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
value={filters.ctpvCd}
onChange={(event) =>
setFilters((current) => ({
@@ -224,10 +224,10 @@ export default function FloodHistoryPopupPage() {
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시군구</div>
<select
className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
value={filters.sggCd}
onChange={(event) =>
setFilters((current) => ({
@@ -245,10 +245,10 @@ export default function FloodHistoryPopupPage() {
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">침수발생년도</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">침수발생년도</div>
<select
className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
value={filters.floodYear}
onChange={(event) =>
setFilters((current) => ({
@@ -266,10 +266,10 @@ export default function FloodHistoryPopupPage() {
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">침수재해명</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">침수재해명</div>
<Input
className="h-10 !text-[1.1rem]"
className="sn-popup-input !text-[1.1rem]"
type="text"
autoComplete="off"
value={filters.disasterName}
@@ -285,12 +285,12 @@ export default function FloodHistoryPopupPage() {
/>
</label>
<div className="flex flex-wrap justify-end gap-2 md:pr-3">
<div className="sn-popup-actions md:pr-3">
<Button
type="button"
size="sm"
color="primary"
className="h-10 px-5 !text-[1.1rem]"
className="sn-popup-primary-button !text-[1.1rem]"
onClick={handleSearch}
>
조회
@@ -298,8 +298,8 @@ export default function FloodHistoryPopupPage() {
<Button
type="button"
size="sm"
color="green"
className="h-10 px-5 !text-[1.1rem]"
color="primary"
className="sn-popup-primary-button !text-[1.1rem]"
onClick={() => void handleDownload()}
>
다운로드
@@ -354,7 +354,7 @@ export default function FloodHistoryPopupPage() {
return (
<TableRow
key={row.historyId}
className={`cursor-pointer ${isSelected ? "bg-blue-50" : "hover:bg-slate-50"}`}
className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row-hover"}`}
onClick={() => handleRowClick(row)}
onDoubleClick={() => handleRowDoubleClick(row)}
>
@@ -380,7 +380,7 @@ export default function FloodHistoryPopupPage() {
})
) : (
<TableRow>
<TableCell colSpan={GRID_COLUMNS.length} className="h-24 text-center text-gray-500">
<TableCell colSpan={GRID_COLUMNS.length} className="sn-popup-empty-cell h-24 text-center">
조회된 데이터가 없습니다.
</TableCell>
</TableRow>
@@ -398,7 +398,7 @@ export default function FloodHistoryPopupPage() {
/>
) : null}
<div className="mt-2 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-[1.05rem] text-slate-600">
<div className="sn-popup-help-text">
행 클릭 시 메인 지도에 미리 표시되고, 더블클릭하면 팝업을 닫습니다. 상세정보는 지도 위 침수흔적 영역을 클릭해 확인합니다.
</div>
</div>
apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
+28 -28
View File
@@ -247,23 +247,23 @@ export default function GisManagementPopupPage() {
};
return (
<main className="flex h-screen items-start justify-center bg-[linear-gradient(180deg,#f7f9fc_0%,#eef4fa_100%)] px-[12px] py-[12px] text-[#202a36]">
<section className="w-full max-w-[920px] overflow-hidden rounded-[12px] border border-[#d8e3ef] bg-[rgba(255,255,255,0.96)] shadow-[0_16px_36px_rgba(31,59,87,0.10)] backdrop-blur-[2px]">
<header className="flex h-[44px] items-center border-b border-[#e2ebf5] bg-[linear-gradient(180deg,#ffffff_0%,#f3f8fd_100%)] px-[18px]">
<h1 className="text-[1.35rem] font-semibold tracking-[-0.01em] text-[#1f3b57]">
<main className="sn-popup-modal-page">
<section className="sn-popup-modal-shell max-w-[920px] shadow-[0_16px_36px_rgba(31,59,87,0.10)] backdrop-blur-[2px]">
<header className="sn-popup-modal-header">
<h1 className="sn-popup-modal-title">
GIS 관리
</h1>
</header>
<div className="px-[16px] pb-[16px] pt-[10px]">
<div className="mb-[10px] mt-[4px] text-[1.05rem] font-medium tracking-[-0.01em] text-slate-700">
<div className="sn-popup-panel-title mb-[10px] mt-[4px]">
GIS 업로드
</div>
<div className="mb-[8px] flex items-center justify-between gap-[12px] px-[2px]">
<div className="flex min-w-0 flex-1 items-center gap-[10px]">
<select
className="h-[32px] w-[110px] shrink-0 rounded-[6px] border border-[#cad7e6] bg-[linear-gradient(180deg,#ffffff_0%,#f8fbff_100%)] px-[10px] text-[1.02rem] font-medium text-slate-700 outline-none transition focus:border-[#8bbef0] focus:shadow-[0_0_0_2px_rgba(47,126,196,0.12)]"
className="sn-popup-input-sm h-[32px] w-[110px] shrink-0"
value={selectedFacilityTypeCode}
onChange={handleFacilityTypeChange}
aria-label="시설구분"
@@ -284,7 +284,7 @@ export default function GisManagementPopupPage() {
placeholder="선택된 파일 없음"
readOnly
aria-label="선택 파일명"
className="h-[32px] min-w-0 flex-1 rounded-[6px] border-[#cad7e6] bg-[linear-gradient(180deg,#ffffff_0%,#f8fbff_100%)] px-[10px] py-0 !text-[1.02rem] font-medium text-slate-700 placeholder:text-[#9aa8b7] shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] focus-visible:ring-0 focus-visible:ring-offset-0"
className="sn-popup-input-sm h-[32px] min-w-0 flex-1 py-0 !text-[1.02rem] shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] focus-visible:ring-0 focus-visible:ring-offset-0"
/>
</div>
@@ -292,7 +292,7 @@ export default function GisManagementPopupPage() {
<Button
type="button"
size="sm"
className="h-[32px] min-w-[56px] rounded-sm bg-blue-600 px-0 py-2 text-sm font-medium text-white hover:bg-blue-700"
className="sn-popup-primary-button-sm h-[32px] min-w-[56px]"
onClick={handleOpenFilePicker}
>
찾기
@@ -301,7 +301,7 @@ export default function GisManagementPopupPage() {
<Button
type="button"
size="sm"
className="h-[32px] min-w-[64px] rounded-sm bg-blue-600 px-0 py-2 text-sm font-medium text-white hover:bg-blue-700"
className="sn-popup-primary-button-sm h-[32px] min-w-[64px]"
onClick={handleUpload}
>
업로드
@@ -321,38 +321,38 @@ export default function GisManagementPopupPage() {
/>
<div className="mb-[8px] flex items-center justify-between px-[2px]">
<div className="text-[1.05rem] font-medium tracking-[-0.01em] text-slate-700">
GIS 업로드 현황
</div>
<div className="sn-popup-panel-title">
GIS 업로드 현황
</div>
<Button
type="button"
size="sm"
color="green"
className="h-[32px] min-w-[82px] rounded-sm px-[10px] py-2 text-sm font-medium text-white"
color="primary"
className="sn-popup-primary-button-sm h-[32px] min-w-[82px] px-[10px]"
onClick={handleDownload}
>
다운로드
</Button>
</div>
<div className="overflow-hidden rounded-[10px] border border-[#d6e1ee] bg-[linear-gradient(180deg,#ffffff_0%,#f9fbfe_100%)] shadow-[0_6px_16px_rgba(31,59,87,0.06),inset_0_1px_0_rgba(255,255,255,0.78)]">
<div className="sn-popup-card shadow-[0_6px_16px_rgba(31,59,87,0.06),inset_0_1px_0_rgba(255,255,255,0.78)]">
<Table variant="secondary" className="text-[1.02rem]">
<TableHeader className="!static bg-transparent">
<TableRow className="border-0">
<TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
<TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
no
</TableHead>
<TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
<TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
시설구분
</TableHead>
<TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
<TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
파일명
</TableHead>
<TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
<TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
등록일자
</TableHead>
<TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
<TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
등록자
</TableHead>
</TableRow>
@@ -362,10 +362,10 @@ export default function GisManagementPopupPage() {
{pagedUploadHistory.map((history, index) => {
const isSelected = history.uploadId === selectedUploadId;
const backgroundColor = isSelected
? "#eef6ff"
? "var(--primary-transparent)"
: index % 2 === 0
? "#ffffff"
: "#f9fbfd";
? "var(--background)"
: "var(--secondary)";
const rowNumber =
(currentPage - 1) * GIS_UPLOAD_PAGE_SIZE + index + 1;
@@ -376,19 +376,19 @@ export default function GisManagementPopupPage() {
onClick={() => setSelectedUploadId(history.uploadId)}
style={{ backgroundColor }}
>
<TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
<TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
{rowNumber}
</TableCell>
<TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
<TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
{history.facilityTypeName}
</TableCell>
<TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
<TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
{history.fileName}
</TableCell>
<TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
<TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
{history.registeredAt}
</TableCell>
<TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
<TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
{history.registeredBy}
</TableCell>
</TableRow>
apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
+114 -114
View File
@@ -57,18 +57,18 @@ const DEFAULT_SETTING_FILTERS: SettingFilters = {
};
const TOOLBAR_INPUT_CLASS_NAME =
"h-10 rounded-md border border-slate-300 bg-white px-3 text-[1.05rem] text-slate-700 outline-none";
"sn-popup-input";
const SECONDARY_BUTTON_CLASS_NAME =
"h-10 rounded-md border border-slate-300 bg-white px-5 text-[1.05rem] text-slate-700 hover:bg-slate-100";
"sn-popup-secondary-button";
const ACTION_BUTTON_CLASS_NAME =
"h-10 px-5 !text-[1.05rem]";
"sn-popup-primary-button";
const WATER_RISK_PAGE_SIZE = 10;
const RESULT_TABLE_CONTAINER_CLASS_NAME =
"min-h-0 overflow-hidden border border-[#dbe2e6] bg-white";
"sn-popup-card min-h-0";
const SETTING_TABLE_CONTAINER_CLASS_NAME =
"min-h-0 overflow-hidden border border-[#dbe2e6] bg-white";
"sn-popup-card min-h-0";
const postMessageToOpener = (type: string, payload?: Record<string, unknown>) => {
if (typeof window === "undefined" || !window.opener) return;
@@ -118,8 +118,8 @@ const buildSavePreview = (
const getRiskBadgeClassName = (riskStatus: "DANGER" | "NORMAL") =>
riskStatus === "DANGER"
? "bg-[#ff1c15] text-white"
: "bg-white text-[#111827]";
? "sn-popup-badge-danger"
: "sn-popup-badge-normal";
export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
const [activeView, setActiveView] = useState<WaterRiskView>("result");
@@ -393,28 +393,28 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
};
return (
<main className="flex h-screen flex-col overflow-hidden bg-white text-slate-800">
<header className="flex min-h-[44px] items-center border-b border-[#dbe2e6] bg-primary px-5 py-3">
<main className="sn-popup-page">
<header className="sn-popup-header justify-start">
{activeView === "setting" ? (
<button
type="button"
className="mr-3 text-[1.05rem] font-medium text-white/90 hover:text-white"
className="sn-popup-header-link"
onClick={handleReturnToResultView}
>
← 결과조회
</button>
) : null}
<h1 className="text-[1.45rem] font-semibold text-white">
<h1 className="sn-popup-title">
{activeView === "result" ? "통수위험분석" : "통수위험분석 설정"}
</h1>
</header>
<section className="flex-1 overflow-y-auto p-4">
<section className="sn-popup-section overflow-y-auto">
{activeView === "result" ? (
<section className="flex h-full min-h-0 flex-col gap-3">
<div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[160px_140px_140px_140px_180px_120px_auto] md:items-end">
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">기준일자</div>
<div className="sn-popup-filter-panel md:grid-cols-[160px_140px_140px_140px_180px_120px_auto] md:items-end">
<label className="sn-popup-field">
<div className="sn-popup-field-label">기준일자</div>
<input
type="date"
value={draftResultFilters.analysisDate}
@@ -425,11 +425,11 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="년월일"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
/>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">기준시간</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">기준시간</div>
<input
type="time"
value={draftResultFilters.analysisTime}
@@ -440,11 +440,11 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="시간"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
/>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시도</div>
<select
value={draftResultFilters.sidoName}
onChange={(event) =>
@@ -455,7 +455,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="시도"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
{WATER_RISK_SIDO_OPTIONS.map((option) => (
<option key={option} value={option}>
@@ -464,8 +464,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
))}
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시군구</div>
<select
value={draftResultFilters.sggName}
onChange={(event) =>
@@ -475,7 +475,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="시군구"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
{resultSggOptions.map((option) => (
<option key={option} value={option}>
@@ -484,8 +484,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
))}
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">중점관리지역</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">중점관리지역</div>
<select
value={draftResultFilters.areaId}
onChange={(event) =>
@@ -495,7 +495,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="중점관리지역"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
<option value="ALL">중점관리지역</option>
{resultAreaOptions.map((option) => (
@@ -505,8 +505,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
))}
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">위험상태</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">위험상태</div>
<select
value={draftResultFilters.riskStatus}
onChange={(event) =>
@@ -516,19 +516,19 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="위험상태"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
<option value="ALL">전체</option>
<option value="DANGER">위험</option>
<option value="NORMAL">정상</option>
</select>
</label>
<div className="flex flex-wrap items-end justify-end gap-2">
<div className="sn-popup-actions">
<Button
type="button"
size="sm"
color="primary"
className="h-10 px-5 !text-[1.05rem]"
className="sn-popup-primary-button"
onClick={handleApplyResultFilters}
>
조회
@@ -554,32 +554,32 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
<div className={RESULT_TABLE_CONTAINER_CLASS_NAME}>
<div className="overflow-x-auto overflow-y-hidden">
<table
className="border-collapse text-[1.05rem]"
className="sn-popup-grid-table"
style={{ minWidth: `${resultTableMinWidth}px`, width: "100%" }}
>
<thead>
<tr className="bg-[#eaf3fb] text-[#647784]">
<th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">no</th>
<th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">시도</th>
<th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">시군구</th>
<th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">중점관리지역</th>
<th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">예측강우량(mm)</th>
<tr className="sn-popup-grid-head-row">
<th rowSpan={2} className="sn-popup-grid-head-cell">no</th>
<th rowSpan={2} className="sn-popup-grid-head-cell">시도</th>
<th rowSpan={2} className="sn-popup-grid-head-cell">시군구</th>
<th rowSpan={2} className="sn-popup-grid-head-cell">중점관리지역</th>
<th rowSpan={2} className="sn-popup-grid-head-cell">예측강우량(mm)</th>
{Array.from({ length: maxPipeCount }).map((_, index) => (
<th
key={`pipe-group-${index + 1}`}
colSpan={2}
className="border border-[#d1dae2] px-2 py-2"
className="sn-popup-grid-head-cell"
>
관로 ID {index + 1}
</th>
))}
<th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">통수위험</th>
<th rowSpan={2} className="sn-popup-grid-head-cell">통수위험</th>
</tr>
<tr className="bg-[#eaf3fb] text-[#647784]">
<tr className="sn-popup-grid-head-row">
{Array.from({ length: maxPipeCount }).map((_, index) => (
<Fragment key={`pipe-sub-${index + 1}`}>
<th className="border border-[#d1dae2] px-2 py-1">유출유량(㎥/hr)</th>
<th className="border border-[#d1dae2] px-2 py-1">통수량(㎥/hr)</th>
<th className="sn-popup-grid-head-cell-sub">유출유량(㎥/hr)</th>
<th className="sn-popup-grid-head-cell-sub">통수량(㎥/hr)</th>
</Fragment>
))}
</tr>
@@ -593,29 +593,29 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
return (
<tr
key={row.areaId}
className={`cursor-pointer ${isSelected ? "bg-[#eef6ff]" : "bg-white"}`}
className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row sn-popup-grid-row-hover"}`}
onClick={() => handleSelectResultRow(row)}
>
<td className="border border-[#dbe4ec] px-2 py-2 text-center">{rowNumber}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.sidoName}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.sggName}</td>
<td className="border border-[#dbe4ec] px-2 py-2 font-semibold">{row.areaName}</td>
<td className="border border-[#dbe4ec] px-2 py-2 text-right">{row.forecastRainQty.toFixed(1)}</td>
<td className="sn-popup-grid-cell text-center">{rowNumber}</td>
<td className="sn-popup-grid-cell">{row.sidoName}</td>
<td className="sn-popup-grid-cell">{row.sggName}</td>
<td className="sn-popup-grid-cell font-semibold">{row.areaName}</td>
<td className="sn-popup-grid-cell text-right">{row.forecastRainQty.toFixed(1)}</td>
{Array.from({ length: maxPipeCount }).map((_, pipeIndex) => {
const pipe = row.pipeSummaries[pipeIndex];
return (
<Fragment key={`${row.areaId}-pipe-${pipeIndex}`}>
<td className="border border-[#dbe4ec] px-2 py-2 text-right">
<td className="sn-popup-grid-cell text-right">
{pipe ? pipe.runoffFlowQty.toFixed(1) : ""}
</td>
<td className="border border-[#dbe4ec] px-2 py-2 text-right">
<td className="sn-popup-grid-cell text-right">
{pipe ? pipe.conveyQty.toFixed(1) : ""}
</td>
</Fragment>
);
})}
<td className="border border-[#dbe4ec] px-2 py-2 text-center">
<span className={`inline-flex min-w-[56px] items-center justify-center px-2 py-1 text-[12px] font-semibold ${getRiskBadgeClassName(row.riskStatus)}`}>
<td className="sn-popup-grid-cell text-center">
<span className={`sn-popup-badge min-w-[56px] ${getRiskBadgeClassName(row.riskStatus)}`}>
{buildWaterRiskStatusLabel(row.riskStatus)}
</span>
</td>
@@ -640,9 +640,9 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
</section>
) : (
<section className="flex h-full min-h-0 flex-col gap-3">
<div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[160px_160px_220px_auto] md:items-end">
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
<div className="sn-popup-filter-panel md:grid-cols-[160px_160px_220px_auto] md:items-end">
<label className="sn-popup-field">
<div className="sn-popup-field-label">시도</div>
<select
value={draftSettingFilters.sidoName}
onChange={(event) =>
@@ -653,7 +653,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="시도"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
{WATER_RISK_SIDO_OPTIONS.map((option) => (
<option key={option} value={option}>
@@ -662,8 +662,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
))}
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">시군구</div>
<select
value={draftSettingFilters.sggName}
onChange={(event) =>
@@ -673,7 +673,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="시군구"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
{settingSggOptions.map((option) => (
<option key={option} value={option}>
@@ -682,8 +682,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
))}
</select>
</label>
<label className="block">
<div className="mb-1 text-[1.05rem] font-medium text-slate-700">중점관리지역</div>
<label className="sn-popup-field">
<div className="sn-popup-field-label">중점관리지역</div>
<select
value={draftSettingFilters.areaId}
onChange={(event) =>
@@ -693,7 +693,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
}))
}
aria-label="중점관리지역"
className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
className={TOOLBAR_INPUT_CLASS_NAME}
>
<option value="ALL">중점관리지역</option>
{settingAreaOptions.map((option) => (
@@ -703,12 +703,12 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
))}
</select>
</label>
<div className="flex flex-wrap items-end justify-end gap-2">
<div className="sn-popup-actions">
<Button
type="button"
size="sm"
color="primary"
className="h-10 px-5 !text-[1.05rem]"
className="sn-popup-primary-button"
onClick={handleApplySettingFilters}
>
조회
@@ -727,20 +727,20 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
>
<div className="overflow-x-auto overflow-y-hidden">
<table
className="border-collapse text-[1.05rem]"
className="sn-popup-grid-table"
style={{ minWidth: `${settingTableMinWidth}px`, width: "100%" }}
>
<thead className="bg-[#eaf3fb] text-[#647784]">
<thead className="sn-popup-grid-head-row">
<tr>
<th className="border border-[#d1dae2] px-2 py-2">시도</th>
<th className="border border-[#d1dae2] px-2 py-2">시군구</th>
<th className="border border-[#d1dae2] px-2 py-2">중점관리지역</th>
<th className="border border-[#d1dae2] px-2 py-2">유출관로ID</th>
<th className="border border-[#d1dae2] px-2 py-2">관경</th>
<th className="border border-[#d1dae2] px-2 py-2">연장</th>
<th className="border border-[#d1dae2] px-2 py-2">재질</th>
<th className="border border-[#d1dae2] px-2 py-2">설정순번</th>
<th className="border border-[#d1dae2] px-2 py-2">설정완료여부</th>
<th className="sn-popup-grid-head-cell">시도</th>
<th className="sn-popup-grid-head-cell">시군구</th>
<th className="sn-popup-grid-head-cell">중점관리지역</th>
<th className="sn-popup-grid-head-cell">유출관로ID</th>
<th className="sn-popup-grid-head-cell">관경</th>
<th className="sn-popup-grid-head-cell">연장</th>
<th className="sn-popup-grid-head-cell">재질</th>
<th className="sn-popup-grid-head-cell">설정순번</th>
<th className="sn-popup-grid-head-cell">설정완료여부</th>
</tr>
</thead>
<tbody>
@@ -751,18 +751,18 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
return (
<tr
key={`${row.areaId}-${row.pipeId}`}
className={`cursor-pointer ${isSelected ? "bg-[#eef6ff]" : "bg-white"}`}
className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row sn-popup-grid-row-hover"}`}
onClick={() => handleSelectSettingArea(row.areaId)}
>
<td className="border border-[#dbe4ec] px-2 py-2">{row.sidoName}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.sggName}</td>
<td className="border border-[#dbe4ec] px-2 py-2 font-semibold">{row.areaName}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.pipeId}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.pipeDia}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.pipeLen}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{row.pipeMaterial}</td>
<td className="border border-[#dbe4ec] px-2 py-2 text-center">{row.setSeq}</td>
<td className="border border-[#dbe4ec] px-2 py-2 text-center">
<td className="sn-popup-grid-cell">{row.sidoName}</td>
<td className="sn-popup-grid-cell">{row.sggName}</td>
<td className="sn-popup-grid-cell font-semibold">{row.areaName}</td>
<td className="sn-popup-grid-cell">{row.pipeId}</td>
<td className="sn-popup-grid-cell">{row.pipeDia}</td>
<td className="sn-popup-grid-cell">{row.pipeLen}</td>
<td className="sn-popup-grid-cell">{row.pipeMaterial}</td>
<td className="sn-popup-grid-cell text-center">{row.setSeq}</td>
<td className="sn-popup-grid-cell text-center">
{row.setCompleteYn === "Y" ? "완료" : "미완료"}
</td>
</tr>
@@ -785,10 +785,10 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
) : null}
{showSettingEditor ? (
<div className="min-h-0 flex-1 overflow-hidden border border-[#dbe2e6] bg-white">
<div className="sn-popup-card min-h-0 flex-1">
<div className="flex h-full min-h-0 flex-col">
<div className="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-4 py-3">
<div className="text-[1.05rem] font-medium text-slate-700">
<div className="flex items-center justify-between border-b border-border bg-secondary px-4 py-3">
<div className="sn-popup-panel-title">
설정 편집 대상: {currentSettingAreaName || "선택 전"}
</div>
<div className="flex items-center gap-2">
@@ -796,7 +796,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
type="button"
size="sm"
color="white"
className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
className="sn-popup-secondary-button-sm"
onClick={handleStopSettingEdit}
>
편집 종료
@@ -805,7 +805,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
type="button"
size="sm"
color="white"
className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
className="sn-popup-secondary-button-sm"
onClick={handleClearStagedPipes}
disabled={snapshot.stagedPipes.length === 0}
>
@@ -824,16 +824,16 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
</div>
<div className="min-h-0 flex-1 overflow-auto">
<table className="w-full border-collapse text-[1.05rem]">
<thead className="bg-[#e1ebf5] text-[#24364d]">
<table className="sn-popup-grid-table">
<thead className="sn-popup-grid-head-row-strong">
<tr>
<th className="border border-[#dbe4ec] px-2 py-2">순번</th>
<th className="border border-[#dbe4ec] px-2 py-2">유출관로ID</th>
<th className="border border-[#dbe4ec] px-2 py-2">관경</th>
<th className="border border-[#dbe4ec] px-2 py-2">연장</th>
<th className="border border-[#dbe4ec] px-2 py-2">재질</th>
<th className="border border-[#dbe4ec] px-2 py-2">선택원천</th>
<th className="border border-[#dbe4ec] px-2 py-2">조작</th>
<th className="sn-popup-grid-head-cell">순번</th>
<th className="sn-popup-grid-head-cell">유출관로ID</th>
<th className="sn-popup-grid-head-cell">관경</th>
<th className="sn-popup-grid-head-cell">연장</th>
<th className="sn-popup-grid-head-cell">재질</th>
<th className="sn-popup-grid-head-cell">선택원천</th>
<th className="sn-popup-grid-head-cell">조작</th>
</tr>
</thead>
<tbody>
@@ -841,7 +841,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
<tr>
<td
colSpan={7}
className="border border-[#dbe4ec] px-3 py-6 text-center text-[#64748b]"
className="sn-popup-grid-cell sn-popup-empty-cell px-3 py-6 text-center"
>
staged 유출관로가 없습니다. 지도에서 하수관로를 선택하세요.
</td>
@@ -850,21 +850,21 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
snapshot.stagedPipes.map((pipe, index) => (
<tr
key={pipe.pipeId}
className="bg-white"
className="sn-popup-grid-row"
>
<td className="border border-[#dbe4ec] px-2 py-2 text-center">{index + 1}</td>
<td className="border border-[#dbe4ec] px-2 py-2 font-semibold">{pipe.pipeId}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{pipe.pipeDia}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{pipe.pipeLen}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{pipe.pipeMaterial}</td>
<td className="border border-[#dbe4ec] px-2 py-2">{pipe.source}</td>
<td className="border border-[#dbe4ec] px-2 py-2">
<td className="sn-popup-grid-cell text-center">{index + 1}</td>
<td className="sn-popup-grid-cell font-semibold">{pipe.pipeId}</td>
<td className="sn-popup-grid-cell">{pipe.pipeDia}</td>
<td className="sn-popup-grid-cell">{pipe.pipeLen}</td>
<td className="sn-popup-grid-cell">{pipe.pipeMaterial}</td>
<td className="sn-popup-grid-cell">{pipe.source}</td>
<td className="sn-popup-grid-cell">
<div className="flex items-center gap-1">
<Button
type="button"
size="sm"
color="white"
className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
className="sn-popup-secondary-button-sm"
onClick={() => handleMoveStagedPipe(pipe.pipeId, "UP")}
disabled={index === 0}
>
@@ -874,7 +874,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
type="button"
size="sm"
color="white"
className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
className="sn-popup-secondary-button-sm"
onClick={() => handleMoveStagedPipe(pipe.pipeId, "DOWN")}
disabled={index === snapshot.stagedPipes.length - 1}
>
@@ -884,7 +884,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
type="button"
size="sm"
color="white"
className="h-9 rounded-md border border-[#e7b7b7] bg-white px-4 text-[1.05rem] text-[#c62828] hover:bg-[#fff8f8]"
className="sn-popup-danger-button-sm"
onClick={() => handleRemoveStagedPipe(pipe.pipeId)}
>
삭제
apps/sn/app/(map-layout)/map/page.tsx
+1 -1
View File
@@ -7129,7 +7129,7 @@ const Map = () => {
}
waterDepth={undefined}
layerSettingView={ActiveLayerSettingView}
treeSectionClassName="rounded-sm border border-slate-300 px-1 py-2"
treeSectionClassName="rounded-sm border border-border bg-background px-1 py-2 text-foreground"
detachedTreeToggleButton={true}
isPlaying={isPlaying}
setIsPlaying={setIsPlaying as any}
apps/sn/src/app/styles/components-black.css
+5 -14
View File
@@ -2,28 +2,19 @@
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
@apply border border-border bg-background shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="black"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
@apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
}
}
apps/sn/src/app/styles/components-blue.css
+5 -14
View File
@@ -2,28 +2,19 @@
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
@apply border border-border bg-background shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="blue"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
@apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
}
}
apps/sn/src/app/styles/components-green.css
+5 -14
View File
@@ -2,28 +2,19 @@
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
@apply border border-border bg-background shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="green"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
@apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
}
}
apps/sn/src/app/styles/components-red.css
+5 -14
View File
@@ -2,28 +2,19 @@
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
@apply border border-border bg-background shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-theme="red"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
.card-header {
@apply border-b-[#3f4042];
}
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
@apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
}
}
apps/sn/src/app/styles/components.css
+179 -6
View File
@@ -2,20 +2,193 @@
@layer components {
.card {
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
}
.card-border {
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
@apply border border-border bg-background shadow-blur;
}
.card-header {
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
}
.card-footer {
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
}
input[type="file"] {
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
@apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
}
.sn-popup-page {
@apply flex h-screen min-w-0 flex-col overflow-hidden bg-background text-foreground;
}
.sn-popup-modal-page {
@apply flex h-screen items-start justify-center bg-container px-3 py-3 text-foreground;
}
.sn-popup-shell {
@apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
}
.sn-popup-modal-shell {
@apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
}
.sn-popup-header {
@apply flex min-h-[44px] items-center justify-between border-b border-border bg-primary px-5 py-3;
}
.sn-popup-modal-header {
@apply flex h-[44px] items-center border-b border-border bg-secondary px-[18px];
}
.sn-popup-title {
@apply text-[1.45rem] font-semibold text-primary-foreground;
}
.sn-popup-modal-title {
@apply text-[1.35rem] font-semibold tracking-[-0.01em] text-foreground;
}
.sn-popup-header-link {
@apply mr-3 text-[1.05rem] font-medium text-primary-foreground hover:text-primary-foreground;
opacity: 0.9;
}
.sn-popup-header-button {
@apply border px-3 py-1 text-[1.05rem] text-primary-foreground;
border-color: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
}
.sn-popup-section {
@apply flex min-h-0 flex-1 flex-col overflow-hidden p-4;
}
.sn-popup-filter-panel {
@apply grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4;
}
.sn-popup-filter-panel-compact {
@apply border-b border-border bg-secondary pb-3;
}
.sn-popup-field {
@apply block min-w-0;
}
.sn-popup-field-label {
@apply mb-1 text-[1.05rem] font-medium text-label;
}
.sn-popup-input {
@apply h-10 w-full rounded-md border border-input bg-field px-3 text-[1.05rem] text-foreground outline-none placeholder:text-placeholder focus:ring-2 focus:ring-ring;
}
.sn-popup-input-sm {
@apply h-[32px] rounded-[6px] border border-input bg-field px-[10px] text-[1.02rem] font-medium text-foreground outline-none transition placeholder:text-placeholder focus:ring-2 focus:ring-ring;
}
.sn-popup-actions {
@apply flex flex-wrap items-end justify-end gap-2;
}
.sn-popup-primary-button {
@apply h-10 px-5 !text-[1.05rem];
}
.sn-popup-secondary-button {
@apply h-10 rounded-md border border-input bg-background px-5 text-[1.05rem] text-foreground hover:bg-accent;
}
.sn-popup-secondary-button-sm {
@apply h-9 rounded-md border border-input bg-background px-4 text-[1.05rem] text-foreground hover:bg-accent;
}
.sn-popup-danger-button-sm {
@apply h-9 rounded-md border border-destructive bg-background px-4 text-[1.05rem] text-destructive;
}
.sn-popup-danger-button-sm:hover {
background-color: color-mix(in srgb, var(--destructive) 10%, var(--background));
}
.sn-popup-primary-button-sm {
@apply h-[32px] min-w-[56px] rounded-sm bg-primary px-0 py-2 text-sm font-medium text-primary-foreground hover:opacity-90;
}
.sn-popup-status-bar {
@apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label;
}
.sn-popup-success-bar {
@apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-foreground;
}
.sn-popup-card {
@apply overflow-hidden rounded-[10px] border border-border bg-background;
}
.sn-popup-panel-title {
@apply text-[1.05rem] font-medium tracking-[-0.01em] text-label;
}
.sn-popup-grid-table {
@apply w-full border-collapse text-[1.05rem];
}
.sn-popup-grid-head-row {
@apply bg-secondary text-title;
}
.sn-popup-grid-head-row-strong {
@apply bg-muted text-foreground;
}
.sn-popup-grid-head-cell {
@apply border border-border px-2 py-2;
}
.sn-popup-grid-head-cell-sub {
@apply border border-border px-2 py-1;
}
.sn-popup-grid-cell {
@apply border border-border px-2 py-2 text-foreground;
}
.sn-popup-grid-row {
@apply bg-background;
}
.sn-popup-grid-row-hover {
}
.sn-popup-grid-row-hover:hover {
background-color: color-mix(in srgb, var(--secondary) 60%, var(--background));
}
.sn-popup-grid-row-selected {
@apply bg-primary-transparent;
}
.sn-popup-empty-cell {
@apply text-label;
}
.sn-popup-badge {
@apply inline-flex items-center justify-center px-2 py-1 text-[12px] font-semibold;
}
.sn-popup-badge-danger {
@apply bg-destructive text-destructive-foreground;
}
.sn-popup-badge-normal {
@apply border border-border bg-background text-foreground;
}
.sn-popup-help-text {
@apply mt-2 rounded-md border border-border bg-secondary px-4 py-3 text-[1.05rem] text-label;
}
}
/* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
@@ -25,4 +198,4 @@
}
[data-sidebar="menu"] > *:nth-child(2) [data-sidebar="menu-sub"] > li:nth-child(4) {
display: none;
}
}