Skip to content

Commit 9e5f8da

Browse files
author
리니_이경린
committed
feat: 리뷰 복사 가이드 페이지 추가
1 parent 99011bd commit 9e5f8da

File tree

6 files changed

+145
-41
lines changed

6 files changed

+145
-41
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.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: 71 additions & 25 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,9 @@ import { gTagLogEvent } from "@/utils/gtag";
1617

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

2324
const { resetScanData } = useScanDataStore();
2425

@@ -32,15 +33,15 @@ const ReviewCopyGuidePage = () => {
3233
navigateToHome();
3334
};
3435

35-
const handleNavgateToReceiptInput = () => {
36-
gTagLogEvent("receipt_input_button_click", {
37-
category: "Button",
38-
label: "receipt_input_button",
39-
});
4036

41-
resetScanData();
42-
navgateToReceiptInput();
43-
};
37+
const arr= [
38+
{iconName:"배달의 민족", icon: "/assets/img/img-lcon-bm.png", url:"https://baemin.com/" },
39+
{iconName:"쿠팡이츠", icon: "/assets/img/img-lcon-cp.png", url:"https://www.coupangeats.com" },
40+
{iconName:"네이버", icon: "/assets/img/img-lcon-naver.png", url:"https://naver.com" },
41+
]
42+
43+
const { addToast } = useToast();
44+
4445

4546
return (
4647
<>
@@ -50,35 +51,80 @@ const ReviewCopyGuidePage = () => {
5051
</Navbar.LeftButton>
5152
</Navbar>
5253

53-
<div className={styles.RecognitionFail}>
54+
<div className={styles.ReviewGuide}>
5455
<div className={styles.Title}>
5556
<Text color="primary" variant="titleM" align="center" as="h1">
5657
생성된 리뷰를
5758
</Text>
58-
<Text color="primary" variant="titleM" align="center" as="h1">
59-
복사해서 사용할땐
60-
</Text>
59+
<div className={styles.TitleCont}>
60+
<Text color="purpleGradient" variant="titleM" align="center" as="h1">
61+
복사해서
62+
</Text>
63+
<Text color="primary" variant="titleM" align="center" as="h1">
64+
사용할땐
65+
</Text>
66+
</div>
6167
</div>
68+
<div className={styles.ReviewGuideWrap}>
69+
6270
<div className={styles.ReviewGuideList}>
6371
<Text className={styles.ReviewGuideNum} color="secondary" as="p">
6472
1
6573
</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"
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 className={styles.btn}
88+
onClick={()=>{
89+
send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
90+
addToast("리뷰가 복사되었어요");
91+
}}
92+
>복사하기</button>
7793
</div>
7894
</div>
7995
</div>
96+
<div className={styles.ReviewGuideList}>
97+
<Text className={styles.ReviewGuideNum} color="secondary" as="p">
98+
2
99+
</Text>
100+
<div className={styles.ReviewGuideItemContainer}>
101+
<Text variant="titleXsm">앱을 열고 붙여넣기 해보세요</Text>
102+
<div className={styles.ReviewGuideItemBox}>
103+
{arr.map(({iconName, icon}, index) => (
104+
<div key={index} className={styles.ReviewGuideItem}>
105+
<div className={styles.appInfo}>
106+
<img
107+
src={icon}
108+
alt="배민 앱 아이콘"
109+
className={styles.appIcon}
110+
/>
111+
<span className={styles.appName}>{iconName}</span>
112+
</div>
113+
<button className={styles.btn}>앱 열기</button>
114+
{/* <Button
115+
text="앱 열기"
116+
variant="primary"
117+
className={styles.appButton}
118+
onClick={()=>{}}
119+
/> */}
120+
</div>
121+
))}
122+
</div>
123+
</div>
124+
</div>
125+
</div>
80126
<div className={styles.Bottom}>
81-
<Button text="홈으로 가기" variant="secondary" onClick={handleNavgateToReceiptInput} />
127+
<Button text="홈으로 가기" variant="primary" onClick={handleNavigateToHome} />
82128
</div>
83129
</div>
84130
</>

‎src/pages/ReviewResultPage/ReviewResultPage.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import Text from "@/components/ui/Text/Text";
1111

1212
import { useOverlay } from "@/hooks/common/useOverlay";
1313
import { useRoute } from "@/hooks/common/useRoute";
14-
import { useToast } from "@/hooks/common/useToast";
1514

1615
import styles from "@/pages/ReviewResultPage/ReviewResultPage.module.scss";
1716

@@ -39,7 +38,6 @@ export default function ReviewResultPage() {
3938

4039
const { isOpen, handleClose, handleOpen } = useOverlay();
4140

42-
const { addToast } = useToast();
4341

4442
const { ocrText, hashTag, reviewStyle } = createReviewData;
4543

@@ -148,9 +146,6 @@ export default function ReviewResultPage() {
148146
label: "copy_button",
149147
});
150148
navigateToReviewCopyGuide();
151-
// send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
152-
153-
// addToast("리뷰가 복사되었어요");
154149
}}
155150
/>
156151
</div>

0 commit comments

Comments
 (0)