Skip to content

Commit 23c13f8

Browse files
Yejiin21Yejiin21
committed
fix: 온라인 이벤트 일때 qrcode 안내 문구 설정
1 parent 2c2ebb0 commit 23c13f8

File tree

2 files changed

+52
-42
lines changed

2 files changed

+52
-42
lines changed

‎design-system/ui/modals/QrModal.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface QrModalProps {
2020
ticketName: string; // 티켓 이름
2121
price: number; // 티켓 가격
2222
orderStatus: string; // 티켓 승인 여부
23+
eventType: 'ONLINE' | 'OFFLINE'; // 이벤트 타입
2324
isCheckIn: boolean; // 참가자 체크인 여부
2425
isCountdownChecked: boolean;
2526
remainDays: string; //d-day
@@ -37,10 +38,10 @@ const QrModal = ({
3738
ticketName,
3839
price,
3940
orderStatus,
41+
eventType,
4042
isCheckIn,
4143
isCountdownChecked,
4244
remainDays,
43-
4445
onClick,
4546
}: QrModalProps) => {
4647
const formattedPrice = price.toLocaleString();
@@ -59,16 +60,19 @@ const QrModal = ({
5960

6061
<div className="absolute top-0 left-0 w-full h-full flex flex-col justify-between items-center px-4 py-4">
6162
<div className="flex items-center justify-center h-1/2 w-full">
62-
{ticketQrCode ? (
63-
<img
64-
src={`data:image/png;base64,${ticketQrCode}`}
65-
alt="QR Code"
66-
className="w-60 h-60 "
67-
// breakpoint 추가 필요
68-
/>
63+
{eventType === 'ONLINE' ? (
64+
<div className="w-40 h-40 flex items-center justify-center bg-deDayBgLight rounded-md border border-deDayTextDark text-deDayTextDark text-sm text-center px-4">
65+
온라인 이벤트는
66+
<br /> QR코드가 발급되지
67+
<br /> 않습니다.
68+
</div>
69+
) : ticketQrCode ? (
70+
<img src={`data:image/png;base64,${ticketQrCode}`} alt="QR Code" className="w-60 h-60" />
6971
) : (
7072
<div className="w-40 h-40 flex items-center justify-center bg-deDayBgLight rounded-md border border-deDayTextDark text-deDayTextDark text-sm text-center px-4">
71-
주최자의 승인이 완료되면 QR이 발급됩니다.
73+
주최자의 승인이
74+
<br /> 완료되면 QR이
75+
<br /> 발급됩니다.
7276
</div>
7377
)}
7478
</div>
@@ -81,33 +85,35 @@ const QrModal = ({
8185
<div className="space-y-1 text-deDayTextDark">
8286
<IconText
8387
size="xSmall"
84-
iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1' />}
88+
iconPath={<img src={qr_calendar} alt="qr_calendar" className="mr-1" />}
8589
children={formattedDate}
8690
className="text-11"
8791
></IconText>
8892
<IconText
8993
size="xSmall"
90-
iconPath={<img src={qr_location} alt="qr_location" className='mr-1' />}
94+
iconPath={<img src={qr_location} alt="qr_location" className="mr-1" />}
9195
children={location}
9296
className="text-11"
9397
></IconText>
9498
<IconText
9599
size="xSmall"
96-
iconPath={<img src={qr_ticket} alt="qr_ticket" className='mr-1' />}
100+
iconPath={<img src={qr_ticket} alt="qr_ticket" className="mr-1" />}
97101
children={ticketName}
98102
className="text-11"
99103
></IconText>
100104
<span className="text-sm font-bold">{formattedPrice}원</span>
101105
<hr />
102106
<IconText
103107
size="xSmall"
104-
iconPath={<img src={orderStatus === 'COMPLETED' ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
108+
iconPath={
109+
<img src={orderStatus === 'COMPLETED' ? qr_check : qr_pending} alt="qr_check" className="mr-1" />
110+
}
105111
children={orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
106112
className="text-11"
107113
></IconText>
108114
<IconText
109115
size="xSmall"
110-
iconPath={<img src={isCheckIn ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
116+
iconPath={<img src={isCheckIn ? qr_check : qr_pending} alt="qr_check" className="mr-1" />}
111117
children={isCheckIn ? '체크인 완료' : '체크인 미완료'}
112118
className="text-11"
113119
></IconText>
@@ -121,6 +127,5 @@ const QrModal = ({
121127
</div>
122128
</div>
123129
);
124-
125130
};
126131
export default QrModal;

‎src/pages/menu/ui/MyTicketPage.tsx‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ const MyTicketPage = () => {
6161

6262
const handleEventCardClick = (ticket: OrderTicketResponse) => {
6363
if (isCancelMode) {
64-
setSelectedIds(prev => (prev.includes(ticket.orderId) ? prev.filter(id => id !== ticket.orderId) : [...prev, ticket.orderId]));
64+
setSelectedIds(prev =>
65+
prev.includes(ticket.orderId) ? prev.filter(id => id !== ticket.orderId) : [...prev, ticket.orderId]
66+
);
6567
} else {
6668
setSelectedTicket(null);
6769
setPendingTicket(ticket);
@@ -135,9 +137,10 @@ const MyTicketPage = () => {
135137
hashtags={ticket.event.hashtags}
136138
status={ticket.event.status}
137139
onClick={() => handleEventCardClick(ticket)}
138-
className={`transition-transform duration-200 ${isCancelMode && selectedIds.includes(ticket.orderId) ? 'scale-95 border-2 border-pink-400' : ''
139-
}`}
140-
aspectRatio='md:aspect-[3/4.7] sm:aspect-[1/2]'
140+
className={`transition-transform duration-200 ${
141+
isCancelMode && selectedIds.includes(ticket.orderId) ? 'scale-95 border-2 border-pink-400' : ''
142+
}`}
143+
aspectRatio="md:aspect-[3/4.7] sm:aspect-[1/2]"
141144
>
142145
<div className="flex items-center text-xs text-gray-500">
143146
<img src={ticketImg} alt="티켓" className="w-3 h-3 mr-1" />
@@ -157,37 +160,39 @@ const MyTicketPage = () => {
157160
<div className="col-span-2 flex items-center justify-center min-h-[200px]">
158161
<p className="text-center text-sm md:text-base">구매하신 티켓 정보가 없습니다.</p>
159162
</div>
160-
161163
)}
162164
</div>
163165

164-
{isModalOpen && selectedTicket && (selectedTicket.event.status !== 'DELETED' && selectedTicket.event.status !== 'COMPLETE') && (
165-
<div className="fixed inset-0 z-50 bg-black bg-opacity-60 flex items-center justify-center">
166-
<QrModal
167-
isChecked={true}
168-
iconPath1={<img src={QRbackground} alt="QRbackground" />}
169-
ticketQrCode={selectedTicket.ticketQrCode}
170-
title={selectedTicket.event.title}
171-
hostName={selectedTicket.event.hostChannelName}
172-
date={selectedTicket.event.startDate}
173-
location={selectedTicket.event.address}
174-
ticketName={selectedTicket.ticketName}
175-
price={selectedTicket.ticketPrice}
176-
orderStatus={selectedTicket.orderStatus}
177-
isCheckIn={selectedTicket.checkIn}
178-
isCountdownChecked={true}
179-
remainDays={selectedTicket.event.remainDays}
180-
onClick={() => setIsModalOpen(false)}
181-
/>
182-
</div>
183-
)}
166+
{isModalOpen &&
167+
selectedTicket &&
168+
selectedTicket.event.status !== 'DELETED' &&
169+
selectedTicket.event.status !== 'COMPLETE' && (
170+
<div className="fixed inset-0 z-50 bg-black bg-opacity-60 flex items-center justify-center">
171+
<QrModal
172+
isChecked={true}
173+
iconPath1={<img src={QRbackground} alt="QRbackground" />}
174+
ticketQrCode={selectedTicket.ticketQrCode}
175+
title={selectedTicket.event.title}
176+
hostName={selectedTicket.event.hostChannelName}
177+
date={selectedTicket.event.startDate}
178+
location={selectedTicket.event.address}
179+
ticketName={selectedTicket.ticketName}
180+
price={selectedTicket.ticketPrice}
181+
orderStatus={selectedTicket.orderStatus}
182+
eventType={selectedTicket.event.onlineType}
183+
isCheckIn={selectedTicket.checkIn}
184+
isCountdownChecked={true}
185+
remainDays={selectedTicket.event.remainDays}
186+
onClick={() => setIsModalOpen(false)}
187+
/>
188+
</div>
189+
)}
184190

185191
{isDoneEventModalOpen && selectedTicket && (
186192
<TextModal isOpen={isDoneEventModalOpen} onClick={() => setIsDoneEventModalOpen(false)}>
187193
{eventModalText}
188194
</TextModal>
189-
)
190-
}
195+
)}
191196

192197
{isDeleteModalOpen && (
193198
<EmailDeleteModal

0 commit comments

Comments
 (0)
⚡