Design/#51

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 (
     <div className="mt-3 w-full bg-white rounded-2xl shadow-md p-4 flex flex-col gap-1 h-30 justify-center">
       <div className="flex flex-row justify-between items-center">
@@ -34,7 +43,7 @@ const StampProgressBar = ({ selectedStoreIdx }) => {
             완식 스템프
           </span>
           <span className="text-black text-sm font-bold">
-            {dummyStores[selectedStoreIdx].stampCount}개
+            {displayCount}개
           </span>
         </div>
         <div className="text-xs mainColor text-white rounded-2xl px-2">
@@ -47,7 +56,7 @@ const StampProgressBar = ({ selectedStoreIdx }) => {
         <div
           className="h-full mainColor rounded-full transition-all duration-500"
           style={{
-            width: `${(dummyStores[selectedStoreIdx].stampCount / 15) * 100}%`,
+            width: `${(displayCount / 15) * 100}%`,
           }}
         ></div>
 

src/components/StepUploadImage.jsx

@@ -68,14 +68,14 @@ export default function StepUploadImage({
           <div className={
             circle
               ? "w-72 h-72 bg-gray-200 rounded-full overflow-hidden flex items-center justify-center mb-6 shadow"
-              : "w-80 h-60 bg-gray-100 rounded-xl overflow-hidden flex items-center justify-center mb-6 shadow border-2 border-dashed border-gray-300"
+              : "w-80 h-80 bg-gray-100 rounded-xl overflow-hidden flex items-center justify-center mb-6 shadow"
           }>
             <img src={image.url} alt="preview" className="object-cover w-full h-full" />
           </div>
           <div className="font-bold text-xl mb-2">확인됐습니다!</div>
           <div className="text-gray-500 text-center text-sm mb-2 px-2">
             {circle
-              ? <>식사 맛있게 하세요! 완식 확인 잊지마세요!<br />바로 분석한다면, ‘다음’ 버튼을 눌러주세요.</>
+              ? <>식사 맛있게 하세요! 완식 확인 잊지마세요!<br />바로 분석한다면, '다음' 버튼을 눌러주세요.</>
               : <>접시 상태가 업로드됐어요.<br />바로 분석하려면 '다음' 버튼을 눌러주세요.</>
             }
           </div>
@@ -84,14 +84,15 @@ export default function StepUploadImage({
         {/* 하단 버튼 */}
         <div className="flex gap-2 w-full px-6 pt-4 pb-6">
           <button
-            className="flex-1 h-12 rounded-full bg-white border text-gray-700 font-bold shadow"
+            className="flex-1 h-12 rounded-full bg-white  font-bold "
             onClick={onHome}
             type="button"
           >
             홈으로
           </button>
           <button
-            className="flex-1 h-12 rounded-full bg-green-700 text-white font-bold shadow"
+            className="flex-1 h-12 rounded-full text-white font-bold shadow"
+            style={{ backgroundColor: '#003D28' }}
             onClick={() => onNext && onNext(image)}
             type="button"
           >
@@ -123,12 +124,16 @@ export default function StepUploadImage({
           className={
             circle
               ? "w-72 h-72 flex items-center justify-center cursor-pointer bg-transparent mb-4"
-              : "w-80 h-60 flex items-center justify-center cursor-pointer bg-[#F7F7F7] rounded-xl border-2 border-dashed border-gray-300 mb-4"
+              : "w-80 h-80 flex items-center justify-center cursor-pointer bg-[#F7F7F7] rounded-xl mb-4"
           }
           onClick={handleUploadClick}
           type="button"
         >
-          <img src={UploadIcon} alt="업로드" className={circle ? "w-full h-full object-contain" : "w-20 h-20 object-contain opacity-60"} />
+          <img
+            src={UploadIcon}
+            alt="업로드"
+            className="w-full h-full object-contain"
+          />
         </button>
         <input
           ref={fileInputRef}
@@ -141,14 +146,14 @@ export default function StepUploadImage({
       {/* 하단 버튼 */}
       <div className="flex gap-2 w-full px-6 pt-4 pb-6">
         <button
-          className="flex-1 h-12 rounded-full bg-white border text-gray-700 font-bold shadow"
+          className="flex-1 h-12 rounded-full bg-white font-bold "
           onClick={onPrev}
           type="button"
         >
           뒤로가기
         </button>
         <button
-          className="flex-1 h-12 rounded-full bg-gray-300 text-gray-500 font-bold shadow"
+          className="flex-1 h-12 rounded-full bg-gray-300 text-gray-500 font-bold "
           disabled
           type="button"
         >
@@ -157,4 +162,4 @@ export default function StepUploadImage({
       </div>
     </div>
   );
-}
+}

src/pages/FoodProcess.jsx

@@ -77,7 +77,8 @@ export default function FoodProcess() {
       )}
       {step === 6 && (
         <Step6_Result
-          analyze={analyze}
+          storeId={qrResult}         // **여기서 QR 결과 넘김**
+          analyze={analyze}          // {percent, isSuccess}
           onRestart={() => {
             setStep(1);
             setQrResult(null);

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(() => {
@@ -140,7 +140,7 @@ export default function Step1_QR({ onNext }) {
 
         {/* 하단: 버튼+네비바 */}
         <div className="absolute w-full left-0 bottom-0 flex flex-col items-center pb-4 z-40">
-          <button
+          {/* <button
             onClick={handleMock}
             disabled={isProcessing}
             className={`mb-30 px-8 py-3 rounded-xl font-semibold shadow-lg ${
@@ -150,7 +150,7 @@ export default function Step1_QR({ onNext }) {
             }`}
           >
             {isProcessing ? "처리 중..." : "확인(임의)"}
-          </button>
+          </button> */}
           <div className="w-full">
             <BottomNav />
           </div>

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,8 +39,15 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
 
   return (
     <div className="h-screen w-full flex flex-col relative">
+      {/* 디버깅 정보 표시 */}
+      {/* <div className="absolute top-16 left-4 z-30 bg-black/70 text-white p-2 rounded text-xs">
+        <div>QR: {qrResult}</div>
+        <div>Store Index: {selectedSearchStoreIdx}</div>
+        <div>Location: {selectedLocation?.place_name || "없음"}</div>
+      </div> */}
+
       {/* 상단 뒤로가기 버튼 */}
-      <button 
+      <button
         className="absolute top-4 left-4 z-20 flex items-center justify-center w-12 h-12 transition-transform hover:scale-110"
         onClick={onPrev}
       >
@@ -47,6 +63,8 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
         ) : (
           <div className="w-full h-full flex items-center justify-center text-gray-400">
             매장 정보를 찾을 수 없습니다.
+            <br />
+            QR 결과: {qrResult}
           </div>
         )}
       </div>
@@ -70,13 +88,19 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
                   <div className="mt-3 w-full bg-white rounded-3xl shadow-md p-4 flex flex-col gap-1 h-30 justify-center">
                     <div className="w-full textGrayColor text-center text-sm">
                       매장을 방문한 적이 없어요!
+                      <br />
+                      <span className="text-xs">QR: {qrResult}</span>
+                      <br />
+                      <span className="text-xs">Store 개수: {dummyStores.length}</span>
                     </div>
                   </div>
                 )}
               </>
             ) : (
               <div className="mt-10 text-center text-gray-400">
                 매장 정보를 찾을 수 없습니다.
+                <br />
+                QR 결과: {qrResult}
               </div>
             )}
           </div>
@@ -87,15 +111,21 @@ export default function Step2_Map({ qrResult, onNext, onPrev, onExit }) {
       <div className="absolute bottom-0 left-0 right-0 z-20 p-4 flex gap-3 ">
         <button
           onClick={onPrev}
-          className="flex-1 h-14 rounded-full font-bold text-lg transition-all duration-200 bg-white  hover:bg-gray-50"
+          className="flex-1 h-12 rounded-full bg-white font-bold"
+          type="button"
         >
           뒤로가기
         </button>
         <button
-          className="flex-1 h-14 rounded-full text-white font-bold text-lg transition-all duration-200 shadow-lg"
-          style={{ backgroundColor: '#003D28' }}
+          className={
+            selectedLocation
+              ? "flex-1 h-12 rounded-full text-white font-bold shadow"
+              : "flex-1 h-12 rounded-full bg-gray-300 text-gray-500 font-bold"
+          }
+          style={selectedLocation ? { backgroundColor: '#003D28' } : undefined}
           onClick={() => onNext({ name: qrResult, review: "" })}
           disabled={!selectedLocation}
+          type="button"
         >
           다음
         </button>

src/pages/steps/Step5_Analyze.jsx

@@ -54,7 +54,7 @@ export default function Step5_Analyze({ bowl, food, onFinish }) {
             완식 여부를 확인중입니다.<br />잠시만 기다려주세요.
           </div>
         </div>
-        <div className="w-72 h-56 relative rounded-xl overflow-hidden shadow">
+        <div className="w-72 h-72 relative rounded-xl overflow-hidden shadow">
           <img src={bowl.url} alt="plate" className="object-cover w-full h-full" />
           {scanning && (
             <div className="absolute inset-0 pointer-events-none">
@@ -93,4 +93,4 @@ function ScanEffect() {
       }}
     />
   );
-}
+}