email 자동 셋팅

2025-10-23 13:56:32 +09:00
parent fbc910caf9
commit d8ed11b4bf
10 changed files with 297 additions and 39 deletions
--- a/src/entities/account/ui/user-login-auth-info-wrap.tsx
+++ b/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
--- a/src/entities/common/ui/email-bottom-sheet.tsx
+++ b/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 = [
-    {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 [userEmail, setUserEmail] = useState<string>(emailList[0]?.value || '');
+  const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
+  const email = useStore.getState().UserStore.email;
+  const [userEmail, setUserEmail] = useState<string>(email);
  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>
                      ))
                    }
--- a/src/entities/user/model/store.ts
+++ b/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')
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -67,8 +67,8 @@ export interface UserExistsUseridParams {
 export interface UserFindAuthMethodParams {
  mid: string;
  usrid: string;
-  idCL: string;
-  status: string;
+  idCL?: string;
+  status?: string;
  page?: DefaultRequestPagination;
 };

--- a/src/entities/vat-return/model/types.ts
+++ b/src/entities/vat-return/model/types.ts
@@ -111,13 +111,13 @@ export interface VatReturnTaxInvoiceParams {
  taxInvoiceNumber: string;
 }
 export interface VatReturnTaxInvoiceResponse {
-  supplierInfo: SupplierInfo;
-  recipientInfo: RecipientInfo;
-  issueDate: string;
-  supplyAmount: number;
-  taxAmount: number;
-  totalAmount: number;
-  transactionDetails: TransactionDetails;
+  supplierInfo?: SupplierInfo;
+  recipientInfo?: RecipientInfo;
+  issueDate?: string;
+  supplyAmount?: number;
+  taxAmount?: number;
+  totalAmount?: number;
+  transactionDetails?: TransactionDetails;
 };

 export interface SupplierInfo {
--- a/src/entities/vat-return/ui/list-detail-bottom-sheet.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/entities/vat-return/ui/section/amount-section.tsx
+++ b/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 className="doc-btn" type="button">상세자료</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>
+      }
    </>
  );
 };
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/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 = () => {
-    setEmailBottomSheetOn(true);
+  const onClickToOpenDownloadBottomSheet = () => {
+    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 }
-					setBottomSheetOn={ setEmailBottomSheetOn }
+					bottomSheetOn={ downloadBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageSave={ false }
 					sendEmail={ true }
-					sendRequest={ onRequestDownloadExcel }
+					sendRequest={ onRequestDownload }
 				></EmailBottomSheet>
 			}
 		</>
--- a/src/pages/vat-return/detail-page.tsx
+++ b/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>
+      }
    </>
  )
 };
--- a/src/widgets/sub-layout/index.tsx
+++ b/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]);