email bottom

src/entities/common/ui/email-bottom-sheet.tsx

@@ -1,21 +1,36 @@
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { ChangeEvent, useState } from 'react';
 
 export interface EmailBottomSheetProps {
   bottomSheetOn: boolean;
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
-  callPurposeUpdate: () => void;
+  imageSave: boolean;
+  sendEmail: boolean;
+  sendRequest: (email?: string) => void;
 };
 
 export const EmailBottomSheet = ({
   bottomSheetOn,
   setBottomSheetOn,
+  imageSave,
+  sendEmail,
+  sendRequest
 }: EmailBottomSheetProps) => {
-  
+  const [userEmail, setUserEmail] = useState<string>('');
+  const emailList = [
+    {name: 'test1@nicepay.co.kr', value: 'test1@nicepay.co.kr'},
+    {name: 'test2@nicepay.co.kr', value: 'test2@nicepay.co.kr'},
+    {name: 'test3@nicepay.co.kr', value: 'test3@nicepay.co.kr'},
+  ];
   const onClickToClose = () => {
     setBottomSheetOn(false);
   };
+
+  const onClickToRequest = () => {
+    sendRequest(userEmail);
+  };
   
   
   return (
@@ -48,6 +63,7 @@ export const EmailBottomSheet = ({
 
         <div className="bottomsheet-content">
           <div className="email-section">
+            { !!imageSave &&
             <div className="email-label mb-10">
               <div className="mail-icon">
                 <div className="mail-icon-bg"></div>
@@ -58,38 +74,49 @@ export const EmailBottomSheet = ({
               </div>
               <span className="label-text">이미지 저장</span>
             </div>
-            <div className="email-label">
+            }
-              <div className="mail-icon">
+            { !!sendEmail &&
-                <div className="mail-icon-bg"></div>
+            <>
-                <img 
+              <div className="email-label">
-                  src={ IMAGE_ROOT + '/ico_email.svg' } 
+                <div className="mail-icon">
-                  alt='메일'
+                  <div className="mail-icon-bg"></div>
-                />
+                  <img 
+                    src={ IMAGE_ROOT + '/ico_email.svg' } 
+                    alt='메일'
+                  />
+                </div>
+                <span className="label-text">메일로 받기</span>
               </div>
-              <span className="label-text">메일로 받기</span>
+              <div className="email-select">
-            </div>
+                <div className="select-wrapper">
-          
+                  <select
-            <div className="email-select">
+                    value={ userEmail }
-              <div className="select-wrapper">
+                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setUserEmail(e.target.value) }
-                <select>
+                  >
-                  <option>test@nicepay.co.kr</option>
+                    {
-                  <option>test@nicepay.co.kr</option>
+                      emailList.map((value, index) => (
-                  <option>선택2</option>
+                        <option value={ value.value }>{ value.value }</option>
-                </select>
+                      ))
+                    }
+                  </select>
+                </div>
               </div>
-            </div>
+              {/*
-          
+              <div className="error-message">
-            <div className="error-message">
+                <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
-              <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
+              </div>
-            </div>
+              */}
+            </>
+            }
+            
           </div>
         </div>
 
         <div className="bottomsheet-footer">
           <button
             className="btn-50 btn-blue flex-1" 
-            type="button" 
+            type="button"
-            disabled
+            onClick={ onClickToRequest }
           >신청</button>
         </div>
       </motion.div>

src/pages/transaction/all-transaction/list-page.tsx

@@ -1,11 +1,20 @@
 import moment from 'moment';
+import { useStore } from '@/shared/model/store';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
-import { AllTransactionListItem, TransactionCategory, AllTransactionStatusCode, AllTransactionServiceCode, AllTransactionSearchCl, AllTransactionListParams, ListItemProps, AllTransactionListSummaryParams, AllTransactionListResponse, AllTransactionListSummaryResponse } from '@/entities/transaction/model/types';
+import { 
+  TransactionCategory, 
+  AllTransactionSearchCl, 
+  AllTransactionListParams, 
+  ListItemProps, 
+  AllTransactionListSummaryParams, 
+  AllTransactionListResponse, 
+  AllTransactionListSummaryResponse 
+} from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -19,8 +28,7 @@ import {
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { useStore } from '@/shared/model/store';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
-import { useCodesListByCodeClMutation } from '@/entities/common/api/use-codes-list-by-codeCl-mutaion';
 
 export const AllTransactionListPage = () => {
   const { navigate } = useNavigate();
@@ -35,8 +43,8 @@ export const AllTransactionListPage = () => {
   const [mid, setMid] = useState<string>(userMid);
   const [moid, setMoid] = useState<string>('');
   const [tid, setTid] = useState<string>('');
-  const [dateCl, setDateCl] = useState<string>();
+  const [dateCl, setDateCl] = useState<string>('');
-  const [goodsName, setGoodsName] = useState<string>();
+  const [goodsName, setGoodsName] = useState<string>('');
   // const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
   const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
@@ -51,6 +59,8 @@ export const AllTransactionListPage = () => {
 
   const [totalCount, setTotalCount] = useState<number>(0);
   const [totalAmount, setTotalAmount] = useState<number>(0);
+
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
   
     
 	useSetHeaderTitle('거래내역 조회');
@@ -62,7 +72,6 @@ export const AllTransactionListPage = () => {
   
   const { mutateAsync: allTransactionList } = useAllTransactionListMutation();
   const { mutateAsync: allTransactionListSummary } = useAllTransactionListSummaryMutation();
-  const { mutateAsync: codesListByCodeCl} = useCodesListByCodeClMutation();
   const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
   
   const callList = (option?: {
@@ -112,12 +121,18 @@ export const AllTransactionListPage = () => {
     setFilterOn(!filterOn);
   };
   const onClickToDownloadExcel = () => {
+    setEmailBottomSheetOn(true);
+    
+  };
+  const onRequestDownloadExcel = (userEmail?: string) => {
     // tid??? 확인 필요
+    /*
     downloadExcel({
       // tid: tid
     }).then((rs) => {
 
     });
+    */
   };
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
@@ -270,6 +285,16 @@ export const AllTransactionListPage = () => {
         setSearchValue={ setSearchValue }
         serviceCodeOptions={ serviceCodeOptions }
       ></AllTransactionFilter>
+
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageSave={ false }
+          sendEmail={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></EmailBottomSheet>
+      }
     </>
 	);
 };