[FEAT] Toast 사용 및 로그인 상태에 따른 api 요청 분기

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.11.0",
     "react-spinners": "^0.17.0",
+    "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "vite-plugin-svgr": "^4.5.0",

src/App.tsx

@@ -1,12 +1,23 @@
 import { RouterProvider } from "react-router-dom";
 import router from "./routes";
+import { Slide, ToastContainer } from "react-toastify";
 
 function App() {
   return (
     <div className="w-full min-h-dvh mx-auto overflow-y-auto bg-bgPrimary">
-      <main className=" max-w-480 mx-auto px-14 ">
+      <main className="">
         <RouterProvider router={router} />
       </main>
+      <ToastContainer
+        position="top-center"
+        autoClose={1000}
+        toastClassName={() =>
+          "flex items-center justify-between p-4 px-8 rounded-lg bg-white text-black shadow-md"
+        }
+        progressClassName={"bg-red-500"}
+        hideProgressBar={true}
+        transition={Slide}
+      />
     </div>
   );
 }

src/layout/OnboardingLayout.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 export const OnboardingLayout = () => {
   const { pathname } = useLocation();
   return (
-    <div className=" min-h-screen flex flex-col items-center pt-7">
+    <div className=" min-h-screen flex flex-col items-center pt-7 max-w-480 mx-auto px-14">
       <Header className={clsx(pathname === "/login" ? "pb-24" : "pb-2")} />
       <Outlet />
     </div>

src/layout/SystemLayout.tsx

@@ -3,9 +3,13 @@ import { SystemHeader } from "../shared/SystemHeader";
 
 export const SystemLayout = () => {
   return (
-    <div className=" min-h-screen  flex flex-col  ">
-      <SystemHeader />
-      <Outlet />
-    </div>
+    <>
+      <div className="w-full bg-white">
+        <SystemHeader />
+      </div>
+      <div className="max-w-480 mx-auto px-14 min-h-screen  bg-bgPrimary items-center">
+        <Outlet />
+      </div>
+    </>
   );
 };

src/lib/my.ts

@@ -2,6 +2,7 @@
 
 import {
   useMutation,
+  useQuery,
   useQueryClient,
   useSuspenseQuery,
 } from "@tanstack/react-query";
@@ -20,11 +21,12 @@ export const getMyProfile = async () => {
   return data;
 };
 
-export const useGetMyProfile = () => {
-  return useSuspenseQuery({
+export const useGetMyProfile = (enabled?: boolean) => {
+  return useQuery({
     queryKey: ["my", "profile"],
     queryFn: getMyProfile,
     select: res => res.data,
+    enabled,
   });
 };
 

src/lib/recommendation.ts

@@ -1,8 +1,4 @@
-import {
-  useMutation,
-  useQueryClient,
-  useSuspenseQuery,
-} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import api from "./api";
 
 //추천 게시글 조회
@@ -11,11 +7,12 @@ export const getRecommendPostList = async () => {
   return data;
 };
 
-export const useGetRecommendPostList = () => {
-  return useSuspenseQuery({
+export const useGetRecommendPostList = (isLogin: boolean) => {
+  return useQuery({
     queryKey: ["posts", "my", "recommend"],
     queryFn: getRecommendPostList,
     select: res => res.data,
+    enabled: isLogin,
   });
 };
 

src/pages/Login/KakaoLogin.tsx

@@ -2,6 +2,8 @@ import { useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import useUserStore from "../../store/useUserStore";
 import { useOnboardingStore } from "../../store/useOnboardingStore";
+import { toast } from "react-toastify";
+import Alert from "@/assets/icons/alert2.svg";
 
 export const KakaoLogin = () => {
   const [searchParams] = useSearchParams();
@@ -13,10 +15,14 @@ export const KakaoLogin = () => {
     const token = searchParams.get("token");
     const isMember = searchParams.get("registered");
     const email = searchParams.get("email") ?? undefined;
-    console.log(email);
+    // console.log(email);
     setTemp({ email });
     setUser({ accessToken: token, isNewMember: isMember });
     if (!token) {
+      toast.info("로그인에 실패했어요. 다시 로그인해 주세요.", {
+        icon: <img src={Alert} alt="login으로 이동" />,
+      });
+
       navigate("/login");
     }
     if (isMember === "false") {

src/pages/home/HomePage.tsx

@@ -1,39 +1,43 @@
 import { TabSelectList } from "./components/TabSelectList";
 import { CompanyFilterList } from "./components/CompanyFilterList";
-import { InterestFilterList } from "./components/InterestFilterList";
 import { PostCardList } from "./components/PostCardList";
 import { Suspense, useState } from "react";
 import { useCompanyStore } from "../../store/uesCompanyStore";
 import { useGetCompany } from "../../lib/company";
-import { useGetMyInterest } from "../../lib/my";
 import { usePostRecommendPostList } from "../../lib/recommendation";
 import { TAB_MAP } from "../../constants/tab";
 import { Loading } from "../../shared/Loading";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useDebounce } from "../../hooks/useDebouce";
 import { SearchPostList } from "./components/SearchPostList";
 import useUserStore from "../../store/useUserStore";
+import { toast } from "react-toastify";
+import Alert from "@/assets/icons/alert2.svg";
+import { SkeletonList } from "../../shared/SkeletonList";
+import { InterestPage } from "./components/InterestPage";
 export const HomePage = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [modal, setModal] = useState(false);
   const { companies, toggleCompany } = useCompanyStore();
 
   const { data: companyData } = useGetCompany();
-  const { data: myInterest } = useGetMyInterest();
   const { mutate: postRecommendList, isPending: isRefreshing } =
     usePostRecommendPostList();
 
   const maxCompany = companyData?.companies.slice(0, 8) ?? [];
 
   const [searchParams] = useSearchParams();
   const searchQuery = searchParams.get("search");
-  console.log(searchQuery);
+  // console.log(searchQuery);
   const debouncedInput = useDebounce(searchQuery, 200);
   const { user } = useUserStore();
   const isLogin = !!user?.accessToken;
   const navigate = useNavigate();
   const handleTabChange = (tab: number) => {
     if (tab === 1 && !isLogin) {
+      toast.info("로그인이 필요한 서비스입니다.", {
+        icon: <img src={Alert} alt="login으로 이동" />,
+      });
       navigate("/login");
       return;
     }
@@ -42,6 +46,7 @@ export const HomePage = () => {
 
   return (
     <div className="bg-bgPrimary py-12 " onClick={() => setModal(false)}>
+      {/* <SkeletonCard /> */}
       {debouncedInput && debouncedInput.trim() !== "" ? (
         <Suspense fallback={<Loading />}>
           <SearchPostList query={debouncedInput ?? ""} />
@@ -69,21 +74,15 @@ export const HomePage = () => {
             </>
           )}
           {/* 나와맞는 게시글 */}
-          {selectedTab === 1 && (
-            <>
-              <InterestFilterList
-                myInterest={myInterest}
+          {selectedTab === 1 && isLogin && (
+            <Suspense fallback={<SkeletonList />}>
+              <InterestPage
                 onRefresh={postRecommendList}
+                isRefreshing={isRefreshing}
               />
-              {isRefreshing ? (
-                <Loading />
-              ) : (
-                <Suspense fallback={<Loading />}>
-                  <PostCardList selectedTab={1} />
-                </Suspense>
-              )}
-            </>
+            </Suspense>
           )}
+
           {(selectedTab === 2 || selectedTab === 3) && (
             <PostCardList selectedTab={selectedTab} />
           )}

src/pages/home/components/CompaniesModal.tsx

@@ -20,7 +20,7 @@ export const CompaniesModal = ({ companyData }: CompaniesModalProps) => {
     }
   }, [companies]);
 
-  console.log(companies);
+  // console.log(companies);
   return (
     <section
       className="relative h-130 w-125  shadow-ds100 rounded-2xl overflow-hidden bg-white z-250"

src/pages/home/components/InterestPage.tsx

@@ -0,0 +1,27 @@
+import { useGetMyInterest } from "../../../lib/my";
+import { SkeletonList } from "../../../shared/SkeletonList";
+import { InterestFilterList } from "./InterestFilterList";
+import { PostCardList } from "./PostCardList";
+
+interface InterestPageProps {
+  onRefresh: () => void;
+  isRefreshing: boolean;
+}
+
+export const InterestPage = ({
+  onRefresh,
+  isRefreshing,
+}: InterestPageProps) => {
+  const { data: myInterest } = useGetMyInterest();
+
+  return (
+    <>
+      <InterestFilterList myInterest={myInterest} onRefresh={onRefresh} />
+      {isRefreshing ? (
+        <SkeletonList /> // 반복되는 Skeleton UI는 별도 컴포넌트로 빼면 깔끔합니다.
+      ) : (
+        <PostCardList selectedTab={1} />
+      )}
+    </>
+  );
+};

src/pages/home/components/PostCardList.tsx

@@ -6,6 +6,7 @@ import { useGetRecommendPostList } from "../../../lib/recommendation";
 import type { CardItemProps, PostResponseDto } from "../../../types/post";
 import { CardItem } from "../../../shared/CardItem";
 import { Loading } from "../../../shared/Loading";
+import useUserStore from "../../../store/useUserStore";
 
 interface PostCardListProps {
   selectedTab: number;
@@ -18,7 +19,9 @@ export const PostCardList = ({ selectedTab }: PostCardListProps) => {
   const companyQuery = useInfiniteCompaniesPosts({ companies });
   const recentQuery = useInfinitePosts({ sortBy: "LATEST" });
   const popularQuery = useInfinitePosts({ sortBy: "POPULAR" });
-  const { data: recommendData } = useGetRecommendPostList();
+  const { user } = useUserStore();
+  const isLogin = !!user?.accessToken;
+  const { data: recommendData } = useGetRecommendPostList(isLogin);
 
   const activeQuery = [companyQuery, null, recentQuery, popularQuery][
     selectedTab
@@ -45,7 +48,7 @@ export const PostCardList = ({ selectedTab }: PostCardListProps) => {
           (page: PostResponseDto) => page.data.posts,
         ) ?? []);
 
-  console.log(posts);
+  // console.log(posts);
 
   return (
     <>

src/pages/home/components/SearchPostList.tsx

@@ -24,7 +24,7 @@ export const SearchPostList = ({ query }: SearchPostListProps) => {
     return <div className="py-20 text-center">검색 결과가 없습니다.</div>;
   }
 
-  console.log(searchData);
+  // console.log(searchData);
   return (
     <div>
       <ul className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-10">

src/pages/home/components/TabSelectList.tsx

@@ -15,7 +15,7 @@ export const TabSelectList = ({
   tagList,
 }: TabSelectList) => {
   return (
-    <div className={clsx("flex justify-start", className)}>
+    <div className={clsx("flex justify-start gap-2", className)}>
       {tagList.map((item, idx) => {
         return (
           <TabBtn

src/pages/mypage/MyInterstListPage.tsx

@@ -25,7 +25,7 @@ export const MyIntersListPage = () => {
 
   const posts = data?.flatMap(page => page.data.bookmarks) ?? [];
 
-  console.log(posts);
+  // console.log(posts);
 
   return (
     <div className="py-12">

src/pages/mypage/SettingPage.tsx

@@ -55,7 +55,7 @@ export const SettingPage = () => {
     },
   ];
   const { data: user } = useGetMyProfile();
-  console.log(user);
+  // console.log(user);
   return (
     <div className="px-20 pb-8">
       <section className="mt-16 mb-8  bg-white p-8 rounded-xl border border-bgNormal">

src/pages/mypage/components/ProfileEditHeader.tsx

@@ -22,7 +22,7 @@ export const ProfileEditHeader = ({
 
   const [name, setName] = useState(nickName);
   const [introduce, setIntroduce] = useState(description);
-  console.log(name, introduce);
+  // console.log(name, introduce);
 
   return (
     <div>

src/pages/onboarding/Onboarding.tsx

@@ -21,8 +21,6 @@ export const Onboarding = () => {
   };
   const isNicknameValid = nickname.length >= 2;
   const BtnAble = !isNicknameValid || !check;
-  console.log(BtnAble, "버튼");
-  console.log(email);
 
   return (
     <div className=" ">

src/pages/onboarding/OnboardingTag.tsx

@@ -55,7 +55,7 @@ export const OnboardingTag = () => {
     });
   };
 
-  console.log(tag);
+  // console.log(tag);
 
   return (
     <div className="flex flex-col items-center">