From 61b1eac7a9fae2a4e9cba1ade3f678e493dbfc5d Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Mon, 2 Dec 2024 13:19:00 +0900 Subject: [PATCH 01/16] =?UTF-8?q?Chore(#36)=20:=20=EC=9B=B9=EC=BA=A0=20?= =?UTF-8?q?=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 9db84b9..22685b6 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-dom": "19.0.0-rc-66855b96-20241106", "react-hook-form": "^7.53.2", "react-icons": "^5.3.0", + "react-webcam": "^7.2.0", "styled-components": "^6.1.13", "styled-icons": "^10.47.1", "zustand": "^5.0.1" diff --git a/yarn.lock b/yarn.lock index 62ca93d..0f7fbcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7167,6 +7167,11 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" +react-webcam@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.2.0.tgz#64141c4c7bdd3e956620500187fa3fcc77e1fd49" + integrity sha512-xkrzYPqa1ag2DP+2Q/kLKBmCIfEx49bVdgCCCcZf88oF+0NPEbkwYk3/s/C7Zy0mhM8k+hpdNkBLzxg8H0aWcg== + react@19.0.0-rc-66855b96-20241106: version "19.0.0-rc-66855b96-20241106" resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-rc-66855b96-20241106.tgz#f04d7283454a32bdd8e9757db4308b75b9739e56" From 5959057772de670de836b64eb293644107cda4ef Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Mon, 2 Dec 2024 13:44:48 +0900 Subject: [PATCH 02/16] =?UTF-8?q?Design(#36)=20:=20=EC=98=81=EC=88=98?= =?UTF-8?q?=EC=A6=9D=20=EC=8A=A4=EC=BA=94=20=ED=99=94=EB=A9=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/place/placedetail/page.jsx | 2 +- src/app/reviews/receiptCapture/page.jsx | 116 ++++++++++++++++++++++++ 2 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 src/app/reviews/receiptCapture/page.jsx diff --git a/src/app/place/placedetail/page.jsx b/src/app/place/placedetail/page.jsx index 6fdda62..ffe4ccb 100644 --- a/src/app/place/placedetail/page.jsx +++ b/src/app/place/placedetail/page.jsx @@ -132,7 +132,7 @@ const PlaceDetailPage = () => { onClose={() => setIsReviewBottomSheetOpen(false)} onConfirm={() => { setIsReviewBottomSheetOpen(false); - router.push("/reviews/reviewScan"); + router.push("/reviews/receiptCapture"); }} cancelText="사진 업로드" confirmText="영수증 촬영" diff --git a/src/app/reviews/receiptCapture/page.jsx b/src/app/reviews/receiptCapture/page.jsx new file mode 100644 index 0000000..5bc1fb0 --- /dev/null +++ b/src/app/reviews/receiptCapture/page.jsx @@ -0,0 +1,116 @@ +"use client"; +import React, { useRef, useState, useEffect } from "react"; +import styled from "styled-components"; +import Webcam from "react-webcam"; +import { useRouter } from "next/navigation"; + +const ReceiptCapture = () => { + const webcamRef = useRef(null); + const [capturedImage, setCapturedImage] = useState(null); + const [facingMode, setFacingMode] = useState("user"); + const router = useRouter(); + + useEffect(() => { + const userAgent = navigator.userAgent || navigator.userAgentData; + if (/Mobi|Android|iPhone/i.test(userAgent)) { + setFacingMode("environment"); + } else { + setFacingMode("user"); + } + }, []); + + const captureImage = () => { + const imageSrc = webcamRef.current.getScreenshot(); + setCapturedImage(imageSrc); + }; + + const handleConfirm = () => { + alert("이미지가 저장되었습니다!"); + router.push("/reviews/reviewScan"); + }; + + return ( + + {capturedImage ? ( + + Captured Receipt + + + + + + ) : ( + <> + + + + + + )} + + ); +}; + +export default ReceiptCapture; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #f7f7f7; + padding: 20px; +`; + +const WebcamContainer = styled.div` + width: 70%; + height: 300px; + border: 2px dashed #ccc; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +`; + +const PreviewContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + img { + width: 100%; + max-width: 400px; + border: 2px solid #ccc; + border-radius: 8px; + margin-bottom: 20px; + } +`; + +const ButtonContainer = styled.div` + display: flex; + gap: 10px; +`; + +const Button = styled.button` + padding: 10px 20px; + font-size: 16px; + background-color: ${({ theme }) => theme.colors.primary}; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + + &:hover { + background-color: #0056b3; + } +`; From 1a1ea11e7f35ab6f29b6d077f83e099edac51c25 Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Mon, 2 Dec 2024 14:26:31 +0900 Subject: [PATCH 03/16] =?UTF-8?q?Design(#36)=20:=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/reviews/receiptCapture/page.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/reviews/receiptCapture/page.jsx b/src/app/reviews/receiptCapture/page.jsx index 5bc1fb0..8ecce78 100644 --- a/src/app/reviews/receiptCapture/page.jsx +++ b/src/app/reviews/receiptCapture/page.jsx @@ -3,6 +3,8 @@ import React, { useRef, useState, useEffect } from "react"; import styled from "styled-components"; import Webcam from "react-webcam"; import { useRouter } from "next/navigation"; +import Header from "@/components/common/Header/Header"; +import { NoTitleHeader } from "@/components/common/Header/Header.stories"; const ReceiptCapture = () => { const webcamRef = useRef(null); @@ -30,6 +32,8 @@ const ReceiptCapture = () => { }; return ( + <> +
{capturedImage ? ( @@ -57,6 +61,7 @@ const ReceiptCapture = () => { )} + ); }; @@ -73,8 +78,8 @@ const Container = styled.div` `; const WebcamContainer = styled.div` - width: 70%; - height: 300px; + width: 60%; + height: 30%; border: 2px dashed #ccc; display: flex; justify-content: center; From 57f5814743b679324bc8f8b1d3adc98d1eadeb60 Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Mon, 2 Dec 2024 16:53:07 +0900 Subject: [PATCH 04/16] =?UTF-8?q?Style(#36)=20:=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/place/placesearch/page.jsx | 8 -------- src/app/reviews/page.jsx | 9 --------- src/app/reviews/reviewsInput/page.jsx | 9 --------- 3 files changed, 26 deletions(-) diff --git a/src/app/place/placesearch/page.jsx b/src/app/place/placesearch/page.jsx index c487458..0eb8ea3 100644 --- a/src/app/place/placesearch/page.jsx +++ b/src/app/place/placesearch/page.jsx @@ -158,14 +158,12 @@ const PlaceSearchPage = () => { return ( <> -
- `${bottom}px`}; diff --git a/src/app/reviews/page.jsx b/src/app/reviews/page.jsx index 79f8289..f461236 100644 --- a/src/app/reviews/page.jsx +++ b/src/app/reviews/page.jsx @@ -46,12 +46,10 @@ const ReviewPage = () => { return ( <> -
- { export default ReviewPage; -const HeaderWrapper = styled.div` - position: fixed; - top: 0; - z-index: 1000; - background-color: white; -`; - const Container = styled.div` padding: 16px; padding-top: 70px; diff --git a/src/app/reviews/reviewsInput/page.jsx b/src/app/reviews/reviewsInput/page.jsx index 62f8d62..b51cd14 100644 --- a/src/app/reviews/reviewsInput/page.jsx +++ b/src/app/reviews/reviewsInput/page.jsx @@ -64,9 +64,7 @@ const ReviewsInputPage = () => { return ( <> -
- @@ -88,13 +86,6 @@ const ReviewsInputPage = () => { export default ReviewsInputPage; -const HeaderWrapper = styled.div` - position: fixed; - top: 0; - z-index: 1000; - background-color: white; -`; - const MainContent = styled.div` padding: 16px; padding-top: 70px; From 0ada05c69e47314f9098bca3eea6325b7b38edf4 Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Mon, 2 Dec 2024 16:54:34 +0900 Subject: [PATCH 05/16] =?UTF-8?q?Style(#36)=20:=20=ED=85=8C=EB=91=90?= =?UTF-8?q?=EB=A6=AC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/reviews/receiptCapture/page.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/reviews/receiptCapture/page.jsx b/src/app/reviews/receiptCapture/page.jsx index 8ecce78..a7d3ea8 100644 --- a/src/app/reviews/receiptCapture/page.jsx +++ b/src/app/reviews/receiptCapture/page.jsx @@ -80,7 +80,6 @@ const Container = styled.div` const WebcamContainer = styled.div` width: 60%; height: 30%; - border: 2px dashed #ccc; display: flex; justify-content: center; align-items: center; From 531950c125763c1089aef6d4dc0e5e6c8fe402cd Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Mon, 2 Dec 2024 16:54:48 +0900 Subject: [PATCH 06/16] =?UTF-8?q?Design(#26)=20:=20=EB=8B=A8=EC=9C=84?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/place/page.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/place/page.jsx b/src/app/place/page.jsx index 8da6488..bc82ed1 100644 --- a/src/app/place/page.jsx +++ b/src/app/place/page.jsx @@ -111,15 +111,19 @@ const Container = styled.div` flex-direction: column; min-height: 100vh; margin: 0 auto; - padding: 20px; + padding: 1.25rem; background-color: #f8f8f8; + position: relative; `; const ImagesSection = styled.section` display: flex; - justify-content: space-between; + justify-content: center; gap: 20px; - margin-top: 20px; + width: 150px; + height: 110px; + position: relative; + margin: 20px auto; `; const ImageWrapper = styled.div` From b302e5d9685c211244558025a42b740ed2de032f Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Tue, 3 Dec 2024 10:01:04 +0900 Subject: [PATCH 07/16] =?UTF-8?q?Design(#36)=20:=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/place/page.jsx | 30 ++++++++++++------- src/components/place/Banner/Banner.jsx | 2 +- src/components/place/Hr/Hr.jsx | 2 +- src/components/place/Hr2/Hr2.jsx | 1 + .../place/ReviewList/ReviewList.jsx | 4 +-- 5 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/app/place/page.jsx b/src/app/place/page.jsx index bc82ed1..966e6f8 100644 --- a/src/app/place/page.jsx +++ b/src/app/place/page.jsx @@ -42,6 +42,7 @@ const PlacePage = () => { alt="내 주변 동반가능시설" width={270} height={118} + layout="responsive" style={{ objectFit: "cover", borderRadius: "20px", @@ -58,6 +59,7 @@ const PlacePage = () => { alt="성향별 추천 시설" width={270} height={118} + layout="responsive" style={{ objectFit: "cover", borderRadius: "20px", @@ -70,6 +72,7 @@ const PlacePage = () => { +

카테고리별 인기 리뷰 🔥

{
+