AOS: 링크결제 탭 별 페이지 생성, 필터 적용 -> 링크결제 신청 페이지 연계
This commit is contained in:
HyeonJongKim
@@ -0,0 +1,158 @@
|
||||
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<boolean>(false);
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.additionalService.linkPayment.request)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.30"
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="filter-section">
|
||||
<div className="sort-options">
|
||||
<button className="sort-btn active">최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button className="sort-btn">고액순</button>
|
||||
</div>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">성공</span>
|
||||
<span className="keyword-tag">실패</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="transaction-list">
|
||||
<div className="date-header">25.06.08(일)</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>결제완료</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>신용카드</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>결제완료</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>이메일</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>신용카드</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>입금요청</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>이메일</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>신용카드</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>결제중단</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>결제실패</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
<LinkPaymentFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
></LinkPaymentFilter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
193
src/entities/additional-service/ui/link-payment-filter.tsx
Normal file
193
src/entities/additional-service/ui/link-payment-filter.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import {IMAGE_ROOT} from "@/shared/constants/common";
|
||||
import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types";
|
||||
|
||||
export const LinkPaymentFilter = ({
|
||||
filterOn,
|
||||
setFilterOn
|
||||
}: LinkPaymentFilterProps) => {
|
||||
const variants = {
|
||||
hidden:{ x: '100%'},
|
||||
visible: {x: '0%'}
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setFilterOn(false);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (filterOn)? 'visible': 'hidden' }
|
||||
variants={ variants }
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">필터</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_close.svg' }
|
||||
alt="닫기"
|
||||
onClick={ () => onClickToClose() }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pb-120">
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">가맹점</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>nictest001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">휴대폰번호, 이메일</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>휴대폰번호</option>
|
||||
<option>이메일</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">결제수단</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>nictext001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field mt_top">
|
||||
<div className="opt-label">조회기간</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag">당일</span>
|
||||
<span className="keyword-tag">일주일</span>
|
||||
<span className="keyword-tag">1개월</span>
|
||||
<span className="keyword-tag active">직접입력</span>
|
||||
</div>
|
||||
|
||||
<div className="range-row">
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value="2025.06.08"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
className="date-btn"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<span className="beetween">~</span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value="2025.06.08"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
className="date-btn"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">거래 구분</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1 active">전체</span>
|
||||
<span className="keyword-tag flex-1">미완료/ <br/> 활성화</span>
|
||||
<span className="keyword-tag flex-1">입금요청</span>
|
||||
<span className="keyword-tag flex-1">결제완료</span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="opt-controls col below h50 mt-10">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1">결제실패</span>
|
||||
<span className="keyword-tag flex-1">결제중단/ <br/> 비활성화</span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">전송결과</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1 active">전체</span>
|
||||
<span className="keyword-tag flex-1">성공</span>
|
||||
<span className="keyword-tag flex-1">실패</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">발송수단</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1 active">전체</span>
|
||||
<span className="keyword-tag flex-1">SMS</span>
|
||||
<span className="keyword-tag flex-1">이메일</span>
|
||||
<span className="keyword-tag flex-1">카카오</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="apply-row">
|
||||
<button className="btn-50 btn-blue flex-1">적용</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
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<boolean>(false);
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.additionalService.linkPayment.request)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<section className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.30"
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="filter-section">
|
||||
<div className="sort-options">
|
||||
<button className="sort-btn active">최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button className="sort-btn">고액순</button>
|
||||
</div>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">성공</span>
|
||||
<span className="keyword-tag">실패</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="transaction-list">
|
||||
<div className="date-header">25.06.08(일)</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>발송요청</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>발송요청</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot blue"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>발송요청</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>이메일</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>발송취소</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
<div className="transaction-item approved">
|
||||
<div className="transaction-status">
|
||||
<div className="status-dot gray"></div>
|
||||
</div>
|
||||
<div className="transaction-content">
|
||||
<div className="transaction-title">김*환(7000)</div>
|
||||
<div className="transaction-details">
|
||||
<span>발송취소</span>
|
||||
<span className="separator">ㅣ</span>
|
||||
<span>SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="transaction-amount">5,254,000원</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
<LinkPaymentFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
></LinkPaymentFilter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
38
src/entities/additional-service/ui/link-payment-tab.tsx
Normal file
38
src/entities/additional-service/ui/link-payment-tab.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import {
|
||||
LinkPaymentTabKeys,
|
||||
LinkPaymentTabProps
|
||||
} from '../model/types'
|
||||
|
||||
export const LinkPaymentTab = ({
|
||||
activeTab
|
||||
}: LinkPaymentTabProps) => {
|
||||
const {navigate} = useNavigate();
|
||||
|
||||
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
|
||||
if(activeTab !== tab){
|
||||
if(tab === LinkPaymentTabKeys.DispatchList){
|
||||
navigate(PATHS.additionalService.linkPayment.dispatchList);
|
||||
}
|
||||
else if(tab === LinkPaymentTabKeys.PendingSend){
|
||||
navigate(PATHS.additionalService.linkPayment.pendingSend);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="subTab">
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.DispatchList)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.DispatchList) }
|
||||
>발송내역</button>
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
|
||||
>발송대기</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user