부가세 참고 및 컴포넌트 전체적 일부 수정

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

@@ -383,7 +383,7 @@ main.pb-0 .tab-pane {
 }
 
 .tab-pane.sub {
-    padding-bottom: 60px;
+    padding-bottom: 60px !important;
 }
 
 .tab-pane.active {
@@ -1493,8 +1493,18 @@ input[type="radio"] {
     gap: 16px; 
 }
 
+.option-list.no-padding {
+    gap: 26px
+}
+
 .option-list-nopadding {
-    padding: 0 10px
+    padding: 0 10px;
+}
+
+.no-padding .opt-field { 
+    padding: 0;
+    gap: 10px;
+
 }
 
 .opt-field { 
@@ -1504,6 +1514,12 @@ input[type="radio"] {
     gap: 4px;
     padding: 0 16px;
 }
+.opt-field.horizon { 
+    display: grid; 
+    grid-template-columns: 1fr 1fr; 
+    gap: 10px;
+    padding: 0;
+}
 
 .opt-field.no-padding {
     padding: 0;
@@ -4422,18 +4438,6 @@ ul.txn-amount-detail li span:last-child {
     background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center;
 }
 
-.icon-btn.check {
-    width: 36px;
-    height: 36px;
-    border-radius: 6px;
-    background: #F5F5F5 url('../images/ico_alone_check.svg') no-repeat center center;
-}
-
-.button-group {
-    display: flex;
-    gap: 8px;
-}
-
 .notice-bar {
     padding: 14px 16px;
     background: #F4F8FF;
@@ -5605,12 +5609,6 @@ ul.txn-amount-detail li span:last-child {
 .faq-section {
     padding: 0 10px;
 }
-
-.faq-controlls {
-    display: grid;
-    gap: 16px;
-}
-
 .faq-search {
     position: relative;
     display: flex;
@@ -5636,9 +5634,14 @@ ul.txn-amount-detail li span:last-child {
 }
 .faq-filter {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
     height: 40px;
+    padding: 0 12px;
+    border: 1px solid #D9D9D9;
+    border-radius: 8px;
+    margin-top: 10px;
 }
-
 .faq-filter .text {
     font-size: 15px;
     color: var(--color-2D3436);

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

@@ -5,13 +5,15 @@ export const FilterButtonGroups = ({
   activeValue,
   btnGroups,
   setter,
+  addClassName,
+  maxBtn
 }: FilterButtonGroupsProps) => {
-
+  const onwRowMaxBtn: 2 | 4 = maxBtn || 4;
   const getBtns = () => {
     let rs = [];
     
     if(!!btnGroups && btnGroups.length > 0){
-      let emptySpanCnt = 4 - (btnGroups.length % 4);
+      let emptySpanCnt = onwRowMaxBtn - (btnGroups.length % onwRowMaxBtn);
       let innerList = [];
 
       for(let i=0;i<btnGroups.length;i++){
@@ -22,7 +24,7 @@ export const FilterButtonGroups = ({
             onClick={ () => setter(btnGroups[i]?.value || '') }
           >{ btnGroups[i]?.name }</span>
         );
-        if((i % 4) === 3 ){
+        if((i % onwRowMaxBtn) === (onwRowMaxBtn - 1) ){
           rs.push(
             <div 
               key={ `key-btngroup-chip-row-${i}` }
@@ -32,7 +34,7 @@ export const FilterButtonGroups = ({
           innerList = [];
         }
       }
-      if(emptySpanCnt > 0 && emptySpanCnt < 4){
+      if(emptySpanCnt > 0 && emptySpanCnt < onwRowMaxBtn){
         for(let i=0;i<emptySpanCnt;i++){
           innerList.push(
             <span 
@@ -54,9 +56,9 @@ export const FilterButtonGroups = ({
   };
   return (
     <>
-      <div className="opt-field">
+      <div className={ `opt-field ${addClassName || ''}` }>
         <div className="opt-label">{ title }</div>
-        <div className="opt-controls col below h36">
+        <div className="opt-controls col h36">
         { getBtns() }
         </div>
       </div>

src/shared/ui/menu/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { MenuCategory } from '@/entities/menu/ui/menu-category';
 import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
 import { useStore } from '@/shared/model/store';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
 export interface MenuProps {
   menuOn: boolean;
@@ -74,7 +75,7 @@ export const Menu = ({
       categoryIcon: 'vat-icon',
       items: [
         {title: '세금계산서', path: PATHS.vatReturn.list},
-        {title: '부가세 참고', path: PATHS.vatReturn.vatReference},
+        {title: '부가세 참고', path: PATHS.vatReturn.reference},
       ]
     },
     additionalService: {
@@ -129,16 +130,12 @@ export const Menu = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (menuOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.3 }}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
           <div className="full-menu-header">