몽골버전 이미지 수정

.env

@@ -0,0 +1,22 @@
+# REACT_APP_BACKEND=http://13.54.234.18:8000
+# # # http://localhost:8000
+# REACT_APP_BE_PROD=http://13.54.234.18:8000
+# # # http://localhost:8000
+# REACT_APP_PHOTO_BACKEND=http://127.0.0.1:5000
+# csy
+# REACT_APP_BACKEND=http://13.54.234.18:8000
+# # http://localhost:8000
+# REACT_APP_BE_PROD=http://13.54.234.18:8000
+# # http://localhost:8000
+# REACT_APP_PHOTO_BACKEND=http://172.21.120.126:5000
+REACT_APP_BACKEND=http://118.33.212.138:8000
+# http://localhost:8000
+REACT_APP_BE_PROD=http://118.33.212.138:8000
+# http://localhost:8000
+REACT_APP_PHOTO_BACKEND=http://172.21.120.126:5000
+REACT_APP_DEVICE_NUMBER=APP01
+
+# 3RD PARTY
+CLOUDINARY_APP_NAME=dyngqk6ca
+CLOUDINARY_API_SECRET=921129921119946
+CLOUDINARY_URL=cloudinary://921129921119946:WNLeGtgVBIB2JbmCsyce4jb1oRY@dyngqk6ca

app/.env

@@ -1,14 +1,19 @@
-# REACT_APP_BACKEND=http://118.33.212.138:8000
+# REACT_APP_BACKEND=http://13.54.234.18:8000
 # # # http://localhost:8000
-# REACT_APP_BE_PROD=http://118.33.212.138:8000
+# REACT_APP_BE_PROD=http://13.54.234.18:8000
 # # # http://localhost:8000
-# REACT_APP_PHOTO_BACKEND=http://118.33.212.138:5000
+# REACT_APP_PHOTO_BACKEND=http://127.0.0.1:5000
+REACT_APP_BACKEND=http://118.33.212.138:8000
+# # http://localhost:8000
+REACT_APP_BE_PROD=http://118.33.212.138:8000
+# # http://localhost:8000
+REACT_APP_PHOTO_BACKEND=http://118.33.212.138:5000
 # csy
-REACT_APP_BACKEND=http://127.0.0.1:8000
-# http://localhost:8000
-REACT_APP_BE_PROD=http://127.0.0.1:8000
-# http://localhost:8000
-REACT_APP_PHOTO_BACKEND=http://172.21.120.126:5000
+# REACT_APP_BACKEND=http://13.54.234.18:8000
+# # http://localhost:8000
+# REACT_APP_BE_PROD=http://13.54.234.18:8000
+# # http://localhost:8000
+# REACT_APP_PHOTO_BACKEND=http://172.21.120.126:5000
 
 REACT_APP_DEVICE_NUMBER=APP01
 

app/package.json

@@ -29,6 +29,7 @@
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-use": "^17.5.0",
+    "react-uuid": "^2.0.0",
     "react-webcam": "^7.2.0",
     "use-image": "^1.1.1",
     "web-vitals": "^2.1.4"
@@ -57,8 +58,5 @@
       "last 1 safari version"
     ]
   },
-
-  "proxy": "http://127.0.0.1:8000"
-
-
+  "proxy": "http://13.54.234.18:8000"
 }

app/src/App.js

@@ -14,8 +14,10 @@ import Choose from './screens/Photo/Choose';
 import Filter from './screens/Filter';
 import Sticker from './screens/Sticker';
 import Print from './screens/Print';
+import Landing from './screens/Landing';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import PaymentNumber from './screens/Payment/PaymentNumber';
+import QrDownload from './screens/QrDownload';
 
 function App() {
   return (
@@ -36,7 +38,8 @@ function App() {
         <Route path="/filter" element={<Filter />} />
         <Route path="/sticker" element={<Sticker />} />
         <Route path="/print" element={<Print />} />
-
+        <Route path="/landing" element={<Landing/>} />
+        <Route path="/download" element={<QrDownload/>} />
       </Routes>
     </Router>
   );

app/src/api/config.js

@@ -1,12 +1,20 @@
 import axios from "axios";
 
 //urls
-const audioBaseURL="http://127.0.0.1:8001"
-const checkBaseUrl="http://127.0.0.1:9000"
-const OriginBaseURL="http://127.0.0.1:8000"
-export const startCashUrl="http://127.0.0.1:8002/api/start/"
-export const BaseURL = "http://127.0.0.1:5000"
-export const videoFeedUrl=`http://127.0.0.1:5000/video_feed`//Photo.js live view url
+
+// const audioBaseURL="http://127.0.0.1:8001"
+// const checkBaseUrl="http://13.54.234.18:9000"
+// const OriginBaseURL="http://13.54.234.18:8000"
+// export const startCashUrl="http://127.0.0.1:8002/api/start/"
+// export const BaseURL = "http://127.0.0.1:5000"
+// export const videoFeedUrl=`http://127.0.0.1:5000/video_feed`//Photo.js live view url
+const audioBaseURL="http://118.33.212.138:8001"
+const checkBaseUrl="http://118.33.212.138:9000"
+const OriginBaseURL="http://118.33.212.138:8000"
+export const startCashUrl="http://118.33.212.138:8002/api/start/"
+export const BaseURL = "http://118.33.212.138:5000"
+export const videoFeedUrl=`http://118.33.212.138:5000/video_feed`//Photo.js live view url
+
 //axios api
 const checkAxiosInstance = axios.create({
   baseURL: checkBaseUrl,
@@ -50,29 +58,36 @@ export const checkPromotionCode=async(payload)=>{
 
 
 //Photo.js
-export const getPhotos=async()=>{
-  const { data } = await originAxiosInstance.get('/get_photo/')
-  return data
-}
-export const sendCaptureReq=async()=>{
+export const getPhotos = async (uuid) => {
 
-  const {data} = await axiosInstance.get('/capture')
+  const { data, status } = await originAxiosInstance.get(`/get_photo/`,
+    {
+    params:{uuid:uuid}
+  }
+);
   return data;
-}
+};
+export const sendCaptureReq = async (uuid,photoNum) => {
+  const { data } = await axiosInstance.post('/capture', { uuid:uuid,photoNum:photoNum });
+  return data;
+};
+
 export  const startLiveView = async () => {
   try {
-      await axios.get('http://127.0.0.1:5000/start_live_view');
+
+    await axios.get('http://118.33.212.138:5000/start_live_view');
+    // await axios.get('http://127.0.0.1:5000/start_live_view');
   } catch (error) {
       console.error('Failed to start live view:', error);
   }
 };
 
 //sound get
 export const getAudio=async(payload)=>{
-  const {data}=await audioAxiosInstance.post(`/api/play_sound/`,payload)
-  return data;
+  // const {data}=await audioAxiosInstance.post(`/api/play_sound/`,payload)
+  return "";
 }
 export const getClickAudio=async()=>{
-  const {data}=await audioAxiosInstance.post(`/api/play_sound/`,{file_name:"click_sound.wav"})
-  return data;
+  // const {data}=await audioAxiosInstance.post(`/api/play_sound/`,{file_name:"click_sound.wav"})
+  return "";
 }

app/src/components/FrameCarousel.js

@@ -1,84 +1,4 @@
-// import React, { useState, useRef, useEffect } from 'react';
-// import './FrameCarousel.css'
 
-// const FrameCarousel = ({ images,handleClick ,clickedTitles}) => {
-//     const carouselRef = useRef(null);
-//     const [isDown, setIsDown] = useState(false);
-//     const [startX, setStartX] = useState(0);
-//     const [scrollLeft, setScrollLeft] = useState(0);
-//     const storedSelectedFrame = JSON.parse(sessionStorage.getItem('selectedFrame'));
-//     console.log("in carousel>>>",storedSelectedFrame.frame)
-//     useEffect(() => {
-//         const carousel = carouselRef.current;
-
-//         const handleMouseDown = (e) => {
-//             setIsDown(true);
-//             if (carousel) {
-//                 setStartX(e.pageX - carousel.offsetLeft);
-//                 setScrollLeft(carousel.scrollLeft);
-//             }
-//         };
-
-//         const handleMouseLeave = () => {
-//             setIsDown(false);
-//         };
-
-//         const handleMouseUp = () => {
-//             setIsDown(false);
-//         };
-
-//         const handleMouseMove = (e) => {
-//             if (!isDown) return;
-//             e.preventDefault();
-//             if (carousel) {
-//                 const x = e.pageX - carousel.offsetLeft;
-//                 const walk = (x - startX) * 3; // Scroll speed
-//                 carousel.scrollLeft = scrollLeft - walk;
-//             }
-//         };
-
-//         if (carousel) {
-//             carousel.addEventListener('mousedown', handleMouseDown);
-//             carousel.addEventListener('mouseleave', handleMouseLeave);
-//             carousel.addEventListener('mouseup', handleMouseUp);
-//             carousel.addEventListener('mousemove', handleMouseMove);
-//         }
-
-//         return () => {
-//             if (carousel) {
-//                 carousel.removeEventListener('mousedown', handleMouseDown);
-//                 carousel.removeEventListener('mouseleave', handleMouseLeave);
-//                 carousel.removeEventListener('mouseup', handleMouseUp);
-//                 carousel.removeEventListener('mousemove', handleMouseMove);
-//             }
-//         };
-//     }, [isDown, startX, scrollLeft]);
-
-//     return (
-//         <div 
-//         draggable={false}
-//         className='frame-carousel-container'
-//         ref={carouselRef}>
-//         <div
-//         draggable={false}
-//         className='frame-carousel-imgs'
-//         >
-//             {[...images,...images].map((img, index) => (
-//                 <img
-//                 style={{
-
-//                     height:storedSelectedFrame.frame==="4-cutx2"?"210px":"auto"
-//                 }}
-//                 className={`frame-carousel-img ${clickedTitles.includes(img.title)?"clicked":""}`}
-//                 onClick={() => handleClick(index,img.title)}
-//                 key={index} src={img.photo_full} alt={`Image ${index + 1}`} />
-//             ))}
-//         </div>
-//     </div>
-//     );
-// };
-
-// export default FrameCarousel;
 import React, { useState, useRef, useEffect } from 'react';
 import './FrameCarousel.css';
 

app/src/css/Home.css

@@ -71,25 +71,28 @@
 
 .language-options {
     width: 200px;
-    height: 300px;
+    height: 180px;
     background-image: url('../assets/Home/language_options.png');
-    background-size: contain;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
     position: absolute;
     top: 2px;
-    margin-top: 50px;
+    margin-top: 130px;
 }
 
 .language-text {
-    top: 85px;
+    /* top: 85px; */
     margin: 10px 50px;
     cursor: pointer;
     position: relative;
     padding: 5px 5px 5px;
+    text-wrap: nowrap;
+    /* font-size: 16px; */
 }
 
 .language-text:hover {
+    width: 106px;
     background-color: white;
     border-radius: 10px;
 }

app/src/css/Payment.css

@@ -189,6 +189,7 @@
 
 /** Promo **/
 .promo-container {
+     overflow: hidden;
      position: relative;
      width: 100vw;
      /* Full width of the viewport */
@@ -211,7 +212,7 @@
      top: 100px;
      right: 0;
      width: 50%;
-     height: 100%;
+     height: 85%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
@@ -263,8 +264,8 @@
 .form-button-container {
      display: flex;
      justify-content: center;
-     width: 88%;
-     height: 10%;
+     width: 90%;
+     height: 12%;
 }
 
 .form-button-container .form-button {
@@ -300,7 +301,7 @@
 
 /** Result **/
 .payment-number-container{
-   
+
      position: relative;
      width: 100vw;
      /* Full width of the viewport */
@@ -399,7 +400,7 @@
 .check{
      position: absolute;
      top: 16%;
-    left: 5%;
+    left: 21%;
      width: 60%;
      height: 60%;
      /* Set height of the div */