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 = [
-    {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>
                       ))
                     }

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;
-  status: string;
+  idCL?: 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;
-  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 {

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 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>
+      }
     </>
   );
 };