Skip to content

Commit 4062b04

Browse files
sikkzzsikkzz
committed
fix: safe area 테스트
1 parent 144b8ea commit 4062b04

File tree

4 files changed

+58
-48
lines changed

4 files changed

+58
-48
lines changed

‎apps/tuk-web/src/app/invite/gathering/[gatheringId]/src/components/InviteGathering.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import InviteGatheringSkeleton from '@/app/invite/gathering/[gatheringId]/src/co
1010
import SkeletonGuard from '@/app/invite/meet/[meetId]/src/components/SkeletonGuard';
1111
import { BackgroundTemplate, Button } from '@/shared/components';
1212
import { useParam } from '@/shared/hooks/useParam';
13+
import { cn } from '@/shared/lib';
1314

1415
const InviteGathering = () => {
1516
const gatheringId = Number(useParam('gatheringId'));
@@ -19,18 +20,24 @@ const InviteGathering = () => {
1920
<BackgroundTemplate.Main className="overflow-y-auto px-5">
2021
<BackgroundTemplate.Gradient />
2122

22-
<QueryErrorResetBoundary>
23-
{({ reset }) => (
24-
<ErrorBoundary onReset={reset} FallbackComponent={InviteGatheringErrorFallback}>
25-
<SkeletonGuard minMs={250} skeleton={<InviteGatheringSkeleton />}>
26-
<Suspense fallback={null}>
27-
<InviteGatheringContent />
28-
</Suspense>
29-
</SkeletonGuard>
30-
</ErrorBoundary>
23+
<div
24+
className={cn(
25+
'relative mx-auto w-full max-w-[600px]',
26+
'pb-[calc(120px+env(safe-area-inset-bottom,0px))]'
3127
)}
32-
</QueryErrorResetBoundary>
33-
28+
>
29+
<QueryErrorResetBoundary>
30+
{({ reset }) => (
31+
<ErrorBoundary onReset={reset} FallbackComponent={InviteGatheringErrorFallback}>
32+
<SkeletonGuard minMs={250} skeleton={<InviteGatheringSkeleton />}>
33+
<Suspense fallback={null}>
34+
<InviteGatheringContent />
35+
</Suspense>
36+
</SkeletonGuard>
37+
</ErrorBoundary>
38+
)}
39+
</QueryErrorResetBoundary>
40+
</div>
3441
<BackgroundTemplate.CTA>
3542
<Button
3643
className="w-full"

‎apps/tuk-web/src/app/invite/gathering/[gatheringId]/src/components/InviteGatheringContent.tsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
'use client';
2+
13
import { useSuspenseQuery } from '@tanstack/react-query';
2-
import { useEffect, useState } from 'react';
4+
import { useState } from 'react';
5+
6+
import { gatheringAPIService } from '../service';
37

4-
import { gatheringAPIService } from '@/app/invite/gathering/[gatheringId]/src/service';
58
import { CardFrame } from '@/app/proposal/[proposalId]/detail/components/GatheringProposalContent';
69
import AppInstallBanner from '@/shared/components/AppInstallBanner';
710
import { useParam } from '@/shared/hooks/useParam';
811
import { cn } from '@/shared/lib';
912

10-
const BANNER_KEY = 'gathering-banner-dismissed-at';
11-
const BANNER_RESHOW_MINUTES = 30;
13+
// const BANNER_KEY = 'gathering-banner-dismissed-at';
14+
// const BANNER_RESHOW_MINUTES = 30;
1215

1316
const InviteGatheringContent = () => {
1417
const gatheringId = Number(useParam('gatheringId'));
@@ -18,50 +21,50 @@ const InviteGatheringContent = () => {
1821
queryFn: () => gatheringAPIService.getGatheringName(gatheringId),
1922
});
2023

21-
const [showBanner, setShowBanner] = useState(false);
24+
const [showBanner, setShowBanner] = useState(true);
2225

2326
const handleCloseBanner = () => {
24-
localStorage.setItem(BANNER_KEY, Date.now().toString());
27+
// localStorage.setItem(BANNER_KEY, Date.now().toString());
2528
setShowBanner(false);
2629
};
2730

28-
useEffect(() => {
29-
const dismissedAt = localStorage.getItem(BANNER_KEY);
30-
const now = Date.now();
31-
32-
if (!dismissedAt) {
33-
setShowBanner(true);
34-
} else {
35-
const dismissedTime = parseInt(dismissedAt, 10);
36-
const thirtyMinutes = BANNER_RESHOW_MINUTES * 60 * 1000;
37-
if (now - dismissedTime > thirtyMinutes) {
38-
setShowBanner(true);
39-
}
40-
}
41-
}, []);
31+
// useEffect(() => {
32+
// const dismissedAt = localStorage.getItem(BANNER_KEY);
33+
// const now = Date.now();
34+
// if (!dismissedAt) {
35+
// setShowBanner(true);
36+
// } else {
37+
// const dismissedTime = parseInt(dismissedAt, 10);
38+
// const thirtyMinutes = BANNER_RESHOW_MINUTES * 60 * 1000;
39+
// if (now - dismissedTime > thirtyMinutes) {
40+
// setShowBanner(true);
41+
// }
42+
// }
43+
// }, []);
4244

4345
return (
4446
<>
4547
{showBanner && <AppInstallBanner onClose={handleCloseBanner} />}
4648

49+
{/* 배너 노출 시: safe-area 포함하여 충분한 상단 여백 확보 */}
4750
<h2
4851
className={cn(
4952
'serif-title-22-M font-bold text-gray-900',
50-
showBanner ? 'mt-[6.875rem]' : 'mt-[1.875rem]'
53+
showBanner ? 'mt-[calc(110px+env(safe-area-inset-top,0px))]' : 'mt-[1.875rem]'
5154
)}
5255
>
5356
모임에
5457
<br />
5558
참여하시겠어요?
5659
</h2>
5760

58-
<div className="relative mt-[70px] flex flex-col items-center justify-center">
61+
{/* 카드/프레임 영역 */}
62+
<div className="relative mt-[56px] flex flex-col items-center justify-center">
63+
{/* 카드 배경 박스 (그림자/여백 안정화) */}
5964
<div className="h-[320px] w-[278px] rounded-[10px] bg-gray-50" />
60-
<div
61-
className={cn(
62-
'absolute bottom-[-80px] left-1/2 h-[421px] w-[408px] -translate-x-1/2 translate-y-0'
63-
)}
64-
>
65+
66+
{/* 프레임을 살짝 겹치게 띄워서 시각적 포커스 */}
67+
<div className="pointer-events-none absolute bottom-[-80px] left-1/2 h-[421px] w-[408px] -translate-x-1/2">
6568
<div className="relative size-full">
6669
<div className="absolute inset-0 z-0">
6770
<CardFrame />

‎apps/tuk-web/src/app/invite/gathering/[gatheringId]/src/components/SplashGate.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@
33
import Image from 'next/image';
44
import { useEffect, useState } from 'react';
55

6+
import { cn } from '@/shared/lib';
7+
68
type SplashGateProps = {
7-
/** 최소 표시 시간 (ms) */
89
minMs?: number;
9-
/** 로고 경로 (public/ 기준) */
1010
logoSrc?: string;
11-
/** 로고 크기(px) */
1211
logoSize?: number;
13-
/** 페이드아웃 시간(ms) */
1412
fadeMs?: number;
1513
children: React.ReactNode;
1614
};
@@ -26,9 +24,7 @@ export default function SplashGate({
2624
const [fadeOut, setFadeOut] = useState(false);
2725

2826
useEffect(() => {
29-
// 최소 표시 시간 보장
3027
const t = setTimeout(() => {
31-
// 모션 감소 환경이면 바로 제거
3228
const media = window.matchMedia('(prefers-reduced-motion: reduce)');
3329
if (media.matches || fadeMs === 0) {
3430
setShow(false);
@@ -50,8 +46,10 @@ export default function SplashGate({
5046
<div
5147
aria-busy="true"
5248
aria-live="polite"
53-
className={`fixed inset-0 z-[9999] flex items-center justify-center bg-white-default ${fadeOut ? 'opacity-0 transition-opacity' : 'opacity-100'} `}
54-
// Tailwind transition-duration 커스텀
49+
className={cn(
50+
'fixed inset-0 z-[9999] flex items-center justify-center bg-white-default',
51+
fadeOut ? 'opacity-0 transition-opacity' : 'opacity-100'
52+
)}
5553
style={{ transitionDuration: `${fadeMs}ms` }}
5654
>
5755
<Image src={logoSrc} alt="App Logo" width={logoSize} height={logoSize} priority />

‎apps/tuk-web/src/shared/components/AppInstallBanner.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
'use client';
2+
13
import { CloseIcon24 } from '@/shared/components/icon';
24

35
const AppInstallBanner = ({ onClose }: { onClose: () => void }) => {
46
return (
5-
<div className="fixed left-1/2 top-0 z-20 flex h-14 w-full max-w-[600px] -translate-x-1/2 items-center justify-between bg-gray-50 px-5 text-black-default">
7+
<div className="fixed left-1/2 top-0 z-20 flex h-[calc(56px+env(safe-area-inset-top))] w-full max-w-[600px] -translate-x-1/2 items-center justify-between bg-gray-50 px-5 pt-[max(0px,env(safe-area-inset-top))] text-black-default shadow-[0_1px_0_0_rgba(0,0,0,0.04)] backdrop-blur-[2px]">
68
<div className="flex items-center gap-2">
7-
<button onClick={onClose}>
9+
<button onClick={onClose} aria-label="배너 닫기">
810
<CloseIcon24 />
911
</button>
1012
<div className="flex items-center gap-2">

0 commit comments

Comments
 (0)