diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx
index 950306231..9dcf23eb7 100644
--- a/packages/common/business_components/src/ui/search_form_left/index.tsx
+++ b/packages/common/business_components/src/ui/search_form_left/index.tsx
@@ -1,11 +1,277 @@
-import React from 'react'
+import React, { useState } from 'react';
+import type { SelectDataType } from '../search_input_select';
+import { SelectBox } from '../select';
 
-function SearchFormLeft(props: {children: React.ReactNode}) {
+/**
+ * 검색 폼 왼쪽 컴포넌트 타입
+ * 
+ * @param isShowPart 구분 조회 여부
+ * @param children 자식 컴포넌트
+ * @param selectSidoData 시도 데이터
+ * @param selectSigunData 시군구 데이터
+ * @param selectRegionData 유역 데이터
+ * @param selectUnitWaterShedData 단위유역 데이터
+ * @param selectMiddleRegionData 중권역 데이터
+ * @param selectEnvPartData 환경청 데이터
+ * @param selectEnvPartSidoData 환경청 시도 데이터
+ * @param selectEnvPartSigunData 환경청 시군구 데이터
+ * @param setRtnPartValue 부분 값 변경 핸들러
+ */
+type SearchFormLeftProps = {
+  isShowPart?: boolean | undefined;
+  children: React.ReactNode;
+  selectSidoData?: SelectDataType[] | [];
+  selectSigunData?: SelectDataType[] | [];
+  selectRegionData?: SelectDataType[] | [];
+  selectUnitWaterShedData?: SelectDataType[] | [];
+  selectMiddleRegionData?: SelectDataType[] | [];
+  selectEnvPartData?: EnvPartSelectDataType[] | [];
+  selectEnvPartSidoData?: SelectDataType[] | [];
+  selectEnvPartSigunData?: SelectDataType[] | [];
+
+  setRtnPartValue?: (value: string) => void;
+  setRtnSidoValue?: (value: string) => void;
+  setRtnSigunValue?: (value: string) => void;
+  setRtnRegionValue?: (value: string) => void;
+  setRtnUnitWaterShedValue?: (value: string) => void;
+  setRtnMiddleRegionValue?: (value: string) => void;
+  setRtnEnvPartValue?: (value: string) => void;
+  setRtnEnvPartSidoValue?: (value: string) => void;
+  setRtnEnvPartSigunValue?: (value: string) => void;
+}
+
+type EnvPartSelectDataType = SelectDataType & {
+  adstDliStrCd: string,
+}
+
+const selectPartData:SelectDataType[] = [
+  { text: "행정별", val: '0' },
+  { text: "유역별", val: '01' },
+  { text: "환경청별", val: '02' },
+];
+
+function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], selectEnvPartSidoData = [], selectEnvPartSigunData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) {
+  const [partValue, setPartValue] = useState<string>('0');
+  const [showPart, setShowPart] = useState<string>('');
+  const [sidoValue, setSidoValue] = useState<string>('0');
+  const [sigunValue, setSigunValue] = useState<string>('0');
+  const [regionValue, setRegionValue] = useState<string>('0');
+  const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
+  const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
+  const [envPartValue, setEnvPartValue] = useState<string>('0');
+  const [envPartSidoValue, setEnvPartSidoValue] = useState<string>('0');
+  const [envPartSigunValue, setEnvPartSigunValue] = useState<string>('0');
+
+  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+  const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);  
+  const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+  
+  const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]);
+  const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]);
+  const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
+
+  const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
+
+  // 시군구 세팅
+  const initializeSigunData = (sidoCd: string) => {
+    if (sidoCd === '0') {
+      setSigunValue('0');
+      setFilteredSigunData([{ text: "전체", val: '0' }]);
+    } else {
+      const newFilteredData = [
+        { text: "전체", val: '0' },
+        ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
+      ];
+      setSigunValue('0');
+      setFilteredSigunData(newFilteredData);
+    }
+  }
+
+  // 단위유역 세팅
+  const initializeUnitWaterShedData = (regionCd: string) => {
+    if(regionCd === '0') {
+      setUnitWaterShedValue('0');
+      setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
+    } else {
+      const newFilteredData = [
+        { text: "전체", val: '0' },
+        ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
+      ];  
+      setUnitWaterShedValue('0');
+      setFilteredUnitWaterShedData(newFilteredData);
+    }
+  }
+
+  // 중권역 세팅
+  const initializeMiddleRegionData = (unitWaterShedCd: string) => {
+    if(unitWaterShedCd === '0') {
+      setMiddleRegionValue('0');
+      setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
+    } else {
+      const newFilteredData = [
+        { text: "전체", val: '0' },
+        ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
+      ];
+      setMiddleRegionValue('0');
+      setFilteredMiddleRegionData(newFilteredData);
+    }
+  }
+
+  // 환경청 세팅 - 시도
+  const initializeCityDataByEnvPartSido = (envPartCd: string) => {
+    const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
+    const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
+    
+    // 시군구 데이터
+    const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
+    
+    // 환경청 시도 데이터
+    const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
+    const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
+    setFilteredEnvPartSigunDataSelected(envSigunData);
+    
+    setFilteredEnvPartSidoData([
+      { text: "전체", val: '0', adstDliStrCd:'' },
+      ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd:'' }))
+    ]); 
+  }
+
+  // 환경청 세팅 - 시군구
+  const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
+    const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
+    setFilteredEnvPartSigunData([
+      { text: "전체", val: '0'},
+      ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
+    ]);
+  }
+
+  const onSelectValue = (val: string, type: string) => {
+    switch(type) {
+      case 'part':
+        setPartValue(val);
+        if (setRtnPartValue) {
+          setRtnPartValue(val);
+        }
+        // 구분
+        if(val == '01') {
+          setShowPart('01');
+          initializeMiddleRegionData('0');
+          initializeUnitWaterShedData('0');
+        } else if(val == '02') {
+          setShowPart('02');
+          setFilteredEnvPartData([
+            { text: "전체", val: '0', adstDliStrCd:'' },
+            ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
+          ]);
+          setEnvPartValue('0');
+          onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido');
+          onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun');
+        } else {
+          setShowPart('0');
+          initializeSigunData('0');
+          onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        }
+
+        // 다른 selectbox 전체로 초기화
+        onSelectValue(selectSidoData[0]?.val || '0', 'sido');
+        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        break;
+      case 'sido':
+        setSidoValue(val);
+        if (setRtnSidoValue) {
+          setRtnSidoValue(val);
+        }
+        initializeSigunData(val);
+        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        break;
+      case 'sigun':
+        if (setRtnSigunValue) {
+          setRtnSigunValue(val);
+        }
+        setSigunValue(val);
+        break;
+
+      // 유역 세팅
+      case 'region' :
+        setRegionValue(val);
+        if (setRtnRegionValue) {
+          setRtnRegionValue(val);
+        }
+        initializeUnitWaterShedData(val);
+        onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
+        break;
+      case 'unitWaterShed' :
+        setUnitWaterShedValue(val);
+        if (setRtnUnitWaterShedValue) {
+          setRtnUnitWaterShedValue(val);
+        }
+        initializeMiddleRegionData(val);
+        onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
+        break;
+      case 'middleRegion' :
+        setMiddleRegionValue(val);
+        if (setRtnMiddleRegionValue) {
+          setRtnMiddleRegionValue(val);
+        }
+        break;
+ 
+      // 환경청 세팅
+      case 'envPart' :
+        setEnvPartValue(val);
+        if (setRtnEnvPartValue) {
+          setRtnEnvPartValue(val);
+        }
+        onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido');
+        onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun');
+        initializeCityDataByEnvPartSido(val);
+        break;
+      case 'envPartSido' :
+        setEnvPartSidoValue(val);
+        if (setRtnEnvPartSidoValue) {
+          setRtnEnvPartSidoValue(val);
+        }
+        onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun');
+        initializeCityDataByEnvPartSigun(val);
+        break;
+      case 'envPartSigun' :
+        setEnvPartSigunValue(val);
+        if (setRtnEnvPartSigunValue) {
+          setRtnEnvPartSigunValue(val);
+        }
+        break;
+    }
+  }
+  
   return (
+    isShowPart ? (
     <div className="grid grid-cols-12 gap-4 w-4/5 mx-4">
-        {props.children}
+      <SelectBox className="col-span-3" label={'구분'} selectArray={selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/>
+      {showPart === '01' ? (
+        <>
+          <SelectBox className="col-span-3" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined}/>
+          <SelectBox className="col-span-3" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={undefined}/>
+          <SelectBox className="col-span-3" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={undefined}/>
+        </>
+      ) : showPart === '02' ? (
+        <>
+          <SelectBox className="col-span-3" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={undefined}/>
+          <SelectBox className="col-span-3" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={undefined}/>
+          <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={undefined}/>
+        </>
+      ) : (
+        <>
+          <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
+          <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
+        </>
+      )}
+      {children}
     </div>
+    ) : (
+      <div className="grid grid-cols-12 gap-4 w-4/5 mx-4">
+        {children}
+      </div>
+    )
   )
 }
 
-export { SearchFormLeft };
\ No newline at end of file
+export { SearchFormLeft };