부가세 신고 세금 계산서 리스트 및 상세, 필터, 캘린더 컴포넌트 month 형 추가

src/entities/vat-return/model/contant.ts

@@ -0,0 +1,14 @@
+import { VatReturnReceiptType, VatReturnTargetType } from './types';
+
+export const VatReturnReceiptTypeBtnGroup = [
+  {name: '전체', value: VatReturnReceiptType.ALL },
+  {name: '영수', value: VatReturnReceiptType.RECEIPT },
+  {name: '청구', value: VatReturnReceiptType.BILL }
+];
+
+export const VatReturnTargetTypeBtnGroup = [
+  {name: '전체', value: VatReturnTargetType.ALL },
+  {name: '일반', value: VatReturnTargetType.GENERAL },
+  {name: '차액정산', value: VatReturnTargetType.DIFFERENCE_COLLECTION },
+  {name: '환급정산', value: VatReturnTargetType.REFUND_SETTLEMENT }
+];

src/entities/vat-return/ui/filter/list-filter.tsx

@@ -0,0 +1,128 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { VatReturnReceiptType, VatReturnTargetType } from '../../model/types';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { useState } from 'react';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { VatReturnReceiptTypeBtnGroup, VatReturnTargetTypeBtnGroup } from '../../model/contant';
+import { FilterCalendarMonth } from '@/shared/ui/filter/calendar-month';
+
+export interface ListFilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+  mid: string;
+  startDate: string;
+  endDate: string;
+  receiptType: VatReturnReceiptType;
+  targetType: VatReturnTargetType;
+  setMid: (mid: string) => void;
+  setStartDate: (date: string) => void;
+  setEndDate: (date: string) => void;
+  setReceiptType: (receiptType: VatReturnReceiptType) => void;
+  setTargetType: (targetType: VatReturnTargetType) => void;
+};
+
+export const ListFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  startDate,
+  endDate,
+  receiptType,
+  targetType,
+  setMid,
+  setStartDate,
+  setEndDate,
+  setReceiptType,
+  setTargetType
+}: ListFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterReceiptType, setFIlterReceiptType] = useState<VatReturnReceiptType>(receiptType);
+  const [filterTargetType, setFilterTargetType] = useState<VatReturnTargetType>(targetType);
+  
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+   const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setReceiptType(filterReceiptType);
+    setTargetType(filterTargetType);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                className="full-menu-close"
+                onClick={ () => onClickToClose() }
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                />
+              </button>
+            </div>
+          </div>
+    
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setFilterMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterCalendarMonth
+              title='발행월'
+              startMonth={ filterStartDate }
+              endMonth={ filterEndDate }
+              setStartMonth={ setFilterStartDate }
+              setEndMonth={ setFilterEndDate }
+            ></FilterCalendarMonth>
+            <FilterButtonGroups
+              title='영수구분'
+              activeValue={ filterReceiptType }
+              btnGroups={ VatReturnReceiptTypeBtnGroup }
+              setter={ setFIlterReceiptType }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='발행대상'
+              activeValue={ filterTargetType }
+              btnGroups={ VatReturnTargetTypeBtnGroup }
+              setter={ setFilterTargetType }
+            ></FilterButtonGroups>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ onClickToSetFilter }
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/vat-return/ui/list-filter.tsx

@@ -1,166 +0,0 @@
-import { motion } from 'framer-motion';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { VatReturnReceiptType, VatReturnTargetType } from '../model/types';
-import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
-
-export interface ListFilterProps {
-  filterOn: boolean;
-  setFilterOn: (filterOn: boolean) => void;
-  mid: string;
-  startDate: string;
-  endDate: string;
-  receiptType: VatReturnReceiptType;
-  targetType: VatReturnTargetType;
-  setMid: (mid: string) => void;
-  setStartDate: (date: string) => void;
-  setEndDate: (date: string) => void;
-  setReceiptType: (receiptType: VatReturnReceiptType) => void;
-  setTargetType: (targetType: VatReturnTargetType) => void;
-};
-
-export const ListFilter = ({
-  filterOn,
-  setFilterOn,
-  mid,
-  startDate,
-  endDate,
-  receiptType,
-  targetType,
-  setMid,
-  setStartDate,
-  setEndDate,
-  setReceiptType,
-  setTargetType
-}: ListFilterProps) => {
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
-
-  const onClickToClose = () => {
-    setFilterOn(false);
-  };
-  return (
-    <>
-      <motion.div 
-        id="fullMenuModal" 
-        className="full-menu-modal" 
-        initial="hidden"
-        animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ FilterMotionVariants }
-        transition={ FilterMotionDuration }
-        style={ FilterMotionStyle }
-      >
-        <div className="full-menu-container">
-          <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
-            <div className="full-menu-actions">
-              <button 
-                className="full-menu-close"
-                onClick={ () => onClickToClose() }
-              >
-                <img 
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
-                />
-              </button>
-            </div>
-          </div>
-    
-          <div className="option-list pb-120">
-            <div className="opt-field">
-              <div className="opt-label">가맹점</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>nictest001m</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field mt_top">
-              <div className="opt-label">발행월</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">당월</span>
-                  <span className="keyword-tag">2개월</span>
-                  <span className="keyword-tag">3개월</span>
-                  <span className="keyword-tag">직접입력</span>
-                </div>
-                <div className="range-row">
-                  <div className="input-wrapper date">
-                    <input 
-                      className="date-input"
-                      type="text" 
-                      placeholder="날짜 선택" 
-                      value="2025.06.08" 
-                      readOnly={ true }
-                    />
-                    <button 
-                      className="date-btn"
-                      type="button" 
-                    >
-                      <img 
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                  <span className="beetween">~</span>
-                  <div className="input-wrapper date">
-                      <input 
-                        className="date-input"
-                        type="text"
-                        placeholder="날짜 선택"
-                        value="2025.06.08"
-                        readOnly={ true }
-                      />
-                      <button 
-                        className="date-btn"
-                        type="button"
-                      >
-                        <img 
-                          src={ IMAGE_ROOT + '/ico_date.svg' }
-                          alt="날짜 선택"
-                        />
-                      </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">영수 구분</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">영수</span>
-                  <span className="keyword-tag">청구</span>
-                  <span 
-                    className="keyword-tag" 
-                    style={{ visibility: 'hidden' }}
-                  ></span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">발행 대상</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">일반</span>
-                  <span className="keyword-tag">차액정산</span>
-                  <span className="keyword-tag">환급정산</span>
-                </div>
-              </div>
-            </div>
-
-          </div>
-          <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">적용</button>
-          </div>
-        </div>
-      </motion.div>
-    </>
-  );
-};

src/entities/vat-return/ui/list-item.tsx

@@ -51,3 +51,4 @@ export const ListItem = ({
     </>
   );
 };
+                                               

src/entities/vat-return/ui/list-wrap.tsx

@@ -2,7 +2,7 @@ import moment from 'moment';
 
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { ListFilter } from './list-filter';
+import { ListFilter } from './filter/list-filter';
 import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
 import { SortByKeys } from '@/entities/common/model/types';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -21,18 +21,25 @@ export const ListWrap = () => {
   const [listItems, setListItems] = useState<Record<string, Array<VatReturnListContent>>>({});
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest00m');
-  const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY.MM'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY.MM'));
   const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
   const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);
 
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
 
   const callList = () => {
+    let strStartDate = moment(startDate).format('YYYYMM');
+    let newStartDate = moment(strStartDate+'01').format('YYYY-MM-DD');
+
+    let strEndtDate = moment(endDate).format('YYYYMM');
+    let lastDate = moment(endDate).endOf('month').date();
+    let newEndDate = moment(strEndtDate+lastDate).format('YYYY-MM-DD');
+
     let params: VatReturnListParams = {
       mid: mid,
-      startDate: startDate,
-      endDate: endDate,
+      startDate: newStartDate,
+      endDate: newEndDate,
       receiptType: receiptType,
       targetType: targetType,
     };
@@ -51,7 +58,7 @@ export const ListWrap = () => {
 
   useEffect(() => {
     callList();
-  }, []);
+  }, [mid, startDate, endDate, receiptType, targetType]);
 
   const getListDateGroup = () => {
     let rs = [];