Skip to content

Commit 19b016d

Browse files
hyeongjun3hyeongjun3
committed
[ChoosePage] feat: 기능 추가
1 parent eebf537 commit 19b016d

File tree

7 files changed

+174
-29
lines changed

7 files changed

+174
-29
lines changed

‎src/Router.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import ChoosePage from "@Pages/choose/Choose.page";
22
import LandingPage from "@Pages/landing/Landing.page";
3+
import PreparePage from "@Pages/prepare/Prepare.page";
34
import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
45

56
export default function Router() {
@@ -10,6 +11,7 @@ export default function Router() {
1011
children: [
1112
{ path: "/", element: <LandingPage /> },
1213
{ path: "/choose", element: <ChoosePage /> },
14+
{ path: "/prepare/:templateId", element: <PreparePage /> },
1315
],
1416
},
1517
]);

‎src/assets/images/sample-image2.png

181 KB
Loading

‎src/components/Card/Card.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { ComponentProps } from "react";
33

44
export interface CardProps extends ComponentProps<"button"> {
55
label: string;
6-
description: string;
6+
title: string;
77
src: string;
88
}
99

1010
export default function Card({
1111
label,
12-
description,
12+
title,
1313
className,
1414
src,
1515
...restProps
@@ -30,7 +30,7 @@ export default function Card({
3030
{label}
3131
</div>
3232
<div className="font-yClover font-bold text-white leading-5">
33-
{description}
33+
{title}
3434
</div>
3535
</div>
3636
{disabled && (

‎src/components/button/BackButton.tsx

Whitespace-only changes.

‎src/constant/templates.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import SampleImage1 from "@Assets/images/sample-image1.png";
2+
import SampleImage2 from "@Assets/images/sample-image2.png";
3+
import SampleImage3 from "@Assets/images/sample-image3.png";
4+
import SampleImage4 from "@Assets/images/sample-image4.png";
5+
6+
const Templates = {
7+
id1: {
8+
label: "생일 축하",
9+
title: "템플릿이름 길이가 길어질 경우 2줄",
10+
src: SampleImage1,
11+
description: [
12+
"템플릿 설명이 한 줄 정도 들어갈 것 같음",
13+
"이런 영상이 필요해요! 이런 영상을 찍어요!",
14+
],
15+
},
16+
id2: {
17+
label: "인절미",
18+
title: "템플릿 이름",
19+
src: SampleImage2,
20+
description: [
21+
"템플릿 설명이 한 줄 정도 들어갈 것 같음",
22+
"이런 영상이 필요해요! 이런 영상을 찍어요!",
23+
],
24+
},
25+
id3: {
26+
label: "생일 축하",
27+
title: "템플릿 이름",
28+
src: SampleImage3,
29+
disabled: true,
30+
description: [
31+
"템플릿 설명이 한 줄 정도 들어갈 것 같음",
32+
"이런 영상이 필요해요! 이런 영상을 찍어요!",
33+
],
34+
},
35+
id4: {
36+
label: "생일 축하",
37+
title: "템플릿이름 길이가 길어질 경우 2줄",
38+
src: SampleImage4,
39+
disabled: true,
40+
description: [
41+
"템플릿 설명이 한 줄 정도 들어갈 것 같음",
42+
"이런 영상이 필요해요! 이런 영상을 찍어요!",
43+
],
44+
},
45+
};
46+
47+
export default Templates;

‎src/pages/choose/Choose.page.tsx

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import Card, { CardProps } from "@Components/Card/Card";
22
import Base64 from "@Constant/base64";
33
import { createRepeatBackground, mergeClassName } from "@Utils/styleExtension";
4-
import SampleImage1 from "@Assets/images/sample-image1.png";
5-
import SampleImage2 from "@Assets/images/sample-image2.png";
6-
import SampleImage3 from "@Assets/images/sample-image3.png";
7-
import SampleImage4 from "@Assets/images/sample-image4.png";
4+
import { useNavigate } from "react-router-dom";
5+
import Templates from "@Constant/templates";
86

97
export default function ChoosePage() {
108
return (
@@ -78,43 +76,35 @@ function Middle() {
7876
}
7977

8078
function Content() {
79+
const navigate = useNavigate();
80+
81+
const goNext = (templateId: string) => {
82+
navigate(`/prepare/${templateId}`);
83+
};
84+
8185
const items: [CardProps[], CardProps[]] = [
8286
[
8387
{
84-
label: "생일 축하",
85-
description: "템플릿이름 길이가 길어질 경우 2줄",
86-
src: SampleImage1,
88+
...Templates["id1"],
89+
onClick: () => goNext("id1"),
8790
},
8891
{
89-
label: "생일 축하",
90-
description: "템플릿 이름",
91-
src: SampleImage3,
92-
disabled: true,
92+
...Templates["id3"],
9393
},
9494
{
95-
label: "생일 축하",
96-
description: "템플릿이름 길이가 길어질 경우 2줄",
97-
src: SampleImage4,
98-
disabled: true,
95+
...Templates["id4"],
9996
},
10097
],
10198
[
10299
{
103-
label: "인절미",
104-
description: "템플릿 이름",
105-
src: SampleImage2,
100+
...Templates["id2"],
101+
onClick: () => goNext("id2"),
106102
},
107103
{
108-
label: "키치",
109-
description: "템플릿 이름",
110-
src: SampleImage4,
111-
disabled: true,
104+
...Templates["id4"],
112105
},
113106
{
114-
label: "인절미",
115-
description: "템플릿 이름",
116-
src: SampleImage2,
117-
disabled: true,
107+
...Templates["id2"],
118108
},
119109
],
120110
];

‎src/pages/prepare/Prepare.page.tsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import Button from "@Components/button/Button";
2+
import Templates from "@Constant/templates";
3+
import { useNavigate, useParams } from "react-router-dom";
4+
5+
export default function PreparePage() {
6+
const { templateId } = useParams();
7+
const navigate = useNavigate();
8+
9+
// @ts-expect-error
10+
const templateInfo: (typeof Templates)["id1"] = Templates?.[templateId];
11+
12+
if (!templateInfo) {
13+
throw new Error("invalid template id");
14+
}
15+
16+
const goBack = () => navigate(-1);
17+
18+
const { label, title, description, src } = templateInfo;
19+
20+
return (
21+
<div className="w-full h-full flex flex-col justify-between">
22+
<div className="relative w-full overflow-hidden max-h-full">
23+
<img className="w-full h-full" src={src} />
24+
<div className="absolute top-0 flex flex-col w-full h-full py-[24px] px-[16px] justify-between">
25+
<div className="flex flex-row justify-between">
26+
<button
27+
className="flex flex-row items-center gap-[8px]"
28+
onClick={goBack}
29+
>
30+
<div>
31+
<BackIcon />
32+
</div>
33+
<div className="font-yClover text-white font-bold">뒤로가기</div>
34+
</button>
35+
<button className="flex justify-center items-center w-[40px] h-[40px] bg-[rgba(255,255,255,0.25)] rounded-[8px]">
36+
<IconSound />
37+
</button>
38+
</div>
39+
<div className="flex flex-col gap-[20px]">
40+
<div className="flex flex-col gap-[8px]">
41+
<div className="py-[4px] px-[8px] w-fit rounded-full bg-[#FCD55F] font-yClover font-bold text-[#191919]">
42+
{label}
43+
</div>
44+
<div className="font-yClover font-bold text-white leading-5">
45+
{title}
46+
</div>
47+
</div>
48+
<div className="flex flex-col gap-[8px] font-yClover font-regular text-white">
49+
{description.map((item) => (
50+
<div key={item}>{item}</div>
51+
))}
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
<div className="flex flex-row items-center pt-[52px] pb-[40px] px-[16px] gap-[16px] justify-center">
57+
<Button className="w-full" variant={"primary"}>
58+
직접 촬영할래
59+
</Button>
60+
<Button className="w-full" variant={"primary"}>
61+
업로르할래
62+
</Button>
63+
</div>
64+
</div>
65+
);
66+
}
67+
68+
function BackIcon() {
69+
return (
70+
<svg
71+
xmlns="http://www.w3.org/2000/svg"
72+
width="24"
73+
height="24"
74+
viewBox="0 0 24 24"
75+
fill="none"
76+
>
77+
<path
78+
d="M12 9.05911V6.50011C11.9997 6.30249 11.9409 6.10938 11.831 5.94513C11.7211 5.78087 11.565 5.65282 11.3825 5.57711C11.2 5.5014 10.9991 5.48141 10.8052 5.51967C10.6113 5.55793 10.4331 5.65273 10.293 5.79211L4 12.0001L10.293 18.2071C10.3857 18.3003 10.4958 18.3742 10.6171 18.4247C10.7385 18.4752 10.8686 18.5011 11 18.5011C11.1314 18.5011 11.2615 18.4752 11.3829 18.4247C11.5042 18.3742 11.6143 18.3003 11.707 18.2071C11.7999 18.1143 11.8736 18.0041 11.9239 17.8828C11.9742 17.7615 12 17.6314 12 17.5001V15.0111C14.75 15.0791 17.755 15.5771 20 19.0001V18.0001C20 13.3671 16.5 9.55711 12 9.05911Z"
79+
fill="white"
80+
/>
81+
</svg>
82+
);
83+
}
84+
85+
function IconSound() {
86+
return (
87+
<svg
88+
xmlns="http://www.w3.org/2000/svg"
89+
width="25"
90+
height="24"
91+
viewBox="0 0 25 24"
92+
fill="none"
93+
>
94+
<path
95+
d="M2.04617 14.4299C1.60587 13.6959 1.37329 12.856 1.37329 12C1.37329 11.1441 1.60587 10.3042 2.04617 9.57016C2.18156 9.34419 2.36273 9.14905 2.57804 8.99728C2.79335 8.8455 3.03803 8.74044 3.29635 8.68886L5.42784 8.26206C5.55495 8.23689 5.6696 8.16891 5.75266 8.06944L8.35626 4.94335C9.8444 3.15557 10.5897 2.26294 11.2532 2.50341C11.9192 2.74388 11.9192 3.90719 11.9192 6.23382V17.7688C11.9192 20.0941 11.9192 21.2562 11.2545 21.4979C10.591 21.7371 9.84566 20.8445 8.35752 19.058L5.75014 15.9306C5.6674 15.8314 5.55324 15.7634 5.42658 15.738L3.29509 15.3112C3.03677 15.2596 2.79209 15.1546 2.57678 15.0028C2.36147 14.851 2.18156 14.6559 2.04617 14.4299Z"
96+
fill="white"
97+
/>
98+
<path
99+
d="M15.1121 7.54826C16.2867 8.7229 16.9495 10.3142 16.9559 11.9755C16.9622 13.6367 16.3117 15.233 15.1461 16.4166M20.3004 4.87793C22.1799 6.75719 23.2404 9.30317 23.2507 11.961C23.2611 14.6188 22.2205 17.173 20.3558 19.0668"
100+
stroke="white"
101+
strokeWidth="2.518"
102+
strokeLinecap="round"
103+
/>
104+
</svg>
105+
);
106+
}

0 commit comments

Comments
 (0)