Merge branch 'develop' into feat/#5

eslint.config.js

@@ -34,6 +34,7 @@ export default [
         { allowConstantExport: true },
       ],
       "no-unused-vars": "off",
+      "react/prop-types": "off",
     },
   },
 ];

index.html

@@ -12,7 +12,7 @@
     <script type="module" src="/src/main.jsx"></script>
     <script
       type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=356aa1c57243e551c6ea0db569b098cf"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=356aa1c57243e551c6ea0db569b098cf&libraries=services,geometry"
     ></script>
 
   </body>

package.json

@@ -14,6 +14,7 @@
     "http-proxy-middleware": "^3.0.3",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
+    "react-calendar": "^5.1.0",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

src/Router.jsx

@@ -22,48 +22,71 @@ import PetRegisterPage from "./pages/RegisterPage/PetRegisterPage.jsx";
 import ShoppingDetail from "./pages/MainPage/ShoppingDetail.jsx";
 import SideNav from "./components/common/SideNav.jsx";
 import WalkPage from "./pages/WalkPage/WalkPage.jsx";
+import WalkMapPage from "./pages/WalkPage/WalkMapPage.jsx";
+import WalkJournalPage from "./pages/WalkPage/WalkJournalPage.jsx";
 import Payment from "./pages/PaymentPage/Payment.jsx";
 import PaymentEnd from "./pages/PaymentPage/PaymentEnd.jsx";
 import CancelPay from "./pages/PaymentPage/CancelPay.jsx";
 import PetEditPage from "./pages/MyPage/PetEditPage.jsx";
+
+
+import PayListTest from "./pages/PaymentPage/paylisttest.jsx";
+import PaymentCancelList from "./pages/PaymentPage/PaymentCancelList.jsx";
+import PaymentHistory from "./pages/PaymentPage/PaymentHistory.jsx";
+
 import ComunityWrite from './pages/CommunityPage/CommunityWrite.jsx';
 import CommunityList from './pages/CommunityPage/CommunityList.jsx';
 import CommunityDetail from './pages/CommunityPage/CommunityDetail.jsx';
 
 function Router() {
   return (
     <BrowserRouter>
-      <ScrollTop />
-      <NavSelector />
+      {/* <ScrollTop /> */}
+      {/* <NavSelector /> */}
       <Routes>
         <Route path="/" element={<Outlet />}>
-          <Route index element={<Payment />} />
+          <Route index element={<MainPage/>} />
           <Route path="login" element={<LoginPage />} />
           <Route
             path="shoppingDetail/:productId"
             element={<ShoppingDetail />}
           />
+
+        <Route path="payment" element={<Payment />} /> 
+        <Route path="paymentCancelList" element={<PaymentCancelList />}/>
+        <Route path="paymentEnd" element={<PaymentEnd />}/>
+        <Route path="paymentHistory" element={<PaymentHistory />}/>
+        <Route path="cancelpay" element={<CancelPay />}/>
+        <Route path="paymentlist" element={<PayListTest />}/>
+
           <Route path="nanumList" element={<Outlet />}>
             <Route index element={<NanumList />} />
             <Route path="write" element={<NanumWrite />} />
             <Route path="detail/:no" element={<NanumDetail />} />
           </Route>
+
           <Route path="community" element={<Outlet />}>
             <Route index element={<CommunityList />} />
             <Route path="write" element={<ComunityWrite />} />
             <Route path="detail/:no" element={<CommunityDetail />} />
           </Route>
-          
+
           <Route path="userRegister/:userId" element={<UserRegisterPage />} />
           <Route path="petRegister" element={<PetRegisterPage />} />
-          <Route path="walking" element={<WalkPage />} />
+
+          <Route path="walking" element={<WalkPage />}>
+            <Route path="map" element={<WalkMapPage />} />
+            <Route path="journal" element={<WalkJournalPage />} />
+          </Route>
+
           <Route path="myPage" element={<Outlet />}>
             <Route index element={<MyPage />} />
             <Route path="editPetRegister" element={<PetEditPage />} />
             <Route path="editUserRegister" element={<UserEditPage />} />
             <Route path="missingSave" element={<RegisterMissingSavePage />} />
             <Route path="missingRegister" element={<RegisterMissing />} />
           </Route>
+
         </Route>
       </Routes>
       <Footer />

src/components/Images.jsx

@@ -5,10 +5,11 @@
 */
 export const images = {
   // common
-  cameraIcon: '/images/common/cameraIcon.svg',
-  loginDogCat: '/images/common/loginDogCat.svg',
-  logo: '/images/common/logo.svg',
-  paw: '/images/common/paw.svg',
+  cameraIcon: "/images/common/cameraIcon.svg",
+  loginDogCat: "/images/common/loginDogCat.svg",
+  logo: "/images/common/logo.svg",
+  paw: "/images/common/paw.svg",
+  cancel: "/images/common/cancelButton.svg",
 
   // community
   categoryAll: "/images/community/categoryAll.svg",
@@ -52,4 +53,7 @@ export const images = {
   walkMap: "/images/walk/walkMap.svg",
   walkStopWatch: "/images/walk/walkStopWatch.svg",
   walkAnimation: "/images/walk/walkHeader.json",
+  missingPet: "/images/walk/missingPet.svg",
+  walkingTime: "/images/walk/walkingTime.svg",
+  walkingDistance: "/images/walk/walkingDistance.svg",
 };

src/components/common/Footer.jsx

@@ -41,15 +41,20 @@ const Footer = () => {
     {
       key: "walking",
       image:
-        activeTab === "/walking" ? images.dogWalkingOn : images.dogWalkingOff,
+        activeTab === "/walking/map"
+          ? images.dogWalkingOn
+          : images.dogWalkingOff,
       text: "산책",
-      link: "/walking",
+      link: "/walking/map",
     },
     {
-      key: 'community',
-      image: activeTab === '/community' ? images.communityIconOn : images.communityIconOff,
-      text: '집사생활',
-      link: '/userRegister/:userId',
+      key: "community",
+      image:
+        activeTab === "/community"
+          ? images.communityIconOn
+          : images.communityIconOff,
+      text: "집사생활",
+      link: "/userRegister/:userId",
     },
   ];
 

src/components/walking/MissingPetAlert.jsx

@@ -0,0 +1,139 @@
+import React from "react";
+import styled from "styled-components";
+import { images } from "../Images";
+
+const MissingPetAlert = ({ pet, distance, isOpen, onClose }) => {
+  if (!pet || !isOpen) return null;
+
+  return (
+    <>
+      <AlertDialog open={isOpen} onClick={onClose}>
+        <AlertDialogContent>
+          <AlertHeader>
+            <AlertDialogTitle>
+              산책 경로 {distance}m 반경 내에 <br />
+              실종된 반려동물이 있습니다!
+            </AlertDialogTitle>
+            <CancelButton src={images.cancel} onClick={onClose} />
+          </AlertHeader>
+          <AlertDialogDescription>
+            <PetInfo>
+              <InfoBox>
+                <Title>아이 이름</Title>
+                <Info>{pet.name}</Info>
+              </InfoBox>
+
+              <InfoBox>
+                <Title>휴대폰 번호</Title>
+                <Info>{pet.phone}</Info>
+              </InfoBox>
+
+              <InfoBox>
+                <ImageBox>
+                  <Title>사진</Title>
+                  <PetImage src={pet.image} alt={pet.name} />
+                </ImageBox>
+                <Description>{pet.description}</Description>
+              </InfoBox>
+            </PetInfo>
+          </AlertDialogDescription>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default MissingPetAlert;
+
+const AlertDialog = styled.div`
+  display: ${({ open }) => (open ? "flex" : "none")};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AlertHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const AlertDialogContent = styled.div`
+  background: white;
+  max-width: 20rem;
+  width: 100%;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+`;
+
+const AlertDialogTitle = styled.h2`
+  font-size: 18px;
+  font-weight: bold;
+  color: #f97316;
+`;
+
+const AlertDialogDescription = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+`;
+
+const ImageBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const PetImage = styled.img`
+  width: 6rem;
+  height: 6rem;
+  border-radius: 10px;
+  object-fit: cover;
+  border: 2px solid #fb923c;
+`;
+
+const PetInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const Title = styled.div`
+  font-size: 15px;
+  font-weight: 800;
+  color: #1f2937;
+`;
+
+const Description = styled.div`
+  font-size: 0.875rem;
+  color: #4b5563;
+`;
+
+const InfoBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: start;
+
+  div {
+    width: 100%;
+  }
+`;
+
+const Info = styled.div`
+  font-size: 15px;
+  color: #4b5563;
+`;
+
+const CancelButton = styled.img`
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+`;