지급 대행

src/entities/additional-service/ui/settlement-agency-bottom-agree.tsx

@@ -0,0 +1,107 @@
+import { motion } from 'framer-motion';
+import { SettlementAgencyBottomAgreeProps } from '../model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+export const SettlementAgencyBottomAgree = ({
+  bottomAgreeOn,
+  setBottomAgreeOn
+}: SettlementAgencyBottomAgreeProps) => {
+
+  const variants = {
+    hidden: { y: '100%' },
+    visible: { y: '0%' },
+  };
+
+  const onClickToClose = () => {
+    setBottomAgreeOn(false);
+  };
+
+  const onClickToSaveSettlementAgencyAgree = () => {
+
+  };
+  return (
+    <>
+       {bottomAgreeOn &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomAgreeOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.5 }}
+      >
+        <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="agree-section">
+          <div className="agree-desc pb10">본 정산 내역은 정산금 지급 동의 확인을 위한<br/>것입니다.</div>
+          <div className="agree-desc pb10">동의 시 수정 불가, 미동의 또는 거절 시 지급이 보류될 수 있습니다.</div>
+          <div className="agree-desc pb16">지급 계좌·정산매장 정보 변경 시 반드시<br/>수정해야 합니다.</div>
+          <div className="agree-desc pb16">빠른 출금은 동의대기/기한초과/출금실패 시 신청 가능하며, 신청 시간(10시 전·후)에 따라 당일 또는 익일 처리됩니다.</div>
+          <div className="agree-desc pb16">이용자 정보 오기입(계좌번호, 사업자 정보 등)으로 인한 오지급·오류는 당사가 책임지지 않습니다.</div>
+          <div className="sheet-divider"></div>
+
+          <div className="agree-radio-group">
+            <div className="check_box">
+              <input 
+                id="r1"
+                className="checkbox"
+                type="radio"
+                name="r"
+              />
+              <label 
+                className="gtr"
+                htmlFor="r1" 
+              ></label>정산동의
+            </div>
+            <div className="check_box">
+              <input 
+                id="r2"
+                className="checkbox"
+                type="radio"
+                name="r" 
+              />
+              <label 
+                className="gtr"
+                htmlFor="r2" 
+              ></label>정산거절
+            </div>
+            <div className="check_box">
+              <input 
+                className="checkbox"
+                id="r3"
+                type="radio"
+                name="r"
+              />
+              <label
+                className="gtr"
+                htmlFor="r3" 
+              ></label>빠른 출금
+            </div>
+          </div>
+        </div>
+
+        <div className="bottomsheet-footer">
+          <button 
+            className="btn-50 btn-blue flex-1" 
+            type="button"
+            onClick={ () => onClickToSaveSettlementAgencyAgree() }
+          >저장</button>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx

@@ -8,6 +8,9 @@ export const SettlementAgencyManageWrap = () => {
   const onClickToRegister = () => {
     navigate(PATHS.additionalService.settlementAgency.register);
   };
+  const onClickToDetail = () => {
+    navigate(PATHS.additionalService.settlementAgency.detail);
+  };
   
   return (
     <>
@@ -107,7 +110,10 @@ export const SettlementAgencyManageWrap = () => {
       </section>
       <section className="transaction-list">
         <div className="date-header">25.06.08(일)</div>
-        <div className="transaction-item approved">
+        <div 
+          className="transaction-item approved"
+          onClick={ () => onClickToDetail() }
+        >
           <div className="transaction-status">
             <div className="status-dot blue"></div>
           </div>