Skip to content

Commit f60947d

Browse files
lgrin-bytelgrin-byte
committed
feat: REVIEW_COPY_GUIDE 페이지 추가
1 parent e5c9a1c commit f60947d

File tree

7 files changed

+203
-5
lines changed

7 files changed

+203
-5
lines changed

‎src/constants/path.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ export const PATH = {
99
LOADING: "/loading",
1010
CREATE_REVIEW_FAIL: "/create-review-fail",
1111
APP_DOWNLOAD: "/download",
12-
12+
REVIEW_COPY_GUIDE: "/review-copy-guide",
1313
};

‎src/hooks/common/useRoute.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const useRoute = () => {
1616
navigateToReviewResult: () => navigate(PATH.REVIEW_RESULT),
1717
navigateToLoading: () => navigate(PATH.LOADING),
1818
navigateToCreateReviewFail: () => navigate(PATH.CREATE_REVIEW_FAIL),
19+
navigateToReviewCopyGuide: () => navigate(PATH.REVIEW_COPY_GUIDE),
1920
};
2021

2122
return routes;

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.RecognitionFail {
2+
padding-left: 1.25rem;
3+
padding-right: 1.25rem;
4+
padding-bottom: 2.5rem;
5+
height: calc(100vh - 2.75rem);
6+
overflow: hidden;
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: space-between;
10+
}
11+
.RecognitionFail .Title {
12+
padding-top: 3.75rem;
13+
}
14+
.RecognitionFail .Image {
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
.RecognitionFail .Bottom {
20+
margin-top: 1.25rem;
21+
}
22+
23+
.ReviewGuideList {
24+
display: flex;
25+
gap: 12px;
26+
}
27+
28+
.ReviewGuideNum {
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
width: 1.75rem;
33+
height: 1.75rem;
34+
background-color: var(--color-gray200);
35+
border-radius: 999px;
36+
line-height: 1.75rem;
37+
}
38+
39+
.ReviewGuideItem {
40+
display: flex;
41+
gap: 8px;
42+
padding: 16px 12px;
43+
background-color: var(--color-gray200);
44+
border-radius: 1rem;
45+
}
46+
47+
.btn {
48+
width: 6.15625rem;
49+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.RecognitionFail {
2+
padding-left: 1.25rem;
3+
padding-right: 1.25rem;
4+
padding-bottom: 2.5rem;
5+
height: calc(100vh - 2.75rem);
6+
overflow: hidden;
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: space-between;
10+
11+
.Title {
12+
padding-top: 3.75rem;
13+
// white-space: pre-line;
14+
}
15+
16+
.Image {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
22+
.Bottom {
23+
margin-top: 1.25rem;
24+
}
25+
}
26+
27+
.ReviewGuideList {
28+
display: flex;
29+
gap: 12px;
30+
}
31+
32+
.ReviewGuideNum {
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
width: 1.75rem;
37+
height: 1.75rem;
38+
background-color: var(--color-gray200);
39+
border-radius: 999px;
40+
line-height: 1.75rem;
41+
}
42+
43+
.ReviewGuideItem {
44+
display: flex;
45+
gap: 8px;
46+
padding: 16px 12px;
47+
background-color: var(--color-gray200);
48+
border-radius: 1rem;
49+
}
50+
51+
.btn {
52+
width: 6.15625rem;
53+
}

‎src/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import Navbar from "@/components/Navbar/Navbar";
2+
import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
3+
import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
4+
import Button from "@/components/ui/Button/Button";
5+
import Icon from "@/components/ui/Icon/Icon";
6+
import Text from "@/components/ui/Text/Text";
7+
8+
import { useRoute } from "@/hooks/common/useRoute";
9+
10+
import styles from "@/pages/ReviewCopyGuidePage/ReviewCopyGuidePage.module.scss";
11+
12+
import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
13+
import { useScanDataStore } from "@/store/useScanDataStore";
14+
15+
import { gTagLogEvent } from "@/utils/gtag";
16+
17+
const ReviewCopyGuidePage = () => {
18+
const { send } = useAppBridge();
19+
const { generateReviewData, setGenerateReviewData, resetGenerateReviewData } =
20+
useGenerateReviewStore();
21+
const { navigateToBack, navgateToReceiptInput } = useRoute();
22+
23+
const { resetScanData } = useScanDataStore();
24+
25+
const handleNavigateToHome = () => {
26+
gTagLogEvent("recognition_fail_close_button_click", {
27+
category: "Button",
28+
label: "recognition_fail_close_button",
29+
});
30+
31+
resetScanData();
32+
navigateToHome();
33+
};
34+
35+
const handleNavgateToReceiptInput = () => {
36+
gTagLogEvent("receipt_input_button_click", {
37+
category: "Button",
38+
label: "receipt_input_button",
39+
});
40+
41+
resetScanData();
42+
navgateToReceiptInput();
43+
};
44+
45+
return (
46+
<>
47+
<Navbar>
48+
<Navbar.LeftButton onClick={navigateToBack}>
49+
<Icon name="leftArrow" />
50+
</Navbar.LeftButton>
51+
</Navbar>
52+
53+
<div className={styles.RecognitionFail}>
54+
<div className={styles.Title}>
55+
<Text color="primary" variant="titleM" align="center" as="h1">
56+
생성된 리뷰를
57+
</Text>
58+
<Text color="primary" variant="titleM" align="center" as="h1">
59+
복사해서 사용할땐
60+
</Text>
61+
</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"
74+
className={styles.btn}
75+
onClick={handleNavgateToReceiptInput}
76+
/>
77+
</div>
78+
</div>
79+
</div>
80+
<div className={styles.Bottom}>
81+
<Button text="홈으로 가기" variant="secondary" onClick={handleNavgateToReceiptInput} />
82+
</div>
83+
</div>
84+
</>
85+
);
86+
};
87+
88+
export default ReviewCopyGuidePage;

‎src/pages/ReviewResultPage/ReviewResultPage.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,12 @@ export default function ReviewResultPage() {
3030
useGenerateReviewStore();
3131
const [text, setText] = useState(generateReviewData);
3232

33-
const { navigateToCreateReviewFail, navigateToLoading, navigateToSelectStyle } = useRoute();
33+
const {
34+
navigateToCreateReviewFail,
35+
navigateToLoading,
36+
navigateToSelectStyle,
37+
navigateToReviewCopyGuide,
38+
} = useRoute();
3439

3540
const { isOpen, handleClose, handleOpen } = useOverlay();
3641

@@ -142,10 +147,10 @@ export default function ReviewResultPage() {
142147
category: "Button",
143148
label: "copy_button",
144149
});
150+
navigateToReviewCopyGuide();
151+
// send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
145152

146-
send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
147-
148-
addToast("리뷰가 복사되었어요");
153+
// addToast("리뷰가 복사되었어요");
149154
}}
150155
/>
151156
</div>

‎src/router/AppRouter.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import RecognitionFailPage from "@/pages/RecognitionFailPage/RecognitionFailPage
1414
import ReviewResultPage from "@/pages/ReviewResultPage/ReviewResultPage";
1515
import SelectStylePage from "@/pages/SelectStylePage/SelectStylePage";
1616
import SelectTagPage from "@/pages/SelectTagPage/SelectTagPage";
17+
import ReviewCopyGuidePage from "@/pages/ReviewCopyGuidePage/ReviewCopyGuidePage";
1718

1819
const AppRouter = () => {
1920
const router = createBrowserRouter([
@@ -55,6 +56,7 @@ const AppRouter = () => {
5556
},
5657
{ path: PATH.CREATE_REVIEW_FAIL, element: <CreateReviewFailPage /> },
5758
{ path: PATH.APP_DOWNLOAD, element: <DownloadPage /> },
59+
{ path: PATH.REVIEW_COPY_GUIDE, element: <ReviewCopyGuidePage /> },
5860
],
5961
},
6062
]);

0 commit comments

Comments
 (0)