Skip to content

Commit 40322dc

Browse files
yereongyereong
authored
fix: 간식나눔 유저페이지 업데이트
fix: 간식나눔 유저페이지 업데이트
2 parents 5994dcd + 8ebcc78 commit 40322dc

4 files changed

Lines changed: 93 additions & 29 deletions

File tree

‎src/app/(auth-required)/ticketing/[eventId]/page.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -343,8 +343,8 @@ const parseBackendLocalMs = (raw: string): number | null => {
343343

344344
{!isLoading && eventData && (
345345
<div className="flex flex-col items-center gap-4">
346-
<div className="w-full bg-white rounded-[15px] shadow-[0px_5px_13.3px_4px_rgba(212,212,212,0.59)] py-[29px] px-4">
347-
<img src={eventData.eventImageUrls || "/images/default.svg"} alt="간식 이미지" />
346+
<div className="w-full bg-white rounded-[15px] shadow-[0px_5px_13.3px_4px_rgba(212,212,212,0.59)] py-[29px] px-4 flex justify-center">
347+
<img src={eventData.eventImageUrls || "/images/default.svg"} alt="간식 이미지"/>
348348
</div>
349349

350350
<div className="w-full">
@@ -375,13 +375,13 @@ const parseBackendLocalMs = (raw: string): number | null => {
375375

376376
<div className="w-full flex justify-end text-[11px] text-[#0D99FF] gap-3">
377377
<button
378-
className={`${isSelected === 'note' && 'text-[#AEAEAE]'} underline`}
378+
className={`${isSelected === 'note' && 'text-[#AEAEAE]'} underline underline-offset-[3px]`}
379379
onClick={() => setIsSelected('info')}
380380
>
381381
상세정보
382382
</button>
383383
<button
384-
className={`${isSelected === 'info' && 'text-[#AEAEAE]'} underline`}
384+
className={`${isSelected === 'info' && 'text-[#AEAEAE]'} underline underline-offset-[3px]`}
385385
onClick={() => setIsSelected('note')}
386386
>
387387
유의사항
@@ -392,13 +392,13 @@ const parseBackendLocalMs = (raw: string): number | null => {
392392
{isSelected === 'info' && (
393393
<>
394394
<div className="font-bold text-[14px] mb-2">{eventData.eventTitle}</div>
395-
<div>일시: {convertToKoreanDate(eventData.eventEndTime)}</div>
396-
<div>장소: {eventData.locationInfo}</div>
397-
<div>대상: {eventData.target}</div>
398-
<div>수량: {eventData.quantity}</div>
399-
<div>티켓팅 시작 시간: {convertToKoreanDate(eventData.eventTime)}</div>
395+
<div><span className='font-semibold'>일시:</span> {convertToKoreanDate(eventData.eventEndTime)}</div>
396+
<div><span className='font-semibold'>장소: </span> {eventData.locationInfo}</div>
397+
<div><span className='font-semibold'>대상:</span> {eventData.target}</div>
398+
<div><span className='font-semibold'>수량:</span> {eventData.quantity}</div>
399+
<div><span className='font-semibold'>티켓팅 시작 시간:</span> {convertToKoreanDate(eventData.eventTime)}</div>
400400
<div className="text-black/50 self-center mt-[18px]">{eventData.description}</div>
401-
<a href={eventData.promotionLink} className="text-[#0D99FF] mt-[18px]">학생회 간식나눔 홍보글 링크</a>
401+
<a href={eventData.promotionLink} className="text-[#0D99FF] mt-[18px] underline underline-offset-[3px]">학생회 간식나눔 홍보글 링크</a>
402402
<div className="self-end text-[#AEAEAE]">문의: {eventData.inquiryNumber}</div>
403403
</>
404404
)}

‎src/app/(auth-required)/ticketing/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,15 +128,15 @@ const TicketingPage: FC = () => {
128128
)}
129129
<div className="flex flex-col items-center px-4">
130130
<div className="flex items-start mb-[13px] w-full">
131-
<p className="font-semibold text-[14px]">{snack.eventTitle}</p>
131+
<p className="font-bold text-[14px]">{snack.eventTitle}</p>
132132
<p className="text-[25px] text-[#0D99FF] mt-[-17px]"> •</p>
133133
</div>
134134
<div className="flex flex-row justify-center items-start w-full">
135135
<div className="flex flex-col justify-start w-full">
136-
<div className="mt-[5px] text-[12px] text-black">{convertToKoreanDate(snack.eventEndTime || '')}</div>
137-
<div className="text-[12px] text-black">{snack.locationInfo}</div>
138-
<div className="text-[12px] text-black">{snack.quantity}명</div>
139-
<div className="text-[12px] text-[#0D99FF]">티켓팅 오픈: {convertToKoreanDate(snack.eventTime || '')}</div>
136+
<div className="mt-[5px] text-[12px] text-black"><span className="font-semibold">일시:</span> {convertToKoreanDate(snack.eventEndTime || '')}</div>
137+
<div className="text-[12px] text-black"><span className="font-semibold">장소:</span> {snack.locationInfo}</div>
138+
<div className="text-[12px] text-black"><span className="font-semibold">수량:</span> {snack.quantity}명</div>
139+
<div className="text-[12px] text-[#0D99FF]"><span className="font-semibold">티켓팅 오픈:</span> {convertToKoreanDate(snack.eventTime || '')}</div>
140140
</div>
141141
<img src={snack.eventImageUrl} className="w-[93px] h-[93px] border border-1 border-[#d4d4d4] rounded-[10px] p-2 ml-[23px]"></img>
142142
</div>

‎src/app/(auth-required)/ticketing/result/TicketingResultInner.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ import Header from '@/components/Layout/header/Header';
77
import DefaultBody from '@/components/Layout/Body/defaultBody';
88
import SignModal from '@/components/modals/ticketing/SignModal';
99
import CancelModal from '@/components/modals/ticketing/CancelModal';
10-
import { formatDateTimeWithDay } from '@/utils/date';
1110
import { fetchClient } from '@/api/clients/fetchClient';
1211
import { TicketInfo } from '@/interfaces/SnackEvent';
13-
import { convertToKoreanDate } from '@/utils/convertToKoreanDate';
1412

1513
export default function TicketingResultInner() {
1614
const searchParams = useSearchParams();
@@ -35,7 +33,7 @@ export default function TicketingResultInner() {
3533
}, [status, eventId, router]);
3634

3735
useEffect(() => {
38-
if (!eventId) return; // 안전 가드
36+
if (!eventId) return;
3937
let ignore = false;
4038
(async () => {
4139
try {
@@ -44,6 +42,7 @@ export default function TicketingResultInner() {
4442
`/ticketing/event/participation/${eventId}`
4543
);
4644
if (!ignore) setTicket(res.data);
45+
console.log(res.data);
4746
} catch (err) {
4847
console.error(err);
4948
} finally {
@@ -61,7 +60,6 @@ export default function TicketingResultInner() {
6160

6261
switch (status) {
6362
case 'success':
64-
const extendedEndTime = new Date(new Date(ticket.eventEndTime).getTime() + 30 * 60 * 1000);
6563
return (
6664
<Suspense>
6765
<Header
@@ -80,25 +78,43 @@ export default function TicketingResultInner() {
8078
{ticket?.status === 'WAITING' && (
8179
<>
8280
<div>
83-
<p className="font-bold text-[14px] text-center text-[#0D99FF]">
81+
<p className="font-bold text-[14px] text-center text-[#0D99FF] flex justify-center">
8482
수령장소: {ticket.locationInfo}
8583
<span className="text-[#0D99FF] ml-1 mt-[-10px] font-semibold text-[18px]">
8684
•
8785
</span>
8886
</p>
89-
<p className="font-bold text-[12px] text-center text-black">
90-
관리자에게 이 화면을 보여준 후 서명하세요
87+
<p className="font-bold text-[12px] text-center text-black mt-2">
88+
서명 후 학생회가 제공하는 비밀번호 4자리를 <br/>
89+
직접 입력하고 화면을 보여주세요
9190
</p>
9291
<p className="text-[12px] text-center text-black/50 font-normal mt-[13px]">
9392
교환권은 마이페이지에서도 확인 가능해요
9493
</p>
9594
</div>
9695

9796
<div className="fixed bottom-[50px] left-0 w-full px-4 bg-white pb-[35px] flex flex-col items-center">
98-
<div className="text-[11px] text-center text-[#FF2525] font-normal">
99-
{convertToKoreanDate(ticket.eventReceivedEndTime)}까지 오지 않으면
100-
티켓이 자동 취소돼요.
101-
<br /> 그 전에 꼭 방문해 주세요!
97+
98+
<div className="text-[12px] text-center text-[#0D99FF] font-normal flex flex-row">
99+
100+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
101+
<circle
102+
cx="12"
103+
cy="12"
104+
r="8"
105+
stroke="#0D99FF"
106+
strokeWidth="1.5"
107+
/>
108+
<path
109+
d="M12 8V12L14.5 14.5"
110+
stroke="#0D99FF"
111+
strokeWidth="1.5"
112+
strokeLinecap="round"
113+
/>
114+
</svg>
115+
<div>간식나눔 시작 30분 전까지 오지 않으면 티켓이 자동 취소돼요.</div>
116+
117+
102118
</div>
103119

104120
<button

‎src/components/modals/ticketing/UserInfoModal.tsx‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { fetchClient } from '@/api/clients/fetchClient';
55
interface UserInfoModalProps {
66
onClose: () => void;
77
onComplete: () => void;
8-
initialStep?: 1 | 2 | 3;
8+
initialStep?: 1 | 2 | 3 | 4;
99
}
1010

1111
const departments = [
@@ -15,9 +15,12 @@ const departments = [
1515
];
1616

1717
const UserInfoModal: FC<UserInfoModalProps> = ({ onClose, onComplete, initialStep = 1 }) => {
18-
const [step, setStep] = useState<1 | 2 | 3>(initialStep);
18+
const [step, setStep] = useState<1 | 2 | 3 | 4>(initialStep);
1919
const [selectedDept, setSelectedDept] = useState<string | null>(null);
2020
const [studentId, setStudentId] = useState<string>('');
21+
const [name, setName] = useState<string>('');
22+
23+
2124

2225
const putUserInfo = async () => {
2326
if (!selectedDept || !studentId) return;
@@ -142,8 +145,53 @@ const UserInfoModal: FC<UserInfoModalProps> = ({ onClose, onComplete, initialSt
142145
</>
143146
)}
144147

145-
{/* STEP 2 - 학과 선택 */}
148+
{/* STEP 3 - 이름 입력 */}
146149
{step === 3 && (
150+
<>
151+
<button className='flex self-start mt-[-10px] ml-[-10px]' onClick={()=>setStep(2)}>
152+
<img src='/icons/back.svg'></img>
153+
</button>
154+
{/* 페이지 인디케이터 */}
155+
<div className="flex justify-center mb-5 mt-[-10px] ">
156+
<span className="w-[10px] h-[10px] bg-gray-300 rounded-full" />
157+
<span className='w-[18px] h-[1px] border border-[#D9D9D9] mt-[3px]'></span>
158+
<span className="w-[10px] h-[10px] bg-blue-500 rounded-full" />
159+
</div>
160+
161+
<h2 className="text-[16px] font-bold text-[#212121] mb-5">
162+
수령자 정보 입력
163+
</h2>
164+
<div className='flex flex-row justify-center items-start pl-2'>
165+
<p className="text-[14px] text-[#212121] mb-[9px]">
166+
이름을 입력해주세요
167+
</p>
168+
<div className="text-blue-500 text-[25px] mt-[-20px]">•</div>
169+
</div>
170+
171+
<div className="mb-[85px]">
172+
<textarea placeholder={`실제 학생증 정보와 일치하지 않으면\n수령이 어려울 수 있습니다.`}
173+
className='text-center focus:outline-none flex flex-row items-center py-[9px] w-full h-[50px] border border-[#D4D4D4] rounded-[5px] placeholder:text-[10px] resize-none '
174+
value={name}
175+
onChange={(e) => setName(e.target.value)}
176+
>
177+
178+
</textarea>
179+
</div>
180+
181+
<button
182+
className={`mt-2 h-10 mb-4 bg-[#0D99FF] text-white font-semibold text-[14px] rounded-lg w-full py-2 ${
183+
name ? '' : 'opacity-50 cursor-not-allowed'
184+
}`}
185+
disabled={!name}
186+
onClick={()=>setStep(4)}
187+
>
188+
다음
189+
</button>
190+
</>
191+
)}
192+
193+
{/* STEP 4 - 학번 입력 */}
194+
{step === 4 && (
147195
<>
148196
<button className='flex self-start mt-[-10px] ml-[-10px]' onClick={()=>setStep(2)}>
149197
<img src='/icons/back.svg'></img>

0 commit comments

Comments
 (0)