Merge pull request #76 from DaengPlace/Feat/#67

Feat/#67 영수증 스캔 ocr 기능

Author: yewoniiii

package.json

@@ -16,6 +16,7 @@
     "@mui/icons-material": "^6.1.8",
     "@mui/material": "^6.1.8",
     "@react-google-maps/api": "^2.20.3",
+    "axios": "^1.7.9",
     "jest": "^29.7.0",
     "msw-storybook-addon": "^2.0.4",
     "next": "15.0.3",

src/apis/axiosInstance renamed to src/apis/axiosInstance.js

@@ -12,6 +12,8 @@ import { useRouter, useSearchParams } from "next/navigation";
 import Header from "@/components/common/Header/Header";
 import { WithMapIcon } from "@/components/common/Header/Header.stories";
 import { cards } from "@/data/cardsData";
+import axios from "axios";
+import useReviewStore from "@/stores/reviewStore";
 
 const PlaceDetailPage = () => {
   return (
@@ -33,9 +35,9 @@ const ActualPlaceDetailPage = () => {
   const [isLiked, setIsLiked] = useState(false);
   const [isUploadAction, setIsUploadAction] = useState(false);
   const fileInputRef = useRef(null);
-
+  const { setPlaceName, setVisitDate, setCategory } = useReviewStore();
   const selectedCard = cards.find((card) => card.id === id);
-  
+
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
   });
@@ -62,6 +64,8 @@ const ActualPlaceDetailPage = () => {
 
   useEffect(() => {
     if (selectedCard) {
+      setPlaceName(selectedCard.title);
+      setCategory(selectedCard.category);
       setIsClient(true);
       setAddress(selectedCard.address);
       fetchCoordinates(selectedCard.address);
@@ -91,12 +95,62 @@ const ActualPlaceDetailPage = () => {
     fileInputRef.current.click();
   };
 
-  const handleFileChange = (event) => {
+  const handleFileChange = async (event) => {
     const files = event.target.files;
     if (files && files.length > 0) {
       const selectedFile = files[0];
-      setIsReviewBottomSheetOpen(false);
-      router.push("/reviews/reviewScan");
+  
+      try {
+        const formData = new FormData();
+        formData.append("file", selectedFile, selectedFile.name);
+
+        const uploadResponse = await axios.post(
+          "https://api.daengplace.com/ocr/upload",
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          }
+        );
+  
+        if (uploadResponse.status === 200) {
+          const filePath = uploadResponse.data;
+          console.log("File uploaded successfully. Path:", filePath);
+  
+          const analyzeResponse = await axios.post(
+            "https://api.daengplace.com/ocr/analyze",
+            null,
+            {
+              params: { filePath: filePath },
+            }
+          );
+  
+          if (analyzeResponse.status === 200) {
+            const extractedTexts = analyzeResponse.data;
+            console.log(extractedTexts);
+            const combinedText = extractedTexts.join("");
+            const placeName = useReviewStore.getState().placeName;
+            console.log("Extracted texts:", combinedText);
+  
+            if (combinedText.includes(placeName)) {
+              const visitDateMatch = combinedText.match(/\d{4}[./-]\d{2}[./-]\d{2}/); 
+              const visitDate = visitDateMatch ? visitDateMatch[0].replace(/[\/-]/g, ".") : "날짜 없음";
+              console.log("Extracted visit date:", visitDate);
+              setVisitDate(visitDate);
+              router.push("/reviews/reviewScan");
+            } else {
+              alert("해당 장소 방문 기록이 확인되지 않았습니다.");
+            }
+          } else {
+            console.error("Failed to analyze text:", analyzeResponse.statusText);
+          }
+        } else {
+          console.error("Failed to upload image:", uploadResponse.statusText);
+        }
+      } catch (error) {
+        console.error("Error during OCR process:", error);
+      }
     }
   };
 

src/app/place/placedetail/page.jsx

@@ -54,7 +54,7 @@ const ReviewPage = () => {
           backbuttonPath={`/place/placedetail?id=1`}
         />
       <Container ref={containerRef}>
-        <PageHeader title="92버터샵" reviewCount={reviews.length} />
+        <PageHeader reviewCount={reviews.length} />
         <ReviewSummary
           averageRating={averageRating}
           reviewCount={reviews.length}