email bottom

2025-10-22 17:45:38 +09:00
parent 0fe0299a58
commit d5d8eed699
2 changed files with 84 additions and 32 deletions
--- a/src/entities/common/ui/email-bottom-sheet.tsx
+++ b/src/entities/common/ui/email-bottom-sheet.tsx
@@ -1,22 +1,37 @@
 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,30 +74,41 @@ export const EmailBottomSheet = ({
              </div>
              <span className="label-text">이미지 저장</span>
            </div>
-            <div className="email-label">
-              <div className="mail-icon">
-                <div className="mail-icon-bg"></div>
-                <img 
-                  src={ IMAGE_ROOT + '/ico_email.svg' } 
-                  alt='메일'
-                />
+            }
+            { !!sendEmail &&
+            <>
+              <div className="email-label">
+                <div className="mail-icon">
+                  <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>
-          
-            <div className="email-select">
-              <div className="select-wrapper">
-                <select>
-                  <option>test@nicepay.co.kr</option>
-                  <option>test@nicepay.co.kr</option>
-                  <option>선택2</option>
-                </select>
+              <div className="email-select">
+                <div className="select-wrapper">
+                  <select
+                    value={ userEmail }
+                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setUserEmail(e.target.value) }
+                  >
+                    {
+                      emailList.map((value, index) => (
+                        <option value={ value.value }>{ value.value }</option>
+                      ))
+                    }
+                  </select>
+                </div>
              </div>
-            </div>
+              {/*
+              <div className="error-message">
+                <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
+              </div>
+              */}
+            </>
+            }
            
-            <div className="error-message">
-              <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
-            </div>
          </div>
        </div>

@@ -89,7 +116,7 @@ export const EmailBottomSheet = ({
          <button
            className="btn-50 btn-blue flex-1" 
            type="button"
-            disabled
+            onClick={ onClickToRequest }
          >신청</button>
        </div>
      </motion.div>
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/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 { useCodesListByCodeClMutation } from '@/entities/common/api/use-codes-list-by-codeCl-mutaion';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

 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 [goodsName, setGoodsName] = useState<string>();
+  const [dateCl, setDateCl] = 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'));
@@ -52,6 +60,8 @@ export const AllTransactionListPage = () => {
  const [totalCount, setTotalCount] = useState<number>(0);
  const [totalAmount, setTotalAmount] = useState<number>(0);

+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  
    
 	useSetHeaderTitle('거래내역 조회');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -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>
+      }
    </>
 	);
 };