Skip to content

Commit f6096f9

Browse files
리니_이경린lgrin-byte
리니_이경린
authored and
lgrin-byte
committed
feat: 리뷰 복사 가이드 페이지 추가
1 parent 99011bd commit f6096f9

File tree

7 files changed

+229
-59
lines changed

7 files changed

+229
-59
lines changed

‎public/assets/img/img-lcon-bm.png‎

1.13 MB
Loading

‎public/assets/img/img-lcon-cp.png‎

32.1 KB
Loading

‎public/assets/img/img-lcon-naver.png‎

63.9 KB
Loading

‎src/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.module.css‎

Lines changed: 77 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.RecognitionFail {
1+
.ReviewGuide {
22
padding-left: 1.25rem;
33
padding-right: 1.25rem;
44
padding-bottom: 2.5rem;
@@ -8,42 +8,106 @@
88
flex-direction: column;
99
justify-content: space-between;
1010
}
11-
.RecognitionFail .Title {
12-
padding-top: 3.75rem;
11+
.ReviewGuide .Title {
12+
padding-top: 1.875rem;
1313
}
14-
.RecognitionFail .Image {
14+
.ReviewGuide .TitleCont {
15+
display: flex;
16+
flex-direction: row;
17+
gap: 0.25rem;
18+
justify-content: center;
19+
}
20+
.ReviewGuide .Image {
1521
display: flex;
1622
justify-content: center;
1723
align-items: center;
1824
}
19-
.RecognitionFail .Bottom {
25+
.ReviewGuide .Bottom {
2026
margin-top: 1.25rem;
2127
}
2228

29+
.ReviewGuideWrap {
30+
display: flex;
31+
flex-direction: column;
32+
gap: 2rem;
33+
}
34+
2335
.ReviewGuideList {
2436
display: flex;
25-
gap: 12px;
37+
gap: 0.75rem;
2638
}
2739

2840
.ReviewGuideNum {
29-
display: flex;
30-
flex-direction: column;
31-
align-items: center;
3241
width: 1.75rem;
3342
height: 1.75rem;
3443
background-color: var(--color-gray200);
3544
border-radius: 999px;
36-
line-height: 1.75rem;
45+
display: inline-flex;
46+
justify-content: center;
47+
align-items: center;
48+
text-align: center;
49+
flex-shrink: 0;
50+
}
51+
52+
.ReviewGuideItemContainer {
53+
display: flex;
54+
flex-direction: column;
55+
gap: 1rem;
56+
flex-grow: 1;
57+
}
58+
59+
.ReviewGuideItemBox {
60+
display: flex;
61+
flex-direction: column;
62+
gap: 0.75rem;
3763
}
3864

3965
.ReviewGuideItem {
4066
display: flex;
41-
gap: 8px;
42-
padding: 16px 12px;
67+
align-items: center;
68+
justify-content: space-between;
69+
gap: 0.5rem;
70+
padding: 0.75rem 1rem;
4371
background-color: var(--color-gray200);
4472
border-radius: 1rem;
4573
}
4674

4775
.btn {
48-
width: 6.15625rem;
76+
background-color: var(--color-text-black);
77+
color: var(--color-text-white);
78+
padding: 0.5rem;
79+
border-radius: 0.5rem;
80+
}
81+
82+
.appBanner {
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
background-color: #f8f8f8;
87+
border-radius: 0.75rem;
88+
padding: 0.75rem 1rem;
89+
width: 100%;
90+
box-sizing: border-box;
91+
}
92+
93+
.appInfo {
94+
display: flex;
95+
align-items: center;
96+
gap: 0.75rem;
97+
}
98+
99+
.appIcon {
100+
width: 3rem;
101+
height: 3rem;
102+
border-radius: 0.75rem;
103+
}
104+
105+
.appName {
106+
font-size: 1rem;
107+
font-weight: 500;
108+
}
109+
110+
.appButton {
111+
width: 3.4375rem;
112+
height: 1.75rem;
49113
}

‎src/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.module.scss‎

Lines changed: 74 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.RecognitionFail {
1+
.ReviewGuide {
22
padding-left: 1.25rem;
33
padding-right: 1.25rem;
44
padding-bottom: 2.5rem;
@@ -9,8 +9,13 @@
99
justify-content: space-between;
1010

1111
.Title {
12-
padding-top: 3.75rem;
13-
// white-space: pre-line;
12+
padding-top: 1.875rem;
13+
}
14+
.TitleCont {
15+
display: flex;
16+
flex-direction: row;
17+
gap: 0.25rem;
18+
justify-content: center;
1419
}
1520

1621
.Image {
@@ -24,30 +29,88 @@
2429
}
2530
}
2631

32+
.ReviewGuideWrap {
33+
display: flex;
34+
flex-direction: column;
35+
gap: 2rem;
36+
}
37+
2738
.ReviewGuideList {
2839
display: flex;
29-
gap: 12px;
40+
gap: 0.75rem;
3041
}
3142

3243
.ReviewGuideNum {
33-
display: flex;
34-
flex-direction: column;
35-
align-items: center;
3644
width: 1.75rem;
3745
height: 1.75rem;
3846
background-color: var(--color-gray200);
3947
border-radius: 999px;
40-
line-height: 1.75rem;
48+
display: inline-flex;
49+
justify-content: center;
50+
align-items: center;
51+
text-align: center;
52+
flex-shrink: 0;
53+
}
54+
55+
.ReviewGuideItemContainer {
56+
display: flex;
57+
flex-direction: column;
58+
gap: 1rem;
59+
flex-grow: 1;
60+
}
61+
62+
.ReviewGuideItemBox {
63+
display: flex;
64+
flex-direction: column;
65+
gap: 0.75rem;
4166
}
4267

4368
.ReviewGuideItem {
4469
display: flex;
45-
gap: 8px;
46-
padding: 16px 12px;
70+
align-items: center;
71+
justify-content: space-between;
72+
gap: 0.5rem;
73+
padding: 0.75rem 1rem;
4774
background-color: var(--color-gray200);
4875
border-radius: 1rem;
4976
}
5077

5178
.btn {
52-
width: 6.15625rem;
79+
background-color: var(--color-text-black);
80+
color: var(--color-text-white);
81+
padding: 0.5rem;
82+
border-radius: 0.5rem;
83+
}
84+
85+
.appBanner {
86+
display: flex;
87+
justify-content: space-between;
88+
align-items: center;
89+
background-color: #f8f8f8;
90+
border-radius: 0.75rem;
91+
padding: 0.75rem 1rem;
92+
width: 100%;
93+
box-sizing: border-box;
94+
}
95+
96+
.appInfo {
97+
display: flex;
98+
align-items: center;
99+
gap: 0.75rem;
100+
}
101+
102+
.appIcon {
103+
width: 3rem;
104+
height: 3rem;
105+
border-radius: 0.75rem;
106+
}
107+
108+
.appName {
109+
font-size: 1rem;
110+
font-weight: 500;
111+
}
112+
113+
.appButton {
114+
width: 3.4375rem;
115+
height: 1.75rem;
53116
}

‎src/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.tsx‎

Lines changed: 78 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Icon from "@/components/ui/Icon/Icon";
66
import Text from "@/components/ui/Text/Text";
77

88
import { useRoute } from "@/hooks/common/useRoute";
9+
import { useToast } from "@/hooks/common/useToast";
910

1011
import styles from "@/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.module.scss";
1112

@@ -16,9 +17,8 @@ import { gTagLogEvent } from "@/utils/gtag";
1617

1718
const ReviewCopyGuidePage = () => {
1819
const { send } = useAppBridge();
19-
const { generateReviewData, setGenerateReviewData, resetGenerateReviewData } =
20-
useGenerateReviewStore();
21-
const { navigateToBack, navgateToReceiptInput } = useRoute();
20+
const { generateReviewData } = useGenerateReviewStore();
21+
const { navigateToBack, navigateToHome } = useRoute();
2222

2323
const { resetScanData } = useScanDataStore();
2424

@@ -32,15 +32,17 @@ const ReviewCopyGuidePage = () => {
3232
navigateToHome();
3333
};
3434

35-
const handleNavgateToReceiptInput = () => {
36-
gTagLogEvent("receipt_input_button_click", {
37-
category: "Button",
38-
label: "receipt_input_button",
39-
});
35+
const appInfo = [
36+
{ iconName: "배달의 민족", iconSrc: "/assets/img/img-lcon-bm.png", url: "https://baemin.com/" },
37+
{
38+
iconName: "쿠팡이츠",
39+
iconSrc: "/assets/img/img-lcon-cp.png",
40+
url: "https://www.coupangeats.com",
41+
},
42+
{ iconName: "네이버", iconSrc: "/assets/img/img-lcon-naver.png", url: "https://naver.com" },
43+
];
4044

41-
resetScanData();
42-
navgateToReceiptInput();
43-
};
45+
const { addToast } = useToast();
4446

4547
return (
4648
<>
@@ -50,35 +52,81 @@ const ReviewCopyGuidePage = () => {
5052
</Navbar.LeftButton>
5153
</Navbar>
5254

53-
<div className={styles.RecognitionFail}>
55+
<div className={styles.ReviewGuide}>
5456
<div className={styles.Title}>
5557
<Text color="primary" variant="titleM" align="center" as="h1">
5658
생성된 리뷰를
5759
</Text>
58-
<Text color="primary" variant="titleM" align="center" as="h1">
59-
복사해서 사용할땐
60-
</Text>
60+
<div className={styles.TitleCont}>
61+
<Text color="purpleGradient" variant="titleM" align="center" as="h1">
62+
복사해서
63+
</Text>
64+
<Text color="primary" variant="titleM" align="center" as="h1">
65+
사용할땐
66+
</Text>
67+
</div>
6168
</div>
62-
<div className={styles.ReviewGuideList}>
63-
<Text className={styles.ReviewGuideNum} color="secondary" as="p">
64-
1
65-
</Text>
66-
<div>
67-
<Text variant="bodyXsm"> 생성된 리뷰를 복사해서</Text>
68-
<div className={styles.ReviewGuideItem}>
69-
{/* <Text>{generateReviewData}</Text> */}
70-
<Text>생성된 리뷰의 첫부분,텍스트필드 영역 만큼 보여짐,말줄…</Text>
71-
<Button
72-
text="홈으로 가기"
73-
variant="secondary"
69+
<div className={styles.ReviewGuideWrap}>
70+
<div className={styles.ReviewGuideList}>
71+
<Text className={styles.ReviewGuideNum} color="secondary" as="p">
72+
1
73+
</Text>
74+
<div className={styles.ReviewGuideItemContainer}>
75+
<Text variant="titleXsm"> 생성된 리뷰를 복사해서</Text>
76+
<div className={styles.ReviewGuideItem}>
77+
<Text variant="bodyLg">{generateReviewData}</Text>
78+
{/* <Button
79+
text="복사하기"
80+
variant="primary"
7481
className={styles.btn}
75-
onClick={handleNavgateToReceiptInput}
76-
/>
82+
onClick={()=>{
83+
send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
84+
addToast("리뷰가 복사되었어요");
85+
}}
86+
/> */}
87+
<button
88+
className={styles.btn}
89+
onClick={() => {
90+
send({
91+
type: AppBridgeMessageType.COPY,
92+
payload: { review: generateReviewData },
93+
});
94+
addToast("리뷰가 복사되었어요");
95+
}}
96+
>
97+
복사하기
98+
</button>
99+
</div>
100+
</div>
101+
</div>
102+
<div className={styles.ReviewGuideList}>
103+
<Text className={styles.ReviewGuideNum} color="secondary" as="p">
104+
2
105+
</Text>
106+
<div className={styles.ReviewGuideItemContainer}>
107+
<Text variant="titleXsm">앱을 열고 붙여넣기 해보세요</Text>
108+
<div className={styles.ReviewGuideItemBox}>
109+
{appInfo.map(({ iconName, iconSrc }, index) => (
110+
<div key={index} className={styles.ReviewGuideItem}>
111+
<div className={styles.appInfo}>
112+
<img src={iconSrc} alt="배민 앱 아이콘" className={styles.appIcon} />
113+
<span className={styles.appName}>{iconName}</span>
114+
</div>
115+
<button className={styles.btn}>앱 열기</button>
116+
{/* <Button
117+
text="앱 열기"
118+
variant="primary"
119+
className={styles.appButton}
120+
onClick={()=>{}}
121+
/> */}
122+
</div>
123+
))}
124+
</div>
77125
</div>
78126
</div>
79127
</div>
80128
<div className={styles.Bottom}>
81-
<Button text="홈으로 가기" variant="secondary" onClick={handleNavgateToReceiptInput} />
129+
<Button text="홈으로 가기" variant="primary" onClick={handleNavigateToHome} />
82130
</div>
83131
</div>
84132
</>

0 commit comments

Comments
 (0)