From 3ebf7c8547090ac64084309cefb36ebb79e52c75 Mon Sep 17 00:00:00 2001 From: JiHye Ryu Date: Sun, 13 Jul 2025 04:29:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?design=20:=20=EA=B0=84=EB=8B=A8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EB=93=A4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/StepUploadImage.jsx | 9 +++++---- src/pages/steps/Step1_QR.jsx | 4 ++-- src/pages/steps/Step2_Map.jsx | 4 ++-- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/StepUploadImage.jsx b/src/components/StepUploadImage.jsx index fbe7a4a..2e3dd14 100644 --- a/src/components/StepUploadImage.jsx +++ b/src/components/StepUploadImage.jsx @@ -84,14 +84,15 @@ export default function StepUploadImage({ {/* 하단 버튼 */}
+ */}
diff --git a/src/pages/steps/Step2_Map.jsx b/src/pages/steps/Step2_Map.jsx index 45cae93..1e91b6c 100644 --- a/src/pages/steps/Step2_Map.jsx +++ b/src/pages/steps/Step2_Map.jsx @@ -87,12 +87,12 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
); -} +} \ No newline at end of file diff --git a/src/pages/steps/Step2_Map.jsx b/src/pages/steps/Step2_Map.jsx index 1e91b6c..c5def2c 100644 --- a/src/pages/steps/Step2_Map.jsx +++ b/src/pages/steps/Step2_Map.jsx @@ -31,7 +31,7 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) { return (
{/* 상단 뒤로가기 버튼 */} -
); -} \ No newline at end of file +} diff --git a/src/pages/steps/Step5_Analyze.jsx b/src/pages/steps/Step5_Analyze.jsx index 2b19569..14bae6f 100644 --- a/src/pages/steps/Step5_Analyze.jsx +++ b/src/pages/steps/Step5_Analyze.jsx @@ -54,7 +54,7 @@ export default function Step5_Analyze({ bowl, food, onFinish }) { 완식 여부를 확인중입니다.
잠시만 기다려주세요. -
+
plate {scanning && (
@@ -93,4 +93,4 @@ function ScanEffect() { }} /> ); -} +} \ No newline at end of file From a46c4d030b1c60fbdf861d4b5a6e64980eec8338 Mon Sep 17 00:00:00 2001 From: JiHye Ryu Date: Sun, 13 Jul 2025 05:19:02 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[design]=20=EB=8F=84=EC=9E=A5=ED=8C=90=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=82=98=EA=B0=80=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/StampProgressBar.jsx | 15 +- src/pages/FoodProcess.jsx | 3 +- src/pages/steps/Step1_QR.jsx | 2 +- src/pages/steps/Step2_Map.jsx | 26 ++- src/pages/steps/Step6_Result.jsx | 244 +++++++++++++--------------- 5 files changed, 150 insertions(+), 140 deletions(-) diff --git a/src/components/StampProgressBar.jsx b/src/components/StampProgressBar.jsx index 8d52645..0312f67 100644 --- a/src/components/StampProgressBar.jsx +++ b/src/components/StampProgressBar.jsx @@ -1,8 +1,9 @@ import React, { useState, useEffect } from "react"; import dummyStores from "../data/dummyStores"; -const StampProgressBar = ({ selectedStoreIdx }) => { +const StampProgressBar = ({ selectedStoreIdx, isSuccess }) => { const [lastStampedDiffText, setLastStampedDiffText] = useState(""); + useEffect(() => { if (selectedStoreIdx === null) { setLastStampedDiffText(""); @@ -26,6 +27,14 @@ const StampProgressBar = ({ selectedStoreIdx }) => { else setLastStampedDiffText(`${diffDays}일 전 완료`); }, [selectedStoreIdx]); + // 기존 도장 개수 + const baseCount = + selectedStoreIdx !== null + ? dummyStores[selectedStoreIdx].stampCount ?? 0 + : 0; + // 성공이면 UI상으로만 +1 + const displayCount = isSuccess ? baseCount + 1 : baseCount; + return (
@@ -34,7 +43,7 @@ const StampProgressBar = ({ selectedStoreIdx }) => { 완식 스템프 - {dummyStores[selectedStoreIdx].stampCount}개 + {displayCount}개
@@ -47,7 +56,7 @@ const StampProgressBar = ({ selectedStoreIdx }) => {
diff --git a/src/pages/FoodProcess.jsx b/src/pages/FoodProcess.jsx index 98fb8d8..c7c2957 100644 --- a/src/pages/FoodProcess.jsx +++ b/src/pages/FoodProcess.jsx @@ -77,7 +77,8 @@ export default function FoodProcess() { )} {step === 6 && ( { setStep(1); setQrResult(null); diff --git a/src/pages/steps/Step1_QR.jsx b/src/pages/steps/Step1_QR.jsx index 06cf7b2..5365cd9 100644 --- a/src/pages/steps/Step1_QR.jsx +++ b/src/pages/steps/Step1_QR.jsx @@ -39,7 +39,7 @@ export default function Step1_QR({ onNext }) { processedRef.current = true; // 즉시 alert 표시하고 다음 단계로 진행 - alert("QR 인식 성공! 결과: " + result); + // alert("QR 인식 성공! 결과: " + result); // 약간의 딜레이 후 다음 단계로 진행 setTimeout(() => { diff --git a/src/pages/steps/Step2_Map.jsx b/src/pages/steps/Step2_Map.jsx index c5def2c..3ef0908 100644 --- a/src/pages/steps/Step2_Map.jsx +++ b/src/pages/steps/Step2_Map.jsx @@ -12,12 +12,21 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) { // qrResult로 매장/도장 데이터 찾기 useEffect(() => { if (qrResult) { + // 디버깅용 콘솔 로그 + console.log("=== Step2_Map 디버깅 ==="); + console.log("qrResult:", qrResult); + console.log("dummyPlaces:", dummyPlaces); + console.log("dummyStores:", dummyStores); + // 1. 매장 정보 const found = dummyPlaces.find((place) => place.id === qrResult); + console.log("found place:", found); setSelectedLocation(found || null); // 2. 내가 방문한 매장(도장) 인덱스 const idx = dummyStores.findIndex((s) => s.id === qrResult); + console.log("store index:", idx); + console.log("matching store:", idx !== -1 ? dummyStores[idx] : null); setSelectedSearchStoreIdx(idx !== -1 ? idx : null); } }, [qrResult]); @@ -30,6 +39,13 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) { return (
+ {/* 디버깅 정보 표시 */} +
+
QR: {qrResult}
+
Store Index: {selectedSearchStoreIdx}
+
Location: {selectedLocation?.place_name || "없음"}
+
+ {/* 상단 뒤로가기 버튼 */}
)}
@@ -70,6 +88,10 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
매장을 방문한 적이 없어요! +
+ QR: {qrResult} +
+ Store 개수: {dummyStores.length}
)} @@ -77,6 +99,8 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) { ) : (
매장 정보를 찾을 수 없습니다. +
+ QR 결과: {qrResult}
)}
@@ -108,4 +132,4 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
); -} +} \ No newline at end of file diff --git a/src/pages/steps/Step6_Result.jsx b/src/pages/steps/Step6_Result.jsx index 99d175b..f1b91ce 100644 --- a/src/pages/steps/Step6_Result.jsx +++ b/src/pages/steps/Step6_Result.jsx @@ -1,181 +1,157 @@ -import React, { useState } from "react"; - -// 실제 SVG 파일 import +import React, { useMemo } from "react"; +import { useNavigate } from "react-router-dom"; +import BackBtn from "../../assets/icons/BackBtn.svg"; import SuccessChar from "../../assets/icons/Result_icon/SuccessChar.svg"; import FailChar from "../../assets/icons/Result_icon/FailChar.svg"; import PointIconStar from "../../assets/icons/Result_icon/PointIcon-star.svg"; import PointIconLine from "../../assets/icons/Result_icon/PointIcon-line.svg"; import StampIcon from "../../assets/icons/Result_icon/StampIcon.svg"; +import StampProgressBar from "../../components/StampProgressBar"; +import dummyStores from "../../data/dummyStores"; -export default function Step6_Result() { - const [percent, setPercent] = useState(80); - const [demoMode, setDemoMode] = useState('success'); // 'success' or 'fail' - - // 성공/실패 판정 - const isSuccess = percent >= 80; +export default function Step6_Result({ storeId, analyze, onRestart }) { + const isSuccess = analyze?.isSuccess; + const percent = analyze?.percent; + const navigate = useNavigate(); - const handleToggleDemo = () => { - if (demoMode === 'success') { - setDemoMode('fail'); - setPercent(60); - } else { - setDemoMode('success'); - setPercent(80); - } - }; + // 도장 데이터: 해당 매장 인덱스 + const selectedStoreIdx = useMemo(() => { + const idx = dummyStores.findIndex((s) => s.id === storeId); + return idx !== -1 ? idx : null; + }, [storeId]); return (
- {/* 상단 바 */} -
- + {/* 상단바 */} +
+ 식사 인증 -
- {/* 진행바 */} -
- {[1, 2, 3, 4].map(i => ( -
- - {i < 4 &&
} -
- ))} -
- - {/* 캐릭터와 말풍선 영역 */} -
- {/* 캐릭터 - 왼쪽에 위치 */} -
+ {/* 캐릭터+말풍선 */} +
+
{isSuccess ? ( -
- {/* 성공 시 배경 효과 */} -
- {/* SuccessChar 캐릭터 */} - 성공 -
+ <> +
+ 성공 + ) : ( -
- {/* 실패 시 배경 효과 */} -
- {/* FailChar 캐릭터 */} - 실패 -
+ <> +
+ 실패 + )}
- - {/* 말풍선 - 캐릭터 오른쪽에 위치 */} -
-
+
+
{isSuccess ? "덕분에 지구가\n오늘도 웃고있어요!" : "완식률이 부족해요.\n다음에 더 노력해볼까요?"}
- {/* 말풍선 꼬리 - 왼쪽으로 향함 */} -
+
- {/* 원형 게이지 영역 */} -
- - {/* 원형 게이지와 아이콘들 */} -
- {/* 성공 시 별 아이콘 - 원형 게이지 위쪽에 위치 */} - {isSuccess && ( - 별 - )} - - {/* 실패 시 라인 아이콘 - 원형 게이지 위쪽에 위치 */} - {!isSuccess && ( - 라인 - )} - - - - +
+ {isSuccess ? ( + 별 - - - {/* 퍼센트 텍스트 */} -
- {percent}% -
- - {/* 스탬프 아이콘 - 원형 게이지 오른쪽에 걸쳐져 있도록 배치 */} - {isSuccess && ( - 스탬프 )}
+ {/* 원형 게이지 */} + + + + +
+ {percent}% +
+ {isSuccess && ( + 스탬프 + )}
- {/* 아래 도장/포인트 현황 */} -
-
- 현재 1회 방문 중 4회 더 방문하면 쿠폰 지급! -
-
-
+
도장
+ {selectedStoreIdx !== null ? ( + -
+ ) : ( +
+
+ 매장을 방문한 적이 없어요! +
+
+ )}
{/* 하단 버튼 */} -
+
); -} \ No newline at end of file +} From ff17757db46e9b91094419f30139bb86e0f0c9e1 Mon Sep 17 00:00:00 2001 From: JiHye Ryu Date: Sun, 13 Jul 2025 05:23:18 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[design]=20=EB=94=94=EB=B2=84=EA=B9=85?= =?UTF-8?q?=EA=B0=92=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/steps/Step2_Map.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/steps/Step2_Map.jsx b/src/pages/steps/Step2_Map.jsx index 3ef0908..79be04f 100644 --- a/src/pages/steps/Step2_Map.jsx +++ b/src/pages/steps/Step2_Map.jsx @@ -40,11 +40,11 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) { return (
{/* 디버깅 정보 표시 */} -
+ {/*
QR: {qrResult}
Store Index: {selectedSearchStoreIdx}
Location: {selectedLocation?.place_name || "없음"}
-
+
*/} {/* 상단 뒤로가기 버튼 */} 식사 인증 - + */}
{/* 캐릭터+말풍선 */}