필터 4개 이상 다중 버튼 처리

src/shared/ui/filter/button-groups.tsx

@@ -9,24 +9,39 @@ export const FilterButtonGroups = ({
 
   const getBtns = () => {
     let rs = [];
+    
     if(!!btnGroups && btnGroups.length > 0){
-      let emptySpanCnt = 4 % btnGroups.length;
+      console.log(' btnGroups.length : ',  btnGroups.length)
+      let emptySpanCnt = 4 - (btnGroups.length % 4);
+      let innerList = [];
+
       for(let i=0;i<btnGroups.length;i++){
-        rs.push(
+        innerList.push(
           <span 
             key={ `key-btngroup-span-${i}` }
             className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
             onClick={ () => setter(btnGroups[i]?.value || '') }
           >{ btnGroups[i]?.name }</span>
-        )
+        );
+        if((i % 4) === 3 ){
+          rs.push(
+            <div className="chip-row">{ innerList }</div>
+          );
+          innerList = [];
+        }
       }
-      for(let i=0;i<emptySpanCnt;i++){
+      if(emptySpanCnt > 0 && emptySpanCnt < 4){
+        for(let i=0;i<emptySpanCnt;i++){
+          innerList.push(
+            <span 
+              key={ `key-btngroup-span-nodata-${i}` }
+              className="keyword-tag flex-1" 
+              style={{ visibility: 'hidden' }}
+            ></span>
+          );
+        }
         rs.push(
-          <span 
-            key={ `key-btngroup-span-nodata-${i}` }
-            className="keyword-tag flex-1" 
-            style={{ visibility: 'hidden' }}
-          ></span>
+          <div className="chip-row">{ innerList }</div>
         );
       }
     }
@@ -37,9 +52,7 @@ export const FilterButtonGroups = ({
       <div className="opt-field">
         <div className="opt-label">{ title }</div>
         <div className="opt-controls col below h36">
-          <div className="chip-row">
-            { getBtns() }
-          </div>
+        { getBtns() }
         </div>
       </div>
     </>