Skip to content

Commit a93094f

Browse files
sikkzzsikkzz
authored
Merge pull request #60 from Nexters/fix/meet-page-type
fix: 모바일 초대장 페이지 데이터 타입, ui 수정
2 parents b8a3e6b + d7df79e commit a93094f

File tree

13 files changed

+226
-345
lines changed

13 files changed

+226
-345
lines changed

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

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,42 @@ import { ErrorBoundary } from 'react-error-boundary';
77
import InviteGatheringContent from '@/app/invite/gathering/[gatheringId]/src/components/InviteGatheringContent';
88
import InviteGatheringErrorFallback from '@/app/invite/gathering/[gatheringId]/src/components/InviteGatheringErrorFallback';
99
import InviteGatheringSkeleton from '@/app/invite/gathering/[gatheringId]/src/components/InviteGatheringSkeleton';
10-
import { TukLogo } from '@/app/invite/meet/[meetId]/src/components/InviteProposal';
1110
import SkeletonGuard from '@/app/invite/meet/[meetId]/src/components/SkeletonGuard';
12-
import { Button } from '@/shared/components';
11+
import { BackgroundTemplate, Button } from '@/shared/components';
1312
import { useParam } from '@/shared/hooks/useParam';
1413

1514
const InviteGathering = () => {
1615
const gatheringId = Number(useParam('gatheringId'));
1716

1817
return (
19-
<div className="relative w-full overflow-y-auto overflow-x-hidden bg-gray-50 px-5">
20-
<div className="pointer-events-none absolute left-1/2 top-1/2 h-[340px] w-[706px] -translate-x-1/2 -translate-y-1/2 rotate-[-21deg] bg-gradient-to-b from-[#FFA098] to-[#FDD27C] opacity-60 blur-[100px]" />
21-
22-
<QueryErrorResetBoundary>
23-
{({ reset }) => (
24-
<ErrorBoundary onReset={reset} FallbackComponent={InviteGatheringErrorFallback}>
25-
<SkeletonGuard minMs={250} skeleton={<InviteGatheringSkeleton />}>
26-
<Suspense fallback={<InviteGatheringSkeleton />}>
27-
<InviteGatheringContent />
28-
</Suspense>
29-
</SkeletonGuard>
30-
</ErrorBoundary>
31-
)}
32-
</QueryErrorResetBoundary>
33-
34-
<div className="mt-[4.125rem] flex justify-center pb-[9.0625rem]">
35-
<TukLogo />
36-
</div>
37-
38-
<div className="fixed bottom-0 left-0 z-30 w-full bg-gradient-to-b from-white-default/0 to-white-default px-5 py-6">
39-
<Button
40-
className="w-full"
41-
onClick={() =>
42-
(window.location.href = `tuk-app://tuk/join-gathering?gatheringId=${gatheringId}`)
43-
}
44-
>
45-
입장하기
46-
</Button>
47-
</div>
48-
</div>
18+
<BackgroundTemplate>
19+
<BackgroundTemplate.Main className="overflow-y-auto px-5">
20+
<BackgroundTemplate.Gradient />
21+
22+
<QueryErrorResetBoundary>
23+
{({ reset }) => (
24+
<ErrorBoundary onReset={reset} FallbackComponent={InviteGatheringErrorFallback}>
25+
<SkeletonGuard minMs={250} skeleton={<InviteGatheringSkeleton />}>
26+
<Suspense fallback={<InviteGatheringSkeleton />}>
27+
<InviteGatheringContent />
28+
</Suspense>
29+
</SkeletonGuard>
30+
</ErrorBoundary>
31+
)}
32+
</QueryErrorResetBoundary>
33+
34+
<BackgroundTemplate.CTA>
35+
<Button
36+
className="w-full"
37+
onClick={() =>
38+
(window.location.href = `tuk-app://tuk/join-gathering?gatheringId=${gatheringId}`)
39+
}
40+
>
41+
입장하기
42+
</Button>
43+
</BackgroundTemplate.CTA>
44+
</BackgroundTemplate.Main>
45+
</BackgroundTemplate>
4946
);
5047
};
5148

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

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
22
import { useEffect, useState } from 'react';
33

44
import { gatheringAPIService } from '@/app/invite/gathering/[gatheringId]/src/service';
5-
import { InviteCard } from '@/app/invite/meet/[meetId]/src/components/InviteProposal';
5+
import { CardFrame } from '@/app/proposal/[proposalId]/detail/components/GatheringProposalContent';
66
import AppInstallBanner from '@/shared/components/AppInstallBanner';
77
import { useParam } from '@/shared/hooks/useParam';
88
import { cn } from '@/shared/lib';
@@ -13,7 +13,7 @@ const BANNER_RESHOW_MINUTES = 30;
1313
const InviteGatheringContent = () => {
1414
const gatheringId = Number(useParam('gatheringId'));
1515

16-
const { data } = useSuspenseQuery({
16+
const { data: proposalDetail } = useSuspenseQuery({
1717
queryKey: ['getGatheringName', gatheringId],
1818
queryFn: () => gatheringAPIService.getGatheringName(gatheringId),
1919
});
@@ -55,19 +55,25 @@ const InviteGatheringContent = () => {
5555
참여하시겠어요?
5656
</h2>
5757

58-
<div className="relative mt-12 flex justify-center">
59-
<div className="relative mt-6 h-[300px] w-[260px] rounded-[10px] border border-black-default/5 bg-[#f0f1f3]">
60-
<h3 className="serif-body-20-R mt-[50px] text-center">{data?.data.gatheringName}</h3>
58+
<div className="relative mt-[70px] flex flex-col items-center justify-center">
59+
<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+
<div className="relative size-full">
66+
<div className="absolute inset-0 z-0">
67+
<CardFrame />
68+
</div>
6169

62-
<div className="absolute bottom-0 left-0 flex w-full justify-between px-4 pb-4">
63-
<p className="serif-body-12-R text-gray-500">연락이</p>
64-
<p className="serif-body-12-R text-gray-500">뜸해진 우리</p>
70+
{proposalDetail.data.gatheringName && (
71+
<div className="serif-body-16-M absolute left-1/2 top-[180px] z-[1] -translate-x-1/2 text-center text-gray-900">
72+
{proposalDetail.data.gatheringName}
73+
</div>
74+
)}
6575
</div>
6676
</div>
67-
68-
<div className="absolute left-1/2 top-0 -translate-x-1/2">
69-
<InviteCard />
70-
</div>
7177
</div>
7278
</>
7379
);

‎apps/tuk-web/src/app/invite/meet/[meetId]/src/components/GradientBackground.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎apps/tuk-web/src/app/invite/meet/[meetId]/src/components/InviteProposal.tsx‎

Lines changed: 27 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -4,155 +4,48 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query';
44
import { Suspense } from 'react';
55
import { ErrorBoundary } from 'react-error-boundary';
66

7-
import GradientBackground from '@/app/invite/meet/[meetId]/src/components/GradientBackground';
87
import InviteProposalContent from '@/app/invite/meet/[meetId]/src/components/InviteProposalContent';
98
import InviteProposalErrorFallback from '@/app/invite/meet/[meetId]/src/components/InviteProposalErrorFallback';
109
import InviteProposalSkeleton from '@/app/invite/meet/[meetId]/src/components/InviteProposalSkeleton';
1110
import SkeletonGuard from '@/app/invite/meet/[meetId]/src/components/SkeletonGuard';
12-
import { Button } from '@/shared/components';
11+
import { BackgroundTemplate, Button } from '@/shared/components';
1312
import { useParam } from '@/shared/hooks/useParam';
1413

1514
const InviteProposal = () => {
1615
const proposalId = Number(useParam('meetId'));
1716

1817
return (
19-
<div className="relative w-full overflow-y-auto overflow-x-hidden bg-gradient-to-b from-white-default to-[#DCC8F8] px-5">
20-
<GradientBackground />
21-
22-
<QueryErrorResetBoundary>
23-
{({ reset }) => (
24-
<ErrorBoundary onReset={reset} FallbackComponent={InviteProposalErrorFallback}>
25-
<SkeletonGuard minMs={250} skeleton={<InviteProposalSkeleton />}>
26-
<Suspense fallback={<InviteProposalSkeleton />}>
27-
<InviteProposalContent />
28-
</Suspense>
29-
</SkeletonGuard>
30-
</ErrorBoundary>
31-
)}
32-
</QueryErrorResetBoundary>
33-
34-
<div className="mt-[4.125rem] flex justify-center pb-[9.0625rem]">
35-
<TukLogo />
36-
</div>
37-
38-
<div className="fixed bottom-0 left-0 z-30 w-full bg-gradient-to-b from-white-default/0 to-white-default px-5 py-6">
39-
<Button
40-
className="w-full"
41-
onClick={() => (window.location.href = `tuk-app://tuk/proposal-detail/${proposalId}`)}
42-
>
43-
초대장 확인하기
44-
</Button>
45-
</div>
46-
</div>
18+
<BackgroundTemplate>
19+
<BackgroundTemplate.Main className="overflow-y-auto px-5">
20+
<BackgroundTemplate.Gradient />
21+
22+
<QueryErrorResetBoundary>
23+
{({ reset }) => (
24+
<ErrorBoundary onReset={reset} FallbackComponent={InviteProposalErrorFallback}>
25+
<SkeletonGuard minMs={250} skeleton={<InviteProposalSkeleton />}>
26+
<Suspense fallback={<InviteProposalSkeleton />}>
27+
<InviteProposalContent />
28+
</Suspense>
29+
</SkeletonGuard>
30+
</ErrorBoundary>
31+
)}
32+
</QueryErrorResetBoundary>
33+
34+
<BackgroundTemplate.CTA>
35+
<Button
36+
className="w-full"
37+
onClick={() => (window.location.href = `tuk-app://tuk/proposal-detail/${proposalId}`)}
38+
>
39+
초대장 확인하기
40+
</Button>
41+
</BackgroundTemplate.CTA>
42+
</BackgroundTemplate.Main>
43+
</BackgroundTemplate>
4744
);
4845
};
4946

5047
export default InviteProposal;
5148

52-
export const InviteCard = () => (
53-
<svg
54-
xmlns="http://www.w3.org/2000/svg"
55-
width="348"
56-
height="381"
57-
viewBox="0 0 348 381"
58-
fill="none"
59-
>
60-
<g filter="url(#filter0_d_1294_13169)">
61-
<mask id="path-1-inside-1_1294_13169" fill="white">
62-
<path d="M308 15C313.523 15 318 19.4772 318 25V325.999C318 331.522 313.523 336 308 336H40C34.4772 336 30 331.522 30 325.999V25C30 19.4772 34.4772 15 40 15H138.218C143.716 15 148.008 19.5824 149.987 24.7119C153.959 35.012 163.952 42.3193 175.652 42.3193C187.353 42.3193 197.346 35.012 201.318 24.7119C203.296 19.5824 207.589 15 213.086 15H308Z" />
63-
</mask>
64-
<path
65-
d="M308 15C313.523 15 318 19.4772 318 25V325.999C318 331.522 313.523 336 308 336H40C34.4772 336 30 331.522 30 325.999V25C30 19.4772 34.4772 15 40 15H138.218C143.716 15 148.008 19.5824 149.987 24.7119C153.959 35.012 163.952 42.3193 175.652 42.3193C187.353 42.3193 197.346 35.012 201.318 24.7119C203.296 19.5824 207.589 15 213.086 15H308Z"
66-
fill="#F5F5F5"
67-
fillOpacity="0.02"
68-
shapeRendering="crispEdges"
69-
/>
70-
<path
71-
d="M308 336V337.5V336ZM40 15V13.5V15ZM201.318 24.7119L202.718 25.2516L201.318 24.7119ZM149.987 24.7119L148.587 25.2516L149.987 24.7119ZM308 15V16.5C312.694 16.5 316.5 20.3056 316.5 25H318H319.5C319.5 18.6487 314.351 13.5 308 13.5V15ZM318 25H316.5V325.999H318H319.5V25H318ZM318 325.999H316.5C316.5 330.694 312.694 334.5 308 334.5V336V337.5C314.351 337.5 319.5 332.35 319.5 325.999H318ZM308 336V334.5H40V336V337.5H308V336ZM40 336V334.5C35.3058 334.5 31.5 330.694 31.5 325.999H30H28.5C28.5 332.35 33.6485 337.5 40 337.5V336ZM30 325.999H31.5V25H30H28.5V325.999H30ZM30 25H31.5C31.5 20.3056 35.3056 16.5 40 16.5V15V13.5C33.6487 13.5 28.5 18.6487 28.5 25H30ZM40 15V16.5H138.218V15V13.5H40V15ZM149.987 24.7119L148.587 25.2516C152.775 36.111 163.311 43.8193 175.652 43.8193V42.3193V40.8193C164.592 40.8193 155.142 33.9129 151.386 24.1722L149.987 24.7119ZM175.652 42.3193V43.8193C187.994 43.8193 198.53 36.111 202.718 25.2516L201.318 24.7119L199.919 24.1722C196.162 33.9129 186.712 40.8193 175.652 40.8193V42.3193ZM213.086 15V16.5H308V15V13.5H213.086V15ZM201.318 24.7119L202.718 25.2516C204.592 20.3904 208.485 16.5 213.086 16.5V15V13.5C206.692 13.5 202 18.7744 199.919 24.1722L201.318 24.7119ZM138.218 15V16.5C142.819 16.5 146.712 20.3904 148.587 25.2516L149.987 24.7119L151.386 24.1722C149.304 18.7744 144.613 13.5 138.218 13.5V15Z"
72-
fill="url(#paint0_linear_1294_13169)"
73-
mask="url(#path-1-inside-1_1294_13169)"
74-
/>
75-
</g>
76-
<defs>
77-
<filter
78-
id="filter0_d_1294_13169"
79-
x="0"
80-
y="0"
81-
width="348"
82-
height="381"
83-
filterUnits="userSpaceOnUse"
84-
colorInterpolationFilters="sRGB"
85-
>
86-
<feFlood floodOpacity="0" result="BackgroundImageFix" />
87-
<feColorMatrix
88-
in="SourceAlpha"
89-
type="matrix"
90-
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
91-
result="hardAlpha"
92-
/>
93-
<feOffset dy="15" />
94-
<feGaussianBlur stdDeviation="15" />
95-
<feComposite in2="hardAlpha" operator="out" />
96-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
97-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1294_13169" />
98-
<feBlend
99-
mode="normal"
100-
in="SourceGraphic"
101-
in2="effect1_dropShadow_1294_13169"
102-
result="shape"
103-
/>
104-
</filter>
105-
<linearGradient
106-
id="paint0_linear_1294_13169"
107-
x1="30"
108-
y1="14.999"
109-
x2="318.001"
110-
y2="383.639"
111-
gradientUnits="userSpaceOnUse"
112-
>
113-
<stop stopColor="white" stopOpacity="0.4" />
114-
<stop offset="1" stopColor="#999999" stopOpacity="0.2" />
115-
</linearGradient>
116-
</defs>
117-
</svg>
118-
);
119-
120-
export const TukLogo = () => (
121-
<svg xmlns="http://www.w3.org/2000/svg" width="154" height="76" viewBox="0 0 154 76" fill="none">
122-
<foreignObject x="-4" y="-4" width="162" height="84">
123-
<div
124-
style={{
125-
backdropFilter: 'blur(2px)',
126-
clipPath: 'url(#bgblur_0_1031_14686_clip_path)',
127-
height: '100%',
128-
width: '100%',
129-
}}
130-
/>
131-
</foreignObject>
132-
<g opacity="0.2" data-figma-bg-blur-radius="4">
133-
<path
134-
d="M100.67 52.9516L145.066 0H145.337L100.94 52.9516H100.67ZM84.3367 74.5098V74.3111H108.701V74.5098H84.3367ZM114.747 74.5098V74.3111H142.72V74.5098H114.747ZM92.0069 74.5098L107.347 0H115.92L100.579 74.5098H92.0069ZM125.395 74.5098L114.296 36.7582L120.793 29.2078L134.779 74.5098H125.395ZM99.2259 0.198696V0H123.59V0.198696H99.2259ZM132.343 0.198696V0H154V0.198696H132.343Z"
135-
fill="#1F1F1F"
136-
/>
137-
<path
138-
d="M69.7309 76C64.828 76 60.7523 75.1059 57.5038 73.3176C54.2853 71.5294 52.0745 68.8305 50.8713 65.2209C49.6682 61.6113 49.6381 57.0911 50.7811 51.6601L61.6096 0H70.1821L59.3536 50.6667C58.6919 53.7795 58.3159 56.8261 58.2257 59.8065C58.1655 62.7538 58.4964 65.4362 59.2183 67.8536C59.9703 70.2379 61.2336 72.142 63.0083 73.566C64.7829 74.99 67.1742 75.702 70.1821 75.702C74.8143 75.702 78.6193 74.7582 81.5972 72.8706C84.6051 70.9499 87.0114 68.2013 88.8162 64.6248C90.6209 61.0484 92.0497 56.7268 93.1024 51.6601L103.931 0H104.111L93.2829 51.6601C92.2001 56.8593 90.7262 61.2802 88.8613 64.9229C87.0265 68.5325 84.56 71.281 81.4618 73.1686C78.3937 75.0562 74.4835 76 69.7309 76ZM53.037 0.198696V0H78.7547V0.198696H53.037ZM94.5462 0.198696V0H112.143V0.198696H94.5462Z"
139-
fill="#1F1F1F"
140-
/>
141-
<path
142-
d="M11.5504 74.5098L27.2517 0H35.8242L20.1229 74.5098H11.5504ZM1.62427 74.5098V74.3111H30.0491V74.5098H1.62427ZM0 22.3529L4.69234 0H58.3836L53.6912 22.3529H53.5108C54.3831 18.1473 54.7591 14.3721 54.6387 11.0274C54.5184 7.68279 53.6612 5.05011 52.067 3.12942C50.4728 1.1756 47.9161 0.198696 44.3968 0.198696H17.7768C15.1298 0.198696 12.8438 0.76166 10.9187 1.88759C8.99366 3.01351 7.35435 4.58649 6.00079 6.60654C4.64723 8.59347 3.50422 10.9281 2.57177 13.6105C1.63931 16.2928 0.842216 19.207 0.180475 22.3529H0Z"
143-
fill="#1F1F1F"
144-
/>
145-
</g>
146-
<defs>
147-
<clipPath id="bgblur_0_1031_14686_clip_path" transform="translate(4 4)">
148-
<path d="M100.67 52.9516L145.066 0H145.337L100.94 52.9516H100.67ZM84.3367 74.5098V74.3111H108.701V74.5098H84.3367ZM114.747 74.5098V74.3111H142.72V74.5098H114.747ZM92.0069 74.5098L107.347 0H115.92L100.579 74.5098H92.0069ZM125.395 74.5098L114.296 36.7582L120.793 29.2078L134.779 74.5098H125.395ZM99.2259 0.198696V0H123.59V0.198696H99.2259ZM132.343 0.198696V0H154V0.198696H132.343Z" />
149-
<path d="M69.7309 76C64.828 76 60.7523 75.1059 57.5038 73.3176C54.2853 71.5294 52.0745 68.8305 50.8713 65.2209C49.6682 61.6113 49.6381 57.0911 50.7811 51.6601L61.6096 0H70.1821L59.3536 50.6667C58.6919 53.7795 58.3159 56.8261 58.2257 59.8065C58.1655 62.7538 58.4964 65.4362 59.2183 67.8536C59.9703 70.2379 61.2336 72.142 63.0083 73.566C64.7829 74.99 67.1742 75.702 70.1821 75.702C74.8143 75.702 78.6193 74.7582 81.5972 72.8706C84.6051 70.9499 87.0114 68.2013 88.8162 64.6248C90.6209 61.0484 92.0497 56.7268 93.1024 51.6601L103.931 0H104.111L93.2829 51.6601C92.2001 56.8593 90.7262 61.2802 88.8613 64.9229C87.0265 68.5325 84.56 71.281 81.4618 73.1686C78.3937 75.0562 74.4835 76 69.7309 76ZM53.037 0.198696V0H78.7547V0.198696H53.037ZM94.5462 0.198696V0H112.143V0.198696H94.5462Z" />
150-
<path d="M11.5504 74.5098L27.2517 0H35.8242L20.1229 74.5098H11.5504ZM1.62427 74.5098V74.3111H30.0491V74.5098H1.62427ZM0 22.3529L4.69234 0H58.3836L53.6912 22.3529H53.5108C54.3831 18.1473 54.7591 14.3721 54.6387 11.0274C54.5184 7.68279 53.6612 5.05011 52.067 3.12942C50.4728 1.1756 47.9161 0.198696 44.3968 0.198696H17.7768C15.1298 0.198696 12.8438 0.76166 10.9187 1.88759C8.99366 3.01351 7.35435 4.58649 6.00079 6.60654C4.64723 8.59347 3.50422 10.9281 2.57177 13.6105C1.63931 16.2928 0.842216 19.207 0.180475 22.3529H0Z" />
151-
</clipPath>
152-
</defs>
153-
</svg>
154-
);
155-
15649
export const QuoteIcon = () => (
15750
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15" fill="none">
15851
<path

0 commit comments

Comments
 (0)