From 76a634cf9ac40420735060fc49c3fb94d971ea72 Mon Sep 17 00:00:00 2001 From: ljpark Date: Thu, 25 Jun 2026 14:34:55 +0900 Subject: [PATCH] =?UTF-8?q?fo:=20=ED=85=8C=EB=A7=88=EC=A0=81=EC=9A=A91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/FacilityTermModalHeader.tsx | 8 +- .../common/FacilityTermModalHeaderMonth.tsx | 10 +- .../app/components/common/HeadMakeColSpan.tsx | 32 ++-- apps/fo/app/components/common/SearchInput.tsx | 8 +- .../fo/app/components/common/UnderComment.tsx | 4 +- apps/fo/app/pages/(map-layout)/map/page.tsx | 11 +- .../dashboard/drainageEquipment/page.tsx | 8 +- .../dashboard/facilityInfo/modal/page.tsx | 2 +- .../dashboard/facilityInfo/page.tsx | 52 +++--- .../dashboard/maingraph/page.tsx | 9 +- .../dashboard/rainManage/page.tsx | 2 +- .../facilityPrecipitation/modal/page.tsx | 6 +- .../facilityWaterQlty/HeadMakeColSpan.tsx | 88 +++++----- .../(with-layout)/flowRate/modal/page.tsx | 2 +- .../processArea/HeadMakeColSpan.tsx | 62 +++---- apps/fo/app/pages/map/searchBar/searchBar.tsx | 6 +- .../작업계획/테마적용 작업계획 fo_20260625.md | 164 ++++++++++++++++++ apps/fo/src/app/styles/components-black.css | 14 ++ apps/fo/src/app/styles/components-blue.css | 30 ++-- apps/fo/src/app/styles/components-green.css | 14 ++ apps/fo/src/app/styles/components-red.css | 19 +- apps/fo/src/app/styles/components.css | 75 ++++++++ ...획_20260623.md => 테마적용 작업계획_20260623.md} | 0 .../business_components/src/ui/tab/index.tsx | 22 ++- 24 files changed, 472 insertions(+), 176 deletions(-) create mode 100644 apps/fo/docs/작업계획/테마적용 작업계획 fo_20260625.md rename apps/wr/docs/작업계획/{작업계획_20260623.md => 테마적용 작업계획_20260623.md} (100%) diff --git a/apps/fo/app/components/common/FacilityTermModalHeader.tsx b/apps/fo/app/components/common/FacilityTermModalHeader.tsx index a46b3652d..c8d2bba40 100644 --- a/apps/fo/app/components/common/FacilityTermModalHeader.tsx +++ b/apps/fo/app/components/common/FacilityTermModalHeader.tsx @@ -237,7 +237,7 @@ export default function FacilityTermModalHeader({ onSelectValue={(val) => setFlowPanel(val.toString())} className="mx-3 w-[150px]" label="" - selectClass="w-full p-1 border rounded bg-white" + selectClass="w-full rounded border border-input bg-form p-1" /> @@ -251,7 +251,7 @@ export default function FacilityTermModalHeader({ mode="single" selected={startDate} onSelect={(date) => handleStartDateSelect(date as Date)} - className="w-full p-1 border rounded bg-white" + className="w-full rounded border border-input bg-form p-1 text-foreground" disabled={(date) => !isDateInRanges(date)} defaultMonth={startDate} /> @@ -262,7 +262,7 @@ export default function FacilityTermModalHeader({ mode="single" selected={endDate} onSelect={(date) => handleEndDateSelect(date as Date)} - className="w-full p-1 border rounded bg-white" + className="w-full rounded border border-input bg-form p-1 text-foreground" disabled={(date) => !isDateInRanges(date)} defaultMonth={endDate} /> @@ -275,4 +275,4 @@ export default function FacilityTermModalHeader({ ); -} \ No newline at end of file +} diff --git a/apps/fo/app/components/common/FacilityTermModalHeaderMonth.tsx b/apps/fo/app/components/common/FacilityTermModalHeaderMonth.tsx index a284d04cf..07c4a3f01 100644 --- a/apps/fo/app/components/common/FacilityTermModalHeaderMonth.tsx +++ b/apps/fo/app/components/common/FacilityTermModalHeaderMonth.tsx @@ -219,7 +219,7 @@ export default function FacilityTermModalHeaderMonth -
+
@@ -237,7 +237,7 @@ export default function FacilityTermModalHeaderMonth setFlowPanel(val.toString())} className="mx-3 w-[150px]" label="" - selectClass="w-full p-1 border rounded bg-white" + selectClass="w-full rounded border border-input bg-form p-1" /> @@ -251,7 +251,7 @@ export default function FacilityTermModalHeaderMonth handleStartDateSelect(date as Date)} - className="w-full p-1 border rounded bg-white" + className="w-full rounded border border-input bg-form p-1 text-foreground" defaultMonth={startDate} /> @@ -261,7 +261,7 @@ export default function FacilityTermModalHeaderMonth handleEndDateSelect(date as Date)} - className="w-full p-1 border rounded bg-white" + className="w-full rounded border border-input bg-form p-1 text-foreground" defaultMonth={endDate} /> @@ -273,4 +273,4 @@ export default function FacilityTermModalHeaderMonth ); -} \ No newline at end of file +} diff --git a/apps/fo/app/components/common/HeadMakeColSpan.tsx b/apps/fo/app/components/common/HeadMakeColSpan.tsx index 06617839a..43476204f 100644 --- a/apps/fo/app/components/common/HeadMakeColSpan.tsx +++ b/apps/fo/app/components/common/HeadMakeColSpan.tsx @@ -5,55 +5,55 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp return ( layoutNum === 'A' ? ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'trtFrfNm' ? {head.title} : head.id === 'laeNm' ? {head.title} : head.id == 'fctCpc' || head.id == 'planInputWaterQlty' || head.id == 'designInputWaterQlty' ? {head.title} : head.id === 'trstOprEtpNm' ? {head.title} : - head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'행정구역'} : - !head.upName ? {head.title} : null))} + head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'행정구역'} : + !head.upName ? {head.title} : null))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe') { - return {head.title}; + return {head.title}; } })} ) : layoutNum === 'R' ? ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'trtFrfNm' ? {head.title} : head.id === 'laeNm' ? {head.title} : head.id == 'fctCpc' || head.id == 'planInputWaterQlty' || head.id == 'designInputWaterQlty' ? {head.title} : head.id === 'trstOprEtpNm' ? {head.title} : - head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'유역'} : - !head.upName ? {head.title} : null))} + head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'유역'} : + !head.upName ? {head.title} : null))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe') { - return {head.title}; + return {head.title}; } })} ) : ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'trtFrfNm' ? {head.title} : head.id === 'laeNm' ? {head.title} : head.id == 'fctCpc' || head.id == 'planInputWaterQlty' || head.id == 'designInputWaterQlty' ? {head.title} : head.id === 'trstOprEtpNm' ? {head.title} : - head.upName === 'upChangeRe1' && head.upSequnce === 1 ? {'권역'} : - head.upName === 'upChangeRe2' && head.upSequnce === 1 ? {'행정구역'} : - !head.upName ? {head.title} : null))} + head.upName === 'upChangeRe1' && head.upSequnce === 1 ? {'권역'} : + head.upName === 'upChangeRe2' && head.upSequnce === 1 ? {'행정구역'} : + !head.upName ? {head.title} : null))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2') { - return {head.title}; + return {head.title}; } })} diff --git a/apps/fo/app/components/common/SearchInput.tsx b/apps/fo/app/components/common/SearchInput.tsx index 7e2ef522e..e8ab2a567 100644 --- a/apps/fo/app/components/common/SearchInput.tsx +++ b/apps/fo/app/components/common/SearchInput.tsx @@ -99,22 +99,22 @@ export default function SearchInputText({label=undefined, setValue=()=>{}, sidoS return (
- {label && } + {label && } {isOpen && processFacilityList.length > 0 && ( -
+
{processFacilityList.map((item : facilityListProps, index : number) => (
handleSuggestionClick(item.bscFctCd, item.bscFctNm, Number(item.fctCpc), item.trtFrfNm, item.efflWqltStndrdNm)} role="button" tabIndex={0} diff --git a/apps/fo/app/components/common/UnderComment.tsx b/apps/fo/app/components/common/UnderComment.tsx index 898eb861e..eda31e81a 100644 --- a/apps/fo/app/components/common/UnderComment.tsx +++ b/apps/fo/app/components/common/UnderComment.tsx @@ -17,7 +17,7 @@ function UnderComment({commentStartPoint="☞", commentArray=[], divHeight="14"}
{commentArray.map((item, index) => ( - + {commentStartPoint} {item}
@@ -28,4 +28,4 @@ function UnderComment({commentStartPoint="☞", commentArray=[], divHeight="14"} } } -export default UnderComment; \ No newline at end of file +export default UnderComment; diff --git a/apps/fo/app/pages/(map-layout)/map/page.tsx b/apps/fo/app/pages/(map-layout)/map/page.tsx index 4fa553c97..09e8f969f 100644 --- a/apps/fo/app/pages/(map-layout)/map/page.tsx +++ b/apps/fo/app/pages/(map-layout)/map/page.tsx @@ -127,15 +127,18 @@ const Map = () => { } const el = overlayContainerRef.current; el.className = - "ol-custom-overlay shadow-xl rounded-2xl bg-white/95 backdrop-blur p-3 border border-gray-200 min-w-[220px] max-w-[350px] "; + "ol-custom-overlay shadow-xl rounded-2xl backdrop-blur p-3 min-w-[220px] max-w-[350px]"; + el.style.backgroundColor = "color-mix(in srgb, var(--popover) 95%, transparent)"; + el.style.color = "var(--popover-foreground)"; + el.style.border = "1px solid var(--border)"; el.innerHTML = ` -
${title}
-
+
${title}
+
${Object.entries(props) .map( ([k, v]) => ` - + ` ) diff --git a/apps/fo/app/pages/(with-layout)/dashboard/drainageEquipment/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/drainageEquipment/page.tsx index fb59cfc13..3b670f651 100644 --- a/apps/fo/app/pages/(with-layout)/dashboard/drainageEquipment/page.tsx +++ b/apps/fo/app/pages/(with-layout)/dashboard/drainageEquipment/page.tsx @@ -54,23 +54,23 @@ export default function DrainageEquipment({searchYear = '', fcltyList = []}: Dra const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => { return ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'part1' ? 구분 : head.id === 'part2' ? 구분 : head.id == 'nowSum' ? {'현재\n(기준년도)'} : head.id == 'stepOneSum' ? {'변경(금회계획)'} : head.id == 'etc' ? 비고 : null))} - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'stepOneSum' ? 1단계 : head.id === 'stepTwoSum' ? 2단계 : head.id === 'stepThreeSum' ? 3단계 : head.id === 'stepFourSum' ? 4단계 : null))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe2' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4' || head.upName === 'upChangeRe5' || head.upName === 'upChangeRe6') { - return {head.title}; + return {head.title}; } })} diff --git a/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/modal/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/modal/page.tsx index 850d52528..d08a5f78b 100644 --- a/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/modal/page.tsx +++ b/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/modal/page.tsx @@ -147,7 +147,7 @@ export default function DashBoardChartModal({item='', period='', title='',modalD if (label) { config[label] = { label: label, - color : "hsl(var(--chart-1))" + color : "var(--chart-1)" }; } return config; diff --git a/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx index d4cfb7bab..ac33ffe28 100644 --- a/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx +++ b/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx @@ -32,12 +32,12 @@ const headMakeColSpanPlanFclty = (upHeadList: TableUpperProps[], planYearList: s return ( <> { upHeadList.map((head: TableUpperProps) => - (!head.upSequnce?{head.title}: - head.upName === 'upChangeRe'&& head.upSequnce=== 1?{'시설계획\n(금회)'}:null))} + (!head.upSequnce?{head.title}: + head.upName === 'upChangeRe'&& head.upSequnce=== 1?{'시설계획\n(금회)'}:null))} {upHeadList.map((head: TableUpperProps, index: number) => - (head.upName === 'upChangeRe'?{index===0?head.title:head.title+'\n('+planYearList[index-1]+')'}:null))} + (head.upName === 'upChangeRe'?{index===0?head.title:head.title+'\n('+planYearList[index-1]+')'}:null))} ) } @@ -52,20 +52,20 @@ const headMakeColSpanPlanFclty = (upHeadList: TableUpperProps[], planYearList: s const headMakeColSpanOperationStatus = (upHeadList: TableUpperProps[], searchYear: string) => { return ( <> - {searchYear+'년도 운영실태'} + {searchYear+'년도 운영실태'} { upHeadList.map((head: TableUpperProps) => - (head.upName === 'upChangeRe1'&&head.upSequnce===1?{head.title}: - !head.upSequnce?{head.title}: - head.upName === 'upChangeRe2'&&head.upSequnce===1?{'연간 운영실태'}: - head.upName === 'upChangeRe3'&&head.upSequnce===1?{'하절기 운영실태\n(6~8월)'}: - head.upName === 'upChangeRe4'&&head.upSequnce===1?{'동절기 운영실태\n(1~2월)'}: - head.upName === 'upChangeRe5'&&head.upSequnce===1?{'지하수 유입량 추정'}:null))} + (head.upName === 'upChangeRe1'&&head.upSequnce===1?{head.title}: + !head.upSequnce?{head.title}: + head.upName === 'upChangeRe2'&&head.upSequnce===1?{'연간 운영실태'}: + head.upName === 'upChangeRe3'&&head.upSequnce===1?{'하절기 운영실태\n(6~8월)'}: + head.upName === 'upChangeRe4'&&head.upSequnce===1?{'동절기 운영실태\n(1~2월)'}: + head.upName === 'upChangeRe5'&&head.upSequnce===1?{'지하수 유입량 추정'}:null))} {upHeadList.map((head: TableUpperProps) => - (head.upName === 'upChangeRe2'||head.upName === 'upChangeRe3'||head.upName === 'upChangeRe4'||head.upName === 'upChangeRe5'?{head.title}:null))} + (head.upName === 'upChangeRe2'||head.upName === 'upChangeRe3'||head.upName === 'upChangeRe4'||head.upName === 'upChangeRe5'?{head.title}:null))} ) } @@ -226,7 +226,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
-
${k}${k} ${safe(v)}
+
{upChangeRePlanFclty} @@ -239,18 +239,18 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}: :((index === 6 || index === 7 || index === 8) && (head.id === 'now' || head.id === 'stepOne' || head.id === 'stepThree' || head.id === 'stepFour'))? null :((index === 5) && (head.id === 'provisionalApproval' || head.id === 'stepTwo'))? - {el[head.id]} + {el[head.id]} :((index === 5) && (head.id === 'now' || head.id === 'stepOne' || head.id === 'stepThree'|| head.id === 'stepFour'))? null :(index < 5 || index > 5)&& (index!= 4) && (head.id ==='provisionalApproval'||head.id ==='now'||head.id ==='stepOne'||head.id ==='stepTwo'||head.id ==='stepThree'||head.id ==='stepFour') ?{el[head.id]} :(head.id === "provisionalApproval" && index === 4) - ?{roundNumber(String((Number(waterUsage1)+Number(waterUsage2)+Number(waterUsage3))/3), 0)} + ?{roundNumber(String((Number(waterUsage1)+Number(waterUsage2)+Number(waterUsage3))/3), 0)} :((head.id ==='now'||head.id ==='stepOne'||head.id ==='stepTwo'||head.id ==='stepThree'||head.id ==='stepFour') ) ?null :(head.id === 'item' && index != 5)? - {el[head.id]} - :{el[head.id]} + {el[head.id]} + :{el[head.id]} ))} ))} @@ -260,7 +260,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
-
+
{upChangeHeadListOperationStatus} @@ -278,15 +278,15 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}: (head.id === 'rdiRain'&&index === 0)?{el['rdiRain']}: (head.id === 'rdiRain'&&index === 7)?: (head.id === 'waterQlty')?{el[head.id]}: - ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=0 && index<=4))?{fncLoadModal('flowRate', 'year', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=5 && index<=10))?{fncLoadModal('waterQlty', 'year', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=11 && index<=12))?{fncLoadModal('chongin', 'year', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=0 && index<=4))?{fncLoadModal('flowRate', 'summer', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=5 && index<=10))?{fncLoadModal('waterQlty', 'summer', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=11 && index<=12))?{fncLoadModal('chongin', 'summer', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=0 && index<=4))?{fncLoadModal('flowRate', 'winter', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=5 && index<=10))?{fncLoadModal('waterQlty', 'winter', el['waterQlty'] as string);}}>{el[head.id]}: - ((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=11 && index<=12))?{fncLoadModal('chongin', 'winter', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=0 && index<=4))?{fncLoadModal('flowRate', 'year', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=5 && index<=10))?{fncLoadModal('waterQlty', 'year', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=11 && index<=12))?{fncLoadModal('chongin', 'year', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=0 && index<=4))?{fncLoadModal('flowRate', 'summer', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=5 && index<=10))?{fncLoadModal('waterQlty', 'summer', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=11 && index<=12))?{fncLoadModal('chongin', 'summer', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=0 && index<=4))?{fncLoadModal('flowRate', 'winter', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=5 && index<=10))?{fncLoadModal('waterQlty', 'winter', el['waterQlty'] as string);}}>{el[head.id]}: + ((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=11 && index<=12))?{fncLoadModal('chongin', 'winter', el['waterQlty'] as string);}}>{el[head.id]}: null ))} diff --git a/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx index 8eddbd098..595fe89e1 100644 --- a/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx +++ b/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx @@ -60,7 +60,14 @@ export default function DashBoardChart({searchYear = '', fcltyList = []}: facili /** * 차트 Config */ - const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#00b50c", "#D4A5A5"]; + const colors = [ + "var(--chart-5)", + "var(--chart-2)", + "var(--chart-1)", + "var(--chart-3)", + "var(--primary)", + "var(--chart-6)", + ]; //유입하수량-강수량 const chartConfig_inflowRain = { diff --git a/apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx index 55e6275c8..33f1d298b 100644 --- a/apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx +++ b/apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx @@ -50,7 +50,7 @@ export default function RainManageTab({ searchYear = '', fcltyList = [] }: facil widthFixed={true} > - ☞ 일수에 강우영향일 포함됨 + ☞ 일수에 강우영향일 포함됨 ) } diff --git a/apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx b/apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx index 811f1c0ff..392deb858 100644 --- a/apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx +++ b/apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx @@ -198,7 +198,7 @@ export default function PrecipitationModal(props: PrecipitationModalProps) { mode="single" selected={startDate} onSelect={(date) => handleStartDateSelect(date as Date)} - className="w-full p-1 border rounded bg-white" + className="w-full rounded border border-input bg-form p-1 text-foreground" disabled={(date) => !isDateInRanges(date)} defaultMonth={startDate} /> @@ -209,7 +209,7 @@ export default function PrecipitationModal(props: PrecipitationModalProps) { mode="single" selected={endDate} onSelect={(date) => handleEndDateSelect(date as Date)} - className="w-full p-1 border rounded bg-white" + className="w-full rounded border border-input bg-form p-1 text-foreground" disabled={(date) => !isDateInRanges(date)} defaultMonth={endDate} /> @@ -239,4 +239,4 @@ export default function PrecipitationModal(props: PrecipitationModalProps) { ); -} \ No newline at end of file +} diff --git a/apps/fo/app/pages/(with-layout)/facilityWaterQlty/HeadMakeColSpan.tsx b/apps/fo/app/pages/(with-layout)/facilityWaterQlty/HeadMakeColSpan.tsx index aa1e36abd..472c13e6a 100644 --- a/apps/fo/app/pages/(with-layout)/facilityWaterQlty/HeadMakeColSpan.tsx +++ b/apps/fo/app/pages/(with-layout)/facilityWaterQlty/HeadMakeColSpan.tsx @@ -17,27 +17,27 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp return ( layoutNum === 0 ? ( <> - + {upHeadList.map((head: TableUpperProps) => { if(!head.upName) { - return {head.title} + return {head.title} }else if(head.upName==="upChangeRe1"&&head.upSequnce===1) { - return 행정구역 + return 행정구역 }else if(head.upName==="upChangeRe3"&&head.upSequnce===1) { - return 유입 + return 유입 }else if(head.upName==="upChangeRe4"&&head.upSequnce===1) { - return 유출 + return 유출 } })} - + {upHeadList.map((head: TableUpperProps, idx: number) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4') { if (idx == 1 || idx == 2 || idx == 3) { - return {head.title}; + return {head.title}; } else { - return {head.title}; + return {head.title}; } } })} @@ -45,27 +45,27 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp ) : layoutNum === 1 ? ( <> - + {upHeadList.map((head: TableUpperProps) => { if(!head.upName) { - return {head.title} + return {head.title} }else if(head.upName==="upChangeRe1"&&head.upSequnce===1) { - return 권역 + return 권역 }else if(head.upName==="upChangeRe3"&&head.upSequnce===1) { - return 유입 + return 유입 }else if(head.upName==="upChangeRe4"&&head.upSequnce===1) { - return 유출 + return 유출 } })} - + {upHeadList.map((head: TableUpperProps, idx: number) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4') { if (idx == 1 || idx == 2 || idx == 3) { - return {head.title}; + return {head.title}; } else { - return {head.title}; + return {head.title}; } } })} @@ -73,29 +73,29 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp ) : layoutNum === 2 ? ( <> - + {upHeadList.map((head: TableUpperProps) => { if(!head.upName) { - return {head.title} + return {head.title} }else if(head.upName==="upChangeRe1"&&head.upSequnce===1) { - return 권역 + return 권역 }else if(head.upName==="upChangeRe2"&&head.upSequnce===1) { - return 행정구역 + return 행정구역 }else if(head.upName==="upChangeRe3"&&head.upSequnce===1) { - return 유입 + return 유입 }else if(head.upName==="upChangeRe4"&&head.upSequnce===1) { - return 유출 + return 유출 } })} - + {upHeadList.map((head: TableUpperProps, idx: number) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4') { if (idx == 1 || idx == 2 || idx == 3) { - return {head.title}; + return {head.title}; } else { - return {head.title}; + return {head.title}; } } })} @@ -103,25 +103,25 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp ) : layoutNum === 3 ? ( <> - + {upHeadList.map((head: TableUpperProps) => { if(!head.upName) { - return {head.title} + return {head.title} }else if(head.upName==="upChangeRe1"&&head.upSequnce===1) { - return 유입 + return 유입 }else if(head.upName==="upChangeRe2"&&head.upSequnce===1) { - return 방류 + return 방류 } })} - + {upHeadList.map((head: TableUpperProps, idx: number) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2') { if (idx == 1 || idx == 2 || idx == 3) { - return {head.title}; + return {head.title}; } else { - return {head.title}; + return {head.title}; } } })} @@ -129,23 +129,23 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp ) : layoutNum === 4 ? ( <> - + {upHeadList.map((head: TableUpperProps) => { if(!head.upName) { - return {head.title} + return {head.title} }else if(head.upName==="upChangeRe"&&head.upSequnce===1) { - return 방류 + return 방류 } })} - + {upHeadList.map((head: TableUpperProps, idx: number) => { if (head.upName === 'upChangeRe') { if (idx == 1 || idx == 2 || idx == 3) { - return {head.title}; + return {head.title}; } else { - return {head.title}; + return {head.title}; } } })} @@ -153,21 +153,21 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp ) : layoutNum === 5 ? ( // 총인설비 수질현황 헤더 <> - + {upHeadList.map((head: TableUpperProps) => { if(!head.upName) { - return {head.title} + return {head.title} }else if(head.upName==="upChangeRe1" && head.upSequnce===1) { - return 유입 + return 유입 }else if(head.upName==="upChangeRe2" && head.upSequnce===1) { - return 방류 + return 방류 } })} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2') { - return {head.title}; + return {head.title}; } })} diff --git a/apps/fo/app/pages/(with-layout)/flowRate/modal/page.tsx b/apps/fo/app/pages/(with-layout)/flowRate/modal/page.tsx index 0cffa775e..ecf09d7da 100644 --- a/apps/fo/app/pages/(with-layout)/flowRate/modal/page.tsx +++ b/apps/fo/app/pages/(with-layout)/flowRate/modal/page.tsx @@ -237,7 +237,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st const raw = row.infoRnDay; const value = typeof raw === "string" ? Number(raw.replace(/,/g, "").trim()) : Number(raw); if (!Number.isFinite(value)) return ""; - return value > 3 ? "bg-slate-50" : ""; + return value > 3 ? "fo-rain-impact-row" : ""; }, [activeTab], ); diff --git a/apps/fo/app/pages/(with-layout)/processArea/HeadMakeColSpan.tsx b/apps/fo/app/pages/(with-layout)/processArea/HeadMakeColSpan.tsx index 4045ed7b2..89829445e 100644 --- a/apps/fo/app/pages/(with-layout)/processArea/HeadMakeColSpan.tsx +++ b/apps/fo/app/pages/(with-layout)/processArea/HeadMakeColSpan.tsx @@ -5,77 +5,77 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp return ( layoutNum === 0 ? ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'trtFrfNm' ? {head.title} : head.id === 'laeNm' ? {head.title} : head.id == 'fctCpc' || head.id == 'planInputWaterQlty' || head.id == 'designInputWaterQlty' ? {head.title} : head.id === 'trstOprEtpNm' ? {head.title} : - head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'행정구역'} : - head.upName === 'upChangeRe3' && head.upSequnce === 1 ? {'증설계획'} : - head.upName === 'upChangeRe4' && head.upSequnce === 1 ? {'시설계획'} : - !head.upName ? {head.title} : null))} + head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'행정구역'} : + head.upName === 'upChangeRe3' && head.upSequnce === 1 ? {'증설계획'} : + head.upName === 'upChangeRe4' && head.upSequnce === 1 ? {'시설계획'} : + !head.upName ? {head.title} : null))} - + {upHeadList.map((head: TableUpperProps) => ( - head.upName === 'upChangeRe4' && head.upSequnce === 1 ? {'증설계획(m³/일)'} : - head.upName === 'upChangeRe5' && head.upSequnce === 1 ? {'처리인구(인)'} : - head.upName === 'upChangeRe6' && head.upSequnce === 1 ? {'처리구역(k㎡)'} : + head.upName === 'upChangeRe4' && head.upSequnce === 1 ? {'증설계획(m³/일)'} : + head.upName === 'upChangeRe5' && head.upSequnce === 1 ? {'처리인구(인)'} : + head.upName === 'upChangeRe6' && head.upSequnce === 1 ? {'처리구역(k㎡)'} : null ))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe' || head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4' || head.upName === 'upChangeRe5' || head.upName === 'upChangeRe6') { - return {head.title}; + return {head.title}; } })} ) : layoutNum === 1 ? ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'trtFrfNm' ? {head.title} : head.id === 'laeNm' ? {head.title} : head.id == 'fctCpc' || head.id == 'planInputWaterQlty' || head.id == 'designInputWaterQlty' ? {head.title} : head.id === 'trstOprEtpNm' ? {head.title} : - head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'유역'} : - head.upName === 'upChangeRe3' && head.upSequnce === 1 ? {'증설계획'} : - !head.upName ? {head.title} : null))} + head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'유역'} : + head.upName === 'upChangeRe3' && head.upSequnce === 1 ? {'증설계획'} : + !head.upName ? {head.title} : null))} - + {upHeadList.map((head: TableUpperProps) => ( - head.upName === 'upChangeRe4' && head.upSequnce === 1 ? {'증설계획(m³/일)'} : - head.upName === 'upChangeRe5' && head.upSequnce === 1 ? {'처리인구(인)'} : - head.upName === 'upChangeRe6' && head.upSequnce === 1 ? {'처리구역(k㎡)'} : + head.upName === 'upChangeRe4' && head.upSequnce === 1 ? {'증설계획(m³/일)'} : + head.upName === 'upChangeRe5' && head.upSequnce === 1 ? {'처리인구(인)'} : + head.upName === 'upChangeRe6' && head.upSequnce === 1 ? {'처리구역(k㎡)'} : null ))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe' || head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4' || head.upName === 'upChangeRe5' || head.upName === 'upChangeRe6') { - return {head.title}; + return {head.title}; } })} ) : ( <> - {upHeadList.map((head: TableUpperProps) => + {upHeadList.map((head: TableUpperProps) => (head.id === 'trtFrfNm' ? {head.title} : head.id === 'laeNm' ? {head.title} : head.id == 'fctCpc' || head.id == 'planInputWaterQlty' || head.id == 'designInputWaterQlty' ? {head.title} : head.id === 'trstOprEtpNm' ? {head.title} : - head.upName === 'upChangeRe1' && head.upSequnce === 1 ? {'권역'} : - head.upName === 'upChangeRe2' && head.upSequnce === 1 ? {'환경청'} : - head.upName === 'upChangeRe3' && head.upSequnce === 1 ? {'증설계획(m³/일)'} : - head.upName === 'upChangeRe5' && head.upSequnce === 1 ? {'처리인구(인)'} : - head.upName === 'upChangeRe6' && head.upSequnce === 1 ? {'처리구역(k㎡)'} : - !head.upName ? {head.title} : null))} + head.upName === 'upChangeRe1' && head.upSequnce === 1 ? {'권역'} : + head.upName === 'upChangeRe2' && head.upSequnce === 1 ? {'환경청'} : + head.upName === 'upChangeRe3' && head.upSequnce === 1 ? {'증설계획(m³/일)'} : + head.upName === 'upChangeRe5' && head.upSequnce === 1 ? {'처리인구(인)'} : + head.upName === 'upChangeRe6' && head.upSequnce === 1 ? {'처리구역(k㎡)'} : + !head.upName ? {head.title} : null))} - + {upHeadList.map((head: TableUpperProps) => { if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2' ||head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4' || head.upName === 'upChangeRe5' || head.upName === 'upChangeRe6') { - return {head.title}; + return {head.title}; } })} @@ -84,4 +84,4 @@ const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProp ); } -export { HeadMakeColSpan }; \ No newline at end of file +export { HeadMakeColSpan }; diff --git a/apps/fo/app/pages/map/searchBar/searchBar.tsx b/apps/fo/app/pages/map/searchBar/searchBar.tsx index 0b1315465..b4981bfbd 100644 --- a/apps/fo/app/pages/map/searchBar/searchBar.tsx +++ b/apps/fo/app/pages/map/searchBar/searchBar.tsx @@ -116,7 +116,7 @@ export function SearchBar({ onFeatureSelect, gisMaps }: SearchBarProps) { onSelectValue(val.toString(), "ctpvCd")} @@ -125,7 +125,7 @@ export function SearchBar({ onFeatureSelect, gisMaps }: SearchBarProps) { onSelectValue(val.toString(), "sggCd")} @@ -134,7 +134,7 @@ export function SearchBar({ onFeatureSelect, gisMaps }: SearchBarProps) { onSelectValue(val.toString(), "fcltCd")} diff --git a/apps/fo/docs/작업계획/테마적용 작업계획 fo_20260625.md b/apps/fo/docs/작업계획/테마적용 작업계획 fo_20260625.md new file mode 100644 index 000000000..f1486a67d --- /dev/null +++ b/apps/fo/docs/작업계획/테마적용 작업계획 fo_20260625.md @@ -0,0 +1,164 @@ +# apps/fo 테마 적용 작업계획 + +작성일: 2026-06-25 +대상 앱: `D:\iipbs\frontend\apps\fo` + +## 1. 목적 + +- `apps/fo` 프로그램 페이지 내부에 직접 박혀 있는 색상 하드코딩을 식별한다. +- 가능한 범위는 `packages/common/assets/src/styles/base.css`의 CSS 변수 영향권으로 옮긴다. +- 즉 `bg-white`, `text-gray-*`, `border-gray-*`, `bg-blue-*`, `bg-green-*`, `bg-red-*` 같은 직접 색상 표현을 `background`, `foreground`, `label`, `border`, `secondary`, `accent`, `primary`, `destructive` 계열 토큰으로 치환한다. + +## 2. 전제 + +- `apps/fo`는 [tailwind.config.ts](D:/iipbs/frontend/apps/fo/tailwind.config.ts:1)에서 공통 preset을 사용한다. +- 공통 토큰은 [packages/common/assets/src/styles/base.css](D:/iipbs/frontend/packages/common/assets/src/styles/base.css:1)에 정의되어 있다. +- `packages/common/components`, `packages/common/assets`는 기준 레이어이며, 앱 작업은 이 기준을 따르는 방향으로 진행한다. +- 단, 이번 요청의 1차 목표는 `apps/fo` 내부 코드에 박혀 있는 색상을 줄이는 것이다. + +## 3. 확인된 하드코딩 유형 + +현재 `apps/fo`에서 확인된 대표 패턴은 아래와 같다. + +- 검색 입력/선택 UI + - `apps/fo/app/components/common/SearchInput.tsx` + - `apps/fo/app/pages/map/searchBar/searchBar.tsx` + - `apps/fo/app/components/common/FacilityTermModalHeader.tsx` + - `apps/fo/app/components/common/FacilityTermModalHeaderMonth.tsx` +- 대시보드/안내문구 + - `apps/fo/app/components/common/UnderComment.tsx` + - `apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx` +- 대시보드 표 셀 상태색 + - `apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx` + 이 페이지는 특별한 페이지로, 연간, 하절기, 동절기 색을 구분하여 보여주어야 한다. 따라서 text-foreground 가 보이도록 하되 연간, 하절기, 동절기 색을 apps\fo\src\app\styles 아래 테마별 css에 정의해서 보여주어야 한다. +- 지도 오버레이/팝업 + - `apps/fo/app/pages/(map-layout)/map/page.tsx` +- 테스트/샘플성 버튼 + - `apps/fo/app/pages/(with-layout)/test/page.tsx` +- 모달 입력창 + - `apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx` + +## 4. 기본 원칙 + +### 4.1 바로 토큰 치환 가능한 경우 + +아래는 우선 토큰으로 바로 바꾼다. + +- `bg-white` -> `bg-background` 또는 `bg-card` 또는 `bg-popover` +- `text-gray-900`, `text-gray-800` -> `text-foreground` +- `text-gray-700`, `text-gray-600` -> `text-label` 또는 `text-foreground` +- `text-gray-500` -> `text-muted-foreground` 또는 `text-placeholder` +- `border-gray-200`, `border-gray-300` -> `border-border` +- `focus:ring-blue-500` -> `focus:ring-ring` +- `text-blue-500`, `text-blue-600` -> `text-primary` +- `bg-blue-500`, `bg-blue-600` -> `bg-primary` +- `text-red-500`, `text-red-600` -> `text-destructive` +- `bg-red-50` 등 경고 계열 -> `bg-accent` 또는 별도 위험 상태 규칙 검토 + +### 4.2 바로 토큰 치환하면 안 되는 경우 + +아래는 의미색일 가능성이 높아 바로 토큰화하지 않는다. + +- 범례 색상 +- 데이터 구분용 heatmap/구간 색상 +- 수질/계절/유형별 비교 색상 +- 지도 오버레이에서 정보 카테고리 의미를 나타내는 색 + +이 경우는 다음 중 하나로 처리한다. + +- 유지 +- 별도 의미 클래스 부여 +- 앱 전용 CSS로 상태 클래스를 만든 뒤 theme-safe surface만 토큰화 + +## 5. 우선순위 + +### 5.1 1순위: 일반 UI surface + +가장 먼저 처리한다. + +- 검색 입력창 배경/보더/텍스트 +- 검색 결과 dropdown 배경/hover +- 팝업/모달 wrapper 배경/보더 +- 제목/라벨/안내문구 색 +- 버튼의 직접 blue/red/white 색상 + +이 영역은 theme 적용 체감이 가장 크고, 토큰 치환도 안전하다. + +### 5.2 2순위: 테이블/리스트 + +- `selectedFcltList` +- `facilityInfo` +- modal 내부 표 +- overlay 내 표 구조 + +이 영역은 `bg-secondary`, `bg-accent`, `text-secondary-foreground`, `border-border` 계열로 정리한다. + +### 5.3 3순위: 의미색 데이터 표현 + +- `facilityInfo`의 계절/항목별 `bg-green-*`, `bg-blue-*` +- 지도 범례 색상 +- 지도 feature overlay 강조색 +- 대시보드 표 셀 상태색 + - `apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx` + 이 페이지는 특별한 페이지로, 연간, 하절기, 동절기 색을 구분하여 보여주어야 한다. 따라서 text-foreground 가 보이도록 하되 연간, 하절기, 동절기 색을 apps\fo\src\app\styles 아래 테마별 css에 정의해서 보여주어야 한다. + +이 영역은 “없애는 것”보다 “역할을 분리하는 것”이 중요하다. + +## 6. 실제 작업 순서 + +1. `apps/fo` 내부 하드코딩 색상 파일 목록 확정 +2. 공통 UI와 데이터 의미색을 분리 +3. 일반 UI 색상부터 `base.css` 토큰으로 치환 +4. 필요 시 `apps/fo/app/styles/*.css`에 앱 전용 의미 클래스 추가 +5. `dashboard`, `map`, `modal`, `search` 대표 화면 점검 +6. 남은 의미색 영역은 별도 상태색 정책으로 정리 + +## 7. 권장 치환 전략 + +### 7.1 JSX 안에서 바로 치환 + +아래처럼 className을 직접 토큰 기반으로 변경한다. + +- `bg-white` -> `bg-background` +- `text-gray-600` -> `text-label` +- `border-gray-300` -> `border-border` + +이 방식은 빠르지만 반복이 많으면 유지보수성이 떨어진다. + +### 7.2 반복되는 UI는 앱 전용 클래스 도입 + +예: + +- `fo-search-panel` +- `fo-search-input` +- `fo-popup-card` +- `fo-empty-text` + +반복되는 구조는 `apps/fo/app/styles/components*.css`에 올리고, JSX에서는 의미 클래스만 사용한다. + +이 방식이 장기적으로 더 좋다. + +## 8. 예상 주의사항 + +- `h-90` 같은 Tailwind v3 미지원 클래스가 섞여 있을 수 있다. +- `bg-white`를 `bg-background`로 바꾸면 black theme에서 contrast가 크게 달라질 수 있으므로 텍스트 색도 같이 바꿔야 한다. +- `bg-blue-*`, `bg-green-*`는 실제 status color인지 단순 강조색인지 구분하고 바꿔야 한다. +- 지도 오버레이는 HTML string으로 만드는 부분이 있으면 className 치환만으로 끝나지 않을 수 있다. + +## 9. 1차 적용 추천 대상 + +우선 아래 파일부터 적용하는 것이 효율적이다. + +1. `apps/fo/app/components/common/SearchInput.tsx` +2. `apps/fo/app/pages/map/searchBar/searchBar.tsx` +3. `apps/fo/app/components/common/UnderComment.tsx` +4. `apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx` +5. `apps/fo/app/components/common/FacilityTermModalHeader.tsx` +6. `apps/fo/app/components/common/FacilityTermModalHeaderMonth.tsx` +7. `apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx` + +## 10. 결론 + +- `apps/fo`도 `apps/wr`와 동일하게 `base.css` 토큰 중심으로 정리 가능하다. +- 1차는 일반 UI 하드코딩 제거에 집중하고, 데이터 의미색은 유지 또는 별도 정책으로 분리하는 것이 맞다. +- 가장 안전한 방향은 “반복 UI는 앱 전용 의미 클래스”, “일회성은 JSX에서 직접 토큰 치환”의 혼합 방식이다. diff --git a/apps/fo/src/app/styles/components-black.css b/apps/fo/src/app/styles/components-black.css index 4dc30bafd..9d2916269 100644 --- a/apps/fo/src/app/styles/components-black.css +++ b/apps/fo/src/app/styles/components-black.css @@ -15,6 +15,20 @@ } [data-theme="black"] { + --fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 20%, var(--secondary)); + --fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 20%, var(--secondary)); + --fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 20%, var(--secondary)); + --fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 28%, var(--secondary)); + --fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 28%, var(--secondary)); + --fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 28%, var(--secondary)); + --fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 36%, var(--secondary)); + --fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 36%, var(--secondary)); + --fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 36%, var(--secondary)); + --fo-rain-impact-row-bg: color-mix(in srgb, var(--chart-1) 16%, var(--secondary)); + --fo-facility-info-header-bg: #5e7b9c; + --fo-facility-info-header-fg: #ffffff; + --fo-facility-info-header-border: var(--border); + .card-border { @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)]; } diff --git a/apps/fo/src/app/styles/components-blue.css b/apps/fo/src/app/styles/components-blue.css index b4d49cbcd..30200d31b 100644 --- a/apps/fo/src/app/styles/components-blue.css +++ b/apps/fo/src/app/styles/components-blue.css @@ -15,6 +15,20 @@ } [data-theme="blue"] { + --fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 16%, var(--background)); + --fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 16%, var(--background)); + --fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 16%, var(--background)); + --fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 24%, var(--background)); + --fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 24%, var(--background)); + --fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 24%, var(--background)); + --fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 32%, var(--background)); + --fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 32%, var(--background)); + --fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 32%, var(--background)); + --fo-rain-impact-row-bg: color-mix(in srgb, var(--chart-1) 12%, var(--background)); + --fo-facility-info-header-bg: #eaf3fb; + --fo-facility-info-header-fg: #647784; + --fo-facility-info-header-border: #e5e5e5; + .card-border { @apply border-[#d8e3eb] bg-white shadow-blur; } @@ -44,23 +58,9 @@ @apply text-[#666666]; } - .table-ui.secondary { - @apply bg-white; - border-collapse: collapse; - } - .table-ui.secondary th { - @apply border-[#e5e5e5] bg-[#5987bf] text-[#ffffff]; - font-weight: 500; - } - .table-ui.secondary td { - @apply border-[#e5e5e5] bg-white text-[#666666]; - } - - .table-ui.secondary tbody tr:hover td { - @apply bg-[#f7fbff]; - } + nav[aria-label="pagination"] li a { border-color: transparent !important; diff --git a/apps/fo/src/app/styles/components-green.css b/apps/fo/src/app/styles/components-green.css index 4b4cc770e..470e47f98 100644 --- a/apps/fo/src/app/styles/components-green.css +++ b/apps/fo/src/app/styles/components-green.css @@ -15,6 +15,20 @@ } [data-theme="green"] { + --fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 15%, var(--background)); + --fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 15%, var(--background)); + --fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 15%, var(--background)); + --fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 23%, var(--background)); + --fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 23%, var(--background)); + --fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 23%, var(--background)); + --fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 31%, var(--background)); + --fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 31%, var(--background)); + --fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 31%, var(--background)); + --fo-rain-impact-row-bg: color-mix(in srgb, var(--chart-3) 12%, var(--background)); + --fo-facility-info-header-bg: #ebf7f7; + --fo-facility-info-header-fg: #64908f; + --fo-facility-info-header-border: var(--border); + .card-border { @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)]; } diff --git a/apps/fo/src/app/styles/components-red.css b/apps/fo/src/app/styles/components-red.css index c78e23183..802f628d0 100644 --- a/apps/fo/src/app/styles/components-red.css +++ b/apps/fo/src/app/styles/components-red.css @@ -15,12 +15,19 @@ } [data-theme="red"] { - /* .card-border { - @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)]; - } - .card-header { - @apply border-b-[#3f4042]; - } */ + --fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 14%, var(--background)); + --fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 14%, var(--background)); + --fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 14%, var(--background)); + --fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 22%, var(--background)); + --fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 22%, var(--background)); + --fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 22%, var(--background)); + --fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 30%, var(--background)); + --fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 30%, var(--background)); + --fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 30%, var(--background)); + --fo-rain-impact-row-bg: color-mix(in srgb, var(--destructive) 12%, var(--background)); + --fo-facility-info-header-bg: #f6f6f9; + --fo-facility-info-header-fg: #808080; + --fo-facility-info-header-border: var(--border); } input[type="file"] { diff --git a/apps/fo/src/app/styles/components.css b/apps/fo/src/app/styles/components.css index 3aa3c770d..521ae07f0 100644 --- a/apps/fo/src/app/styles/components.css +++ b/apps/fo/src/app/styles/components.css @@ -1,6 +1,22 @@ @tailwind components; @layer components { + :root { + --fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 18%, var(--background)); + --fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 18%, var(--background)); + --fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 18%, var(--background)); + --fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 28%, var(--background)); + --fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 28%, var(--background)); + --fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 28%, var(--background)); + --fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 38%, var(--background)); + --fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 38%, var(--background)); + --fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 38%, var(--background)); + --fo-rain-impact-row-bg: color-mix(in srgb, var(--chart-1) 10%, var(--background)); + --fo-facility-info-header-bg: #eaf3fb; + --fo-facility-info-header-fg: #647784; + --fo-facility-info-header-border: var(--border); + } + .card { @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666]; } @@ -14,6 +30,65 @@ @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4; } + .fo-facility-info-flow-year, + .fo-facility-info-water-year, + .fo-facility-info-phosphorus-year, + .fo-facility-info-flow-summer, + .fo-facility-info-water-summer, + .fo-facility-info-phosphorus-summer, + .fo-facility-info-flow-winter, + .fo-facility-info-water-winter, + .fo-facility-info-phosphorus-winter { + color: var(--foreground); + } + + .fo-facility-info-flow-year { + background-color: var(--fo-facility-info-flow-year-bg); + } + + .fo-facility-info-water-year { + background-color: var(--fo-facility-info-water-year-bg); + } + + .fo-facility-info-phosphorus-year { + background-color: var(--fo-facility-info-phosphorus-year-bg); + } + + .fo-facility-info-flow-summer { + background-color: var(--fo-facility-info-flow-summer-bg); + } + + .fo-facility-info-water-summer { + background-color: var(--fo-facility-info-water-summer-bg); + } + + .fo-facility-info-phosphorus-summer { + background-color: var(--fo-facility-info-phosphorus-summer-bg); + } + + .fo-facility-info-flow-winter { + background-color: var(--fo-facility-info-flow-winter-bg); + } + + .fo-facility-info-water-winter { + background-color: var(--fo-facility-info-water-winter-bg); + } + + .fo-facility-info-phosphorus-winter { + background-color: var(--fo-facility-info-phosphorus-winter-bg); + } + + .fo-rain-impact-row td { + background-color: var(--fo-rain-impact-row-bg); + } + + + .fo-facility-info-header-surface { + border: 1px solid var(--fo-facility-info-header-border); + background-color: var(--fo-facility-info-header-bg); + color: var(--fo-facility-info-header-fg); + } + input[type="file"] { @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer; } diff --git a/apps/wr/docs/작업계획/작업계획_20260623.md b/apps/wr/docs/작업계획/테마적용 작업계획_20260623.md similarity index 100% rename from apps/wr/docs/작업계획/작업계획_20260623.md rename to apps/wr/docs/작업계획/테마적용 작업계획_20260623.md diff --git a/packages/common/business_components/src/ui/tab/index.tsx b/packages/common/business_components/src/ui/tab/index.tsx index 6d3e290aa..949884df9 100644 --- a/packages/common/business_components/src/ui/tab/index.tsx +++ b/packages/common/business_components/src/ui/tab/index.tsx @@ -14,25 +14,37 @@ interface UITabProps extends Omit, "dir"> { tabList: TabItem[]; children?: React.ReactNode; onValueChange?: (value: string) => void; + variant?: "default" | "underline" | "outline"; } const UITab = React.forwardRef( - ({ defaultValue, tabList, children, onValueChange, className, ...props }, ref) => { + ( + { + defaultValue, + tabList, + children, + onValueChange, + className, + variant = "default", + ...props + }, + ref, + ) => { return ( - + {tabList.map((tab) => ( {tab.label}