Coupon Guide
옵션
downStatus: 쿠폰 우측 버튼 영역 상태값. 기본값 '보유쿠폰' ['쿠폰받기' | '받기완료' | '사용완료' | '보유쿠폰'] - backend 에서 넘어오는 값에 따라 바뀔수 있음.
쿠폰 컴포넌트는 button으로 구성되며, downStatus가 '쿠폰받기' 인 아이템을 제외하고 모두 disabled 처리됨.
버튼영역 상태에 따른 케이스 downStatus
downStatus = "쿠폰받기"
downStatus = "쿠폰받기"
downStatus = "받기완료"
downStatus = "보유쿠폰 - (보유쿠폰, 기본값)"
downStatus = "사용완료"
1import Coupon, { CouponProps } from '@/components/ui/coupon'
2const couponDataList: CouponProps[] = [
3 {
4 benefit: '10%',
5 couponNm: '1월 얼리버드 할인 쿠폰',
6 date: '2023.12.01 ~ 2024.01.31',
7 minAmount: 5000,
8 maxAmount: 2000,
9 desc: '일부 브랜드 적용 제외',
10 device: [],
11 downStatus: '쿠폰받기'
12 },
13 {
14 benefit: '10%',
15 couponNm: '1월 얼리버드 할인 쿠폰',
16 date: '2023.12.01 ~ 2024.01.31',
17 minAmount: 5000,
18 maxAmount: 2000,
19 desc: '일부 브랜드 적용 제외',
20 device: ['Mobile', 'PC', 'App'],
21 downStatus: '쿠폰받기'
22 },
23 {
24 benefit: '10%',
25 couponNm: '1월 얼리버드 할인 쿠폰',
26 date: '2023.12.01 ~ 2024.01.31',
27 minAmount: 5000,
28 maxAmount: 2000,
29 desc: '일부 브랜드 적용 제외',
30 device: ['Mobile', 'PC', 'App'],
31 downStatus: '받기완료'
32 },
33 {
34 benefit: '10%',
35 couponNm: '1월 얼리버드 할인 쿠폰',
36 date: '2023.12.01 ~ 2024.01.31',
37 minAmount: 5000,
38 maxAmount: 2000,
39 desc: '일부 브랜드 적용 제외',
40 device: ['Mobile', 'PC', 'App'],
41 downStatus: '사용완료'
42 },
43 {
44 benefit: '10%',
45 couponNm: '1월 얼리버드 할인 쿠폰',
46 date: '2023.12.01 ~ 2024.01.31',
47 minAmount: 5000,
48 maxAmount: 2000,
49 desc: '일부 브랜드 적용 제외',
50 device: ['Mobile', 'PC', 'App'],
51 downStatus: ''
52 }
53]
54
55{couponDataList.map((item, index) => (
56 <Coupon
57 key={index}
58 benefit={item.benefit}
59 name={item.couponNm}
60 date={item.date}
61 minAmount={item.minAmount}
62 maxAmount={item.maxAmount}
63 desc={item.desc}
64 device={item.device}
65 downStatus={downStatus={item.downStatus as downStatusType}}
66 />
67))}