첫 커밋

2025-09-05 15:36:48 +09:00
commit 05238b04c1
825 changed files with 176358 additions and 0 deletions
--- a/src/pages/additional-service/intro/intro-page.tsx
+++ b/src/pages/additional-service/intro/intro-page.tsx
@@ -0,0 +1,124 @@
+import { PATHS } from '@/shared/constants/paths';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IntroListItem } from '@/entities/additional-service/ui/intro-list-item';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const IntroPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('부가서비스 소개');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const usingList = [
+    {
+      className: 'list-wrap01', serviceName: 'SMS 결제 통보', serviceDesc: '입금 요청부터 완료까지 SMS 자동 전송',
+      icon: IMAGE_ROOT + '/icon_ing03.svg', path: PATHS.additionalService.smsPaymentNotification
+    },
+    {
+      className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스',
+      icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.arsCardPayment.list
+    },
+    {
+      className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
+      icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment
+    },
+    {
+      className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
+      icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch
+    },
+  ];
+  const requestList = [
+    {
+      className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
+      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency
+    },
+    {
+      className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
+      icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency
+    },
+    {
+      className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
+      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment
+    },
+    {
+      className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
+      icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundTransfer
+    },
+    {
+      className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
+      icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth
+    },
+    {
+      className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
+      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification
+    },
+  ];
+
+  const getUsingList = () => {
+    let rs = [];
+    for(let i=0;i<usingList.length;i++){
+      rs.push(
+        <IntroListItem
+          key={ 'key-using-' + i }
+          className={ usingList[i]?.className }
+          serviceName={ usingList[i]?.serviceName }
+          serviceDesc={ usingList[i]?.serviceDesc }
+          icon={ usingList[i]?.icon }
+          path={ usingList[i]?.path }
+        ></IntroListItem>
+      );
+    }
+    return rs;
+  };
+  const getRequestList = () => {
+    let rs = [];
+    for(let i=0;i<requestList.length;i++){
+      rs.push(
+        <IntroListItem
+          key={ 'key-request-' + i }
+          className={ requestList[i]?.className }
+          serviceName={ requestList[i]?.serviceName }
+          serviceDesc={ requestList[i]?.serviceDesc }
+          icon={ requestList[i]?.icon }
+          path={ requestList[i]?.path }
+        ></IntroListItem>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <div className="ing-list">
+              <div className="input-wrapper top-select">
+                <select>
+                  <option value="1">nicetest00g</option>
+                  <option value="2">nicetest00g</option>
+                  <option value="3">nicetest00g</option>
+                </select>
+              </div>
+              <h3 className="ing-title">사용중인 서비스</h3>
+              { getUsingList() }
+              <h3 className="ing-title">신청 가능한 서비스</h3>
+              { getRequestList() }
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};