알림톡

2025-09-25 09:18:17 +09:00
parent 9c03a73cc7
commit 3116c58ae7
6 changed files with 310 additions and 97 deletions
--- a/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts
+++ b/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts
@@ -17,7 +17,7 @@ export const extensionAlimtalkSettingDetail = (params: ExtensionAlimtalkSettingD
  );
 };

-export const useExtensionAlimtalkSettingSaveMutation = (options?: UseMutationOptions<ExtensionAlimtalkSettingDetailResponse, CBDCAxiosError, ExtensionAlimtalkSettingDetailParams>) => {
+export const useExtensionAlimtalkSettingDetailMutation = (options?: UseMutationOptions<ExtensionAlimtalkSettingDetailResponse, CBDCAxiosError, ExtensionAlimtalkSettingDetailParams>) => {
  const mutation = useMutation<ExtensionAlimtalkSettingDetailResponse, CBDCAxiosError, ExtensionAlimtalkSettingDetailParams>({
    ...options,
    mutationFn: (params: ExtensionAlimtalkSettingDetailParams) => extensionAlimtalkSettingDetail(params),
--- a/src/entities/additional-service/model/alimtalk/types.ts
+++ b/src/entities/additional-service/model/alimtalk/types.ts
@@ -1,5 +1,14 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';

+export enum AlimtalkSettingFlagKeys {
+  cardApprovalFlag = 'cardApprovalFlag',
+  cardCancelFlag = 'cardCancelFlag',
+  bankApprovalFlag = 'bankApprovalFlag',
+  bankCancelFlag = 'bankCancelFlag',
+  virtureAccountDepositRequestFlag = 'virtureAccountDepositRequestFlag',
+  virtureAccountDepositCompleteFlag = 'virtureAccountDepositCompleteFlag',
+  virtureAccountRefundFlag = 'virtureAccountRefundFlag'
+};
 export enum AlimtalkSearchCl {
  BUYER_NAME = 'BUYER_NAME',
  TID = 'TID'
@@ -24,8 +33,8 @@ export enum AlimTalkSendCl {
 };
 export interface ExtensionAlimtalkSettingSaveParams {
  mid: string;
-  sendMerchantInfo: SendMerchantInfo;
-  sendUserInfo: SendUserInfo;
+  sendMerchantInfo?: SendMerchantInfo;
+  sendUserInfo?: SendUserInfo;
 };

 export interface ExtensionAlimtalkSettingSaveResponse {};
--- a/src/entities/additional-service/ui/alimtalk/setting-service-row.tsx
+++ b/src/entities/additional-service/ui/alimtalk/setting-service-row.tsx
@@ -0,0 +1,51 @@
+import { AlimtalkSettingFlagKeys } from "../../model/alimtalk/types";
+
+export interface AlimTalkSettingServiceRowProps {
+  title: string;
+  merchantFlag?: boolean;
+  userFlag?: boolean;
+  setMerchantFlag: (merchantFlag: boolean) => void;
+  setUserFlag: (userFlag: boolean) => void;
+};
+
+export const AlimTalkSettingServiceRow = ({
+  title,
+  merchantFlag,
+  userFlag,
+  setMerchantFlag,
+  setUserFlag
+}: AlimTalkSettingServiceRowProps) => {
+
+  const onChangeMerchantFlag = (value: boolean) => {
+    setMerchantFlag(value);
+  };
+  const onChangeUserFlag = (value: boolean) => {
+    setUserFlag(value);
+  };
+
+  return (
+    <>
+      <div className="service-row">
+        <span>{ title }</span>
+        <div className="switch-group">
+          <label className="settings-switch">
+            <input 
+              type="checkbox"
+              checked={ merchantFlag }
+              onChange={ (e) => onChangeMerchantFlag(e.target.checked) }
+            />
+            <span className="slider"></span>
+          </label>
+          <label className="settings-switch">
+            <input 
+              type="checkbox" 
+              checked={ userFlag } 
+              onChange={ (e) => onChangeUserFlag(e.target.checked) }
+            />
+            <span className="slider"></span>
+          </label>
+        </div>
+      </div>
+    </>
+  )
+};
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -231,7 +231,7 @@ export const ListItem = ({
    else {
      return
    }
-    return timeStr
+    return timeStr;
  };

  const getTitle = () => {
--- a/src/pages/additional-service/alimtalk/detail-page.tsx
+++ b/src/pages/additional-service/alimtalk/detail-page.tsx
@@ -1,8 +1,108 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+import { useLocation } from 'react-router';
+import { useEffect, useState } from 'react';
+import { ExtensionAlimtalkDetailParams, ExtensionAlimtalkDetailResponse } from '@/entities/additional-service/model/alimtalk/types';
+import { useExtensionAlimtalkDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation';
+import moment from 'moment';
+
 export const AlimtalkDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+
+  const tid = location.state.tid;
+  const mid = location.state.mid;
+
+  const [detail, setDetail] = useState<ExtensionAlimtalkDetailResponse>();
+  
+  const { mutateAsync: extensionAlimtalkDetail } = useExtensionAlimtalkDetailMutation();
+
+  const callDetail = () => {
+    let params: ExtensionAlimtalkDetailParams = {
+      tid: tid,
+      mid: mid,
+    };
+
+    extensionAlimtalkDetail(params).then((rs: ExtensionAlimtalkDetailResponse) => {
+      setDetail(rs);
+    });
+  };
+
+  useSetHeaderTitle('알림톡 발송 상세');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.alimtalk.list);
+  });
+
+  useEffect(() => {
+    callDetail();
+  }, []);
+
+  const getDate = (date?: string) => {
+    return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): '';
+  };

  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">{ detail?.receiverName }</span>
+              </div>
+              <div className="num-store">{ detail?.merchantName }</div>
+              <div className="num-day">{ getDate(detail?.sendDate) }</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">MID</span>
+                  <span className="v">{ detail?.mid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">TID</span>
+                  <span className="v">{ detail?.tid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">서비스명</span>
+                  <span className="v">{ detail?.serviceName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">발송 종류</span>
+                  <span className="v">{ detail?.sendType }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">주문자명</span>
+                  <span className="v">{detail?.senderName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">결제서비스</span>
+                  <span className="v">{ detail?.paymentMethod }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">알림구분</span>
+                  <span className="v">{ detail?.alimCl }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">발송구분</span>
+                  <span className="v">{ detail?.sendCl }</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
    </>
  );
 };
--- a/src/pages/additional-service/alimtalk/setting-page.tsx
+++ b/src/pages/additional-service/alimtalk/setting-page.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash-es';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -8,10 +9,100 @@ import {
 	useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useExtensionAlimtalkSettingDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation';
+import { useExtensionAlimtalkSettingSaveMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-save-mutation';
+import { 
+  AlimtalkSettingFlagKeys,
+  ExtensionAlimtalkSettingDetailParams,
+  ExtensionAlimtalkSettingDetailResponse,
+  ExtensionAlimtalkSettingSaveParams,
+  SendMerchantInfo,
+  SendUserInfo
+} from '@/entities/additional-service/model/alimtalk/types';
+import { useEffect, useState } from 'react';
+import { AlimTalkSettingServiceRow } from '@/entities/additional-service/ui/alimtalk/setting-service-row';

 export const AlimtalkSettingPage = () => {
  const { navigate } = useNavigate();

+  const [mid, setMid] = useState<string>('nictest001m');
+  
+  const [merchantCardApprovalFlag, setMerchantCardApprovalFlag] = useState<boolean>(false);
+  const [merchantCardCancelFlag, setMerchantCardCancelFlag] = useState<boolean>(false);
+  const [merchantBankApprovalFlag, setMerchantBankApprovalFlag] = useState<boolean>(false);
+  const [merchantBankCancelFlag, setMerchantBankCancelFlag] = useState<boolean>(false);
+  const [merchantVirtureAccountDepositRequestFlag, setMerchantVirtureAccountDepositRequestFlag] = useState<boolean>(false);
+  const [merchantVirtureAccountDepositCompleteFlag, setMerchantVirtureAccountDepositCompleteFlag] = useState<boolean>(false);
+  const [merchantVirtureAccountRefundFlag, setMerchantVirtureAccountRefundFlag] = useState<boolean>(false);
+
+  const [userCardApprovalFlag, setUserCardApprovalFlag] = useState<boolean>(false);
+  const [userCardCancelFlag, setUserCardCancelFlag] = useState<boolean>(false);
+  const [userBankApprovalFlag, setUserBankApprovalFlag] = useState<boolean>(false);
+  const [userBankCancelFlag, setUserBankCancelFlag] = useState<boolean>(false);
+  const [userVirtureAccountDepositRequestFlag, setUserVirtureAccountDepositRequestFlag] = useState<boolean>(false);
+  const [userVirtureAccountDepositCompleteFlag, setUserVirtureAccountDepositCompleteFlag] = useState<boolean>(false);
+  const [userVirtureAccountRefundFlag, setUserVirtureAccountRefundFlag] = useState<boolean>(false);
+
+  const { mutateAsync: alimtalkSettingDetail } = useExtensionAlimtalkSettingDetailMutation();
+  const { mutateAsync: alimtalkSettingSave } = useExtensionAlimtalkSettingSaveMutation();
+
+  const callSettingDetail = () => {
+    let params: ExtensionAlimtalkSettingDetailParams = {
+      mid: mid,
+    };
+
+    alimtalkSettingDetail(params).then((rs: ExtensionAlimtalkSettingDetailResponse) => {
+      let sendMerchantInfo = rs.content[0]?.sendMerchantInfo;
+      let sendUserInfo = rs.content[0]?.sendUserInfo;
+
+      if(sendMerchantInfo){
+        setMerchantCardApprovalFlag((sendMerchantInfo?.cardApprovalFlag || false));
+        setMerchantCardCancelFlag(sendMerchantInfo?.cardCancelFlag || false);
+        setMerchantBankApprovalFlag(sendMerchantInfo?.bankApprovalFlag || false);
+        setMerchantBankCancelFlag(sendMerchantInfo?.bankCancelFlag || false);
+        setMerchantVirtureAccountDepositRequestFlag(sendMerchantInfo?.virtureAccountDepositRequestFlag || false);
+        setMerchantVirtureAccountDepositCompleteFlag(sendMerchantInfo?.virtureAccountDepositCompleteFlag || false);
+        setMerchantVirtureAccountRefundFlag(sendMerchantInfo?.virtureAccountRefundFlag || false);
+      }
+      if(sendUserInfo){
+        setUserCardApprovalFlag(sendUserInfo?.cardApprovalFlag || false);
+        setUserCardCancelFlag(sendUserInfo?.cardCancelFlag || false);
+        setUserBankApprovalFlag(sendUserInfo?.bankApprovalFlag || false);
+        setUserBankCancelFlag(sendUserInfo?.bankCancelFlag || false);
+        setUserVirtureAccountDepositRequestFlag(sendUserInfo?.virtureAccountDepositRequestFlag || false);
+        setUserVirtureAccountDepositCompleteFlag(sendUserInfo?.virtureAccountDepositCompleteFlag || false);
+        setUserVirtureAccountRefundFlag(sendUserInfo?.virtureAccountRefundFlag || false);
+      }
+    });
+  };
+
+  const callSettingSave = () => {
+    let params: ExtensionAlimtalkSettingSaveParams = {  
+      mid: mid,
+      sendMerchantInfo: {
+        cardApprovalFlag: merchantCardApprovalFlag,
+        cardCancelFlag: merchantCardCancelFlag,
+        bankApprovalFlag: merchantBankApprovalFlag,
+        bankCancelFlag: merchantBankCancelFlag,
+        virtureAccountDepositRequestFlag: merchantVirtureAccountDepositRequestFlag,
+        virtureAccountDepositCompleteFlag: merchantVirtureAccountDepositCompleteFlag,
+        virtureAccountRefundFlag: merchantVirtureAccountRefundFlag
+      },
+      sendUserInfo: {
+        cardApprovalFlag: userCardApprovalFlag,
+        cardCancelFlag: userCardCancelFlag,
+        bankApprovalFlag: userBankApprovalFlag,
+        bankCancelFlag: userBankCancelFlag,
+        virtureAccountDepositRequestFlag: userVirtureAccountDepositRequestFlag,
+        virtureAccountDepositCompleteFlag: userVirtureAccountDepositCompleteFlag,
+        virtureAccountRefundFlag: userVirtureAccountRefundFlag
+      },
+    };
+    alimtalkSettingSave(params).then((rs) => {
+      console.log(rs);
+    });
+  };
+
  useSetHeaderTitle('알림톡 결제통보');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
@@ -20,9 +111,13 @@ export const AlimtalkSettingPage = () => {
  });

  const onClickToSave = () => {
-    
+    callSettingSave();
  };

+  useEffect(() => {
+    callSettingDetail();
+  }, []);
+
  return (
    <>
      <main>
@@ -53,97 +148,55 @@ export const AlimtalkSettingPage = () => {
                </div>

                <div className="service-section">
-                  <div className="service-row">
-                    <span>신용카드(승인)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>신용카드(취소)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox" checked/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox" checked/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>계좌이체(승인)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox" checked/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox" checked/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>계좌이체(취소)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox" checked/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox" checked/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>가상계좌(입금요청)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>가상계좌(입금완료)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div className="service-row">
-                    <span>가상계좌(환불)</span>
-                    <div className="switch-group">
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                      <label className="settings-switch">
-                        <input type="checkbox"/>
-                        <span className="slider"></span>
-                      </label>
-                    </div>
-                  </div>
+                  <AlimTalkSettingServiceRow
+                    title='신용카드(승인)'
+                    merchantFlag={ merchantCardApprovalFlag }
+                    userFlag={ userCardApprovalFlag }
+                    setMerchantFlag={ setMerchantCardApprovalFlag }
+                    setUserFlag={ setUserCardApprovalFlag }
+                  ></AlimTalkSettingServiceRow>
+                  <AlimTalkSettingServiceRow
+                    title='신용카드(취소)'
+                    merchantFlag={ merchantBankApprovalFlag }
+                    userFlag={ userCardCancelFlag }
+                    setMerchantFlag={ setMerchantBankApprovalFlag }
+                    setUserFlag={ setUserCardCancelFlag }
+                  ></AlimTalkSettingServiceRow>
+                  <AlimTalkSettingServiceRow
+                    title='계좌이체(승인)'
+                    merchantFlag={ merchantBankApprovalFlag }
+                    userFlag={ userBankApprovalFlag }
+                    setMerchantFlag={ setMerchantBankApprovalFlag }
+                    setUserFlag={ setUserBankApprovalFlag }
+                  ></AlimTalkSettingServiceRow>
+                  <AlimTalkSettingServiceRow
+                    title='계좌이체(취소)'
+                    merchantFlag={ merchantBankCancelFlag }
+                    userFlag={ userBankCancelFlag }
+                    setMerchantFlag={ setMerchantBankCancelFlag }
+                    setUserFlag={ setUserBankCancelFlag }
+                  ></AlimTalkSettingServiceRow>
+                  <AlimTalkSettingServiceRow
+                    title='가상계좌(입금요청)'
+                    merchantFlag={ merchantVirtureAccountDepositRequestFlag }
+                    userFlag={ userVirtureAccountDepositRequestFlag }
+                    setMerchantFlag={ setMerchantVirtureAccountDepositRequestFlag }
+                    setUserFlag={ setUserVirtureAccountDepositRequestFlag }
+                  ></AlimTalkSettingServiceRow>
+                  <AlimTalkSettingServiceRow
+                    title='가상계좌(입금완료)'
+                    merchantFlag={ merchantVirtureAccountDepositCompleteFlag }
+                    userFlag={ userVirtureAccountDepositCompleteFlag }
+                    setMerchantFlag={ setMerchantVirtureAccountDepositCompleteFlag }
+                    setUserFlag={ setUserVirtureAccountDepositCompleteFlag }
+                  ></AlimTalkSettingServiceRow>
+                  <AlimTalkSettingServiceRow
+                    title='가상계좌(환불)'
+                    merchantFlag={ merchantVirtureAccountRefundFlag }
+                    userFlag={ userVirtureAccountRefundFlag }
+                    setMerchantFlag={ setMerchantVirtureAccountRefundFlag }
+                    setUserFlag={ setUserVirtureAccountRefundFlag }
+                  ></AlimTalkSettingServiceRow>
                </div>
              </div>
            </div>