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

wr: 페이지 내 색상 정의 수정2

Browse Source
This commit is contained in:
mind-one005
2026-06-24 18:16:22 +09:00
parent 2a76c279eb
commit 793c673414
9 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/(popUp-layout)/mapDrgtPopUp/drgtLegend.tsx
+9 -9
View File
@@ -15,34 +15,34 @@ export function DrgtLegend() {
<div className="flex items-center gap-2 w-full">
<span
className="inline-block w-16 h-6"
style={{ backgroundColor: color, border: "1px solid #ccc" }}
style={{ backgroundColor: color, border: "1px solid var(--border)" }}
/>
<span className="text-xl text-gray-900 font-bold">{label}</span>
<span className="text-xl font-bold text-foreground">{label}</span>
</div>
);
}
return (
<div className="bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
<div className="w-[160px] rounded-lg border border-border bg-popover px-4 py-3 text-popover-foreground shadow-lg">
<div className="flex items-center justify-between mx-2 my-4">
<Label className="text-3xl text-gray-900 font-bold">가뭄정보 범례</Label>
<Label className="text-3xl font-bold text-foreground">가뭄정보 범례</Label>
</div>
<div className="mb-3">
<div className="w-full bg-gray-200 rounded-full h-1">
<div className="h-1 w-full rounded-full bg-secondary">
<div className="bg-blue-900 h-1 rounded-full transition-all duration-300 ease-in-out" />
</div>
</div>
<div className="w-[140px] mx-auto flex flex-col items-center">
<div className="bg-blue-900 text-white text-2xl text-center py-1 mb-2 rounded w-full">가 뭄 정 보</div>
<div className="space-y-1 w-full">
<Label className="text-xl text-gray-900 font-bold">관심</Label>
<Label className="text-xl font-bold text-foreground">관심</Label>
<LegendItem color="rgba(222,235,247, 1)" label="1회 미만" /> {/* 관심 - 1회 미만 */}
<LegendItem color="rgba(46, 117, 182, 1)" label="1회 이상" /> {/* 관심 - 1회 이상 */}
<Label className="text-xl text-gray-900 font-bold">주의</Label>
<Label className="text-xl font-bold text-foreground">주의</Label>
<LegendItem color="rgba(255, 242, 204, 1)" label="1회 미만" /> {/* 주의 - 1회 미만 */}
<LegendItem color="rgba(255, 217, 102, 1)" label="1회 이상" /> {/* 주의 - 1회 이상 */}
<Label className="text-xl text-gray-900 font-bold">관심 + 주의</Label>
<Label className="text-xl font-bold text-foreground">관심 + 주의</Label>
<LegendItem color="rgba(251, 229, 214, 1)" label="1회 미만" /> {/* 관심+주의 - 1회 미만 */}
<LegendItem color="rgba(237, 125, 49, 1)" label="1회 이상" /> {/* 관심+주의 - 1회 이상 */}
</div>
@@ -50,4 +50,4 @@ export function DrgtLegend() {
</div>
</div>
);
}
}
apps/wr/app/(popUp-layout)/mapDrgtPopUp/searchBar.tsx
+6 -6
View File
@@ -172,12 +172,12 @@ export function SearchBar({ gisMaps, ctpvCode, sggCode }: CtpvSggPrcsFcltSelectB
return (
<div className="flex items-center gap-4 bg-white min-h-[48px] min-w-[430px] px-5 py-3 rounded-lg shadow">
<div className="flex min-h-[48px] min-w-[430px] items-center gap-4 rounded-lg bg-card px-5 py-3 text-card-foreground shadow">
<div className={`flex items-center justify-center mr-8`}>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
<Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">시도</Label>
<SelectBox
className="w-60 mr-8"
selectClass="rounded-lg bg-white"
selectClass="rounded-lg"
label=""
selectArray={[DEFAULT_OPTION, ...ctpv]}
value={ctpvCd}
@@ -187,10 +187,10 @@ export function SearchBar({ gisMaps, ctpvCode, sggCode }: CtpvSggPrcsFcltSelectB
}}
selectContentClass="z-[101]"
/>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
<Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">시군구</Label>
<SelectBox
className="w-48"
selectClass="w-48 rounded-lg bg-white truncate"
selectClass="w-48 truncate rounded-lg"
label=""
selectArray={
[DEFAULT_OPTION,
@@ -207,4 +207,4 @@ export function SearchBar({ gisMaps, ctpvCode, sggCode }: CtpvSggPrcsFcltSelectB
</div>
</div>
);
}
}
apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx
+1 -1
View File
@@ -94,7 +94,7 @@ export default function MapFeaturePopup() {
return (
<>
{isDetail ? (
<div className="m-0 bg-white p-4 md:p-6 pb-24 box-border">
<div className="box-border m-0 bg-background p-4 pb-24 text-foreground md:p-6">
{layerNm === "tb_wr_bdst_ruse_fclt" ? (
<RuseDetailPopup bscFctCd={isDetail} />
) : layerNm === "tb_il_swage_prcs_fclt" ? (
apps/wr/app/(popUp-layout)/splyPopup/SearchInputText/SearchInputText.tsx
+5 -5
View File
@@ -94,7 +94,7 @@ export default function SearchInputText({
value={textValue || ""}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
className="h-[3.2rem] w-full rounded-md border border-input pl-3 !text-xl text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder={`${label}을(를) 입력하세요`}
onClick={() => {
setTextValue("");
@@ -103,7 +103,7 @@ export default function SearchInputText({
}}
/>
{isOpen && (
<div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
<div className="absolute left-0 top-full z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-lg">
<div className="max-h-72">
{searchList.length > 0 ? (
searchList.map((item, index) => (
@@ -111,8 +111,8 @@ export default function SearchInputText({
key={index}
className={`w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl ${
highlightIndex === index
? "bg-blue-100"
: "hover:bg-gray-100"
? "bg-accent text-accent-foreground"
: "hover:bg-accent hover:text-accent-foreground"
}`}
onClick={() => handleSuggestionClick(item.bscFctNm)}
role="button"
@@ -127,7 +127,7 @@ export default function SearchInputText({
</div>
))
) : (
<div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
<div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl text-muted-foreground hover:bg-accent hover:text-accent-foreground">
검색 결과가 없습니다.
</div>
)}
apps/wr/app/(popUp-layout)/splyPopup/page.tsx
+5 -5
View File
@@ -200,17 +200,17 @@ const Map = () => {
// HTML 또는 React 오버레이 컴포넌트 구성
const overlayContent = `
<div class="rounded-md border border-gray-300 bg-white shadow-md text-sm w-[120px]">
<div class="w-[120px] rounded-md border border-border bg-popover text-sm text-popover-foreground shadow-md">
<!-- 헤더 -->
<div class="bg-cyan-700 text-white px-3 py-2 text-[11px] font-semibold text-center rounded-t-md">
<div class="rounded-t-md bg-primary px-3 py-2 text-center text-[11px] font-semibold text-primary-foreground">
${feature.get("swtrmt_fclt_nm") || "-"}
</div>
<!-- 테이블 -->
<table class="w-full text-sm text-gray-800 border-t border-gray-200">
<table class="w-full border-t border-border text-sm text-foreground">
<tbody>
<tr class="border-b border-gray-200">
<th class="bg-gray-100 text-gray-600 font-semibold text-[10px] text-left">용량(m³/일)</th>
<tr class="border-b border-border">
<th class="bg-secondary text-secondary-foreground font-semibold text-[10px] text-left">용량(m³/일)</th>
<td class="text-right text-[10px] font-bold">${formatNumber(feature.get("fclt_cpct"))}</td>
</tr>
</tbody>
apps/wr/app/(popUp-layout)/splyPopup/searchBar/searchBar.tsx
+5 -5
View File
@@ -60,12 +60,12 @@ export function SearchBar({
return (
<div className="flex justify-center w-full px-4 py-3">
<div className="flex items-center w-full max-w-screen-lg rounded-xl bg-white shadow-md px-6 py-4 space-x-3">
<div className="flex w-full max-w-screen-lg items-center space-x-3 rounded-xl bg-card px-6 py-4 text-card-foreground shadow-md">
<SelectBox
labelClass="w-[40px]"
className="w-[200px]"
label="시도"
selectClass="rounded-lg bg-white"
selectClass="rounded-lg"
selectArray={code.cityCd || []}
onSelectValue={(val) => onSelectValue(val.toString(), "ctpvCd")}
value={sidoValue}
@@ -74,12 +74,12 @@ export function SearchBar({
labelClass="w-[65px]"
className="w-[200px]"
label="시군구"
selectClass="rounded-lg bg-white"
selectClass="rounded-lg"
selectArray={filteredSigunData || []}
onSelectValue={(val) => onSelectValue(val.toString(), "sggCd")}
value={sigunValue}
/>
<Label className="text-gray-600">하수재이용시설</Label>
<Label className="text-label">하수재이용시설</Label>
<SearchInputText
label="시설명"
initValue={undefined}
@@ -101,7 +101,7 @@ export function SearchBar({
/>
<Button
color="sky"
className="ml-2 text-white"
className="ml-2"
size="sm"
onClick={() => {
onApply();
apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
+6 -6
View File
@@ -24,13 +24,13 @@ export default function SelectedFcltList({
};
return (
<div className="fixed right-40 top-[8rem] w-[40rem] max-h-[130rem] overflow-auto bg-white shadow-lg rounded p-4 border border-gray-300 z-50">
<h3 className="bg-cyan-700 text-white text-xl font-bold mb-2 p-2">
<div className="fixed right-40 top-[8rem] z-50 max-h-[130rem] w-[40rem] overflow-auto rounded border border-border bg-popover p-4 text-popover-foreground shadow-lg">
<h3 className="mb-2 bg-primary p-2 text-xl font-bold text-primary-foreground">
선택된 시설
</h3>
<div className="overflow-x-auto">
<table className="w-full text-sm text-gray-800 border border-gray-200">
<thead className="bg-gray-100 text-gray-700 text-[13px]">
<table className="w-full border border-border text-sm text-foreground">
<thead className="bg-secondary text-[13px] text-secondary-foreground">
<tr>
<th className="px-3 py-2 text-left border-b">시설명</th>
<th className="px-3 py-2 text-right border-b">
@@ -60,7 +60,7 @@ export default function SelectedFcltList({
<td className="px-3 py-2 text-center">
<button
onClick={() => handleDelete(item.pbnstRuseFcltId)}
className="text-red-500 hover:text-red-700 text-sm font-bold"
className="text-sm font-bold text-destructive hover:opacity-80"
aria-label="삭제"
title="삭제"
>
@@ -71,7 +71,7 @@ export default function SelectedFcltList({
))
) : (
<tr>
<td colSpan={4} className="px-3 py-6 text-center text-[12px] text-gray-500">
<td colSpan={4} className="px-3 py-6 text-center text-[12px] text-muted-foreground">
선택된 시설이 없습니다.
</td>
</tr>
apps/wr/components/ui/map/wrOverLay/WrOverLayTable/WrOverLayTable.tsx
+3 -3
View File
@@ -11,14 +11,14 @@ export default function WrOverLayTable({overLayData}:{overLayData:any,}){
<TableBody>
{Object.entries(overLayData).map(([key, value]) => (
<TableRow key={key}>
<TableCell className=" w-1/3 bg-slate-100 text-slate-800 font-medium text-sm align-middle border border-slate-300">
<TableCell className="w-1/3 border border-border bg-secondary text-secondary-foreground font-medium text-sm align-middle">
{" "}
{key}{" "}
</TableCell>
<TableCell
className={
"w-1/3 bg-white text-right pr-3 text-sm align-middle border border-slate-300"
"w-1/3 border border-border bg-background pr-3 text-right text-sm align-middle text-foreground"
}
>
{" "}
@@ -30,4 +30,4 @@ export default function WrOverLayTable({overLayData}:{overLayData:any,}){
</Table>
</>
)
}
}
apps/wr/components/ui/map/wrOverLay/wrOverLay.tsx
+7 -7
View File
@@ -43,16 +43,16 @@ export default function WrOverLay({
onDrag={(e, data) => setPos({ x: data.x, y: data.y })}
>
<div ref={dragRef}>
<Card className="w-[320px] p-0 shadow-md rounded-xl overflow-hidden border border-slate-300 relative">
<Card className="relative w-[320px] overflow-hidden rounded-xl border border-border bg-card p-0 text-card-foreground shadow-md">
{/* 헤더: 제목 바 + 우측 정렬 버튼 (절대배치 제거, 타이틀 중앙 정렬 유지) */}
<div className="bg-sky-600 text-white font-semibold py-2 text-xl">
<div className="bg-primary py-2 text-xl font-semibold text-primary-foreground">
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2">
{/* 좌측 스페이서: 우측 버튼과 동일한 너비를 차지하도록 동일 버튼을 투명하게 복제 */}
<div className="opacity-0 pointer-events-none">
<div className="flex gap-2">
<button
onClick={() => setPos({ x: 0, y: 0 })}
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
title="원위치"
>
↺
@@ -62,7 +62,7 @@ export default function WrOverLay({
onClick={() => setOpen(false)}
aria-label="축소"
title="축소"
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
>
–
</button>
@@ -78,7 +78,7 @@ export default function WrOverLay({
<div className="flex gap-2 justify-end">
<button
onClick={() => setPos({ x: 0, y: 0 })}
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
title="원위치"
>
↺
@@ -88,7 +88,7 @@ export default function WrOverLay({
onClick={() => setOpen(false)}
aria-label="축소"
title="축소"
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
>
–
</button>
@@ -110,7 +110,7 @@ export default function WrOverLay({
onClick={() => setOpen(true)}
aria-label="확장"
title={title || "정보 보기"}
className="w-[30px] h-[30px] bg-white font-bold shadow flex items-center justify-center border border-slate-300"
className="flex h-[30px] w-[30px] items-center justify-center border border-border bg-popover font-bold text-popover-foreground shadow"
>
{bubbleLabel}
</button>