조사사업 등록의 사업차수 입력과 행정구역 배치 보완

apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx

@@ -37,6 +37,8 @@ interface CtpvSggPrcsFcltSelectBoxProps {
   setSwtrmtFcltNm?: (name: string) => void;
   defaultSwtrmtFcltNm?: string;
   setIsLoading?: (isLoading: boolean) => void;
+  /** 좁은 조회·입력 행에서 시도·시군구 선택 폭과 간격을 줄여 표시한다. */
+  compact?: boolean;
 }
 
 const defaultOption: ApiSelectOption = { val: '0', text: '전체' };
@@ -59,6 +61,7 @@ export function CtpvSggPrcsFcltSelectBox({
   setSwtrmtFcltNm,
   defaultSwtrmtFcltNm,
   setIsLoading,
+  compact = false,
 }: CtpvSggPrcsFcltSelectBoxProps) {
 
   const [prcsFcltOptions, setPrcsFcltOptions] = useState<ApiSelectOption[]>([]);
@@ -131,11 +134,11 @@ export function CtpvSggPrcsFcltSelectBox({
   ]);
 
   return (
-    <div className={`flex items-center justify-center ${className} mr-8`}>
-      <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
+    <div className={`flex items-center justify-center ${className} ${compact ? "mr-0" : "mr-8"}`}>
+      <Label className={`${compact ? "mr-1.5 text-base" : "mr-2 text-xl"} whitespace-nowrap font-medium text-gray-600`}>시도</Label>
       <SelectBox
-        className="w-48 mr-8"
-        selectClass="rounded-lg bg-white"
+        className={compact ? "mr-4 w-[180px]" : "mr-8 w-48"}
+        selectClass={`${compact ? "w-[180px]" : ""} rounded-lg bg-white`}
         label=""
         selectArray={[defaultOption, ...ctpv]}
         value={sido}
@@ -146,10 +149,10 @@ export function CtpvSggPrcsFcltSelectBox({
         }}
         selectContentClass="z-[101]"
       />
-      <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
+      <Label className={`${compact ? "mr-1.5 text-base" : "mr-2 text-xl"} whitespace-nowrap font-medium text-gray-600`}>시군구</Label>
       <SelectBox
-        className="w-48"
-        selectClass="w-48 rounded-lg bg-white truncate"
+        className={compact ? "w-36" : "w-48"}
+        selectClass={`${compact ? "w-36" : "w-48"} truncate rounded-lg bg-white`}
         label=""
         selectArray={[defaultOption, ...sgg.filter(opt => opt.val.startsWith(sidoPrefix))]}
         value={sigungu}