Skip to content

Commit

Permalink
add Cancel, Sponsor
Browse files Browse the repository at this point in the history
  • Loading branch information
@jongwony
jongwony committed Jan 1, 2025
1 parent 4bb342e commit 93f1285
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 97 deletions.
69 changes: 69 additions & 0 deletions src/app/Sponsor.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
"use client";
import { useRouter } from 'next/navigation';
import { useState, useCallback } from 'react';

const isMobile = () => {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
};

export default function Sponsor() {
const router = useRouter(); // useRouter 훅을 사용하여 라우터 객체를 가져옴
const [showPopup, setShowPopup] = useState(false);

const handleShowPopup = useCallback(() => {
if (!isMobile()) {
setShowPopup(true);
}
}, []);

const handleClosePopup = () => {
setShowPopup(false);
};

return (
<>
<div className="m-8 border border-gray-400 p-8 rounded-lg shadow-md w-full max-w-md text-center">
<p className="text-gray-400">
이 프로젝트는 아래와 같은 문제 인식에서 출발했어요.
</p>
<blockquote className="italic m-4">
내 프로필 페이지를 소개하는데 <br /> 모두가 내 아이디를 검색하는 일이 번거롭다.
</blockquote>
<p className="text-gray-400 mb-2">
하지만 서비스 운영을 위한 비용, 그리고 Apple Developer Program 연회비로 99달러의 비용을 부담하게 되었어요.
</p>
<p className="mb-4">
서비스가 꾸준히 이어질 수 있도록 따뜻한 응원을 보내주시면 정말 감사하겠습니다.
</p>
<button
className="w-full my-2 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 transition-colors"
type="submit"
onClick={() => {
if (isMobile()) {
router.push('supertoss://send?amount=2000&bank=%ED%86%A0%EC%8A%A4%EB%B1%85%ED%81%AC&accountNo=100007643029&origin=qr');
} else {
handleShowPopup();
}
}}
>
토스로 2000원 후원하기
</button>
</div>

{showPopup && (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-gray-800 p-6 rounded-lg shadow-lg text-center">
<h2 className="text-xl font-bold mb-4">모바일 환경에서 이용해 주세요</h2>
<p className="mb-4">이 기능은 모바일 환경에서 토스 앱을 사용해야 합니다. 모바일 기기에서 요청해 주세요.</p>
<button
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
onClick={handleClosePopup}
>
닫기
</button>
</div>
</div>
)}
</>
)
}
48 changes: 48 additions & 0 deletions src/app/form/success/Cancel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { useSearchParams } from 'next/navigation'
import { Suspense } from 'react'

const Cancel: React.FC = () => {
const searchParams = useSearchParams()
const issueCode = searchParams.get('issue_code') || 'No code provided'

const handleCancel = async (issueCode: string) => {
try {
const response = await fetch(
`https://9e240d7v0k.execute-api.ap-northeast-2.amazonaws.com/api/pass_connect/cancel/${issueCode}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
}
);
if (!response.ok) {
throw new Error('Failed to cancel the request');
}
alert('취소되었습니다.');
window.history.back();
} catch (error) {
console.error('Error:', error);
alert('취소하는 데 실패했습니다.');
}
};

return (
<>
<h2 className="text-xl font-bold m-4">생각했던 결과가 아닌가요?</h2>
<p>대기열에 추가된 이메일이 발송되기 전까지 결과물 받는 것을 취소하고 다시 요청할 수 있습니다</p>
<div className="text-center mt-4">
<Suspense>
<button
onClick={() => handleCancel(issueCode)}
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-700"
>
취소하기
</button>
</Suspense>
</div>
</>
)
}

export default Cancel;
102 changes: 5 additions & 97 deletions src/app/form/success/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,18 @@
'use client'

import { useState, useEffect, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation'
import { Check, Copy } from 'lucide-react';
import Link from 'next/link';
import DynamicBuyerConfirmation from './Confirm';
import Sponsor from '@/app/Sponsor';
import Cancel from './Cancel';

const CopyIssueCode: React.FC = () => {
const searchParams = useSearchParams()
const issueCode = searchParams.get('issue_code') || 'No code provided'

const [isCopied, setIsCopied] = useState(false);

const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000); // 2초 후 초기화
} catch (error) {
console.error('Failed to copy: ', error);
setIsCopied(false);
}
};

return (
<div className="flex items-center justify-center bg-gray-800 p-2 m-4 rounded-md shadow-sm">
<code className="text-gray-400 font-mono">{issueCode}</code>
<button className="p-2 m-2 bg-gray-600 hover:bg-gray-400 rounded-md" onClick={() => copyToClipboard(issueCode)}>
{isCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</button>
</div>
)
}

const isMobile = () => {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
};

export default function SuccessPage() {
const router = useRouter();
const [showPopup, setShowPopup] = useState(false);

useEffect(() => {
if (!isMobile()) {
setShowPopup(true);
}
}, []);

const handleClosePopup = () => {
setShowPopup(false);
};

return (
<div className="min-h-screen flex flex-col items-center justify-center p-4">
<h1 className="text-2xl font-bold">성공적으로 대기열에 등록되었습니다</h1>

<DynamicBuyerConfirmation />

<div className="p-8 rounded-lg shadow-md w-full max-w-md text-center">
<div className="p-8 rounded-lg shadow-md w-full text-center">
<h2 className="text-xl font-bold m-4">
모바일 환경에서 이메일을 열어주세요.
</h2>
Expand All @@ -80,57 +35,10 @@ export default function SuccessPage() {
</ol>
</div>

<div className="p-8 rounded-lg shadow-md w-full max-w-md text-center">
<h2 className="text-xl font-bold m-4">문제가 발생했어요</h2>
<p>아래의 발급 코드를 통해 <br /> <Link href="mailto:pass.connects.im@gmail.com" className="text-blue-500 underline">pass.connects.im@gmail.com</Link>로 문의해 주세요</p>
<Cancel />

<Suspense>
<CopyIssueCode />
</Suspense>
</div>

<div className="m-8 border border-gray-400 p-8 rounded-lg shadow-md w-full max-w-md text-center">
<p className="text-gray-400">
이 프로젝트는 아래와 같은 문제 인식에서 출발했어요.
</p>
<blockquote className="italic m-4">
내 프로필 페이지를 소개하는데 <br /> 모두가 내 아이디를 검색하는 일이 번거롭다.
</blockquote>
<p className="text-gray-400 mb-2">
하지만 서비스 운영을 위한 비용, 그리고 Apple Developer Program 연회비로 99달러의 비용을 부담하게 되었어요.
</p>
<p className="mb-4">
서비스가 꾸준히 이어질 수 있도록 따뜻한 응원을 보내주시면 정말 감사하겠습니다.
</p>
<button
className="w-full my-2 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 transition-colors"
type="submit"
onClick={() => {
if (isMobile()) {
router.push('supertoss://send?amount=2000&bank=%ED%86%A0%EC%8A%A4%EB%B1%85%ED%81%AC&accountNo=100007643029&origin=qr');
} else {
setShowPopup(true);
}
}}
>
토스로 2000원 후원하기
</button>
</div>
<Sponsor />

{showPopup && (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-gray-800 p-6 rounded-lg shadow-lg text-center">
<h2 className="text-xl font-bold mb-4">모바일 환경에서 이용해 주세요</h2>
<p className="mb-4">이 기능은 모바일 환경에서 토스 앱을 사용해야 합니다. 모바일 기기에서 요청해 주세요.</p>
<button
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
onClick={handleClosePopup}
>
닫기
</button>
</div>
</div>
)}
</div>
)
}

0 comments on commit 93f1285

Please sign in to comment.