Merge pull request #43 from DaengPlace/Design/#36

Design/#36 : 영수증 촬영 페이지, 수정사항 반영

Author: yewoniiii

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"

src/app/ClientLayout.js

@@ -30,6 +30,7 @@ export default function ClientLayout({ children }) {
     "/recommend/usertest",
     "/reviews/reviewScan",
     "/reviews/reviewsInput",
+    "/reviews/receiptCapture",
   ];
   const noHeaderNavPaths = [
     "/main",

src/app/place/page.jsx

@@ -21,7 +21,6 @@ const PlacePage = () => {
   const [hoveredCategory, setHoveredCategory] = useState(null);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
   const [hasMounted, setHasMounted] = useState(false);
-  const [isLocationPermissionGranted, setIsLocationPermissionGranted] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -32,16 +31,20 @@ const PlacePage = () => {
     return null;
   }
 
+  const handleImageClick = () => {
+    router.push(`/place/placesearch`);
+  }
   return (
     <Container>
       <Banner />
       <ImagesSection>
-        <ImageWrapper onClick={() => setIsBottomSheetOpen(true)}>
+        <ImageWrapper onClick={handleImageClick}>
           <Image
             src="/assets/place/banner3.svg"
             alt="내 주변 동반가능시설"
             width={270}
             height={118}
+            layout="responsive"
             style={{
               objectFit: "cover",
               borderRadius: "20px",
@@ -52,12 +55,13 @@ const PlacePage = () => {
             <div>찾아보기</div>
           </OverlayText>
         </ImageWrapper>
-        <ImageWrapper onClick={() => router.push('/recommend')}>
+        <ImageWrapper>
           <Image
             src="/assets/place/banner2.svg"
             alt="성향별 추천 시설"
             width={270}
             height={118}
+            layout="responsive"
             style={{
               objectFit: "cover",
               borderRadius: "20px",
@@ -70,6 +74,7 @@ const PlacePage = () => {
         </ImageWrapper>
       </ImagesSection>
 
+      <CategoryWrapper>
       <CategorySection>
         <h2>카테고리별 <span>인기 리뷰</span> 🔥</h2>
         <CategorySelector
@@ -81,25 +86,11 @@ const PlacePage = () => {
         <Hr />
         <ReviewList reviews={reviews} />
       </CategorySection>
+      </CategoryWrapper>
       <Hr2 />
       <FooterWrapper>
         <Footer />
       </FooterWrapper>
-      {isBottomSheetOpen && (
-        <BottomSheet
-          title={Permission.args.title}
-          content={Permission.args.content}
-          cancelText={Permission.args.cancelText}
-          confirmText={Permission.args.confirmText}
-          onClose={() => setIsBottomSheetOpen(false)}
-          onConfirm={() => {
-            setIsLocationPermissionGranted(true);
-            setIsBottomSheetOpen(false);
-            router.push(`place/placesearch?permissionGranted=true`);
-          }}
-          
-        />
-      )}
     </Container>
   );
 };
@@ -109,21 +100,24 @@ export default PlacePage;
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  width : 100%;
   min-height: 100vh;
   margin: 0 auto;
-  padding: 20px;
   background-color: #f8f8f8;
+  position: relative;
 `;
 
 const ImagesSection = styled.section`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   gap: 20px;
-  margin-top: 20px;
+  height: 100%;
+  position: relative;
+  margin: 20px auto;
+  padding : 0 1.25rem;
 `;
 
 const ImageWrapper = styled.div`
-  position: relative;
   cursor: pointer;
 `;
 
@@ -137,13 +131,19 @@ const OverlayText = styled.div.withConfig({
   font-weight: bold;
   color: ${({ dark }) => (dark ? "white" : "black")};
   padding: 5px 10px;
+
+  @media (max-width: 500px) {
+    font-size : 10px;
+  }
 `;
 
+const CategoryWrapper = styled.div`
+  padding: 0 1.25rem;
+`
 const CategorySection = styled.section`
-  margin-top: 10px;
   background: #fff;
-  padding: 20px;
-  border-radius: 20px;
+  padding: 1.25rem;
+  border-radius: 1.25rem;
   border: 1px solid #ababab;
   h2 {
     margin-bottom: 20px;
@@ -155,8 +155,7 @@ const CategorySection = styled.section`
 `;
 
 const FooterWrapper = styled.div`
-  margin-top: auto;
-  width: 100%;
-  margin-left: -20px;
-  padding: 10px 0;
+  margin-top: 0.75rem;
+  width: 100%; 
+  padding: 0 1.25rem;
 `;

src/app/place/placedetail/page.jsx

@@ -31,7 +31,7 @@ const ActualPlaceDetailPage = () => {
   const [center, setCenter] = useState(null);
   const [address, setAddress] = useState("");
   const [isLiked, setIsLiked] = useState(false);
-  const [uploadedFile, setUploadedFile] = useState(null); // 파일 상태 관리
+  const [uploadedFile, setUploadedFile] = useState(null);
 
   const selectedCard = cards.find((card) => card.id === id);
   if (!selectedCard) {
@@ -50,6 +50,7 @@ const ActualPlaceDetailPage = () => {
         )}&key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}`
       );
       const data = await response.json();
+
       if (data.status === "OK" && data.results.length > 0) {
         const { lat, lng } = data.results[0].geometry.location;
         setCenter({ lat, lng });
@@ -140,7 +141,7 @@ const ActualPlaceDetailPage = () => {
               onClose={() => setIsReviewBottomSheetOpen(false)}
               onConfirm={() => {
                 setIsReviewBottomSheetOpen(false);
-                router.push("/reviews/reviewScan");
+                router.push("/reviews/receiptCapture");
               }}
               cancelText="사진 업로드"
               confirmText="영수증 촬영"

src/app/place/placemap/page.jsx

@@ -63,7 +63,7 @@ const ActualPlaceMap = () => {
   const handleGunguChange = (event) => setSelectedGungu(event.target.value);
 
   const handleBackToList = () => {
-    router.push("/place/placesearch?permissionGranted=true"); 
+    router.push("/place/placesearch"); 
   };
 
   const handleCategoryClick = (category) => {

src/app/place/placesearch/page.jsx

@@ -41,7 +41,6 @@ const ActualPlaceSearchPage = () => {
   const bottomRef = useRef(null);
   const scrollableRef = useRef(null);
   const searchParams = useSearchParams();
-  const permissionGranted = searchParams.get("permissionGranted") === "true";
 
   const handleOpenBottomSheet = () => setIsBottomSheetOpen(true);
   const handleCloseBottomSheet = () => setIsBottomSheetOpen(false);
@@ -90,7 +89,7 @@ const ActualPlaceSearchPage = () => {
   };
 
   useEffect(() => {
-    if (permissionGranted && navigator.geolocation) {
+    if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
         (position) => {
           const { latitude, longitude } = position.coords;
@@ -101,7 +100,7 @@ const ActualPlaceSearchPage = () => {
         }
       );
     }
-  }, [permissionGranted]);
+  }, []);
 
   const handleMapView = () => {
     if (userLocation) {
@@ -166,14 +165,12 @@ const ActualPlaceSearchPage = () => {
 
   return (
     <>
-    <HeaderWrapper>
       <Header
         title="동반가능시설 검색"
         showFavoriteIcon={WithMapIcon.args.showFavoriteIcon}
         showHomeIcon={WithMapIcon.args.showHomeIcon}
         showMapIcon={WithMapIcon.args.showMapIcon}
       />
-    </HeaderWrapper>
     <ScrollableContainer id="scrollable-container" ref={scrollableRef}>
       <SearchBar onClick={handleOpenBottomSheet} />
       <Tabs
@@ -241,12 +238,6 @@ const ScrollableContainer = styled.div`
     display: none;
   }
 `;
-const HeaderWrapper = styled.div`
-  position: fixed;
-  top: 0;
-  z-index: 1000;
-  background-color: white;
-`;
 const MapButton = styled.button`
   position: fixed;
   bottom: ${({ bottom }) => `${bottom}px`};

src/app/reviews/page.jsx

@@ -46,12 +46,10 @@ const ReviewPage = () => {
 
   return (
     <>
-      <HeaderWrapper>
         <Header
           title="리뷰 전체보기"
           showCloseButton={true}
         />
-      </HeaderWrapper>
       <Container ref={containerRef}>
         <PageHeader title="92버터샵" reviewCount={reviews.length} />
         <ReviewSummary
@@ -74,13 +72,6 @@ const ReviewPage = () => {
 
 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;