세금 계산서 및 달력 월 형태 수정

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

@@ -26,8 +26,8 @@ export enum VatReturnTargetType {
 
 export interface VatReturnListParams {
   mid: string;
-  startDate?: string;
-  endDate?: string;
+  startMonth?: string;
+  endMonth?: string;
   receiptType?: VatReturnReceiptType;
   targetType?: VatReturnTargetType;
   page?: DefaultRequestPagination;

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

@@ -13,13 +13,13 @@ export interface ListFilterProps {
   filterOn: boolean;
   setFilterOn: (filterOn: boolean) => void;
   mid: string;
-  startDate: string;
-  endDate: string;
+  startMonth: string;
+  endMonth: string;
   receiptType: VatReturnReceiptType;
   targetType: VatReturnTargetType;
   setMid: (mid: string) => void;
-  setStartDate: (date: string) => void;
-  setEndDate: (date: string) => void;
+  setStartMonth: (startMonth: string) => void;
+  setEndMonth: (endMonth: string) => void;
   setReceiptType: (receiptType: VatReturnReceiptType) => void;
   setTargetType: (targetType: VatReturnTargetType) => void;
 };
@@ -28,20 +28,20 @@ export const ListFilter = ({
   filterOn,
   setFilterOn,
   mid,
-  startDate,
-  endDate,
+  startMonth,
+  endMonth,
   receiptType,
   targetType,
   setMid,
-  setStartDate,
-  setEndDate,
+  setStartMonth,
+  setEndMonth,
   setReceiptType,
   setTargetType
 }: ListFilterProps) => {
 
   const [filterMid, setFilterMid] = useState<string>(mid);
-  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterStartMonth, setFilterStartMonth] = useState<string>(startMonth);
+  const [filterEndMonth, setFilterEndMonth] = useState<string>(endMonth);
   const [filterReceiptType, setFIlterReceiptType] = useState<VatReturnReceiptType>(receiptType);
   const [filterTargetType, setFilterTargetType] = useState<VatReturnTargetType>(targetType);
   
@@ -53,8 +53,8 @@ export const ListFilter = ({
 
    const onClickToSetFilter = () => {
     setMid(filterMid);
-    setStartDate(filterStartDate);
-    setEndDate(filterEndDate);
+    setStartMonth(filterStartMonth);
+    setEndMonth(filterEndMonth);
     setReceiptType(filterReceiptType);
     setTargetType(filterTargetType);
     onClickToClose();
@@ -95,10 +95,10 @@ export const ListFilter = ({
             ></FilterSelect>
             <FilterCalendarMonth
               title='발행월'
-              startMonth={ filterStartDate }
-              endMonth={ filterEndDate }
-              setStartMonth={ setFilterStartDate }
-              setEndMonth={ setFilterEndDate }
+              startMonth={ filterStartMonth }
+              endMonth={ filterEndMonth }
+              setStartMonth={ setFilterStartMonth }
+              setEndMonth={ setFilterEndMonth }
             ></FilterCalendarMonth>
             <FilterButtonGroups
               title='영수구분'

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

@@ -16,6 +16,7 @@ import {
 import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
 import { ListDateGroup } from './list-date-group';
 import { useStore } from '@/shared/model/store';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 
 export const ListWrap = () => {
   const userMid = useStore.getState().UserStore.mid;
@@ -25,11 +26,13 @@ export const ListWrap = () => {
   const [listItems, setListItems] = useState<Array<VatReturnListContent>>([]);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
-  const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMM'));
-	const [endDate, setEndDate] = useState(moment().format('YYYYMM'));
+  const [startMonth, setStartMonth] = useState<string>(moment().subtract(1, 'month').format('YYYYMM'));
+	const [endMonth, setEndMonth] = useState<string>(moment().format('YYYYMM'));
   const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
   const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);
 
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
 
   const callList = (option?: {
@@ -37,8 +40,8 @@ export const ListWrap = () => {
   }) => {
     let params: VatReturnListParams = {
       mid: mid,
-      startDate: startDate,
-      endDate: endDate,
+      startMonth: startMonth,
+      endMonth: endMonth,
       receiptType: receiptType,
       targetType: targetType,
       page: pageParam
@@ -59,10 +62,19 @@ export const ListWrap = () => {
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
   };
+  const onClickToDownloadExcel = () => {
+    setEmailBottomSheetOn(true);
+  };
+  const onRequestDownloadExcel = (userEmail?: string) => {
+
+	};
 
   useEffect(() => {
     callList();
-  }, [mid, startDate, endDate, receiptType, targetType]);
+  }, [
+    mid, startMonth, endMonth, 
+    receiptType, targetType
+  ]);
 
   const getListDateGroup = () => {
     let rs = [];
@@ -115,7 +127,7 @@ export const ListWrap = () => {
             <input 
               type="text" 
               className="credit-period" 
-              value={ moment(startDate+'01').format('YYYY.MM') + '-' + moment(endDate+'01').format('YYYY.MM')} 
+              value={ moment(startMonth+'01').format('YYYY.MM') + '-' + moment(endMonth+'01').format('YYYY.MM')} 
               readOnly={ true }
             />
             <button 
@@ -132,6 +144,7 @@ export const ListWrap = () => {
             <img 
               src={ IMAGE_ROOT + '/ico_download.svg' }
               alt="다운로드"
+              onClick={ onClickToDownloadExcel }
             />
           </button>
         </div>
@@ -149,16 +162,25 @@ export const ListWrap = () => {
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
         mid={ mid }
-        startDate={ startDate }
-        endDate={ endDate }
+        startMonth={ startMonth }
+        endMonth={ endMonth }
         receiptType={ receiptType }
         targetType={ targetType }
         setMid={ setMid }
-        setStartDate={ setStartDate }
-        setEndDate={ setEndDate }
+        setStartMonth={ setStartMonth }
+        setEndMonth={ setEndMonth }
         setReceiptType={ setReceiptType }
         setTargetType={ setTargetType }
       ></ListFilter>
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageSave={ false }
+          sendEmail={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></EmailBottomSheet>
+      }
     </>
   );
 };