버튼그룹

src/shared/ui/assets/css/style-fix.css

@@ -29,4 +29,6 @@ main {
 .kv-list{
   padding-bottom: 20px;
   z-index: 10;
-}
+}
+
+/* calendar */

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

@@ -0,0 +1,53 @@
+interface FilterButtonGroupsProps {
+  title: string;
+  activeValue?: string;
+  btnGroups?: Array<ButtonItemProp>
+  setter: any;
+};
+interface ButtonItemProp {
+  name?: string;
+  value?: string;
+};
+export const FilterButtonGroups = ({
+  title,
+  activeValue,
+  btnGroups,
+  setter,
+}: FilterButtonGroupsProps) => {
+
+  const getBtns = () => {
+    let rs = [];
+    if(!!btnGroups && btnGroups.length > 0){
+      let emptySpanCnt = 4 % btnGroups.length;
+      for(let i=0;i<btnGroups.length;i++){
+        rs.push(
+          <span 
+            className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
+            onClick={ () => setter(btnGroups[i]?.value) }
+          >{ btnGroups[i]?.name }</span>
+        )
+      }
+      for(let i=0;i<emptySpanCnt;i++){
+        rs.push(
+          <span 
+            className="keyword-tag flex-1" 
+            style={{ visibility: 'hidden' }}
+          ></span>
+        );
+      }
+    }
+    return rs;
+  };
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls col below h36">
+          <div className="chip-row">
+            { getBtns() }
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};