Skip to content

[Feature] UT용 환경 세팅 #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sikkzz merged 11 commits into from
Feb 8, 2025
Merged

[Feature] UT용 환경 세팅 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
28e4caf
feat: UT용 결과 페이지 로직 수정 (reviewStyle 객체로 변경)
lgrin-byte Feb 7, 2025
8269ea5
feat: 임시 UT navigate 테스트
lgrin-byte Feb 8, 2025
6ea7d67
feat: 홈 컴포넌트에서 영수증 인식 결과 연동 테스트
lgrin-byte Feb 7, 2025
557dea0
feat: receive scan data 영수증 정보 수정 페이지에 적용
sikkzz Feb 8, 2025
ac9378e
feat: test
sikkzz Feb 8, 2025
0cd7a4c
feat: test2
sikkzz Feb 8, 2025
34bb152
feat: 임시 UT navigate 테스트
lgrin-byte Feb 8, 2025
f4f09fb
feat: 더미 데이터 추가
lgrin-byte Feb 8, 2025
dadf304
fix: 네비게이트 위치 수정
lgrin-byte Feb 8, 2025
080903d
refactor: 미사용 코드 삭제
sikkzz Feb 8, 2025
0b91ee1
refactor: rebase 충돌 해결
sikkzz Feb 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 35 additions & 196 deletions src/components/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { useEffect } from "react";
import styles from "@/components/Home/Home.module.scss";
import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
import { WebBridgeMessageType } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
import { useWebBridge } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
import IconButton from "@/components/ui/IconButton/IconButton";
import Text from "@/components/ui/Text/Text";

Expand All @@ -16,159 +14,44 @@ export interface ScanResult {
[key: string]: string;
}

// const Home = () => {
// const { send } = useAppBridge();
// const { receive } = useWebBridge();

// const { scanData, setScanData } = useScanDataStore();

// const { navigateToReceiptEdit } = useRoute();

// // receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData });

// useEffect(() => {
// // receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData });
// // window.response = {
// // receiveScanResult: (jsonData: string) => {
// // try {
// // const data: ScanResult[] = JSON.parse(jsonData);
// // setAbc(true);
// // setScanData(data);
// // // navigateToReceiptEdit();
// // } catch (error) {
// // console.error("Error parsing scan result JSON:", error);
// // }
// // },
// // };
// }, []);

// return (
// <div className={styles.Home}>
// <div className={styles.HomeTitle}>
// <Text variant="titleLg" color="gradient" align="center" as="h1">
// {`영수증으로\nAI 음식 리뷰 남겨요`}
// </Text>
// <Text variant="bodyLg" color="secondary" align="center">
// {scanData.length > 0 &&
// scanData.map((data) => (
// <>
// {Object.keys(data).map((key) => (
// <div key={key}>
// <Text variant="bodyXsm" color="secondary">
// {key}
// </Text>
// <Text variant="bodyXsm" color="secondary">
// {data[key]}
// </Text>
// </div>
// ))}
// </>
// ))}
// 손쉬운 음식 리뷰 작성
// </Text>
// </div>
// <div className={styles.HomeImage}>
// <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
// </div>
// <div className={styles.HomeBottom}>
// <IconButton
// text="갤러리"
// iconName="gallery"
// onClick={() => send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" })}
// />
// <IconButton
// text="카메라"
// iconName="camera"
// onClick={() => {
// send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });

// // 네이티브 데이터 수신 핸들러 등록
// window.response = {
// receiveScanResult: (jsonData: string) => {
// try {
// const data: ScanResult[] = JSON.parse(jsonData);
// receive({
// type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
// payload: data,
// });

// // 데이터 저장 및 페이지 이동
// setScanData(data);
// setTimeout(() => {
// navigateToReceiptEdit();
// }, 0);
// // navigateToReceiptEdit();
// } catch (error) {
// console.error("Error parsing scan result JSON:", error);
// }
// },
// };
// }}
// />

// {/* <button
// onClick={() => {
// receive({
// type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
// payload: [{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }],
// });
// // if (window.response) {
// // window.response.receiveScanResult(
// // JSON.stringify([{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }]),
// // );
// // }
// }}
// >
// 테스트 데이터 전송
// </button> */}
const Home = () => {
const { send } = useAppBridge();

// <button
// onClick={() => {
// receive({
// type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
// payload: [{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }],
// });
// }}
// >
// 테스트
// </button>
// </div>
// </div>
// );
// };
const { navigateToReceiptEdit } = useRoute();

// export default Home;
const testNavigate = () => {
if (window.response) {
window.response.receiveScanResult(
JSON.stringify([
{ 가게명: "청담커피 앤 토스트" },
{ 품명: "카야토스트+음료세트" },
{ 가격: 3000 },
]),
);
}
setTimeout(() => {
navigateToReceiptEdit();
}, 3000);
};

const Home = () => {
const { send } = useAppBridge();
const { receive } = useWebBridge();
const { scanData, setScanData } = useScanDataStore();
const { navigateToReceiptEdit } = useRoute();

useEffect(() => {
// receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData });
if (typeof window !== "undefined" && !window.response) {
window.response = {
receiveScanResult: (jsonData: string) => {
try {
const data: ScanResult[] = JSON.parse(jsonData);
receive({
type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
payload: data,
});

// 데이터 저장 및 페이지 이동
setScanData(data);
setTimeout(() => {
navigateToReceiptEdit();
}, 0);
} catch (error) {
console.error("Error parsing scan result JSON:", error);
}
},
if (typeof window !== "undefined") {
window.response =
window.response || ({} as { receiveScanResult: (jsonData: string) => void });

window.response.receiveScanResult = (jsonData: string) => {
try {
const data: ScanResult[] = JSON.parse(jsonData);
setScanData(data);
// navigateToReceiptEdit();
} catch (error) {
console.error("Error parsing scan result JSON:", error);
}
};
}
}, [receive, navigateToReceiptEdit, setScanData]);
}, [scanData, setScanData, navigateToReceiptEdit]);

return (
<div className={styles.Home}>
Expand All @@ -177,21 +60,6 @@ const Home = () => {
{`영수증으로\nAI 음식 리뷰 남겨요`}
</Text>
<Text variant="bodyLg" color="secondary" align="center">
{scanData.length > 0 &&
scanData.map((data) => (
<>
{Object.keys(data).map((key) => (
<div key={key}>
<Text variant="bodyXsm" color="secondary">
{key}
</Text>
<Text variant="bodyXsm" color="secondary">
{data[key]}
</Text>
</div>
))}
</>
))}
손쉬운 음식 리뷰 작성
</Text>
</div>
Expand All @@ -202,48 +70,19 @@ const Home = () => {
<IconButton
text="갤러리"
iconName="gallery"
onClick={() => send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" })}
onClick={() => {
send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" });
testNavigate();
}}
/>
<IconButton
text="카메라"
iconName="camera"
onClick={() => {
send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
// 네이티브에서 데이터를 수신하는 핸들러 설정
if (typeof window !== "undefined" && !window.response) {
window.response = {
receiveScanResult: (jsonData: string) => {
try {
const data: ScanResult[] = JSON.parse(jsonData);
receive({
type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
payload: data,
});

// 데이터 저장 및 페이지 이동
setScanData(data);
setTimeout(() => {
navigateToReceiptEdit();
}, 0);
} catch (error) {
console.error("Error parsing scan result JSON:", error);
}
},
};
}
testNavigate();
}}
/>
{/* 테스트용 버튼 */}
<button
onClick={() => {
receive({
type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
payload: [{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }],
});
}}
>
테스트
</button>
</div>
</div>
);
Expand Down
26 changes: 23 additions & 3 deletions src/components/ReviewResult/ReviewResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/Home
import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
import styles from "@/components/ReviewResult/ReviewResult.module.scss";
import { IMG_STYLE_DATA } from "@/components/SelectStyle/SelectStyle";
import Button from "@/components/ui/Button/Button";
import IconButton from "@/components/ui/IconButton/IconButton";
import Text from "@/components/ui/Text/Text";
Expand All @@ -14,6 +15,8 @@ import Toast from "@/components/ui/Toast/Toast";
import { useOverlay } from "@/hooks/common/useOverlay";
import useToast from "@/hooks/common/useToast";

import { useCreateReviewStore } from "@/store/useReviewStore";

import type { Options as ConfettiOptions } from "canvas-confetti";

const ReviewResult = () => {
Expand All @@ -22,8 +25,22 @@ const ReviewResult = () => {
const { isOpen, handleClose, handleOpen } = useOverlay();
const { isToast } = useToast(1000);

const reviewText = `오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요!
음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을 거예요.`;
const { createReviewData } = useCreateReviewStore();

const { reviewStyle } = createReviewData;
const dummyDataMap: Record<string, string> = {
[IMG_STYLE_DATA[1].name]:
"여기 토스트 맛집이네요..! 특히 카야토스트랑 음료 세트 가성비 좋아요… 특별한 메뉴로는 100% 리얼 토마토 생과일 주스 추천해요!! 가격 대비 신선하고 맛있어요 … 매장도 깔끔하고 직원들도 친절하네요 자주 들릴 것 같아요 .",
[IMG_STYLE_DATA[2].name]:
"카야토스트와 음료 세트인 특별한 메뉴가 있는 청담커피 앤 토스트에서 맛있는 간식을 먹었습니다. 신선한 재료로 만든 100% 리얼 토마토 생과일 주스도 함께 주문했는데, 정말 맛있었어요! 매장 분위기도 좋고 직원분들도 친절하셔서 더욱 즐거운 시간을 보낼 수 있었습니다.",
[IMG_STYLE_DATA[3].name]:
"🤗 청담커피 앤 토스트에서 먹은 카야토스트랑 음료 세트 너무 맛있었어용! 특히 100% 리얼 토마토 생과일 주스는 정말 신선했어요😊 가격도 저렴하고 특별한 메뉴들이 있어서 자주 들릴 것 같아용!! 사장님도 친절하시고 매장 분위기도 좋았어용ᄒᄒ 추천드려용👍🏻",
};

const getDummyText = (reviewStyle: string): string => {
return dummyDataMap[reviewStyle];
};
const reviewText = getDummyText(reviewStyle.name);

const handleConfetti = () => {
const setting: ConfettiOptions = {
Expand All @@ -45,7 +62,10 @@ const ReviewResult = () => {
<div className={styles.ReviewResult}>
<div className={styles.Top}>
<div className={styles.ReceiptImage}>
<img src="/assets/img/img-style-cute-circle.png" alt="mainLogo" />
<img
src={`/assets/img/img-${reviewStyle.image}-circle.png`}
alt={`${reviewStyle.name}-img`}
/>
</div>
<div className={styles.TitleBox}>
<Text variant="titleM" color="gradient" as="h1" truncated>
Expand Down
22 changes: 12 additions & 10 deletions src/components/SelectStyle/SelectStyle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,25 @@ import Button from "@/components/ui/Button/Button";
import Icon from "@/components/ui/Icon/Icon";
import Text from "@/components/ui/Text/Text";

import { useRoute } from "@/hooks/common/useRoute";

import { useCreateReviewStore } from "@/store/useReviewStore";

interface StyleProps {
name: string;
image: string;
}

const IMG_STYLE_DATA = [
{ name: "default", image: "/assets/img/img-graphic-logo.png" },
{ name: "친절한 미식가", image: "/assets/img/img-style-friendly.png" },
{ name: "믿음직한 미식가", image: "/assets/img/img-style-trust.png" },
{ name: "귀여운 미식가", image: "/assets/img/img-style-cute.png" },
export const IMG_STYLE_DATA = [
{ name: "default", image: "graphic-logo" },
{ name: "친절한 미식가", image: "style-friendly" },
{ name: "믿음직한 미식가", image: "style-trust" },
{ name: "귀여운 미식가", image: "style-cute" },
];

const SelectStyle = () => {
const { send } = useAppBridge();

const { navigateToReviewResult } = useRoute();
const { createReviewData, setReviewStyle } = useCreateReviewStore();

const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
Expand All @@ -38,12 +40,12 @@ const SelectStyle = () => {

const handleCreateReview = () => {
if (selectedStyle.name !== "default") {
setReviewStyle(selectedStyle.name);
setReviewStyle(selectedStyle);
navigateToReviewResult();
}

send({
type: AppBridgeMessageType.CREATE_REVIEW,
payload: { ocrText, hashTag, reviewStyle },
payload: { ocrText, hashTag, reviewStyle: reviewStyle.name },
});
};

Expand All @@ -59,7 +61,7 @@ const SelectStyle = () => {
</div>

<div className={styles.Image}>
<img src={selectedStyle.image} alt={`${selectedStyle.name}-img`} />
<img src={`/assets/img/img-${selectedStyle.image}.png`} alt={`${selectedStyle.name}-img`} />
</div>

<div className={styles.StyleButtonList}>
Expand Down
1 change: 1 addition & 0 deletions src/hooks/common/useRoute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const useRoute = () => {
navigateToReceiptEdit: () => navigate(PATH.RECEIPT_EDIT),
navigateToSelectStyle: () => navigate(PATH.SELECT_STYLE),
navigateToSelectTag: () => navigate(PATH.SELECT_TAG),
navigateToReviewResult: () => navigate(PATH.REVIEW_RESULT),
};

return routes;
Expand Down
Loading