지급 대행

src/entities/additional-service/model/types.ts

@@ -292,3 +292,7 @@ export interface SmsPaymentDetailResendProps {
   bottomSmsPaymentDetailResendOn: boolean;
   setBottomSmsPaymentDetailResendOn: (bottomSmsPaymentDetailResendOn: boolean) => void;
 };
+export interface SettlementAgencyBottomAgreeProps {
+  bottomAgreeOn: boolean;
+  setBottomAgreeOn: (bottomAgreeOn: boolean) => void;
+};

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>

src/pages/additional-service/settlement-agency/detail-page.tsx

@@ -1,8 +1,161 @@
-export const SettlementAgencyDetailPage = () => {
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { SettlementAgencyBottomAgree } from '@/entities/additional-service/ui/settlement-agency-bottom-agree';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
 
+export const SettlementAgencyDetailPage = () => {
+  const { navigate } = useNavigate();
+
+  const [bottomAgreeOn, setBottomAgreeOn] = useState<boolean>(false);
+
+  useSetHeaderTitle('정산대행');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.settlementAgency.manage);
+  });
+  
+  const oncClickToOpenBottomAgree = () => {
+    setBottomAgreeOn(true);
+  };
   return (
     <>
+      <main className="full-height">
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <div className="num-amount">
+                <span className="amount">100,000,000원</span>
+              </div>
+              <div className="num-store">나이스테스트가맹점</div>
+              <div className="num-day">2025.08.19</div>
+              <div className="receipt-row">
+                <button type="button" className="receipt-btn">
+                  <span className="icon-24 download"></span>
+                  <span>입금확인서</span>
+                </button>
+              </div>
+            </div>
 
+            <div className="detail-divider"></div>
+
+            <div className="pay-detail">
+              <div className="detail-title">정산 정보</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">정산ID</span>
+                  <span className="v">AB25061012</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">정산일</span>
+                  <span className="v">2025.06.08</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">정산 상태</span>
+                  <span className="v">동의완료</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">총 거래금액</span>
+                  <span className="v">105,000,000 원</span>
+                </li>
+                <li className="kv-row bolder">
+                  <span className="k">정산금액</span>
+                  <span className="v">100,000,000원</span>
+                </li>
+              </ul>
+              <div className="detail-divider"></div>
+              <div className="detail-title">정산 매장 정보</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">정산매장 ID</span>
+                  <span className="v">BACK01</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">정산매장 명</span>
+                  <span className="v">뺵다방3</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">사업자 번호</span>
+                  <span className="v">123456789</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">수수료 정보</span>
+                  <span className="v">3%, 반올림</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">과세 여부</span>
+                  <span className="v">과세, 반올림</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">은행</span>
+                  <span className="v">기업</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">계좌번호</span>
+                  <span className="v">110-12-12-11111</span>
+                </li>
+              </ul>
+              <div className="detail-divider"></div>
+              <div className="detail-title summary-amount divTop">
+                <span className="amount-text states-17"> 상태 변경 이력</span>
+                <button>
+                  <img 
+                    src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
+                    alt="화살표"
+                  />
+                </button>
+              </div>
+              <div className="sd-history">
+                <div className="sd-history-item">
+                  <div className="left">
+                    <div className="name">출금실패</div>
+                    <div className="time">2025/04/15 10:00:00</div>
+                  </div>
+                  <div className="right">
+                    <div className="reason">사유 : 지급 계좌오류</div>
+                  </div>
+                </div>
+                <div className="sd-history-item">
+                  <div className="left">
+                    <div className="name">동의완료</div>
+                    <div className="time">2025/04/10 10:00:00</div>
+                  </div>
+                  <div className="right">
+                    <div className="reason">-</div>
+                  </div>
+                </div>
+                <div className="sd-history-item">
+                  <div className="left">
+                    <div className="name">동의기한 초과</div>
+                    <div className="time">2025/04/06 10:00:00</div>
+                  </div>
+                  <div className="right">
+                    <div className="reason">-</div>
+                  </div>
+                </div>
+              </div>
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  onClick={ () => oncClickToOpenBottomAgree() }
+                >정산 동의/거절</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <SettlementAgencyBottomAgree
+        bottomAgreeOn={ bottomAgreeOn }
+        setBottomAgreeOn={ setBottomAgreeOn }
+      ></SettlementAgencyBottomAgree>
     </>
   );
 };

src/pages/additional-service/settlement-agency/manage-page.tsx

@@ -19,7 +19,7 @@ export const SettlementAgencyManagePage = () => {
 
   useSetHeaderTitle('정산대행');
   useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
+  useSetFooterMode(false);
   useSetOnBack(() => {
     navigate(PATHS.home);
   });