[Feat/#173] 로컬스토리지 세팅 삭제, 비정상 주소 접근 방지 로직 추가

src/App.tsx

@@ -1,7 +1,7 @@
 import { RouterProvider } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import router from "./route/Router";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+//import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 function App() {
   const queryClient = new QueryClient({

src/api/domain/mypage/index.ts

@@ -18,6 +18,7 @@ export const getMemberInfo = async (nickname?: string) => {
 //nickname을 안주고 accessToken만 주면 나의 반려동물 정보
 export const getPetInfo = async (nickname?: string) => {
   type MyPetInfo = paths["/api/dev/pets"]["get"]["responses"]["200"]["content"]["*/*"];
+
   const { data } = await get<MyPetInfo>(`${API_PATH.PETS}`, {
     params: {
       nickname,

src/page/community/[postId]/PostDetail.tsx

@@ -57,14 +57,6 @@ const PostDetail = () => {
     text: "",
   });
 
-  // TODO : 삭제 해라.
-  const user = {
-    accessToken:
-      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE3Mzc0OTQ1MDksImV4cCI6MTczODA5OTMwOSwibWVtYmVySWQiOjJ9.JhS3oRdiCmYpsa3VCrsxEdDP4DBt8hf5rGdzetF9LFNQltZd1yEQ1ARIskYkt_WDfKbcC-EYmH_J3q1iT6A9Lg",
-  };
-
-  localStorage.setItem("user", JSON.stringify(user));
-
   const onClearClick = () => {
     setParsedComment({ mention: "", text: "" });
   };

src/page/community/index/Community.tsx

@@ -11,8 +11,11 @@ import { PATH } from "@route/path";
 import { NAV_CONTENT } from "@common/component/Nav/constant";
 import { useQueryGetCategory } from "@api/domain/community/category/hook";
 import { useEffect } from "react";
+import { useProtectedRoute } from "@route/useProtectedRoute";
 
 const Community = () => {
+  useProtectedRoute();
+
   useEffect(() => {
     sessionStorage.setItem("searchBackUrl", PATH.COMMUNITY.ROOT);
   }, []);

src/page/community/search/index/Search.tsx

@@ -8,12 +8,6 @@ import { useSearchGet, useSearchPost } from "@api/domain/community/search/hook.t
 import { useFilterStore } from "@store/filter.ts";
 
 const Search = () => {
-  const user = {
-    // TODO : 나중에 지워야함.
-    accessToken:
-      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE3MzcyMTAxMzgsImV4cCI6MTczNzgxNDkzOCwibWVtYmVySWQiOjF9.f6sCaL3PFg7yMb6J4PM1h30ADsiq_fbON31IXPguJ_Pb4otyJ_Qh-Z_JYRxC8a2SMzaa6jr68uLc6w0_tuag3A",
-  };
-  localStorage.setItem("user", JSON.stringify(user));
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const query = searchParams.get("searchText");

src/page/login/Login.tsx

@@ -3,8 +3,21 @@ import { IcLeftIcon } from "@asset/svg";
 import { KAKAO_AUTH_URI } from "@auth/OAuth";
 import { IcGroup } from "@asset/svg";
 import { IcCocosLogin } from "@asset/svg";
+import { isLoggedIn } from "@api/index";
+import { useNavigate } from "react-router-dom";
+import { PATH } from "@route/path";
+import { useEffect } from "react";
 
 const Login = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isLoggedIn()) {
+      //navigate는 부수효과이기 때문에 반드시 동기적 처리 x
+      navigate(PATH.MAIN);
+    }
+  }, []);
+
   const handleLogin = () => {
     window.location.href = KAKAO_AUTH_URI; // 상수화
   };

src/page/main/index/Main.tsx

@@ -14,8 +14,11 @@ import { NAV_CONTENT } from "@common/component/Nav/constant";
 import { PATH } from "@route/path";
 import { useGetBodyParts, useQueryGetPopular } from "@api/domain/main/hook";
 import { useEffect } from "react";
+import { useProtectedRoute } from "@route/useProtectedRoute";
 
 const Main = () => {
+  useProtectedRoute();
+
   const { data: postsData } = useQueryGetPopular();
   const { data: getBodyParts } = useGetBodyParts("SYMPTOM");
 
@@ -29,13 +32,6 @@ const Main = () => {
     navigate(PATH.COMMUNITY.SEARCH);
   };
 
-  const user = {
-    accessToken:
-      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE3MzcyMDE4NjgsImV4cCI6MTczNzgwNjY2OCwibWVtYmVySWQiOjN9.e3NomRDxNu99lniRbw5fZE6kuSXf5pl9K_SK2jzAhSq2tnoz5Tcv0RQyjTshvPlWESQquZYt_IW3q0Z4MG0AnA",
-  };
-
-  localStorage.setItem("user", JSON.stringify(user));
-
   const handleTextFieldChange = () => {};
 
   if (!postsData || !getBodyParts) return null;

src/page/mypage/index/Mypage.tsx

@@ -12,10 +12,13 @@ import { PATH } from "@route/path";
 import { NAV_CONTENT } from "@common/component/Nav/constant";
 import { isLoggedIn } from "@api/index";
 import { useGetMemberInfo, useGetPetInfo } from "@api/domain/mypage/hook";
+import { useProtectedRoute } from "@route/useProtectedRoute";
 
 export type ActiveTabType = "review" | "post" | "comment";
 
 const Mypage = () => {
+  useProtectedRoute();
+
   const preSavedActiveTab = sessionStorage.getItem("activeTab");
 
   const navigate = useNavigate();
@@ -30,6 +33,11 @@ const Mypage = () => {
     setIsLogin(isLoggedIn());
   }, []);
 
+  useEffect(() => {
+    if (!petInfo) setIsRegister(false);
+    else setIsRegister(true);
+  }, [petInfo]);
+
   useEffect(() => {
     sessionStorage.setItem("activeTab", activeTab);
   }, [activeTab]);
@@ -42,7 +50,7 @@ const Mypage = () => {
     setActiveTab(tab);
   };
 
-  if (isLoading || !member || !petInfo) return;
+  if (isLoading || !member) return;
 
   return (
     <div style={{ position: "relative", height: "auto" }}>
@@ -71,17 +79,17 @@ const Mypage = () => {
 
             {isRegister ? (
               <div className={styles.animalProfileWrapper}>
-                <img className={styles.animalImage} alt="프로필이미지" src={petInfo.petImage} />
+                <img className={styles.animalImage} alt="프로필이미지" src={petInfo?.petImage} />
                 <div className={styles.animalProfileTextWrapper}>
                   <span className={styles.animalMainText}>
-                    {`${petInfo.breed} `}
+                    {`${petInfo?.breed} `}
                     <span className={styles.textDivider}>|</span>
-                    {` ${petInfo.petAge} `}
+                    {` ${petInfo?.petAge} `}
                     <span className={styles.textDivider}>|</span>
                   </span>
                   <span className={styles.animalSubText}>
-                    {`앓고있는 병 `}
-                    {petInfo.diseases?.map((disease) => (
+                    {"앓고있는 병 "}
+                    {petInfo?.diseases?.map((disease) => (
                       <span className={styles.spanNoWrap} key={`hash-disease-${disease.id}`}>
                         {`#${disease.name}`}&nbsp;
                       </span>

src/page/mypage/index/component/MyPageContent/MyPageContent.tsx

@@ -12,7 +12,6 @@ interface MyPageContentPropTypes {
   tab: ActiveTabType;
 }
 
-//todo: 민정이가 유틸 만들어주기로 함 (~ 시간전)
 export interface ApiItemTypes {
   id: number;
   nickname: string;
@@ -33,26 +32,6 @@ const MyPageContent = ({ tab }: MyPageContentPropTypes) => {
   const { data: myPosts } = useGetMyPost();
   const { data: myComments } = useGetMyComment();
 
-  if ((tab === "post" && !myPosts) || (tab === "comment" && !myComments)) return;
-
-  const renderNothingContent = (tab: ActiveTabType) => {
-    let content = "";
-    switch (tab) {
-      case "review":
-        content = "아직 작성한 후기가 없어요.";
-        break;
-      case "post":
-        content = "아직 작성한 게시글이 없어요.";
-        break;
-      case "comment":
-        content = "아직 작성한 댓글이 없어요.";
-        break;
-      default:
-        break;
-    }
-    return <div className={styles.nothingContent}>{content}</div>;
-  };
-
   const renderContent = (tab: ActiveTabType) => {
     switch (tab) {
       case "review":

src/page/onboarding/complete/Complete.tsx

@@ -11,6 +11,7 @@ const Complete = () => {
   const navigate = useNavigate();
   const handleSkip = () => {
     navigate(PATH.MAIN);
+    window.location.reload();
   };
 
   const handleNext = () => {

src/page/onboarding/index/Onboarding.tsx

@@ -1,5 +1,7 @@
+import { useProtectedRoute } from "@route/useProtectedRoute";
 import Nickname from "./component/nickname/Nickname";
 const Onboarding = () => {
+  useProtectedRoute();
   return (
     <>
       <Nickname />

src/page/onboarding/index/component/nickname/Nickname.tsx

@@ -19,7 +19,7 @@ const Nickname = () => {
   // api 참 거짓을 반환
   const { data: isExistNickname } = useCheckNicknameGet(nickname);
 
-  const { mutate: patchNickname } = usePatchNickname();
+  const { mutate: patchNickname, mutateAsync } = usePatchNickname();
 
   // 닉네임 입력 처리
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -46,11 +46,18 @@ const Nickname = () => {
   };
 
   // 다음 버튼
-  const handleNext = () => {
-    patchNickname(nickname);
+
+  const patchingNickname = async () => {
+    await mutateAsync(nickname);
     navigate(PATH.ONBOARDING.COMPLETE);
   };
 
+  const handleNext = () => {
+    // patchNickname(nickname);
+    // navigate(PATH.ONBOARDING.COMPLETE);
+    patchingNickname();
+  };
+
   return (
     <>
       {/* 상단 영역 */}

src/page/profile/index/Profile.tsx

@@ -9,11 +9,14 @@ import Nav from "@common/component/Nav/Nav";
 import { NAV_CONTENT } from "@common/component/Nav/constant";
 import { useGetMemberInfo, useGetPetInfo } from "@api/domain/mypage/hook";
 import ProfileContent from "./component/ProfileContent/ProfileContent";
+import { useProtectedRoute } from "@route/useProtectedRoute";
 
 export type ActiveTabType = "review" | "post" | "comment";
 
 //남이 볼 때 뷰 분리 : /profie?nickname=칠칠이최고 으로 넘어가서 보도록
 const Profile = () => {
+  useProtectedRoute();
+
   const preSavedActiveTab = sessionStorage.getItem("activeTab");
 
   const navigate = useNavigate();
@@ -65,7 +68,7 @@ const Profile = () => {
                 <span className={styles.textDivider}>|</span>
               </span>
               <span className={styles.animalSubText}>
-                {`앓고있는 병 `}
+                {"앓고있는 병 "}
                 {petInfo.diseases?.map((disease) => (
                   <span className={styles.spanNoWrap} key={`hash-disease-${disease.id}`}>
                     {`#${disease.name}`}&nbsp;

src/page/setting/edit-profile/ProfileEdit.tsx

@@ -6,9 +6,11 @@ import Divider from "@common/component/Divider/Divider";
 import { Button } from "@common/component/Button";
 import { PATH } from "@route/path";
 import { useGetMemberInfo } from "@api/domain/mypage/hook";
+import { useProtectedRoute } from "@route/useProtectedRoute";
 
-//todo : 사용자 조회 api로 데이터 렌더링
 const ProfileEdit = () => {
+  useProtectedRoute();
+
   const navigate = useNavigate();
   const { data: member } = useGetMemberInfo();
 

src/page/setting/index/Setting.tsx

@@ -7,8 +7,10 @@ import SimpleBottomSheet from "@common/component/SimpleBottomSheet/SimpleBottomS
 import useSimpleBottomSheet from "@shared/hook/useSimpleBottomSheet";
 import { PATH } from "@route/path";
 import { useLogout } from "@api/domain/setting/hook";
+import { useProtectedRoute } from "@route/useProtectedRoute";
 
 const Setting = () => {
+  useProtectedRoute();
   const navigate = useNavigate();
   const { isOpen, openBottomSheet, closeBottomSheet } = useSimpleBottomSheet();
   const { mutate: logout } = useLogout();

src/page/test/Test.tsx

@@ -1,24 +1,5 @@
-import SimpleBottomSheet from "@common/component/SimpleBottomSheet/SimpleBottomSheet";
-import useSimpleBottomSheet from "@shared/hook/useSimpleBottomSheet";
-
 const Test = () => {
-  const { isOpen, openBottomSheet, closeBottomSheet } = useSimpleBottomSheet();
-  console.log(isOpen);
-  return (
-    <div>
-      <button onClick={openBottomSheet}>시작</button>
-      <SimpleBottomSheet
-        isOpen={isOpen}
-        handleClose={closeBottomSheet}
-        content="로그아웃 하시겠어요?"
-        subContent="언제든 다시 오시면 기다리고 있을게요!"
-        leftText="취소"
-        rightText="로그아웃"
-        leftOnClick={() => alert("hi")}
-        rightOnClick={() => alert("hi")}
-      />
-    </div>
-  );
+  return <div>qd</div>;
 };
 
 export default Test;

src/route/useProtectedRoute.tsx

@@ -0,0 +1,35 @@
+import { isLoggedIn } from "@api/index";
+import { useLocation, useNavigate } from "react-router-dom";
+import { PATH } from "./path";
+import { useGetMemberInfo } from "@api/domain/mypage/hook";
+import { useEffect } from "react";
+
+export const useProtectedRoute = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { data } = useGetMemberInfo();
+
+  useEffect(() => {
+    const isLogin = isLoggedIn();
+    if (!isLogin) {
+      console.log("Redirecting to login...");
+      navigate(PATH.LOGIN, { replace: true });
+    }
+
+    if (data) {
+      const hasNickName = data?.nickname;
+      console.log(hasNickName);
+
+      if (location.pathname === "/onboarding") {
+        if (hasNickName) {
+          navigate(PATH.MAIN, { replace: true });
+        }
+      }
+
+      if (!hasNickName) {
+        console.log("Redirecting to onboarding...");
+        navigate(PATH.ONBOARDING.ROOT, { replace: true });
+      }
+    }
+  }, [data]);
+};