email 자동 셋팅

src/entities/account/ui/user-login-auth-info-wrap.tsx

@@ -299,7 +299,7 @@ export const UserLoginAuthInfoWrap = ({
             removeMethods.push({
               usrid: usrid,
               systemAdminClassId: mid,
-              idCl:  idCL,
+              idCl:  idCL || '',
               authMethodType: "EMAIL",
               sequence: email.sequence,
               content: email.content
@@ -318,7 +318,7 @@ export const UserLoginAuthInfoWrap = ({
             removeMethods.push({
               usrid: usrid,
               systemAdminClassId: mid,
-              idCl: idCL,
+              idCl: idCL || '',
               authMethodType: "PHONE",
               sequence: phone.sequence,
               content: phone.content
@@ -334,7 +334,7 @@ export const UserLoginAuthInfoWrap = ({
         addMethods.push({
           usrid: usrid,
           systemAdminClassId: mid,
-          idCl: idCL,
+          idCl: idCL || '',
           authMethodType: "EMAIL",
           sequence: existingEmailCount + index + 1,
           content: email
@@ -348,7 +348,7 @@ export const UserLoginAuthInfoWrap = ({
         addMethods.push({
           usrid: usrid,
           systemAdminClassId: mid,
-          idCl: idCL,
+          idCl: idCL || '',
           authMethodType: "PHONE",
           sequence: existingPhoneCount + index + 1,
           content: phone

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

@@ -1,5 +1,6 @@
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useStore } from '@/shared/model/store';
 import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
 
@@ -18,12 +19,9 @@ export const EmailBottomSheet = ({
   sendEmail,
   sendRequest
 }: EmailBottomSheetProps) => {
-  const emailList = [
+  const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
-    {name: 'test1@nicepay.co.kr', value: 'test1@nicepay.co.kr'},
+  const email = useStore.getState().UserStore.email;
-    {name: 'test2@nicepay.co.kr', value: 'test2@nicepay.co.kr'},
+  const [userEmail, setUserEmail] = useState<string>(email);
-    {name: 'test3@nicepay.co.kr', value: 'test3@nicepay.co.kr'},
-  ];
-  const [userEmail, setUserEmail] = useState<string>(emailList[0]?.value || '');
   const onClickToClose = () => {
     setBottomSheetOn(false);
   };
@@ -94,7 +92,7 @@ export const EmailBottomSheet = ({
                     onChange={ (e: ChangeEvent<HTMLSelectElement>) => setUserEmail(e.target.value) }
                   >
                     {
-                      emailList.map((value, index) => (
+                      optionsEmails.map((value, index) => (
                         <option value={ value.value }>{ value.value }</option>
                       ))
                     }

src/entities/user/model/store.ts

@@ -13,11 +13,17 @@ export interface UserInfoState {
   userFavorite: Array<UserFavorite>;
   setUserFavorite: (update: SetStateAction<Array<UserFavorite>>) => void;
   userMids: Array<string>;
+  userEmails: Array<string>;
   setUserMids: (update: SetStateAction<Array<string>>) => void;
+  setUserEmails: (update: SetStateAction<Array<string>>) => void;
   selectOptionsMids: Array<Record<string, string>>;
   setSelectOptionsMids: (update: SetStateAction<Array<Record<string, string>>>) => void;
+  selectOptionsEmails: Array<Record<string, string>>;
+  setSelectOptionsEmails: (update: SetStateAction<Array<Record<string, string>>>) => void;
   mid: string;
   setMid: (update: SetStateAction<string>) => void;
+  email: string;
+  setEmail: (update: SetStateAction<string>) => void;
   firstAccess: boolean;
   setFirstAccess: (update: SetStateAction<boolean>) => void;
 };
@@ -27,8 +33,11 @@ const initialUserInfoState = {
   businessInfo: {} as BusinessInfo,
   userFavorite: [] as Array<UserFavorite>,
   userMids: [] as Array<string>,
+  userEmails: [] as Array<string>,
   selectOptionsMids: [] as Array<Record<string, string>>,
+  selectOptionsEmails: [] as Array<Record<string, string>>,
   mid: '' as string,
+  email: '' as string,
   firstAccess: true as boolean,
 } as UserInfoState;
 
@@ -97,6 +106,19 @@ export const createUserInfoStore = lens<UserInfoState>((set, get) => ({
       };
     });
   },
+  setUserEmails: (update) => {
+    set((state: UserInfoState) => {
+      const newUserEmails = (typeof update === 'function')
+        ? update(state.userEmails): update;
+      return {
+        ...state,
+        userEmails: [
+          ...state.userEmails,
+          ...newUserEmails
+        ],
+      };
+    });
+  },
   setSelectOptionsMids: (update) => {
     set((state: UserInfoState) => {
       const newSelectOptionsMids = (typeof update === 'function')
@@ -109,6 +131,18 @@ export const createUserInfoStore = lens<UserInfoState>((set, get) => ({
       };
     });
   },
+  setSelectOptionsEmails: (update) => {
+    set((state: UserInfoState) => {
+      const newSelectOptionsEmails = (typeof update === 'function')
+        ? update(state.selectOptionsEmails): update;
+      return {
+        ...state,
+        selectOptionsEmails: [
+          ...newSelectOptionsEmails
+        ],
+      };
+    });
+  },
   setMid: (update) => {
     set((state: UserInfoState) => {
       const newMid = (typeof update === 'function')
@@ -119,6 +153,16 @@ export const createUserInfoStore = lens<UserInfoState>((set, get) => ({
       }
     });
   },
+  setEmail: (update) => {
+    set((state: UserInfoState) => {
+      const newEmail = (typeof update === 'function')
+        ? update(state.email): update;
+      return {
+        ...state,
+        email: newEmail
+      }
+    });
+  },
   setFirstAccess: (update) => {
     set((state: UserInfoState) => {
       const newFirstAccess = (typeof update === 'function')

src/entities/user/model/types.ts

@@ -67,8 +67,8 @@ export interface UserExistsUseridParams {
 export interface UserFindAuthMethodParams {
   mid: string;
   usrid: string;
-  idCL: string;
+  idCL?: string;
-  status: string;
+  status?: string;
   page?: DefaultRequestPagination;
 };
 

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

@@ -111,13 +111,13 @@ export interface VatReturnTaxInvoiceParams {
   taxInvoiceNumber: string;
 }
 export interface VatReturnTaxInvoiceResponse {
-  supplierInfo: SupplierInfo;
+  supplierInfo?: SupplierInfo;
-  recipientInfo: RecipientInfo;
+  recipientInfo?: RecipientInfo;
-  issueDate: string;
+  issueDate?: string;
-  supplyAmount: number;
+  supplyAmount?: number;
-  taxAmount: number;
+  taxAmount?: number;
-  totalAmount: number;
+  totalAmount?: number;
-  transactionDetails: TransactionDetails;
+  transactionDetails?: TransactionDetails;
 };
 
 export interface SupplierInfo {

src/entities/vat-return/ui/list-detail-bottom-sheet.tsx

@@ -0,0 +1,139 @@
+import { IMAGE_ROOT } from "@/shared/constants/common";
+
+export interface VatReturnListDetailBottomSheetProps {
+  bottomSheetOn: boolean;
+  setBottomSheetOn: (bottomSheetOn: boolean) => void;
+};
+
+export const VatReturnListDetailBottomSheet = ({
+  bottomSheetOn,
+  setBottomSheetOn
+}: VatReturnListDetailBottomSheetProps) => {
+
+  const onClickToClose = () => {
+    setBottomSheetOn(false);
+  };
+  return (
+    <>
+      <div className="bg-dim"></div>
+      <div className="bottomsheet">
+        <div className="bottomsheet-header">
+          <div className="bottomsheet-title">
+            <h2>세부내역 조회</h2>
+            <button 
+              className="close-btn" 
+              type="button"
+            >
+              <img 
+                src={ IMAGE_ROOT +'/ico_close.svg' }
+                alt="닫기"
+                onClick={ onClickToClose }
+              />
+            </button>
+          </div>
+        </div>
+
+        <div className="bottomsheet-content expand">
+          <div className="tax-detail-accordion">
+            <div className="summary">
+              <div className="row">
+                <div className="label desc dot">거래금액 :</div>
+                <div className="value">1,000,000,000</div>
+              </div>
+              <div className="row">
+                <div className="label desc dot">공급가액 :</div>
+                <div className="value">43,758,520</div>
+              </div>
+              <div className="row">
+                <div className="label desc dot">VAT :</div>
+                <div className="value">4,366,850</div>
+              </div>
+              <div className="row">
+                <div className="label desc dot">합계금액 :</div>
+                <div className="value">48,125,100</div>
+              </div>
+            </div>
+            <div className="list">
+              <div className="list-header">
+                <div className="head-date">거래일</div>
+                <div className="head-amount">합계금액</div>
+              </div>
+              <div className="item">
+                <span className="dot"></span>
+                <span className="date">2025/08/01</span>
+                <div className="amount">
+                  <span className="text">8,125,100</span>
+                  <img 
+                    className="arrow up" 
+                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div className="item item-detail">
+                <div className="labels">
+                  <span>거래금액</span>
+                  <span>공급가액</span>
+                  <span>VAT</span>
+                </div>
+                <div className="values">
+                  <span>1,000,000</span>
+                  <span>720,000</span>
+                  <span>80,000</span>
+                </div>
+              </div>
+              <div className="item">
+                <span className="dot"></span>
+                <span className="date">2025/08/01</span>
+                <div className="amount">
+                  <span className="text">8,125,100</span>
+                  <img 
+                    className="arrow down" 
+                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div className="item">
+                <span className="dot"></span>
+                <span className="date">2025/08/01</span>
+                <div className="amount">
+                  <span className="text">8,125,100</span>
+                  <img 
+                    className="arrow down" 
+                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div className="item">
+                <span className="dot"></span>
+                <span className="date">2025/08/01</span>
+                <div className="amount">
+                  <span className="text">8,125,100</span>
+                  <img 
+                    className="arrow down" 
+                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div className="item">
+                <span className="dot"></span>
+                <span className="date">2025/08/01</span>
+                <div className="amount">
+                  <span className="text">8,125,100</span>
+                  <img 
+                    className="arrow down" 
+                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/vat-return/ui/section/amount-section.tsx

@@ -5,6 +5,7 @@ import { NumericFormat } from 'react-number-format';
 import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 import { useState } from 'react';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 
 export interface AmountSectionProps {
   detail: VatReturnDetailResponse;
@@ -13,12 +14,22 @@ export interface AmountSectionProps {
 export const AmountSection = ({
   detail
 }: AmountSectionProps) => {
-   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
   const openSection = () => {
     const status = !isOpen;
     setIsOpen(status);
   };
+
+  const onRequestDownload = (userEmail?: string) => {
+
+  };
+
+  const onClickToOpenDownloadBottomSheet = () => {
+
+  };
+
   return (
     <>
       <div className="txn-num-group">
@@ -76,10 +87,22 @@ export const AmountSection = ({
           <span className="value">{ moment(detail.issueDate).format('YYYY.MM.DD') }</span>
         </div>
         <div className="txn-doc">
-          <button className="doc-btn" type="button">세금계산서</button>
+          <button 
-          <button className="doc-btn" type="button">상세자료</button>
+            className="doc-btn" 
+            type="button"
+            onClick={ onClickToOpenDownloadBottomSheet }
+          >세금계산서</button>
         </div>
       </div>
+      { !!downloadBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageSave={ true }
+          sendEmail={ true }
+          sendRequest={ onRequestDownload }
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

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

@@ -51,7 +51,7 @@ export const BillingListPage = () => {
 	const [minAmount, setMinAmount] = useState<number>();
 	const [maxAmount, setMaxAmount] = useState<number>();
 
-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -102,8 +102,8 @@ export const BillingListPage = () => {
 	const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
-  const onClickToDownloadExcel = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
   };
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
@@ -119,7 +119,7 @@ export const BillingListPage = () => {
 		});
   };
 
-	const onRequestDownloadExcel = (userEmail?: string) => {
+	const onRequestDownload = (userEmail?: string) => {
 
 	};
 
@@ -161,7 +161,7 @@ export const BillingListPage = () => {
 									<img 
 										src={ IMAGE_ROOT + '/ico_download.svg' } 
 										alt="다운로드"
-										onClick={ () => onClickToDownloadExcel() }
+										onClick={ () => onClickToOpenDownloadBottomSheet() }
                   />
 								</button>
 							</div>
@@ -217,13 +217,13 @@ export const BillingListPage = () => {
 				setMinAmount={ setMinAmount }
 				setMaxAmount={ setMaxAmount }
       ></BillingFilter>
-			{ !!emailBottomSheetOn &&
+			{ !!downloadBottomSheetOn &&
 				<EmailBottomSheet
-					bottomSheetOn={ emailBottomSheetOn }
+					bottomSheetOn={ downloadBottomSheetOn }
-					setBottomSheetOn={ setEmailBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageSave={ false }
 					sendEmail={ true }
-					sendRequest={ onRequestDownloadExcel }
+					sendRequest={ onRequestDownload }
 				></EmailBottomSheet>
 			}
 		</>

src/pages/vat-return/detail-page.tsx

@@ -6,7 +6,9 @@ import { useVatReturnDetailMutation } from '@/entities/vat-return/api/use-vat-re
 import { HeaderType } from '@/entities/common/model/types';
 import {
   VatReturnDetailParams,
-  VatReturnDetailResponse
+  VatReturnDetailResponse,
+  VatReturnTaxInvoiceParams,
+  VatReturnTaxInvoiceResponse
 } from '@/entities/vat-return/model/types';
 import {
   useSetOnBack, 
@@ -18,6 +20,8 @@ import { SupplierSection } from '@/entities/vat-return/ui/section/supplier-secti
 import { ReceiverSection } from '@/entities/vat-return/ui/section/receiver-section';
 import { IssueSection } from '@/entities/vat-return/ui/section/issue-section';
 import { AmountSection } from '@/entities/vat-return/ui/section/amount-section';
+import { useVatReturnTaxInvoiceMutation } from '@/entities/vat-return/api/use-vat-return-tax-invoice-mutation';
+import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-detail-bottom-sheet';
 
 export const DetailPage = () => {
   const { navigate } = useNavigate();
@@ -27,7 +31,8 @@ export const DetailPage = () => {
   taxInvoiceNumber = 'TAX202506300001';
   
   const [openAmount, setOpenAmount] = useState<boolean>(false);
-  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [detail, setDetail] = useState<VatReturnTaxInvoiceResponse>({});
 
   useSetHeaderTitle('세금계산서 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -36,9 +41,10 @@ export const DetailPage = () => {
   });
   useSetFooterMode(false);
   
+  const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
   const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation();
 
-  const callDetail = () => {
+  const callTaxInvoice = () => {
     let params: VatReturnDetailParams = {
       taxInvoiceNumber: taxInvoiceNumber,
     };
@@ -46,8 +52,13 @@ export const DetailPage = () => {
       setDetail(rs);
     });
   };
+
+  const onClickToOpenBottomSheet = () => {
+    setBottomSheetOn(true);
+  };
+
   useEffect(() => {
-    callDetail();
+    callTaxInvoice();
   }, []);
   
   return (
@@ -74,9 +85,21 @@ export const DetailPage = () => {
                 ></SupplierSection>
               </div>
             </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ onClickToOpenBottomSheet }
+              >거래 취소</button>
+            </div>
           </div>
         </div>
       </main>
+      { !!bottomSheetOn &&
+        <VatReturnListDetailBottomSheet
+          bottomSheetOn={ bottomSheetOn }
+          setBottomSheetOn={ setBottomSheetOn }
+        ></VatReturnListDetailBottomSheet>
+      }
     </>
   )
 };

src/widgets/sub-layout/index.tsx

@@ -18,11 +18,12 @@ import { useStore } from '@/shared/model/store';
 import { getLocalStorage, setLocalStorage } from '@/shared/lib';
 import { StorageKeys } from '@/shared/constants/local-storage';
 import { HomeGroupsParams, HomeGroupsResponse } from '@/entities/home/model/types';
-import { BusinessPropertyByMidParams, BusinessPropertyByMidResponse, LoginResponse, ShortcutUserParams, ShortcutUserResponse } from '@/entities/user/model/types';
+import { BusinessPropertyByMidParams, BusinessPropertyByMidResponse, LoginResponse, ShortcutUserParams, ShortcutUserResponse, UserFindAuthMethodParams, UserFindAuthMethodResponse } from '@/entities/user/model/types';
 import { useCodesListByCodeClMutation } from '@/entities/common/api/use-codes-list-by-codeCl-mutaion';
 import { useShortcutUserMutation } from '@/entities/user/api/use-shortcut-user-mutation';
 import { useShortcutDefaultMutation } from '@/entities/user/api/use-shortcut-detault-mutation';
 import { useBusinessPropertyByMidMutation } from '@/entities/user/api/use-business-property-by-mid-mutation';
+import { useUserFindAuthMethodMutation } from '@/entities/user/api/use-user-find-authmethod-mutation';
 
 export interface ContextType {
   setOnBack: (onBack: () => void) => void;
@@ -65,6 +66,7 @@ export const SubLayout = () => {
   const { mutateAsync: shortcutUser } = useShortcutUserMutation();
   const { mutateAsync: shortcutDefault } = useShortcutDefaultMutation();
   const { mutateAsync: businessPropertyByMid } = useBusinessPropertyByMidMutation();
+  const { mutateAsync: findAuthMethod } = useUserFindAuthMethodMutation();
 
   const wrapperClassName = 'wrapper';
   
@@ -159,6 +161,34 @@ export const SubLayout = () => {
     
   };
 
+  const callFindAuthMethod = () => {
+    let userInfo = useStore.getState().UserStore.userInfo;
+    if(!!userInfo.usrid && !! mid){
+      let params: UserFindAuthMethodParams = {
+        usrid: userInfo.usrid,
+        mid: mid
+      };
+      findAuthMethod(params).then((rs: any) => {
+        let emails = rs.emails.map((value: any, index: any) => {
+          return value.content;
+        });
+        console.log('emails -->', emails)
+        useStore.getState().UserStore.setUserEmails(emails);
+        let options: Array<Record<string, string>> = emails.map((value: any, index: any) => {
+          return {
+            name: value,
+            value: value
+          };
+        });
+        useStore.getState().UserStore.setSelectOptionsEmails(options);
+        if(!!emails[0]){
+          useStore.getState().UserStore.setEmail(emails[0]);
+        }
+      });
+    }
+    
+  };
+    
   const handleLogin = useCallback(async () => {
     let userParmas;
     if(!isNativeEnvironment){
@@ -221,6 +251,7 @@ export const SubLayout = () => {
   useEffect(() => {
     if(!!mid){
       // callBusinessPropertyByMid();
+      callFindAuthMethod();
     }
   }, [mid]);