🔖release:V0.0.2

package.json

@@ -22,7 +22,7 @@
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query-devtools": "^5.59.0",
     "axios": "^1.7.7",
-    "framer-motion": "^11.12.0",
+    "framer-motion": "^11.14.4",
     "http-proxy-middleware": "^3.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.jsx

@@ -9,7 +9,6 @@ import CatsMap from "./pages/CatsMap";
 import EditProfile from "./pages/Profile/EditProfile";
 import EditProfile2 from "./pages/Profile/EditProfile2";
 import MyProfile from "./pages/Profile/MyProfile";
-import SavedPosts from "./pages/Profile/SavedPosts";
 import WritePost from "./pages/Post/WritePost";
 import "./index.css";
 import NotFound from "./pages/NotFound";
@@ -23,6 +22,7 @@ import Scrap from "./pages/Scrap";
 import EditPost from "./pages/Post/EditPost";
 import FriendSent from "./pages/FriendSent.jsx";
 import FriendReceive from "./pages/FriendReceive.jsx";
+import { AnimatePresence } from "framer-motion";
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -34,8 +34,6 @@ class ErrorBoundary extends React.Component {
     return { hasError: true };
   }
 
-
-
   render() {
     if (this.state.hasError) {
       // 대체 UI를 표시합니다.
@@ -50,34 +48,38 @@ function App() {
     <AuthProvider>
       <ErrorBoundary>
         <div className="max-w-[768px] min-h-screen mx-auto my-0  bg-yellow shadow-global ">
-          <Routes>
-            <Route path="/signup1" element={<SignUp1 />}></Route>
-            <Route path="/signup2" element={<SignUp2 />}></Route>
-            <Route path="/" element={<Login />}></Route>
-            <Route path="/login/findid" element={<FindId />}></Route>
-            <Route path="/login/findpwd" element={<FindPassword />}></Route>
-            <Route element={<PrivateRoutes />}>
-              <Route path="/main" element={<Main />}></Route>
-              <Route path="/catmap" element={<CatsMap />}></Route>
-              <Route path="/profile" element={<MyProfile />}></Route>
-              <Route path="/profile/edit" element={<EditProfile />}></Route>
-              <Route path="/profile/edit2" element={<EditProfile2 />}></Route>
-              <Route path="/profile/mycat" element={<Scrap />}></Route>
-              <Route path="/profile/posts" element={<SavedPosts />}></Route>
-              <Route path="/post/write" element={<WritePost />}></Route>
-              <Route path="/post/:id" element={<DetailPost />}></Route>
-              <Route path="/friend" element={<Friend />}></Route>
-              <Route path="/friend/profile" element={<FriendProfile />}></Route>
-              <Route path="/*" element={<NotFound />}></Route>
-              <Route path="/post/edit/:id" element={<EditPost />} />
-              <Route path="/friend/send" element={<FriendSent/>}/>
-              <Route path="/friend/receive" element={<FriendReceive/>}/>
-            </Route>
-          </Routes>
+          <AnimatePresence>
+            <Routes>
+              <Route path="/signup1" element={<SignUp1 />}></Route>
+              <Route path="/signup2" element={<SignUp2 />}></Route>
+              <Route path="/" element={<Login />}></Route>
+              <Route path="/login/findid" element={<FindId />}></Route>
+              <Route path="/login/findpwd" element={<FindPassword />}></Route>
+              <Route element={<PrivateRoutes />}>
+                <Route path="/main" element={<Main />}></Route>
+                <Route path="/catmap" element={<CatsMap />}></Route>
+                <Route path="/profile" element={<MyProfile />}></Route>
+                <Route path="/profile/edit" element={<EditProfile />}></Route>
+                <Route path="/profile/edit2" element={<EditProfile2 />}></Route>
+                <Route path="/profile/mycat" element={<Scrap />}></Route>
+                <Route path="/post/write" element={<WritePost />}></Route>
+                <Route path="/post/:id" element={<DetailPost />}></Route>
+                <Route path="/friend" element={<Friend />}></Route>
+                <Route
+                  path="/friend/profile"
+                  element={<FriendProfile />}
+                ></Route>
+                <Route path="/*" element={<NotFound />}></Route>
+                <Route path="/post/edit/:id" element={<EditPost />} />
+                <Route path="/friend/send" element={<FriendSent />} />
+                <Route path="/friend/receive" element={<FriendReceive />} />
+              </Route>
+            </Routes>
+          </AnimatePresence>
         </div>
       </ErrorBoundary>
     </AuthProvider>
   );
 }
 
-export default App;
+export default App;

src/components/common/Wrapper.jsx

@@ -0,0 +1,16 @@
+import { motion } from "framer-motion";
+import { pageEffect } from "../../styles/animation";
+export default function Wrapper({ children, ...rest }) {
+  return (
+    <motion.div
+      initial="initial"
+      animate="in"
+      exit="out"
+      transition={{ duration: 0.5 }}
+      variants={pageEffect}
+      {...rest}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/components/nyangmap/KakaoMap.jsx

@@ -35,7 +35,6 @@ export default function KakoMap() {
         await getLocation();
         setLoading(false);
       } catch (err) {
-
         setError(true);
         setLoading(false);
       }
@@ -48,7 +47,6 @@ export default function KakoMap() {
     setLoading(true);
     await getLocation();
     setLoading(false);
-    // 위치가 null인지 확인
   };
 
   // useFetch 대신 useEffect 사용
@@ -73,7 +71,6 @@ export default function KakoMap() {
   }, [location, setPostsCount]);
 
   if (locationError || error) {
-
     return <Error />;
   }
   if (loading) {

src/components/post/DetailPostHeader.jsx

@@ -14,10 +14,10 @@ export default function DetailPostHeader({ postData }) {
   const nav = useNavigate();
   //게시물 판단 불리언 값
   const myPost = async () => {
-    const response = await api.get(`/api/post/my/${postData?.postId}`);
-
-    //내 게시물인 경우
-    if (response.data.message === "TRUE") {
+    //로컬스토리지에서 내아이디 가져오기
+    const myuserId = localStorage.getItem("userId");
+    if (postData?.userId === myuserId) {
+      //내 게시물인 경우
       setOptions(myOptions);
     }
   };
@@ -85,9 +85,9 @@ export default function DetailPostHeader({ postData }) {
           alt="profile_img"
           src={
             postData?.profileUrl && postData.profileUrl !== "null"
-                ? postData.profileUrl // 유효한 프로필 URL
-                : `${
-                    import.meta.env.VITE_PUBLIC_URL
+              ? postData.profileUrl // 유효한 프로필 URL
+              : `${
+                  import.meta.env.VITE_PUBLIC_URL
                 }/assets/images/profile_default.png`
           }
           className="rounded-full w-10 h-auto bg-white"

src/hooks/useLocationPermission.jsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+const useLocationPermission = () => {
+  const [isLocationAllowed, setIsLocationAllowed] = useState(null); // 위치 권한 상태 (null: 확인 중, true: 허용, false: 거부)
+
+  // 위치 권한 상태 확인
+  const checkLocationPermission = async () => {
+    try {
+      const permission = await navigator.permissions.query({ name: "geolocation" });
+      if (permission.state === "granted") {
+        setIsLocationAllowed(true);
+      } else {
+        setIsLocationAllowed(false);
+      }
+    } catch (error) {
+
+      setIsLocationAllowed(false);
+    }
+  };
+
+  useEffect(() => {
+    checkLocationPermission();
+  }, []);
+
+  return { isLocationAllowed };
+};
+
+export default useLocationPermission;

src/pages/CatsMap.jsx

@@ -1,25 +1,52 @@
 import Header from "../components/common/Header";
 import NavBar from "../components/common/NavBar";
 import Title from "../components/common/Title";
+import Wrapper from "../components/common/Wrapper";
 import KakoMap from "../components/nyangmap/KakaoMap";
 import NyangBox from "../components/nyangmap/NyangBox";
+import useLocationPermission from "../hooks/useLocationPermission";
 import { useCatMapPosts } from "../store/useCatMapPosts";
 
 export default function CatsMap() {
   const { postsCount } = useCatMapPosts();
+  //위치 정보 허용여부
+  const { isLocationAllowed } = useLocationPermission();
   return (
-    <div>
+    <Wrapper>
       <Header />
       <div className="h-20"></div>
       <Title text={"NYANG MAP"} />
       <main className="px-6 gap-4 pb-32">
-        <KakoMap />
-        <div className="text-slate-400 py-3">
-          현재 위치 기준 200미터 내의 고양이들이 등장해요!
-        </div>
-        <NyangBox catNumber={postsCount} />
+        {isLocationAllowed === null && <div>위치 허용여부 확인중...</div>}
+        {/* 위치 허용이 수락되었을 때 */}
+        {isLocationAllowed === true && (
+          <>
+            <KakoMap />
+            <div className="text-slate-400 py-3">
+              현재 위치 기준 200미터 내의 고양이들이 등장해요!
+            </div>
+            <NyangBox catNumber={postsCount} />
+          </>
+        )}
+        {/* 위치 허용이 거부되었을 때 */}
+        {isLocationAllowed === false && (
+          <div className="flex flex-col text-left gap-5">
+            <a className="font-['Bungee'] text-lg pr-6 text-red-500">
+              위치 권한이 거부되었습니다. 설정에서 위치 권한을 허용해주세요.
+            </a>
+            <a className="font-['Bungee'] text-2xl pr-6">ios</a>
+            <a className="font-['Bungee'] text-sm">
+              설정-&gt;위치 서비스-&gt;접속한 브라우저 선택-&gt;위치
+              접근허용-[&quot;앱을 사용하는 동안&quot;]선택
+            </a>
+            <a className="font-['Bungee'] text-2xl pr-6 pt-5">안드로이드</a>
+            <a className="font-['Bungee'] text-sm">
+              설정-&gt;위치-&gt;위치사용-[&quot;사용&quot;]선택
+            </a>
+          </div>
+        )}
       </main>
       <NavBar />
-    </div>
+    </Wrapper>
   );
 }

src/pages/Friend.jsx

@@ -8,6 +8,7 @@ import Loading from "../components/common/Loading";
 import { useQuery } from "react-query";
 import api from "../api/api";
 import {useNavigate} from "react-router-dom";
+import Wrapper from "../components/common/Wrapper";
 
 export default function Friend() {
   //친구목록 가져오기
@@ -22,7 +23,7 @@ export default function Friend() {
 
   const nav=useNavigate();
   return (
-    <>
+    <Wrapper>
       <Header />
       <div className="h-20"></div>
       <Title text="FRIEND" />
@@ -58,6 +59,6 @@ export default function Friend() {
         </>
       )}
       <NavBar />
-    </>
+    </Wrapper>
   );
 }