Skip to content
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.

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

Add public bigchat text, button to IntroSection #100

Merged
merged 1 commit into from
Jun 16, 2024
Merged
Changes from all commits
Commits
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
77 changes: 63 additions & 14 deletions src/_pages/index/components/IntroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,19 @@ export default function IntroSection() {
const [isClient, setIsClient] = useState(false);
const router = useRouter();

const targetDate = dayjs('2024-06-27 23:59:59').tz('Asia/Seoul').toDate(); // 8기 지원 마감일 (KST)
const applyDeadlineDate = dayjs('2024-06-27 23:59:59')
.tz('Asia/Seoul')
.toDate(); // 8기 지원 마감일 (KST)
const bigchatDeadlineDate = dayjs('2024-06-23 23:59:59')
.tz('Asia/Seoul')
.toDate(); // 퍼블릭 빅챗 마감일 (KST)

const krCurrentDate = dayjs().tz('Asia/Seoul').toDate(); // 한국 시간 기준 현재 시간

const isClosed = krCurrentDate > targetDate;
const isApplyClosed = krCurrentDate > applyDeadlineDate;
const isBigchatClosed = krCurrentDate > bigchatDeadlineDate;

const [days, hours, minutes, seconds] = useCountdown(targetDate);
const [days, hours, minutes, seconds] = useCountdown(applyDeadlineDate);

const handleApplyClick = () => {
event({
Expand All @@ -34,6 +41,16 @@ export default function IntroSection() {
router.push('/apply');
};

const handleBigchatClick = () => {
event({
action: 'public-bigchat',
category: 'click',
label: '퍼블릭 빅챗 참여하기',
value: 1,
});
router.push('https://umoh.io/ausg-public-bigchat');
};

useEffect(() => {
setIsClient(true);
}, []);
Expand All @@ -58,9 +75,11 @@ export default function IntroSection() {
</h1>
<div className="mt-[24px] hidden items-center gap-4 md:flex">
<p className="text-[28px] font-bold text-white md:text-center md:text-[40px]">
{isClosed ? '8기 모집이 마감되었습니다.' : '☁️ 8기 모집중 ☁️'}
{isApplyClosed
? '8기 모집이 마감되었습니다.'
: '☁️ 8기 모집중 ☁️'}
</p>
{isClosed ? null : (
{isApplyClosed ? null : (
<button
type="button"
onClick={handleApplyClick}
Expand All @@ -70,13 +89,27 @@ export default function IntroSection() {
</button>
)}
</div>
{isClosed ? null : (
<div className="hidden items-center gap-4 md:flex">
{isApplyClosed ? null : (
<div className="hidden items-center gap-4 md:flex md:flex-col">
<p className="text-[18px] font-bold text-white md:text-[24px]">
{isClient
? `🔥 지원 마감까지 ${days}일 ${hours}시간 ${minutes}분 ${seconds}초 🔥`
: null}
</p>
<div className="flex items-center gap-2">
<p className="text-[18px] font-bold text-white md:text-[24px]">
{isBigchatClosed ? null : 'AUSG이 궁금하다면?'}
</p>
{isBigchatClosed ? null : (
<button
type="button"
onClick={handleBigchatClick}
className="rounded-md bg-white px-6 py-2 text-[18px] font-bold text-primary duration-200 hover:bg-white/90"
>
퍼블릭 빅챗 참여하기
</button>
)}
</div>
</div>
)}
</div>
Expand All @@ -89,22 +122,24 @@ export default function IntroSection() {
className="right-0 animate-floating transition-[translate]"
/>
</div>
<div className="mt-[24px] flex flex-col items-center justify-center gap-4 md:hidden">
<div className="flex gap-4">
<p className="text-[28px] font-bold text-white md:text-center md:text-[40px]">
{isClosed ? '8기 모집이 마감되었습니다.' : '☁️ 8기 모집중 ☁️'}
<div className="mt-[24px] flex flex-col flex-wrap items-center justify-center gap-4 md:hidden">
<div className="flex items-center gap-4">
<p className="text-[22px] font-bold text-white md:text-center md:text-[40px]">
{isApplyClosed
? '8기 모집이 마감되었습니다.'
: '☁️ 8기 모집중 ☁️'}
</p>
{isClosed ? null : (
{isApplyClosed ? null : (
<button
type="button"
onClick={handleApplyClick}
className="rounded-md bg-white px-6 py-2 text-[18px] font-bold text-primary hover:bg-white/90"
className="shrink-0 rounded-md bg-white px-6 py-2 text-[18px] font-bold text-primary hover:bg-white/90"
>
지원하기
</button>
)}
</div>
{isClosed ? null : (
{isApplyClosed ? null : (
<div className="flex items-center gap-4 md:hidden">
<p className="text-[18px] font-bold text-white md:text-[24px]">
{isClient
Expand All @@ -113,6 +148,20 @@ export default function IntroSection() {
</p>
</div>
)}
<div className="flex flex-col items-center gap-2">
<p className="text-[18px] font-bold text-white md:text-[24px]">
{isBigchatClosed ? null : 'AUSG이 궁금하다면?'}
</p>
{isBigchatClosed ? null : (
<button
type="button"
onClick={handleBigchatClick}
className="rounded-md bg-white px-6 py-2 text-[18px] font-bold text-primary duration-200 hover:bg-white/90"
>
퍼블릭 빅챗 참여하기
</button>
)}
</div>
</div>
</main>
</div>
Expand Down
Loading