세금계산서 리스트 및 상세

src/entities/merchant/ui/info-wrap/escrow-info-wrap.tsx

@@ -26,10 +26,10 @@ export const EscrowInfoWrap = ({
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const opeSection = () => {
-    const staus = !isOpen;
-    setIsOpen(staus);
-    if(!!staus){
+  const openSection = () => {
+    const status = !isOpen;
+    setIsOpen(status);
+    if(!!status){
       setOpenChild(type);  
     }
     else {
@@ -47,7 +47,7 @@ export const EscrowInfoWrap = ({
     <>
       <div className="section">
         <div className="section-title"
-          onClick={ () => opeSection() }
+          onClick={ () => openSection() }
         >
           { title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>

src/entities/tax/api/use-invoice-detail-mutation.ts

@@ -1,29 +0,0 @@
-import axios from 'axios';
-import { API_URL_TAX } from '@/shared/api/api-url-tax';
-import { resultify } from '@/shared/lib/resultify';
-import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
-  InvoiceDetailParams,
-  InvoiceDetailResponse
-} from '../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const invoiceDetail = (params: InvoiceDetailParams) => {
-  return resultify(
-    axios.post<InvoiceDetailResponse>(API_URL_TAX.invoiceDetail(), params),
-  );
-};
-
-export const useInvoiceDetailMutation = (options?: UseMutationOptions<InvoiceDetailResponse, CBDCAxiosError, InvoiceDetailParams>) => {
-  const mutation = useMutation<InvoiceDetailResponse, CBDCAxiosError, InvoiceDetailParams>({
-    ...options,
-    mutationFn: (params: InvoiceDetailParams) => invoiceDetail(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};

src/entities/tax/api/use-invoice-list-mutation.ts

@@ -1,29 +0,0 @@
-import axios from 'axios';
-import { API_URL_TAX } from '@/shared/api/api-url-tax';
-import { resultify } from '@/shared/lib/resultify';
-import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
-  InvoiceListResponse,
-  InvoiceListParams,
-} from '../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const invoiceList = (params: InvoiceListParams) => {
-  return resultify(
-    axios.post<InvoiceListResponse>(API_URL_TAX.invoiceList(), params),
-  );
-};
-
-export const useInvoiceListMutation = (options?: UseMutationOptions<InvoiceListResponse, CBDCAxiosError, InvoiceListParams>) => {
-  const mutation = useMutation<InvoiceListResponse, CBDCAxiosError, InvoiceListParams>({
-    ...options,
-    mutationFn: (params: InvoiceListParams) => invoiceList(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};

src/entities/tax/model/types.ts

@@ -1,96 +0,0 @@
-import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
-
-
-export enum TaxTabKeys {
-  InvoiceList = 'InvoiceList',
-  VatReference = 'VatReference',
-};
-export interface TaxTabProps {
-  activeTab: TaxTabKeys;
-};
-export interface InvoiceFilterProps {
-  filterOn: boolean;
-  setFilterOn: (filterOn: boolean) => void;
-  mid: string;
-  startDate: string;
-  endDate: string;
-  receiptType: string;
-  targetType: string;
-  setMid: (mid: string) => void;
-  setStartDate: (date: string) => void;
-  setEndDate: (date: string) => void;
-  setReceiptType: (type: string) => void;
-  setTargetType: (type: string) => void;
-};
-
-export enum DetailInfoSectionKeys {
-  Amount = 'Amount',
-  Publish = 'Publish',
-  Receiver = 'Receiver',
-  Supplier = 'Supplier',
-};
-
-export interface InvoiceListParams {
-  mid: string;
-  startDate?: string;
-  endDate?: string;
-  receiptType?: string;
-  targetType?: string;
-};
-
-
-export interface InvoiceListResponse extends DefaulResponsePagination {
-  content: Array<ListItemProps>;
-}
-
-export interface ListItemProps extends InvoiceListItem {
-};
-
-export interface InvoiceListItem {
-  id: number
-  companyName: string;
-  mid: string;
-  issueDate: string;
-  paymentMethod: string;
-  amount: number;
-};
-
-export interface ListDateGroupProps {
-  date: string;
-  items: Array<ListItemProps>
-}
-export interface InvoiceListProps {
-  listItems: Record<string, Array<ListItemProps>>
-};
-export interface InvoiceDetailParams {
-  svcCd?: string;
-  tid: string;
-};
-
-export interface InvoiceDetailResponse {
-
-};
-export interface DetailAmountInfoProps {
-
-};
-export interface DetailPublishInfoProps {
-
-};
-export interface DetailReceiverInfoProps {
-
-};
-export interface DetailSupplierInfoProps {
-
-};
-export interface DetailResponse {
-  amountInfo?: DetailAmountInfoProps;
-  publishInfo?: DetailPublishInfoProps;
-  receiverInfo?: DetailReceiverInfoProps;
-  supplierInfo?: DetailSupplierInfoProps;
-};
-
-export interface DetailInfoSectionProps extends DetailResponse {
-  isOpen?: boolean;
-  tid?: string;
-  onClickToShowInfo?: (info: DetailInfoSectionKeys) => void;
-};

src/entities/tax/ui/detail-amount-info-section.tsx

@@ -1,47 +0,0 @@
-import { DetailInfoSectionProps } from '../model/types';
-import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
-
-export const DetailAmountInfoSection = ({
-  amountInfo,
-  isOpen,
-  onClickToShowInfo
-}: DetailInfoSectionProps) => {
-
-  return (
-    <>
-      <div className="txn-num-group">
-        <div className="txn-amount">
-          <div className="value">48,125,100<span className="unit">원</span></div>
-          <button 
-            className="chip-btn" 
-            type="button"
-          >
-            <span>금액상세</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
-          </button>
-        </div>
-        <div className="amount-expand">
-          <ul className="amount-list">
-            <li className="amount-item">
-              <span className="label">·&nbsp;&nbsp;공급가액</span>
-              <span className="value">43,750,000 원</span>
-            </li>
-            <li className="amount-item">
-              <span className="label">·&nbsp;&nbsp;VAT</span>
-              <span className="value">4,375,100 원</span>
-            </li>
-          </ul>
-        </div>
-        <div className="txn-mid">
-          <span className="value">croquis01m</span>
-        </div>
-        <div className="txn-mid">
-          <span className="value">2025.08.19</span>
-        </div>
-        <div className="txn-doc">
-          <button className="doc-btn" type="button">세금계산서</button>
-          <button className="doc-btn" type="button">상세자료</button>
-        </div>
-      </div>
-    </>
-  );
-};

src/entities/tax/ui/detail-supplier-info-section.tsx

@@ -1,26 +0,0 @@
-import { DetailInfoSectionProps } from '../model/types';
-
-export const DetailSupplierInfoSection = ({
-  supplierInfo,
-  isOpen,
-  onClickToShowInfo
-}: DetailInfoSectionProps) => {
-
-  return (
-    <>
-      <div className="txn-section">
-        <div className="section-title">공급자 정보</div>
-      </div>
-      <ul className="kv-list">
-        <li className="kv-row">
-          <span className="k">사업자등록번호</span>
-          <span className="v">222-22-22222</span>
-        </li>
-        <li className="kv-row">
-          <span className="k">상호명</span>
-          <span className="v">나이스페이먼츠</span>
-        </li>
-      </ul>
-    </>
-  );
-};

src/entities/tax/ui/invoice-list.tsx

@@ -1,29 +0,0 @@
-import { InvoiceListProps } from '../model/types';
-import { ListDateGroup } from './list-date-group';
-
-export const InvoiceList = ({
-  listItems
-}: InvoiceListProps) => {
-
-  const getListDateGroup = () => {
-    let rs = [];
-    for (const [key, value] of Object.entries(listItems)) {
-      rs.push(
-        <ListDateGroup
-          key={ key }
-          date={ key }
-          items={ value }
-        ></ListDateGroup>
-      );  
-    }
-    return rs;
-  };
-
-  return (
-    <>
-      <div className="transaction-list">
-        { getListDateGroup() }
-      </div>
-    </>
-  )
-};

src/entities/tax/ui/tax-tab.tsx

@@ -1,37 +0,0 @@
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { 
-  TaxTabKeys, 
-  TaxTabProps 
-} from '../model/types';
-
-export const TaxTab = ({
-  activeTab
-}: TaxTabProps) => {
-  const { navigate } = useNavigate();
-
-  const onClickToNavigation = (tab: TaxTabKeys) => {
-    if(activeTab !== tab){
-      if(tab === TaxTabKeys.InvoiceList){
-        navigate(PATHS.tax.invoice.list);
-      }
-      else if(tab === TaxTabKeys.VatReference){
-        navigate(PATHS.tax.vatReference);
-      }
-    }
-  };
-  return(
-    <>
-      <div className="subTab">
-        <button 
-          className={`subtab-btn ${(activeTab === TaxTabKeys.InvoiceList)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(TaxTabKeys.InvoiceList) } 
-        >세금 계산서</button>
-        <button 
-          className={`subtab-btn ${(activeTab === TaxTabKeys.VatReference)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(TaxTabKeys.VatReference) } 
-        >부가세 참고</button>
-      </div>
-    </>
-  );
-};

src/entities/vat-return/api/use-vat-return-detail-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_VAT_RETURN } from '@/shared/api/api-url-vat-return';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  VatReturnDetailParams,
+  VatReturnDetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const vatReturnDetail = (params: VatReturnDetailParams) => {
+  return resultify(
+    axios.post<VatReturnDetailResponse>(API_URL_VAT_RETURN.vatReturnDetail(), params),
+  );
+};
+
+export const useVatReturnDetailMutation = (options?: UseMutationOptions<VatReturnDetailResponse, CBDCAxiosError, VatReturnDetailParams>) => {
+  const mutation = useMutation<VatReturnDetailResponse, CBDCAxiosError, VatReturnDetailParams>({
+    ...options,
+    mutationFn: (params: VatReturnDetailParams) => vatReturnDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/vat-return/api/use-vat-return-list-mutation.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_VAT_RETURN } from '@/shared/api/api-url-vat-return';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  VatReturnListResponse,
+  VatReturnListParams,
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const vatReturnList = (params: VatReturnListParams) => {
+  return resultify(
+    axios.post<VatReturnListResponse>(API_URL_VAT_RETURN.vatReturnList(), params),
+  );
+};
+
+export const useVatReturnListMutation = (options?: UseMutationOptions<VatReturnListResponse, CBDCAxiosError, VatReturnListParams>) => {
+  const mutation = useMutation<VatReturnListResponse, CBDCAxiosError, VatReturnListParams>({
+    ...options,
+    mutationFn: (params: VatReturnListParams) => vatReturnList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

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

@@ -0,0 +1,81 @@
+import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
+
+
+export enum VatReturnTabKeys {
+  List = 'List',
+  VatReference = 'VatReference',
+};
+export interface VatReturnTabProps {
+  activeTab: VatReturnTabKeys;
+};
+export enum VatReturnReceiptType {
+  ALL = 'ALL',
+  RECEIPT = 'RECEIPT',
+  BILL = 'BILL '
+};
+export enum VatReturnTargetType {
+  ALL = 'ALL',
+  GENERAL = 'GENERAL',
+  DIFFERENCE_COLLECTION = 'DIFFERENCE_COLLECTION',
+  REFUND_SETTLEMENT = 'REFUND_SETTLEMENT',
+};
+
+export interface VatReturnListParams {
+  mid: string;
+  startDate?: string;
+  endDate?: string;
+  receiptType?: VatReturnReceiptType;
+  targetType?: VatReturnTargetType;
+  pagination?: DefaultRequestPagination;
+};
+
+
+export interface VatReturnListResponse extends DefaulResponsePagination {
+  content: Array<VatReturnListContent>;
+};
+
+export interface VatReturnListContent {
+  id?: number
+  companyName?: string;
+  mid?: string;
+  issueDate?: string;
+  paymentMethod?: string;
+  amount?: number;
+};
+
+export interface ListDateGroupProps {
+  date?: string;
+  items?: Array<VatReturnListContent>
+}
+export interface ListItemProps {
+  id?: number;
+  companyName?: string;
+  mid?: string;
+  issueDate?: string;
+  paymentMethod?: string;
+  amount?: number;
+}
+export interface VatReturnDetailParams {
+  taxInvoiceNumber?: string;
+};
+
+export interface VatReturnDetailResponse {
+  id?: number;
+  totalAmount?: number;
+  supplyAmount?: number;
+  vatAmount?: number;
+  mid?: string;
+  targetBusinessStartDate?: string;
+  targetBusinessEndDate?: string;
+  issueDate?: string;
+  subject?: string;
+  targetType?: VatReturnTargetType;
+  receiptType?: VatReturnReceiptType;
+  email?: string;
+  receiverBusinessRegistrationNumber?: string;
+  receiverCompanyName?:  string;
+  receiverCeoName?: string;
+  supplierBusinessRegistrationNumber?: string;
+  supplierCompanyName?: string;
+  supplierCeoName?: string;
+};

src/entities/vat-return/ui/list-filter.tsx

@@ -1,8 +1,24 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { InvoiceFilterProps } from '../model/types';
+import { VatReturnReceiptType, VatReturnTargetType } from '../model/types';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
-export const InvoiceFilter = ({
+export interface ListFilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+  mid: string;
+  startDate: string;
+  endDate: string;
+  receiptType: VatReturnReceiptType;
+  targetType: VatReturnTargetType;
+  setMid: (mid: string) => void;
+  setStartDate: (date: string) => void;
+  setEndDate: (date: string) => void;
+  setReceiptType: (receiptType: VatReturnReceiptType) => void;
+  setTargetType: (targetType: VatReturnTargetType) => void;
+};
+
+export const ListFilter = ({
   filterOn,
   setFilterOn,
   mid,
@@ -15,7 +31,7 @@ export const InvoiceFilter = ({
   setEndDate,
   setReceiptType,
   setTargetType
-}: InvoiceFilterProps) => {
+}: ListFilterProps) => {
   const variants = {
     hidden: { x: '100%' },
     visible: { x: '0%' },
@@ -31,12 +47,9 @@ export const InvoiceFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.3 }}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
           <div className="full-menu-header">

src/entities/vat-return/ui/list-item.tsx

@@ -15,9 +15,9 @@ export const ListItem = ({
   const { navigate } = useNavigate();
   
   const onClickToNavigate = () => {
-    navigate(PATHS.tax.invoice.detail, {
+    navigate(PATHS.vatReturn.detail, {
       state: {
-        id: id
+        taxInvoiceNumber: id
       }
     });
   };
@@ -44,7 +44,7 @@ export const ListItem = ({
             value={ amount } 
             thousandSeparator
             displayType="text"
-            suffix={ '원' }
+            suffix='원'
           ></NumericFormat> 
         </div>
       </div>

src/entities/vat-return/ui/list-wrap.tsx

@@ -2,43 +2,44 @@ import moment from 'moment';
 
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { InvoiceFilter } from './invoice-filter';
+import { ListFilter } from './list-filter';
 import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
 import { SortByKeys } from '@/entities/common/model/types';
-import { InvoiceList } from './invoice-list';
-import { useInvoiceListMutation } from '../api/use-invoice-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { ListItemProps } from '../model/types';
+import { 
+  VatReturnListContent, 
+  VatReturnListParams, 
+  VatReturnReceiptType, 
+  VatReturnTargetType 
+} from '../model/types';
+import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
+import { ListDateGroup } from './list-date-group';
 
-export const InvoiceListWrap = () => {
+export const ListWrap = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
-  const [listItems, setListItems] = useState({});
+  const [listItems, setListItems] = useState<Record<string, Array<VatReturnListContent>>>({});
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest00m');
   const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
-  const [receiptType, setReceiptType] = useState<string>('');
-  const [targetType, setTargetType] = useState<string>('');
-  const { mutateAsync: invoiceList } = useInvoiceListMutation();
+  const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
+  const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);
+
+  const { mutateAsync: vatReturnList } = useVatReturnListMutation();
 
   const callList = () => {
-    let listParams = {
+    let params: VatReturnListParams = {
       mid: mid,
       startDate: startDate,
       endDate: endDate,
       receiptType: receiptType,
       targetType: targetType,
     };
-    invoiceList(listParams).then((rs) => {
+    vatReturnList(params).then((rs) => {
       setListItems(assembleData(rs.content));
     });
-    // setListItems({
-    //   '20250601': [
-    //     {tid: 'a1234567', pname: '와와디디', userid: 'nictest01m', idate: '20250630', kind: 'PG수수료', amount: 48125100},
-    //     {tid: 'b34534534', pname: '와와디디', userid: 'wadizcop@m', idate: '20250630', kind: 'PG수수료', amount: 23845000},
-    //   ]
-    // })
+    
   };
   
   const onClickToOpenFIlter = () => {
@@ -52,7 +53,23 @@ export const InvoiceListWrap = () => {
     callList();
   }, []);
 
-  const assembleData = (content: Array<ListItemProps>) => {
+  const getListDateGroup = () => {
+    let rs = [];
+    if(Object.keys(listItems).length > 0){
+      for (const [key, value] of Object.entries(listItems)) {
+        rs.push(
+          <ListDateGroup
+            key={ key }
+            date={ key }
+            items={ value }
+          ></ListDateGroup>
+        );  
+      }
+    }
+    return rs;
+  };
+
+  const assembleData = (content: Array<VatReturnListContent>) => {
     let data: any = {};
     if(content && content.length > 0){
       for(let i=0;i<content?.length;i++){
@@ -65,7 +82,6 @@ export const InvoiceListWrap = () => {
         }
       }
     }
-    console.log('Data : ', data)
     return data;
   };
   return (
@@ -103,52 +119,13 @@ export const InvoiceListWrap = () => {
           onClickToSort={ onClickToSort }
         ></SortOptionsBox>
       </div>
-      <InvoiceList 
-        listItems={ listItems }
-      ></InvoiceList>
-      {/*
       <div className="transaction-list">
-        <div className="date-group">
-          <div className="date-header">25.06</div>
-          
-          <div className="transaction-item approved">
-            <div className="transaction-status">
-              <div className="status-dot blue"></div>
-            </div>
-            <div className="transaction-content">
-              <div className="transaction-title">와와디디 (nictest01m)</div>
-              <div className="transaction-details">
-                <span>2025.06.30</span>
-                <span className="separator">|</span>
-                <span>PG수수료</span>
-              </div>
-            </div>
-            <div className="transaction-amount">48,125,100원</div>
-          </div>
-          
-          <div className="transaction-item refund">
-            <div className="transaction-status">
-              <div className="status-dot gray"></div>
-            </div>
-            <div className="transaction-content">
-              <div className="transaction-title">와와디디 (wadizcop@m)</div>
-              <div className="transaction-details">
-                <span>2025.06.30</span>
-                <span className="separator">|</span>
-                <span>PG수수료</span>
-              </div>
-            </div>
-            <div className="transaction-amount">23,845,000원</div>
-          </div>
-         
-        </div>
+      { getListDateGroup() }
       </div>
-       */
-      }
       <div className="apply-row bottom-padding">
         <button className="btn-50 btn-blue flex-1">수기발행</button>
       </div>
-      <InvoiceFilter
+      <ListFilter
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
         mid={ mid }
@@ -161,7 +138,7 @@ export const InvoiceListWrap = () => {
         setEndDate={ setEndDate }
         setReceiptType={ setReceiptType }
         setTargetType={ setTargetType }
-      ></InvoiceFilter>
+      ></ListFilter>
     </>
   );
 };

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

@@ -0,0 +1,85 @@
+import moment from 'moment';
+import { VatReturnDetailResponse } from '../../model/types';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { NumericFormat } from 'react-number-format';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useState } from 'react';
+
+export interface AmountSectionProps {
+  detail: VatReturnDetailResponse;
+};
+
+export const AmountSection = ({
+  detail
+}: AmountSectionProps) => {
+   const [isOpen, setIsOpen] = useState<boolean>(false);
+  
+  const openSection = () => {
+    const status = !isOpen;
+    setIsOpen(status);
+  };
+  return (
+    <>
+      <div className="txn-num-group">
+        <div className="txn-amount">
+          <div className="value">
+            <NumericFormat
+              value={ detail.totalAmount } 
+              thousandSeparator
+              displayType="text"
+            ></NumericFormat>
+            <span className="unit">원</span>
+          </div>
+          <button 
+            className="chip-btn" 
+            type="button"
+            onClick={ () => openSection() }
+          >
+            <span>금액상세</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          </button>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { isOpen &&  
+          <div className="amount-expand">
+            <ul className="amount-list">
+              <li className="amount-item">
+                <span className="label">·&nbsp;&nbsp;공급가액</span>
+                <span className="value">
+                  <NumericFormat
+                    value={ detail.supplyAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+              </li>
+              <li className="amount-item">
+                <span className="label">·&nbsp;&nbsp;VAT</span>
+                <span className="value">
+                  <NumericFormat
+                    value={ detail.vatAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+              </li>
+            </ul>
+          </div>
+        }
+        </SlideDown>
+        <div className="txn-mid">
+          <span className="value">{ detail.mid }</span>
+        </div>
+        <div className="txn-mid">
+          <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>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -1,10 +1,13 @@
-import { DetailInfoSectionProps } from '../model/types';
+import moment from 'moment';
+import { VatReturnDetailResponse } from '../../model/types';
 
-export const DetailPublishInfoSection = ({
-  publishInfo,
-  isOpen,
-  onClickToShowInfo
-}: DetailInfoSectionProps) => {
+export interface IssueSectionProps {
+  detail: VatReturnDetailResponse
+};
+
+export const IssueSection = ({
+  detail
+}: IssueSectionProps) => {
 
   return (
     <>
@@ -13,31 +16,31 @@ export const DetailPublishInfoSection = ({
         <ul className="kv-list">
           <li className="kv-row">
             <span className="k">MID</span>
-            <span className="v">nictest01m</span>
+            <span className="v">{ detail.mid }</span>
           </li>
           <li className="kv-row">
             <span className="k">발행대상일자</span>
-            <span className="v">2025.06.01 ~ 2025.06.30</span>
+            <span className="v">{ moment(detail.targetBusinessStartDate).format('YYYY.MM.DD') } ~ { moment(detail.targetBusinessEndDate).format('YYYY.MM.DD') }</span>
           </li>
           <li className="kv-row">
             <span className="k">발행일자</span>
-            <span className="v">2025.06.30</span>
+            <span className="v">{ moment(detail.issueDate).format('YYYY.MM.DD') }</span>
           </li>
           <li className="kv-row">
             <span className="k">적요</span>
-            <span className="v">PG 수수료</span>
+            <span className="v">{ detail.subject }</span>
           </li>
           <li className="kv-row">
             <span className="k">발행대상</span>
-            <span className="v">일반</span>
+            <span className="v">{ detail.targetType }</span>
           </li>
           <li className="kv-row">
             <span className="k">영수구분</span>
-            <span className="v">영수</span>
+            <span className="v">{ detail.receiptType }</span>
           </li>
           <li className="kv-row">
             <span className="k">Email</span>
-            <span className="v">test@nicepay.co.kr</span>
+            <span className="v">{ detail.email }</span>
           </li>
         </ul>
       </div>

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

@@ -1,10 +1,12 @@
-import { DetailInfoSectionProps } from '../model/types';
+import { VatReturnDetailResponse } from '../../model/types';
 
-export const DetailReceiverInfoSection = ({
-  receiverInfo,
-  isOpen,
-  onClickToShowInfo
-}: DetailInfoSectionProps) => {
+export interface ReceiverSectionProps {
+  detail: VatReturnDetailResponse
+};
+
+export const ReceiverSection = ({
+  detail
+}: ReceiverSectionProps) => {
 
   return (
     <>
@@ -14,15 +16,15 @@ export const DetailReceiverInfoSection = ({
       <ul className="kv-list">
         <li className="kv-row">
           <span className="k">사업자등록번호</span>
-          <span className="v">123-12-12345</span>
+          <span className="v">{ detail.receiverBusinessRegistrationNumber }</span>
         </li>
         <li className="kv-row">
           <span className="k">상호명</span>
-          <span className="v">와와디디</span>
+          <span className="v">{ detail.receiverCompanyName }</span>
         </li>
         <li className="kv-row">
           <span className="k">대표자명</span>
-          <span className="v">김테스트</span>
+          <span className="v">{ detail.receiverCeoName }</span>
         </li>
       </ul>
     </>

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

@@ -0,0 +1,32 @@
+import { VatReturnDetailResponse } from '../../model/types';
+
+export interface SupplierSectionProps {
+  detail: VatReturnDetailResponse
+};
+
+export const SupplierSection = ({
+  detail
+}: SupplierSectionProps) => {
+
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">공급자 정보</div>
+      </div>
+      <ul className="kv-list">
+        <li className="kv-row">
+          <span className="k">사업자등록번호</span>
+          <span className="v">{ detail.supplierBusinessRegistrationNumber }</span>
+        </li>
+        <li className="kv-row">
+          <span className="k">상호명</span>
+          <span className="v">{ detail.supplierCompanyName }</span>
+        </li>
+        <li className="kv-row">
+          <span className="k">대표자명</span>
+          <span className="v">{ detail.supplierCeoName }</span>
+        </li>
+      </ul>
+    </>
+  );
+};

src/entities/vat-return/ui/vat-return-tab.tsx

@@ -0,0 +1,37 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { 
+  VatReturnTabKeys, 
+  VatReturnTabProps 
+} from '../model/types';
+
+export const VatReturnTab = ({
+  activeTab
+}: VatReturnTabProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = (tab: VatReturnTabKeys) => {
+    if(activeTab !== tab){
+      if(tab === VatReturnTabKeys.List){
+        navigate(PATHS.vatReturn.list);
+      }
+      else if(tab === VatReturnTabKeys.VatReference){
+        navigate(PATHS.vatReturn.vatReference);
+      }
+    }
+  };
+  return(
+    <>
+      <div className="subTab">
+        <button 
+          className={`subtab-btn ${(activeTab === VatReturnTabKeys.List)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(VatReturnTabKeys.List) } 
+        >세금 계산서</button>
+        <button 
+          className={`subtab-btn ${(activeTab === VatReturnTabKeys.VatReference)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(VatReturnTabKeys.VatReference) } 
+        >부가세 참고</button>
+      </div>
+    </>
+  );
+};