- 링크결제_분리승인 페이지 추가

- KeyIn결제 FormData 생성
- 링크결제_분리승인 과련 Css 추가

src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx

@@ -5,7 +5,8 @@ import { ListDateGroup } from '../list-date-group';
 
 export const KeyInPaymentList = ({
   additionalServiceCategory,
-  listItems
+  listItems,
+  mid
 }: KeyInPaymentListProps) => {
   const { navigate } = useNavigate();
 
@@ -25,7 +26,9 @@ export const KeyInPaymentList = ({
   };
 
   const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.keyInPayment.request)
+    navigate(PATHS.additionalService.keyInPayment.request, {
+      state: { mid }
+    });
   };
 
   return (

src/entities/additional-service/ui/link-payment/bottom-sheet/extended-period-bottom-sheet.tsx

@@ -0,0 +1,71 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant";
+
+
+export interface ExtendedPeriodBottomSheetProps {
+    bottomSheetOn: boolean,
+    setBottomSheetOn: (bottomSheetOn: boolean) => void;
+    extendPeriod: () => void;
+};
+
+export const ExtendedPeriodBottomSheet = ({
+    bottomSheetOn,
+    setBottomSheetOn,
+    extendPeriod
+}: ExtendedPeriodBottomSheetProps) => {
+    const onClickToClose = () => {
+        setBottomSheetOn(false);
+    };
+
+    const onClickToResendSms = () => {
+        if(extendPeriod) {
+            extendPeriod();
+        }
+        onClickToClose();
+    };
+
+  return (
+    <>
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
+        <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="bottomsheet-content">
+          <div className="bottom-section">
+            <p>유효기간 연장을 하시겠습니끼?</p>
+            <p>개별 상태를 확인해주세요.</p>
+          </div>
+        </div>
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1"
+            type="button"
+            onClick={ () => onClickToResendSms() }
+          >확인</button>
+        </div>
+      </motion.div>
+    </>
+  );
+}

src/entities/additional-service/ui/link-payment/bottom-sheet/link-break-bottom-sheet.tsx

@@ -0,0 +1,71 @@
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant";
+
+
+export interface LinkBreakBottomSheetProps {
+    bottomSheetOn: boolean,
+    setBottomSheetOn: (bottomSheetOn: boolean) => void;
+    linkBreak: () => void;
+};
+
+export const LinkBreakBottomSheet = ({
+    bottomSheetOn,
+    setBottomSheetOn,
+    linkBreak
+}: LinkBreakBottomSheetProps) => {
+    const onClickToClose = () => {
+        setBottomSheetOn(false);
+    };
+
+    const onClickToLinkBreak = () => {
+        if(linkBreak) {
+            linkBreak();
+        }
+        onClickToClose();
+    };
+
+  return (
+    <>
+      { (bottomSheetOn) &&
+        <div className="bg-dim"></div>
+      }
+      <motion.div 
+        className="bottomsheet"
+        initial="hidden"
+        animate={ (bottomSheetOn)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
+      >
+        <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="bottomsheet-content">
+          <div className="bottom-section">
+            <p>링크중단 요청 시</p>
+            <p>결제불가 상태가 되며 원복 불가합니다.</p>
+          </div>
+        </div>
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1"
+            type="button"
+            onClick={ () => onClickToLinkBreak() }
+          >확인</button>
+        </div>
+      </motion.div>
+    </>
+  );
+}

src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx

@@ -54,7 +54,7 @@ export const LinkPaymentHistoryWrap = () => {
 			mid: mid,
 			searchCl: searchType === LinkPaymentSearchType.ALL ? '' : searchType,
 			searchValue: searchKeyword,
-			paymentMethod: 'st', // 추후 변경 필요 빼야함
+			paymentMethod: '',
 			fromDate: startDate,
 			toDate: endDate,
 			paymentStatus: transactionStatus === LinkPaymentTransactionStatus.ALL ? '' : transactionStatus,
@@ -91,7 +91,7 @@ export const LinkPaymentHistoryWrap = () => {
 			mid: mid,
 			searchCl: (searchType === LinkPaymentSearchType.ALL)? '': searchType,
 			searchValue: searchKeyword,
-			paymentMethod: 'st', // 추후 변경 필요 빼야함
+			paymentMethod: '',
 			fromDate: startDate,
 			toDate: endDate,
 			paymentStatus: (transactionStatus === LinkPaymentTransactionStatus.ALL)? '': transactionStatus,