From 409a711b9a0e17b7935242cfcb913456f9556d08 Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Wed, 10 Sep 2025 17:03:19 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B6=80=EA=B0=80=EC=84=9C=EB=B9=84=EC=8A=A4?= =?UTF-8?q?=20:=20=EB=A7=81=ED=81=AC=EA=B2=B0=EC=A0=9C=20=EB=B0=9C?= =?UTF-8?q?=EC=86=A1=EB=82=B4=EC=97=AD,=EB=B0=9C=EC=86=A1=EB=8C=80?= =?UTF-8?q?=EA=B8=B0=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-service/model/types.ts | 27 +++ .../ui/link-payment-dispatch-list-wrap.tsx | 158 ------------------ .../ui/link-payment-pending-send-wrap.tsx | 150 ----------------- .../apply}/link-payment-step1.tsx | 0 .../apply}/link-payment-step2.tsx | 0 .../detail/detail-deets-Info-section.tsx | 38 +++++ .../detail/detail-payment-info-section.tsx | 50 ++++++ .../detail-pending-payment-info-section.tsx | 58 +++++++ .../link-payment/link-payment-date-group.tsx | 58 +++++++ .../link-payment-dispatch-list-wrap.tsx | 143 ++++++++++++++++ .../link-payment-filter.tsx | 0 .../ui/link-payment/link-payment-item.tsx | 62 +++++++ .../ui/link-payment/link-payment-list.tsx | 41 +++++ .../link-payment-pending-date-group.tsx | 56 +++++++ .../link-payment-pending-item.tsx | 57 +++++++ .../link-payment-pending-list.tsx | 40 +++++ .../link-payment-pending-send-wrap.tsx | 129 ++++++++++++++ .../{ => link-payment}/link-payment-tab.tsx | 2 +- .../ui/link-payment/sort-options-box.tsx | 25 +++ .../additional-service-pages.tsx | 10 +- .../link-payment-apply-confirm-page.tsx | 0 .../{ => apply}/link-payment-apply-page.tsx | 4 +- .../link-payment-apply-success-page.tsx | 0 .../link-payment/link-payment-detail-page.tsx | 119 +++++++++++++ .../link-payment-dispatch-list-page.tsx | 4 +- .../link-payment-pending-detail-page.tsx | 110 ++++++++++++ .../link-payment-pending-send-page.tsx | 6 +- src/shared/constants/paths.ts | 8 + src/shared/constants/route-names.ts | 4 +- 29 files changed, 1039 insertions(+), 320 deletions(-) delete mode 100644 src/entities/additional-service/ui/link-payment-dispatch-list-wrap.tsx delete mode 100644 src/entities/additional-service/ui/link-payment-pending-send-wrap.tsx rename src/entities/additional-service/ui/{ => link-payment/apply}/link-payment-step1.tsx (100%) rename src/entities/additional-service/ui/{ => link-payment/apply}/link-payment-step2.tsx (100%) create mode 100644 src/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section.tsx create mode 100644 src/entities/additional-service/ui/link-payment/detail/detail-payment-info-section.tsx create mode 100644 src/entities/additional-service/ui/link-payment/detail/detail-pending-payment-info-section.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-date-group.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx rename src/entities/additional-service/ui/{ => link-payment}/link-payment-filter.tsx (100%) create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-item.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-list.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-pending-date-group.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-pending-item.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx create mode 100644 src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx rename src/entities/additional-service/ui/{ => link-payment}/link-payment-tab.tsx (97%) create mode 100644 src/entities/additional-service/ui/link-payment/sort-options-box.tsx rename src/pages/additional-service/link-payment/{ => apply}/link-payment-apply-confirm-page.tsx (100%) rename src/pages/additional-service/link-payment/{ => apply}/link-payment-apply-page.tsx (97%) rename src/pages/additional-service/link-payment/{ => apply}/link-payment-apply-success-page.tsx (100%) create mode 100644 src/pages/additional-service/link-payment/link-payment-detail-page.tsx create mode 100644 src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index 615b306..c50ee68 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -19,6 +19,14 @@ export enum SettlementAgencyTabKeys { Deposit = 'Deposit', Member = 'Member', }; +export enum SortByKeys { + New = 'New', + Amount = 'Amount', +}; +export interface SortOptionsBoxProps { + sortBy: SortByKeys; + onClickToSort: (sortBy: SortByKeys) => void; +}; export interface SettlementAgencyTabProps { activeTab: SettlementAgencyTabKeys; }; @@ -306,4 +314,23 @@ export interface SettlementAgencyBottomAgreeProps { export interface LinkPaymentFilterProps { filterOn: boolean; setFilterOn: (filterOn: boolean) => void; +}; +export enum DetailInfoSectionKeys { + Payment = 'Payment', + Deets = 'Deets' +} +export interface DetailPaymentInfoProps { + +}; +export interface DetailDeetsInfoProps { + +}; +export interface DetailResponse { + paymentInfo?: DetailPaymentInfoProps + deetsInfo?: DetailDeetsInfoProps +} +export interface DetailInfoSectionProps extends DetailResponse { + show?: boolean; + tid?: string; + onClickToShowInfo?: (info: DetailInfoSectionKeys) => void; } \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment-dispatch-list-wrap.tsx b/src/entities/additional-service/ui/link-payment-dispatch-list-wrap.tsx deleted file mode 100644 index 27cb91e..0000000 --- a/src/entities/additional-service/ui/link-payment-dispatch-list-wrap.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import { IMAGE_ROOT } from "@/shared/constants/common"; -import { useState } from "react"; -import { LinkPaymentFilter } from "./link-payment-filter"; -import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { PATHS } from "@/shared/constants/paths"; - - -export const LinkPaymentDispatchListWrap = () => { - const { navigate } = useNavigate(); - const [filterOn, setFilterOn] = useState(false); - const onClickToOpenFilter = () => { - setFilterOn(!filterOn); - }; - const onClickToNavigate = () => { - navigate(PATHS.additionalService.linkPayment.request) - } - - return ( - <> -
-
-
- - -
- -
-
- -
-
- - | - -
-
-
- 전체 - 성공 - 실패 -
-
-
- -
-
25.06.08(일)
-
-
-
-
-
-
김*환(7000)
-
- 결제완료 - ㅣ - SMS - ㅣ - 신용카드 -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 결제완료 - ㅣ - 이메일 - ㅣ - 신용카드 -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 입금요청 - ㅣ - 이메일 - ㅣ - 신용카드 -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 결제중단 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 결제실패 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
- -
- - - ) -} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment-pending-send-wrap.tsx b/src/entities/additional-service/ui/link-payment-pending-send-wrap.tsx deleted file mode 100644 index 395d121..0000000 --- a/src/entities/additional-service/ui/link-payment-pending-send-wrap.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { IMAGE_ROOT } from "@/shared/constants/common"; -import { useState } from "react"; -import { LinkPaymentFilter } from "./link-payment-filter"; -import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { PATHS } from "@/shared/constants/paths"; - -export const LinkPaymentPendingSendWrap = () => { - const { navigate } = useNavigate(); - const [filterOn, setFilterOn] = useState(false); - const onClickToOpenFilter = () => { - setFilterOn(!filterOn); - }; - const onClickToNavigate = () => { - navigate(PATHS.additionalService.linkPayment.request) - } - return ( - <> -
-
-
- - -
- -
-
- -
-
- - | - -
-
-
- 전체 - 성공 - 실패 -
-
-
- -
-
25.06.08(일)
-
-
-
-
-
-
김*환(7000)
-
- 발송요청 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 발송요청 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 발송요청 - ㅣ - 이메일 -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 발송취소 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 발송취소 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
- -
- - - ) -} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment-step1.tsx b/src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx similarity index 100% rename from src/entities/additional-service/ui/link-payment-step1.tsx rename to src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx diff --git a/src/entities/additional-service/ui/link-payment-step2.tsx b/src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx similarity index 100% rename from src/entities/additional-service/ui/link-payment-step2.tsx rename to src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx diff --git a/src/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section.tsx b/src/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section.tsx new file mode 100644 index 0000000..ba7ac62 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section.tsx @@ -0,0 +1,38 @@ +interface DetailDeetsInfoSectionProps { + deetsInfo?: any; + show?: boolean; + onClickToShowInfo?: () => void; +} + +export const DetailDeetsInfoSection = ({ + deetsInfo, + show, + onClickToShowInfo +}: DetailDeetsInfoSectionProps) => { + + return ( + <> +
+
상세 정보
+
    +
  • + 이메일 + +
    • +
  • + 휴대폰번호 + 01073937470 +
    • +
  • + 상품명 + 곰돌이 +
    • +
  • + 주문번호 + mod201705545050 +
    • +
+
+ + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/detail/detail-payment-info-section.tsx b/src/entities/additional-service/ui/link-payment/detail/detail-payment-info-section.tsx new file mode 100644 index 0000000..b31b54c --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/detail/detail-payment-info-section.tsx @@ -0,0 +1,50 @@ +interface DetailPaymentInfoSectionProps { + paymentInfo?: any; + show?: boolean; + onClickToShowInfo?: () => void; +} + +export const DetailPaymentInfoSection = ({ + paymentInfo, + show, + onClickToShowInfo +}: DetailPaymentInfoSectionProps) => { + + return ( + <> +
+
결제 정보
+
    +
  • + 구매자명 + 김*환 +
    • +
  • + 발송수단 + SMS +
    • +
  • + 발송일자 + 2025.06.08 +
    • +
  • + 결제상태(실패횟수) + 미완료(2) +
    • +
  • + 결제수단 + 신용카드 +
    • +
  • + 결제일자 + +
    • +
  • + 결제유효일자 + 2025.06.08 +
    • +
+
+ + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/detail/detail-pending-payment-info-section.tsx b/src/entities/additional-service/ui/link-payment/detail/detail-pending-payment-info-section.tsx new file mode 100644 index 0000000..4da7e68 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/detail/detail-pending-payment-info-section.tsx @@ -0,0 +1,58 @@ +interface DetailPendingPaymentInfoSectionProps { + paymentInfo?: any; + show?: boolean; + onClickToShowInfo?: () => void; +} + +export const DetailPaymentInfoSection = ({ + paymentInfo, + show, + onClickToShowInfo +}: DetailPendingPaymentInfoSectionProps) => { + + return ( + <> +
+
결제 정보
+
    +
  • + 진행상태 + 발송요청 +
    • +
  • + 요청일자 + 2025.06.05 +
    • +
  • + 결제유효일자 + 2025.06.08 +
    • +
  • + 발송수단 + SMS +
    • +
  • + 구매자명 + 김*환 +
    • +
  • + 이메일 + +
    • +
  • + 휴대폰번호 + 01073937470 +
    • +
  • + 상품명 + 곰돌이 +
    • +
  • + 주문번호 + moid201705545050 +
    • +
+
+ + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-date-group.tsx b/src/entities/additional-service/ui/link-payment/link-payment-date-group.tsx new file mode 100644 index 0000000..d99a4a6 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-date-group.tsx @@ -0,0 +1,58 @@ +import moment from 'moment'; +import 'moment/dist/locale/ko'; +import { LinkPaymentItem } from './link-payment-item'; +import { JSX } from 'react'; + +interface LinkPaymentTransaction { + transactionId: string; + customerName: string; + status: string; + channel: string; + paymentMethod: string; + amount: number; +} + +interface LinkPaymentDateGroupProps { + date: string; + items: LinkPaymentTransaction[]; +} + +export const LinkPaymentDateGroup = ({ + date, + items +}: LinkPaymentDateGroupProps) => { + moment.locale('ko'); + const getStateDate = () => { + let stateDate = moment(date).format('YY.MM.DD(ddd)'); + return stateDate; + }; + + const getLinkPaymentItem = () => { + const rs: JSX.Element[] = []; + if (items && items.length > 0) { + items.forEach((item, index) => { + const key = 'LinkPaymentItem-' + index; + rs.push( + + ) + }); + } + + return rs; + }; + + return ( + <> +
{getStateDate()}
+ {getLinkPaymentItem()} + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx new file mode 100644 index 0000000..09efd63 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx @@ -0,0 +1,143 @@ +import { IMAGE_ROOT } from "@/shared/constants/common"; +import { useState, useEffect } from "react"; +import { LinkPaymentFilter } from "./link-payment-filter"; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { PATHS } from "@/shared/constants/paths"; +import { LinkPaymentList } from "./link-payment-list"; +import { SortOptionsBox } from "./sort-options-box"; +import { SortByKeys } from "../../model/types"; + + +export const LinkPaymentDispatchListWrap = () => { + const { navigate } = useNavigate(); + const [filterOn, setFilterOn] = useState(false); + const [sortBy, setSortBy] = useState(SortByKeys.New); + const [listItems, setListItems] = useState({}); + + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + const onClickToNavigate = () => { + navigate(PATHS.additionalService.linkPayment.request) + } + const onClickToSort = (sort: SortByKeys) => { + setSortBy(sort); + callList({ sortBy: sort }); + }; + + const callList = (option?: {sortBy?: string, val?: string}) => { + setListItems({ + '20250608': [ + { + transactionId: 'txn1', + customerName: '김*환(7000)', + status: '결제완료', + channel: 'SMS', + paymentMethod: '신용카드', + amount: 5254000 + }, + { + transactionId: 'txn2', + customerName: '김*환(7000)', + status: '결제완료', + channel: '이메일', + paymentMethod: '신용카드', + amount: 5254000 + }, + { + transactionId: 'txn3', + customerName: '김*환(7000)', + status: '입금요청', + channel: '이메일', + paymentMethod: '신용카드', + amount: 5254000 + }, + { + transactionId: 'txn4', + customerName: '김*환(7000)', + status: '결제중단', + channel: 'SMS', + paymentMethod: '', + amount: 5254000 + }, + { + transactionId: 'txn5', + customerName: '김*환(7000)', + status: '결제실패', + channel: 'SMS', + paymentMethod: '', + amount: 5254000 + } + ] + }); + }; + + useEffect(() => { + callList(); + }, []); + + return ( + <> +
+
+
+ + +
+ +
+
+ +
+ + +
+
+ 전체 + 성공 + 실패 +
+
+
+ + +
+ +
+ + + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment-filter.tsx b/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx similarity index 100% rename from src/entities/additional-service/ui/link-payment-filter.tsx rename to src/entities/additional-service/ui/link-payment/link-payment-filter.tsx diff --git a/src/entities/additional-service/ui/link-payment/link-payment-item.tsx b/src/entities/additional-service/ui/link-payment/link-payment-item.tsx new file mode 100644 index 0000000..373fac8 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-item.tsx @@ -0,0 +1,62 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import moment from 'moment'; + +interface LinkPaymentItemProps { + transactionId: string; + customerName: string; + status: string; + channel: string; + paymentMethod: string; + amount: number; +} + +export const LinkPaymentItem = ({ + transactionId, + customerName, + status, + channel, + paymentMethod, + amount +}: LinkPaymentItemProps) => { + const { navigate } = useNavigate(); + + const onClickToNavigate = () => { + navigate(PATHS.additionalService.linkPayment.detail, { + state: { + transactionId: transactionId + } + }); + }; + + const getStatusDotClass = () => { + if (status === '결제완료' || status === '입금요청') { + return 'status-dot blue'; + } + return 'status-dot gray'; + }; + + return ( + <> +
onClickToNavigate()} + > +
+
+
+
+
{customerName}
+
+ {status} + ㅣ + {channel} + ㅣ + {paymentMethod} +
+
+
{amount.toLocaleString()}원
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-list.tsx b/src/entities/additional-service/ui/link-payment/link-payment-list.tsx new file mode 100644 index 0000000..e4094aa --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-list.tsx @@ -0,0 +1,41 @@ +import { LinkPaymentDateGroup } from './link-payment-date-group'; + +interface LinkPaymentTransaction { + transactionId: string; + customerName: string; + status: string; + channel: string; + paymentMethod: string; + amount: number; +} + +interface LinkPaymentListProps { + listItems: Record; +} + +export const LinkPaymentList = ({ + listItems +}: LinkPaymentListProps) => { + + const getListDateGroup = () => { + let rs = []; + for (const [key, value] of Object.entries(listItems)) { + rs.push( + + ); + } + return rs; + }; + + return ( + <> +
+ {getListDateGroup()} +
+ + ) +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-pending-date-group.tsx b/src/entities/additional-service/ui/link-payment/link-payment-pending-date-group.tsx new file mode 100644 index 0000000..c481b4e --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-date-group.tsx @@ -0,0 +1,56 @@ +import moment from 'moment'; +import 'moment/dist/locale/ko'; +import { LinkPaymentPendingItem } from './link-payment-pending-item'; +import { JSX } from 'react'; + +interface LinkPaymentPendingTransaction { + transactionId: string; + customerName: string; + status: string; + channel: string; + amount: number; +} + +interface LinkPaymentPendingDateGroupProps { + date: string; + items: LinkPaymentPendingTransaction[]; +} + +export const LinkPaymentPendingDateGroup = ({ + date, + items +}: LinkPaymentPendingDateGroupProps) => { + moment.locale('ko'); + const getStateDate = () => { + let stateDate = moment(date).format('YY.MM.DD(ddd)'); + return stateDate; + }; + + const getLinkPaymentPendingItem = () => { + const rs: JSX.Element[] = []; + if (items && items.length > 0) { + items.forEach((item, index) => { + const key = 'LinkPaymentPendingItem-' + index; + rs.push( + + ) + }); + } + + return rs; + }; + + return ( + <> +
{getStateDate()}
+ {getLinkPaymentPendingItem()} + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-pending-item.tsx b/src/entities/additional-service/ui/link-payment/link-payment-pending-item.tsx new file mode 100644 index 0000000..6bac6bb --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-item.tsx @@ -0,0 +1,57 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; + +interface LinkPaymentPendingItemProps { + transactionId: string; + customerName: string; + status: string; + channel: string; + amount: number; +} + +export const LinkPaymentPendingItem = ({ + transactionId, + customerName, + status, + channel, + amount +}: LinkPaymentPendingItemProps) => { + const { navigate } = useNavigate(); + + const onClickToNavigate = () => { + navigate(PATHS.additionalService.linkPayment.pendingDetail, { + state: { + transactionId: transactionId + } + }); + }; + + const getStatusDotClass = () => { + if (status === '발송요청') { + return 'status-dot blue'; + } + return 'status-dot gray'; + }; + + return ( + <> +
onClickToNavigate()} + > +
+
+
+
+
{customerName}
+
+ {status} + ㅣ + {channel} +
+
+
{amount.toLocaleString()}원
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx b/src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx new file mode 100644 index 0000000..ec705ec --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx @@ -0,0 +1,40 @@ +import { LinkPaymentPendingDateGroup } from './link-payment-pending-date-group'; + +interface LinkPaymentPendingTransaction { + transactionId: string; + customerName: string; + status: string; + channel: string; + amount: number; +} + +interface LinkPaymentPendingListProps { + listItems: Record; +} + +export const LinkPaymentPendingList = ({ + listItems +}: LinkPaymentPendingListProps) => { + + const getListDateGroup = () => { + let rs = []; + for (const [key, value] of Object.entries(listItems)) { + rs.push( + + ); + } + return rs; + }; + + return ( + <> +
+ {getListDateGroup()} +
+ + ) +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx new file mode 100644 index 0000000..0aaaa60 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx @@ -0,0 +1,129 @@ +import { IMAGE_ROOT } from "@/shared/constants/common"; +import { useState, useEffect } from "react"; +import { LinkPaymentFilter } from "./link-payment-filter"; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { PATHS } from "@/shared/constants/paths"; +import { LinkPaymentPendingList } from "./link-payment-pending-list"; + +export const LinkPaymentPendingSendWrap = () => { + const { navigate } = useNavigate(); + const [filterOn, setFilterOn] = useState(false); + const [listItems, setListItems] = useState({}); + + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + const onClickToNavigate = () => { + navigate(PATHS.additionalService.linkPayment.request) + } + + const callList = () => { + setListItems({ + '20250608': [ + { + transactionId: 'pending1', + customerName: '김*환(7000)', + status: '발송요청', + channel: 'SMS', + amount: 5254000 + }, + { + transactionId: 'pending2', + customerName: '김*환(7000)', + status: '발송요청', + channel: 'SMS', + amount: 5254000 + }, + { + transactionId: 'pending3', + customerName: '김*환(7000)', + status: '발송요청', + channel: '이메일', + amount: 5254000 + }, + { + transactionId: 'pending4', + customerName: '김*환(7000)', + status: '발송취소', + channel: 'SMS', + amount: 5254000 + }, + { + transactionId: 'pending5', + customerName: '김*환(7000)', + status: '발송취소', + channel: 'SMS', + amount: 5254000 + } + ] + }); + }; + + useEffect(() => { + callList(); + }, []); + return ( + <> +
+
+
+ + +
+ +
+
+ +
+
+ + | + +
+
+
+ 전체 + 성공 + 실패 +
+
+
+ + +
+ +
+ + + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment-tab.tsx b/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx similarity index 97% rename from src/entities/additional-service/ui/link-payment-tab.tsx rename to src/entities/additional-service/ui/link-payment/link-payment-tab.tsx index 934b63d..1b38cff 100644 --- a/src/entities/additional-service/ui/link-payment-tab.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx @@ -3,7 +3,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { LinkPaymentTabKeys, LinkPaymentTabProps -} from '../model/types' +} from '../../model/types' export const LinkPaymentTab = ({ activeTab diff --git a/src/entities/additional-service/ui/link-payment/sort-options-box.tsx b/src/entities/additional-service/ui/link-payment/sort-options-box.tsx new file mode 100644 index 0000000..5617b2a --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/sort-options-box.tsx @@ -0,0 +1,25 @@ +import { + SortByKeys, + SortOptionsBoxProps +} from '../../model/types'; +export const SortOptionsBox = ({ + sortBy, + onClickToSort +}: SortOptionsBoxProps) => { + + return ( + <> +
+ + | + +
+ + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/additional-service-pages.tsx b/src/pages/additional-service/additional-service-pages.tsx index 3911d93..c933d6a 100644 --- a/src/pages/additional-service/additional-service-pages.tsx +++ b/src/pages/additional-service/additional-service-pages.tsx @@ -24,9 +24,11 @@ import { SettlementAgencyDetailPage } from './settlement-agency/detail-page'; import { PaymentAgencyListPage } from './payment-agency/list-page'; import { PaymentAgencyDetailPage } from './payment-agency/detail-page'; import { PaymentAgencyRequestPage } from './payment-agency/request-page'; -import { LinkPaymentApplyPage } from './link-payment/link-payment-apply-page'; -import { LinkPaymentApplyConfirmPage } from './link-payment/link-payment-apply-confirm-page'; -import { LinkPaymentApplySuccessPage } from './link-payment/link-payment-apply-success-page'; +import { LinkPaymentApplyPage } from './link-payment/apply/link-payment-apply-page'; +import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-apply-confirm-page'; +import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page'; +import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page'; +import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page'; export const AdditionalServicePages = () => { return ( @@ -49,6 +51,8 @@ export const AdditionalServicePages = () => { } /> } /> } /> + } /> + } /> } /> diff --git a/src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx b/src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx similarity index 100% rename from src/pages/additional-service/link-payment/link-payment-apply-confirm-page.tsx rename to src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx diff --git a/src/pages/additional-service/link-payment/link-payment-apply-page.tsx b/src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx similarity index 97% rename from src/pages/additional-service/link-payment/link-payment-apply-page.tsx rename to src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx index 5c6206f..a76e857 100644 --- a/src/pages/additional-service/link-payment/link-payment-apply-page.tsx +++ b/src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx @@ -1,6 +1,6 @@ import {useState} from 'react'; -import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment-step1'; -import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment-step2'; +import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step1'; +import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step2'; import {HeaderType} from '@/entities/common/model/types'; import {ProcessStep} from '@/entities/transaction/model/types'; import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout'; diff --git a/src/pages/additional-service/link-payment/link-payment-apply-success-page.tsx b/src/pages/additional-service/link-payment/apply/link-payment-apply-success-page.tsx similarity index 100% rename from src/pages/additional-service/link-payment/link-payment-apply-success-page.tsx rename to src/pages/additional-service/link-payment/apply/link-payment-apply-success-page.tsx diff --git a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx new file mode 100644 index 0000000..a5a5cbb --- /dev/null +++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx @@ -0,0 +1,119 @@ +import { useEffect, useState } from 'react'; +import { PATHS } from '@/shared/constants/paths'; +import { useLocation } from 'react-router'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section'; +import { HeaderType } from '@/entities/common/model/types'; +import { DetailInfoSectionProps } from '@/entities/additional-service/model/types'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { + useSetOnBack, + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode +} from '@/widgets/sub-layout/use-sub-layout'; +import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section'; +import { overlay } from 'overlay-kit'; +import { Dialog } from '@/shared/ui/dialogs/dialog'; + +export const LinkPaymentDetailPage = () => { + const { navigate } = useNavigate(); + const location = useLocation(); + + const [transactionId, setTransactionId] = useState(location?.state?.transactionId || ''); + + const [paymentInfo, setPaymentInfo] = useState(); + const [deetsInfo, setDeetsInfo] = useState(); + + const [showPayment, setShowPayment] = useState(false); + const [showDeets, setShowDeets] = useState(false); + + useSetHeaderTitle('링크결제 상세'); + useSetHeaderType(HeaderType.RightClose); + useSetOnBack(() => { + navigate(PATHS.additionalService.linkPayment.dispatchList); + }); + useSetFooterMode(false); + + const onClickToNavigate = (path: string) => { + let timeout = setTimeout(() => { + clearTimeout(timeout); + navigate(PATHS.additionalService.linkPayment.dispatchList, { + }); + }, 10) + }; + + const onClickToShowInfo = () => { + setShowPayment(!showPayment); + }; + + const onClickToCancel = () => { + let msg = '재발송 하시겠습니까?'; + + overlay.open(({ + isOpen, + close, + unmount + }) => { + return ( + onClickToNavigate(PATHS.additionalService.linkPayment.dispatchList) } + message={ msg } + buttonLabel={['취소', '확인']} + /> + ); + }); + }; + + return ( + <> +
+
+
+
+
+ +
+
+
5,254,000원
+
+
+ 나이스테스트가맹점 +
+
+ 2025.06.08 +
+
+ +
+ + + +
+ + +
+
+
+ +
+
+
+
+ + ) +}; \ No newline at end of file diff --git a/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx b/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx index 929806b..fd04d9b 100644 --- a/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx @@ -3,9 +3,9 @@ import { useState } from 'react'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { HeaderType } from '@/entities/common/model/types'; -import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment-tab'; +import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab'; import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types'; -import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment-dispatch-list-wrap'; +import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap'; import { useSetHeaderTitle, useSetHeaderType, diff --git a/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx b/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx new file mode 100644 index 0000000..8c3bc91 --- /dev/null +++ b/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx @@ -0,0 +1,110 @@ +import { useEffect, useState } from 'react'; +import { PATHS } from '@/shared/constants/paths'; +import { useLocation } from 'react-router'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section'; +import { HeaderType } from '@/entities/common/model/types'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { + useSetOnBack, + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode +} from '@/widgets/sub-layout/use-sub-layout'; +import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section'; +import { overlay } from 'overlay-kit'; +import { Dialog } from '@/shared/ui/dialogs/dialog'; + +export const LinkPaymentPendingDetailPage = () => { + const { navigate } = useNavigate(); + const location = useLocation(); + + const [transactionId, setTransactionId] = useState(location?.state?.transactionId || ''); + + const [paymentInfo, setPaymentInfo] = useState(); + const [deetsInfo, setDeetsInfo] = useState(); + + const [showPayment, setShowPayment] = useState(false); + const [showDeets, setShowDeets] = useState(false); + + useSetHeaderTitle('링크결제 상세_발송대기'); + useSetHeaderType(HeaderType.RightClose); + useSetOnBack(() => { + navigate(PATHS.additionalService.linkPayment.pendingSend); + }); + useSetFooterMode(false); + + const onClickToNavigate = (path: string) => { + let timeout = setTimeout(() => { + clearTimeout(timeout); + navigate(PATHS.additionalService.linkPayment.pendingSend, { + }); + }, 10) + }; + + const onClickToShowInfo = () => { + setShowPayment(!showPayment); + }; + + const onClickToCancel = () => { + let msg = '삭제 하시겠습니까?'; + + overlay.open(({ + isOpen, + close, + unmount + }) => { + return ( + onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend) } + message={ msg } + buttonLabel={['취소', '확인']} + /> + ); + }); + }; + + return ( + <> +
+
+
+
+
+ +
+
+
3,500,000원
+
+
+ 나이스테스트가맹점 +
+
+ 2025.06.09 +
+
+ +
+ + +
+
+
+ +
+
+
+
+ + ) +}; \ No newline at end of file diff --git a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx index f6e6260..b54b794 100644 --- a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx @@ -3,16 +3,16 @@ import { useState } from 'react'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { HeaderType } from '@/entities/common/model/types'; -import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment-tab'; +import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab'; import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types'; -import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment-pending-send-wrap'; +import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-pending-send-wrap'; import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; -import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment-filter'; +import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter'; export const LinkPaymentPendingSendPage = () => { const { navigate } = useNavigate(); diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index 88c5c29..2ba693b 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -182,6 +182,14 @@ export const PATHS: RouteNamesType = { confirmSuccess: generatePath( `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`, ROUTE_NAMES.additionalService.linkPayment.confirmSuccess, + ), + detail: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`, + ROUTE_NAMES.additionalService.linkPayment.detail, + ), + pendingDetail: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`, + ROUTE_NAMES.additionalService.linkPayment.pendingDetail, ) }, kakaoPaymentNotification: { diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index a105d2a..289ffa3 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -86,7 +86,9 @@ export const ROUTE_NAMES = { pendingSend: 'pending-send', request: 'request', requestConfirm: 'request-confirm', - confirmSuccess: 'confirm-success' + confirmSuccess: 'confirm-success', + detail: 'detail', + pendingDetail: 'pending-detail' }, kakaoPaymentNotification: { base: '/kakao-payment-notification/*',