부가세 참고 및 컴포넌트 전체적 일부 수정

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

@@ -1,4 +1,4 @@
-import { VatReturnReceiptType, VatReturnTargetType } from './types';
+import { VatReturnPayTax, VatReturnReceiptType, VatReturnTargetType } from './types';
 
 export const VatReturnReceiptTypeBtnGroup = [
   {name: '전체', value: VatReturnReceiptType.ALL },
@@ -11,4 +11,9 @@ export const VatReturnTargetTypeBtnGroup = [
   {name: '일반', value: VatReturnTargetType.GENERAL },
   {name: '차액정산', value: VatReturnTargetType.DIFFERENCE_COLLECTION },
   {name: '환급정산', value: VatReturnTargetType.REFUND_SETTLEMENT }
+];
+
+export const VatReturnTaxBtnGroups = [
+  {name: '과세', value: VatReturnPayTax.Tax },
+  {name: '면세', value: VatReturnPayTax.NoTax },
 ];

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

@@ -13,6 +13,10 @@ export enum VatReturnReceiptType {
   RECEIPT = 'RECEIPT',
   BILL = 'BILL '
 };
+export enum VatReturnPayTax {
+  Tax = 'Tax',
+  NoTax = 'NoTax'
+};
 export enum VatReturnTargetType {
   ALL = 'ALL',
   GENERAL = 'GENERAL',

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

@@ -64,7 +64,6 @@ export const ListFilter = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }

src/entities/vat-return/ui/reference-request-fail.tsx

@@ -0,0 +1,60 @@
+import { motion } from 'framer-motion';
+import { 
+  FilterMotionDuration,
+  FilterMotionStyle,
+  FilterMotionVariants
+} from '@/entities/common/model/constant';
+
+export interface ReferenceRequestFailProps {
+  pageOn: boolean;
+  setPageOn: (pageOn: boolean) => void;
+};
+
+export const ReferenceRequestFail = ({
+  pageOn,
+  setPageOn
+}: ReferenceRequestFailProps) => {
+  const onClickToClose = () => {
+    setPageOn(false);
+  };
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal"
+        initial="hidden"
+        animate={(pageOn) ? 'visible' : 'hidden'}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <div className="full-menu-container">
+          <div 
+            className="success-page"
+            style={{ margin: '0 auto' }}
+          >
+            <div className="success-body">
+              <div className="error-icon" aria-hidden="true"></div>
+              <h1 className="success-title">
+                <span>부가세 참고 자료</span>
+                <br/>
+                <span>신청 실패하였습니다</span>
+              </h1>
+              <div className="success-result">
+                <p className="result-text align-left position_label">
+                  <span>결과 :</span> 
+                  <span>[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요.</span>
+                </p>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ onClickToClose }
+              >확인</button>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/vat-return/ui/reference-request-success.tsx

@@ -0,0 +1,61 @@
+import { motion } from 'framer-motion';
+import { 
+  FilterMotionDuration,
+  FilterMotionStyle,
+  FilterMotionVariants
+} from '@/entities/common/model/constant';
+
+export interface ReferenceRequestSuccessProps {
+  pageOn: boolean;
+  setPageOn: (pageOn: boolean) => void;
+};
+
+export const ReferenceRequestSuccess = ({
+  pageOn,
+  setPageOn
+}: ReferenceRequestSuccessProps) => {
+  const onClickToClose = () => {
+    setPageOn(false);
+  };
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal"
+        initial="hidden"
+        animate={(pageOn) ? 'visible' : 'hidden'}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <div className="full-menu-container">
+          <div 
+            className="success-body"
+            style={{ margin: '0 auto' }}
+          >
+            <div className="success-icon" aria-hidden="true"></div>
+            <h1 className="success-title">
+              <span>부가세 참고 자료</span>
+              <br/>
+              <span>신청이 완료되었습니다.</span>
+            </h1>
+            <p className="success-subtitle">파일은 선택한 수령 방법으로 제공됩니다.</p>
+            <div className="success-result">
+              <p className="result-text">
+                <span>신청일 :</span> <span>2025.06.04</span>
+                <br/>
+                <span>메일주소 :</span> <span>TEST@NICEPAY.CO.KR</span>
+              </p>
+            </div>
+            <p className="success-note dot">참고용 자료이므로 반드시 내부 회계자료 등과<br/>비교 후 사용해 주세요.</p>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ onClickToClose }
+            >확인</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

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

@@ -0,0 +1,87 @@
+import moment from 'moment';
+import { useState } from 'react';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { ReferenceRequestSuccess } from './reference-request-success';
+import { ReferenceRequestFail } from './reference-request-fail';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { VatReturnTaxBtnGroups } from '../model/contant';
+import { VatReturnPayTax } from '../model/types';
+
+export const ReferenceWrap = () => {
+
+  const [success, setSuccess] = useState<boolean>(false);
+
+  const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
+  const [failPageOn, setFailPageOn] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest00m');
+  const [startDate, setStartDate] = useState<string>(moment().format('YYYY.MM.DD'));
+  const [endDate, setEndDate] = useState<string>(moment().format('YYYY.MM.DD'));
+  const [payTax, setPayTax] = useState<VatReturnPayTax>(VatReturnPayTax.Tax);
+  const [email, setEmail] = useState<string>('');
+
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+
+  let EmailOptions = [
+    {name: 'focp212@naver.com', value: 'focp212@naver.com'}
+  ];
+
+  const onClickToResquest = () => {
+    if(success){
+      setSuccessPageOn(true);
+    }
+    else{
+      setFailPageOn(true);
+    }
+  };
+
+  return (
+    <>
+      <div className="option-list no-padding pt-30">
+        <FilterSelect
+          title='가맹점'
+          selectValue={ mid }
+          selectSetter={ setMid }
+          selectOptions={ MidOptions }
+        ></FilterSelect>
+        <FilterButtonGroups
+          title='거래 과세/면세 구분'
+          activeValue={ payTax }
+          btnGroups={ VatReturnTaxBtnGroups }
+          setter={ setPayTax }
+          addClassName='horizon'
+          maxBtn={ 2 }
+        ></FilterButtonGroups>
+        <FilterCalendar
+          title='거래기간'
+          startDate={ startDate }
+          endDate={ endDate }
+          setStartDate={ setStartDate }
+          setEndDate={ setEndDate }
+        ></FilterCalendar>
+        <FilterSelect
+          title='수령메일주소'
+          selectValue={ email }
+          selectSetter={ setEmail }
+          selectOptions={ EmailOptions }
+        ></FilterSelect>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ onClickToResquest }
+          >자료신청</button>
+        </div>
+      </div>
+      <ReferenceRequestSuccess
+        pageOn={ successPageOn }
+        setPageOn={ setSuccessPageOn }
+      ></ReferenceRequestSuccess>
+      <ReferenceRequestFail
+        pageOn={ failPageOn }
+        setPageOn={ setFailPageOn }
+      ></ReferenceRequestFail>
+    </>
+  )
+};

src/entities/vat-return/ui/var-reference-req-fail.tsx

@@ -1,26 +0,0 @@
-export const VatReferenceReqFail = () => {
-
-  return (
-    <>
-      <div className="success-page">
-        <div className="success-body">
-          <div className="error-icon" aria-hidden="true"></div>
-          <h1 className="success-title">
-            <span>부가세 참고 자료</span>
-            <br/>
-            <span>신청 실패하였습니다</span>
-          </h1>
-          <div className="success-result">
-            <p className="result-text align-left position_label">
-              <span>결과 :</span> 
-              <span>[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요.</span>
-            </p>
-          </div>
-        </div>
-        <div className="apply-row">
-          <button className="btn-50 btn-blue flex-1">확인</button>
-        </div>
-      </div>
-    </>
-  );
-};

src/entities/vat-return/ui/vat-reference-req-success.tsx

@@ -1,29 +0,0 @@
-export const VatReferenceReqSuccess = () => {
-
-  return (
-    <>
-      <div className="success-page">
-        <div className="success-body">
-          <div className="success-icon" aria-hidden="true"></div>
-          <h1 className="success-title">
-            <span>부가세 참고 자료</span>
-            <br/>
-            <span>신청이 완료되었습니다.</span>
-          </h1>
-          <p className="success-subtitle">파일은 선택한 수령 방법으로 제공됩니다.</p>
-          <div className="success-result">
-            <p className="result-text">
-              <span>신청일 :</span> <span>2025.06.04</span>
-              <br/>
-              <span>메일주소 :</span> <span>TEST@NICEPAY.CO.KR</span>
-            </p>
-          </div>
-          <p className="success-note dot">참고용 자료이므로 반드시 내부 회계자료 등과<br/>비교 후 사용해 주세요.</p>
-        </div>
-        <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">확인</button>
-        </div>
-      </div>
-    </>
-  );
-};

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

@@ -1,8 +0,0 @@
-export const VatReferenceWrap = () => {
-
-  return (
-    <>
-    
-    </>
-  )
-};

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

@@ -16,7 +16,7 @@ export const VatReturnTab = ({
         navigate(PATHS.vatReturn.list);
       }
       else if(tab === VatReturnTabKeys.VatReference){
-        navigate(PATHS.vatReturn.vatReference);
+        navigate(PATHS.vatReturn.reference);
       }
     }
   };