Skip to content

refactor: 주문/티켓 리팩토링 #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hyeeuncho merged 9 commits into from
Jun 10, 2025
Merged

refactor: 주문/티켓 리팩토링 #172

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
12df81b
refact: qr modal ui 수정
hyeeuncho Jun 7, 2025
85112aa
feat: qr code scan test 코드 작성
hyeeuncho Jun 7, 2025
6226d19
refact: 구매 날짜 외 티켓 구매 불가
hyeeuncho Jun 10, 2025
3b942e0
refact: orderCode로 수정
hyeeuncho Jun 10, 2025
edf7f1f
refact: 승인 후 바로 적용됨
hyeeuncho Jun 10, 2025
8ce5bf4
refact: 새로고침 대신 쿼리 무효화 적용
hyeeuncho Jun 10, 2025
ff52209
refact: 기간 지난 티켓 구매 방지 문구 수정
hyeeuncho Jun 10, 2025
5393a27
refact: qr 픽셀 수정
hyeeuncho Jun 10, 2025
daba563
refact: qr모달 주석 추가
hyeeuncho Jun 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 63 additions & 59 deletions design-system/ui/modals/QrModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Countdown from '../texts/Countdown';
import IconText from '../texts/IconText';
import { flexColumnCenter, flexColumn, flexRowSpaceBetweenCenter } from '../../styles/flex';
import { flexColumn, flexRowSpaceBetweenCenter } from '../../styles/flex';
import qr_calendar from '../../icons/QrCalendar.svg';
import qr_location from '../../icons/QrLocation.svg';
import qr_ticket from '../../icons/QrTicket.svg';
Expand Down Expand Up @@ -30,7 +30,6 @@ const QrModal = ({
isChecked,
iconPath1,
ticketQrCode,
className,
title,
hostName,
date,
Expand All @@ -54,68 +53,73 @@ const QrModal = ({
});

return (
<div className={`${flexColumnCenter} h-screen ${className}`}>
<div>
{iconPath1 && <div className="w-full">{iconPath1}</div>}
<div className={`ml-[5%] -mt-[180%] ${isChecked ? '' : 'opacity-50'}`}>
{ticketQrCode ? (
<img
src={`data:image/png;base64,${ticketQrCode}`}
alt="QR Code"
className="w-60 h-60"
/>
) : (
<div className="w-60 h-60 flex items-center justify-center bg-deDayBgLight rounded-md border border-deDayTextDark text-deDayTextDark text-sm text-center px-4">
주최자의 승인이 완료되면<br /> QR이 발급됩니다.
</div>
)}
</div>
<div className={`${flexColumn} justify-start px-6 ${isChecked ? '' : 'opacity-50'}`}>
<div className={`${flexRowSpaceBetweenCenter} w-full mt-[22%]`}>
<h1 className="truncate max-w-48 mr-2 font-semibold">{title}</h1>
<Countdown children={remainDays} isChecked={isCountdownChecked} />
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="relative w-[265px] h-[485px]">
{iconPath1 && <div className="w-full h-full">{iconPath1}</div>}

<div className="absolute top-0 left-0 w-full h-full flex flex-col justify-between items-center px-4 py-4">
<div className="flex items-center justify-center h-1/2 w-full">
{ticketQrCode ? (
<img
src={`data:image/png;base64,${ticketQrCode}`}
alt="QR Code"
className="w-60 h-60 "
/>
) : (
<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">
주최자의 승인이 완료되면 QR이 발급됩니다.
</div>
)}
</div>
<h2 className="text-deDayTextDark text-xs font-medium mb-2">{hostName}</h2>
<div className="space-y-1 text-deDayTextDark">
<IconText
size="xSmall"
iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1' />}
children={formattedDate}
className="text-11"
></IconText>
<IconText
size="xSmall"
iconPath={<img src={qr_location} alt="qr_location" className='mr-1' />}
children={location}
className="text-11"
></IconText>
<IconText
size="xSmall"
iconPath={<img src={qr_ticket} alt="qr_ticket" className='mr-1' />}
children={ticketName}
className="text-11"
></IconText>
<span className="text-sm font-bold">{formattedPrice}원</span>
<hr />
<IconText
size="xSmall"
iconPath={<img src={orderStatus === 'COMPLETED' ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
children={orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
className="text-11"
></IconText>
<IconText
size="xSmall"
iconPath={<img src={isCheckIn ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
children={isCheckIn ? '체크인 완료' : '체크인 미완료'}
className="text-11"
></IconText>
<div className={`${flexColumn} justify-start items-start h-1/3 w-full p-3 ${isChecked ? '' : 'opacity-50'}`}>
<div className={`${flexRowSpaceBetweenCenter} w-full `}>
<h1 className="truncate max-w-36 mr-2 font-semibold">{title}</h1>
<Countdown children={remainDays} isChecked={isCountdownChecked} />
</div>
<h2 className="text-deDayTextDark text-xs font-medium mb-2">{hostName}</h2>
<div className="space-y-1 text-deDayTextDark">
<IconText
size="xSmall"
iconPath={<img src={qr_calendar} alt="qr_calendar" className='mr-1' />}
children={formattedDate}
className="text-11"
></IconText>
<IconText
size="xSmall"
iconPath={<img src={qr_location} alt="qr_location" className='mr-1' />}
children={location}
className="text-11"
></IconText>
<IconText
size="xSmall"
iconPath={<img src={qr_ticket} alt="qr_ticket" className='mr-1' />}
children={ticketName}
className="text-11"
></IconText>
<span className="text-sm font-bold">{formattedPrice}원</span>
<hr />
<IconText
size="xSmall"
iconPath={<img src={orderStatus === 'COMPLETED' ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
children={orderStatus === 'COMPLETED' ? '승인됨' : '대기 중'}
className="text-11"
></IconText>
<IconText
size="xSmall"
iconPath={<img src={isCheckIn ? qr_check : qr_pending} alt="qr_check" className='mr-1' />}
children={isCheckIn ? '체크인 완료' : '체크인 미완료'}
className="text-11"
></IconText>
</div>
</div>

<span onClick={onClick} className="text-deDayTextDark text-xs underline cursor-pointer mt-2">
닫기
</span>
</div>
</div>
<span onClick={onClick} className="text-white text-xs mt-6 underline cursor-pointer">
닫기
</span>
</div>
);

};
export default QrModal;
Loading
⚡