홈 화면 month api 수정

src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx

@@ -0,0 +1,100 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+export interface AllTransactionCancelPreventBondProps {
+  preventBondOn: boolean;
+  setCancelPreventBondOn: (preventBondOn: boolean) => void;
+};
+
+export const AllTransactionCancelPreventBond = ({
+  preventBondOn,
+  setCancelPreventBondOn
+}: AllTransactionCancelPreventBondProps) => {
+  const onClickToClose = () => {
+    setCancelPreventBondOn(false);
+  };
+  return (
+    <>
+      <motion.div>
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">거래취소(입금 후 취소)</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </div>
+          </div>
+          <div className="option-list pt-16">
+            
+            <div className="txn-divider minus"></div>
+            <div className="summary-section pt-30">
+              <div className="summary-extend">
+                <div>취소 거래내역</div>
+                <ul className="summary-amount-list">
+                  <li className="summary-amount-item">
+                    <span className="label">승인일</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">승인번호</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">승인금액</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">총 취소금액</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">입금요청금액</span>
+                    <span className="value"></span>
+                  </li>
+                </ul>
+              </div>
+              <div className="summary-extend">
+                <div>입금 정보</div>
+                <ul className="summary-amount-list">
+                  <li className="summary-amount-item">
+                    <span className="label">은행</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">계좌번호</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">예금주</span>
+                    <span className="value"></span>
+                  </li>
+                  <li className="summary-amount-item">
+                    <span className="label">총 취소금액</span>
+                    <span className="value"></span>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <div>[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.</div>
+                <div>입금자명은 가맹점 상호로 입력해 주세요.</div>
+                <div>입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.</div>
+                <div>취소내역은 최대 3일 이후 확인 가능합니다.</div>
+                <div>입금 후 취소 프로세스</div>
+                <div>가맹점이 취소요청 - 가맹점이 입금 - 입금확인 - 취소 처리</div>
+                <div>정산받지 않은 겨래인 경우</div>
+                <div>service@nicepay.co.kr 로 거래내역을 방송바랍니다.(단 정산예정일이 2일 이상 남은 거래에 한함)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};