sn: 정보검색 기본정보 구분란 화면이 줄었을 때, 디자인 외

apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx

@@ -55,7 +55,7 @@ const BasicTab: React.FC = () => {
           selectContentClass="z-[101]"
         />
       </div>
-      <div className="min-w-0 flex-[1_1_60rem]">
+      <div className="contents">
         {basicType === "tb_ms_swage_ppl" && <SwagePpl />} {/* 하수관로 */}
         {basicType === "tb_il_swage_prcs_fclt" && <SwagePrcsFclt />}{" "}
         {/** 하수처리시설 */}

apps/sn/app/(map-layout)/map/searchModal/fldngWtlvMap.tsx

@@ -23,8 +23,8 @@ const FldngWtlvMap: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}

apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx

@@ -53,8 +53,8 @@ const Stofcbr: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         {/* 시도, 시군구 */}
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}

apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx

@@ -77,8 +77,8 @@ const SwageMhl: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}

apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx

@@ -78,8 +78,8 @@ const SwagePmstn: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         {/* 시도, 시군구 */}
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}

apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx

@@ -84,8 +84,8 @@ const SwagePpl: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}

apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx

@@ -81,8 +81,8 @@ const SwagePrcsFclt: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}

apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx

@@ -34,8 +34,8 @@ const swagePrcsZone: React.FC = () => {
   const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="min-w-0">
+    <div className="contents">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+      <div className="contents">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}

apps/sn/app/html/(map-layout)/map/searchModal/basicTab.tsx

@@ -34,9 +34,9 @@ const BasicTab: React.FC = () => {
   const { basicType, setBasicType } = useSearchModalStore();
 
   return (
-    <div className="relative border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+    <div className="relative flex w-full min-h-[10vh] flex-wrap items-center gap-x-4 gap-y-3 rounded-lg border px-5 pt-5">
       {/* 구분 */}
-      <div className="mb-3 flex items-center justify-between gap-4">
+      <div className="flex shrink-0 items-center">
         <div className="flex items-center">
           <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
           <SelectBox
@@ -52,7 +52,7 @@ const BasicTab: React.FC = () => {
           />
         </div>
       </div>
-      {/* 조회 조건 */}
+      {/* 조회 조건: 구분 선택과 같은 행에 배치 */}
       {basicType === "tb_ms_swage_ppl" && (<SwagePpl />)}  {/* 하수관로 */}
       {basicType === "tb_il_swage_prcs_fclt" && (<SwagePrcsFclt />)} {/* 하수처리시설 */}
       {basicType === "tb_ms_swage_prcs_zone" && (<SwagePrcsZone />)} {/* 하수처리구역 */}
@@ -63,4 +63,4 @@ const BasicTab: React.FC = () => {
   );
 };
 
-export default React.memo(BasicTab);
+export default React.memo(BasicTab);

packages/common/business_components/src/ui/standard_data_table/index.tsx

@@ -277,7 +277,7 @@ function StandardDataTable<T>({
 
       <div
         className={cn(
-          "card !m-[1.2rem] min-w-0 overflow-hidden !p-0",
+          "card !mx-[0.4rem] !my-[1.2rem] min-w-0 overflow-hidden !p-0",
           shouldFillAvailableHeight && "flex min-h-0 flex-1 flex-col",
         )}
       >