From 8ccb5fda739900dea00c20a6ecfa01d9762bc16b Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 15:32:27 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design:=20header=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 13 ++++++++++++- src/layout/OnboardingLayout.tsx | 2 +- src/layout/SystemLayout.tsx | 6 ++++-- src/shared/Header.tsx | 3 ++- src/shared/SystemHeader.tsx | 4 +--- 5 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 500e52d..0f0517b 100644 --- a/src/App.tsx +++ b/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 (
-
+
+ + "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} + />
); } diff --git a/src/layout/OnboardingLayout.tsx b/src/layout/OnboardingLayout.tsx index 3e0e515..211d22e 100644 --- a/src/layout/OnboardingLayout.tsx +++ b/src/layout/OnboardingLayout.tsx @@ -5,7 +5,7 @@ import clsx from "clsx"; export const OnboardingLayout = () => { const { pathname } = useLocation(); return ( -
+
diff --git a/src/layout/SystemLayout.tsx b/src/layout/SystemLayout.tsx index 7c51d0a..320ca15 100644 --- a/src/layout/SystemLayout.tsx +++ b/src/layout/SystemLayout.tsx @@ -3,9 +3,11 @@ import { SystemHeader } from "../shared/SystemHeader"; export const SystemLayout = () => { return ( -
+
- +
+ +
); }; diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx index bf3d645..df3be62 100644 --- a/src/shared/Header.tsx +++ b/src/shared/Header.tsx @@ -1,5 +1,6 @@ import { useNavigate } from "react-router-dom"; import { cn } from "../utils/cn"; +import Logo from "@/assets/images/logo.png"; interface HeaderProps { className?: string; @@ -12,7 +13,7 @@ export const Header = ({ className }: HeaderProps) => { className={cn("flex gap-2 items-center pb-23 w-full ", className)} > 로고 navigate("/")} diff --git a/src/shared/SystemHeader.tsx b/src/shared/SystemHeader.tsx index 7234069..8d90925 100644 --- a/src/shared/SystemHeader.tsx +++ b/src/shared/SystemHeader.tsx @@ -61,9 +61,7 @@ export const SystemHeader = () => { }, [input, navigate]); return ( -
+
Date: Tue, 3 Feb 2026 15:39:45 +0900 Subject: [PATCH 2/9] =?UTF-8?q?design:=20home=EC=9D=98=20bg=EB=A5=BC=20scr?= =?UTF-8?q?een=20view=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/SystemLayout.tsx | 10 ++++++---- src/shared/SystemHeader.tsx | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/layout/SystemLayout.tsx b/src/layout/SystemLayout.tsx index 320ca15..42fe3b6 100644 --- a/src/layout/SystemLayout.tsx +++ b/src/layout/SystemLayout.tsx @@ -3,11 +3,13 @@ import { SystemHeader } from "../shared/SystemHeader"; export const SystemLayout = () => { return ( -
- -
+ <> +
+ +
+
-
+ ); }; diff --git a/src/shared/SystemHeader.tsx b/src/shared/SystemHeader.tsx index 8d90925..b33dd62 100644 --- a/src/shared/SystemHeader.tsx +++ b/src/shared/SystemHeader.tsx @@ -61,7 +61,7 @@ export const SystemHeader = () => { }, [input, navigate]); return ( -
+
Date: Tue, 3 Feb 2026 15:53:07 +0900 Subject: [PATCH 3/9] =?UTF-8?q?design:=20toast=20alert=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 14 ++++++++++++++ package.json | 1 + src/App.tsx | 2 +- src/assets/icons/alert2.svg | 1 + src/pages/Login/KakaoLogin.tsx | 6 ++++++ src/pages/home/HomePage.tsx | 5 +++++ src/shared/CardItem.tsx | 5 +++++ src/shared/SystemHeader.tsx | 8 +++++++- 8 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/alert2.svg diff --git a/package-lock.json b/package-lock.json index d3a3f93..601aa36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,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", @@ -4313,6 +4314,19 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/react-toastify": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz", + "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1" + }, + "peerDependencies": { + "react": "^18 || ^19", + "react-dom": "^18 || ^19" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", diff --git a/package.json b/package.json index 2adcaa1..ae23231 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 0f0517b..200b857 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import { Slide, ToastContainer } from "react-toastify"; function App() { return (
-
+
\ No newline at end of file diff --git a/src/pages/Login/KakaoLogin.tsx b/src/pages/Login/KakaoLogin.tsx index ae33492..3ea3c83 100644 --- a/src/pages/Login/KakaoLogin.tsx +++ b/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(); @@ -17,6 +19,10 @@ export const KakaoLogin = () => { setTemp({ email }); setUser({ accessToken: token, isNewMember: isMember }); if (!token) { + toast.info("로그인에 실패했어요. 다시 로그인해 주세요.", { + icon: login으로 이동, + }); + navigate("/login"); } if (isMember === "false") { diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 6a8e0cf..fe54009 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -13,6 +13,8 @@ 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"; export const HomePage = () => { const [selectedTab, setSelectedTab] = useState(0); const [modal, setModal] = useState(false); @@ -34,6 +36,9 @@ export const HomePage = () => { const navigate = useNavigate(); const handleTabChange = (tab: number) => { if (tab === 1 && !isLogin) { + toast.info("로그인이 필요한 서비스입니다.", { + icon: login으로 이동, + }); navigate("/login"); return; } diff --git a/src/shared/CardItem.tsx b/src/shared/CardItem.tsx index 698ee15..77b6314 100644 --- a/src/shared/CardItem.tsx +++ b/src/shared/CardItem.tsx @@ -9,6 +9,8 @@ import { } from "../lib/activity"; import useUserStore from "../store/useUserStore"; import { useNavigate } from "react-router-dom"; +import { toast } from "react-toastify"; +import Alert from "@/assets/icons/alert2.svg"; interface CardItemProps { id?: number; @@ -54,6 +56,9 @@ export const CardItem = forwardRef( if (!id) return; if (!isLogin) { + toast.info(`로그인이 필요한 서비스입니다.`, { + icon: login으로 이동, + }); navigate("/login"); return; } diff --git a/src/shared/SystemHeader.tsx b/src/shared/SystemHeader.tsx index b33dd62..49be84e 100644 --- a/src/shared/SystemHeader.tsx +++ b/src/shared/SystemHeader.tsx @@ -9,6 +9,8 @@ import { MYPAGE_NAV } from "../constants/mypage"; import useUserStore from "../store/useUserStore"; import { postLogout } from "../lib/auth"; import { useGetMyProfile } from "../lib/my"; +import { toast } from "react-toastify"; +import Alert from "@/assets/icons/alert2.svg"; export const SystemHeader = () => { const navigate = useNavigate(); @@ -100,7 +102,11 @@ export const SystemHeader = () => { alt="mypage" className="size-10 cursor-pointer rounded-full" onClick={() => { - if (!isLogin) return navigate("/login"); + if (!isLogin) + return toast.info(`로그인이 필요한 서비스입니다.`, { + icon: login으로 이동, + }); + navigate("/login"); setUserModal(prev => !prev); }} /> From aaf8087c6151a82cbcc49ad487f957bbe9a32f47 Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 16:20:19 +0900 Subject: [PATCH 4/9] =?UTF-8?q?design:=20tab=20=EA=B0=80=EC=83=81=EC=9A=94?= =?UTF-8?q?=EC=86=8C=EB=A1=9C=20design=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/components/TabSelectList.tsx | 2 +- src/shared/CardItem.tsx | 5 ++++- src/shared/button/TabBtn.tsx | 9 ++++++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/pages/home/components/TabSelectList.tsx b/src/pages/home/components/TabSelectList.tsx index cb99a07..f15f0a4 100644 --- a/src/pages/home/components/TabSelectList.tsx +++ b/src/pages/home/components/TabSelectList.tsx @@ -15,7 +15,7 @@ export const TabSelectList = ({ tagList, }: TabSelectList) => { return ( -
+
{tagList.map((item, idx) => { return ( ( } }; return ( -
  • +
  • {company} void; } -export const TabBtn = ({ label = "탭", selected, onClick }: TabBtnProps) => { +export const TabBtn = ({ label, selected, onClick }: TabBtnProps) => { return (
    From 66efba8825bff63fe6200f15cc8683c3b4a72038 Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 16:52:24 +0900 Subject: [PATCH 5/9] =?UTF-8?q?design:=20=EC=B6=94=EC=B2=9C=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=EA=B8=80=20skelton=20ard=EB=A1=9C=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/HomePage.tsx | 18 ++++++++++++++++-- src/shared/SkeletonCard.tsx | 25 +++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 src/shared/SkeletonCard.tsx diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index fe54009..1b036b7 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -15,6 +15,7 @@ import { SearchPostList } from "./components/SearchPostList"; import useUserStore from "../../store/useUserStore"; import { toast } from "react-toastify"; import Alert from "@/assets/icons/alert2.svg"; +import { SkeletonCard } from "../../shared/SkeletonCard"; export const HomePage = () => { const [selectedTab, setSelectedTab] = useState(0); const [modal, setModal] = useState(false); @@ -47,6 +48,7 @@ export const HomePage = () => { return (
    setModal(false)}> + {/* */} {debouncedInput && debouncedInput.trim() !== "" ? ( }> @@ -81,9 +83,21 @@ export const HomePage = () => { onRefresh={postRecommendList} /> {isRefreshing ? ( - +
      + {Array.from({ length: 16 }).map((_, i) => ( + + ))} +
    ) : ( - }> + + {Array.from({ length: 16 }).map((_, i) => ( + + ))} + + } + > )} diff --git a/src/shared/SkeletonCard.tsx b/src/shared/SkeletonCard.tsx new file mode 100644 index 0000000..6f2ccc7 --- /dev/null +++ b/src/shared/SkeletonCard.tsx @@ -0,0 +1,25 @@ +export const SkeletonCard = () => { + return ( +
  • +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    • + ); +}; From fd1ab7b70eda7e24bf3e60902884eaadc861f337 Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 16:55:55 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20header=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/SystemHeader.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/shared/SystemHeader.tsx b/src/shared/SystemHeader.tsx index 49be84e..676c0c9 100644 --- a/src/shared/SystemHeader.tsx +++ b/src/shared/SystemHeader.tsx @@ -102,11 +102,13 @@ export const SystemHeader = () => { alt="mypage" className="size-10 cursor-pointer rounded-full" onClick={() => { - if (!isLogin) - return toast.info(`로그인이 필요한 서비스입니다.`, { + if (!isLogin) { + toast.info(`로그인이 sss필요한 서비스입니다.`, { icon: login으로 이동, }); - navigate("/login"); + navigate("/login"); + } + setUserModal(prev => !prev); }} /> From 5f718dab3b20e606b5e7712f1f12e00a6751f4b5 Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 16:58:25 +0900 Subject: [PATCH 7/9] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20console=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Login/KakaoLogin.tsx | 2 +- src/pages/home/HomePage.tsx | 2 +- src/pages/home/components/CompaniesModal.tsx | 2 +- src/pages/home/components/PostCardList.tsx | 2 +- src/pages/home/components/SearchPostList.tsx | 2 +- src/pages/mypage/MyInterstListPage.tsx | 2 +- src/pages/mypage/SettingPage.tsx | 2 +- src/pages/mypage/components/ProfileEditHeader.tsx | 2 +- src/pages/onboarding/Onboarding.tsx | 2 -- src/pages/onboarding/OnboardingTag.tsx | 2 +- src/shared/SystemHeader.tsx | 2 +- 11 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/pages/Login/KakaoLogin.tsx b/src/pages/Login/KakaoLogin.tsx index 3ea3c83..7fe64c3 100644 --- a/src/pages/Login/KakaoLogin.tsx +++ b/src/pages/Login/KakaoLogin.tsx @@ -15,7 +15,7 @@ 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) { diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 1b036b7..fd70034 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -30,7 +30,7 @@ export const HomePage = () => { 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; diff --git a/src/pages/home/components/CompaniesModal.tsx b/src/pages/home/components/CompaniesModal.tsx index 622912d..41fb055 100644 --- a/src/pages/home/components/CompaniesModal.tsx +++ b/src/pages/home/components/CompaniesModal.tsx @@ -20,7 +20,7 @@ export const CompaniesModal = ({ companyData }: CompaniesModalProps) => { } }, [companies]); - console.log(companies); + // console.log(companies); return (
    { (page: PostResponseDto) => page.data.posts, ) ?? []); - console.log(posts); + // console.log(posts); return ( <> diff --git a/src/pages/home/components/SearchPostList.tsx b/src/pages/home/components/SearchPostList.tsx index 78922d9..f201dbd 100644 --- a/src/pages/home/components/SearchPostList.tsx +++ b/src/pages/home/components/SearchPostList.tsx @@ -24,7 +24,7 @@ export const SearchPostList = ({ query }: SearchPostListProps) => { return
    검색 결과가 없습니다.
    ; } - console.log(searchData); + // console.log(searchData); return (
      diff --git a/src/pages/mypage/MyInterstListPage.tsx b/src/pages/mypage/MyInterstListPage.tsx index c9419b9..8eaf540 100644 --- a/src/pages/mypage/MyInterstListPage.tsx +++ b/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 (
      diff --git a/src/pages/mypage/SettingPage.tsx b/src/pages/mypage/SettingPage.tsx index ca02a21..c6de055 100644 --- a/src/pages/mypage/SettingPage.tsx +++ b/src/pages/mypage/SettingPage.tsx @@ -55,7 +55,7 @@ export const SettingPage = () => { }, ]; const { data: user } = useGetMyProfile(); - console.log(user); + // console.log(user); return (
      diff --git a/src/pages/mypage/components/ProfileEditHeader.tsx b/src/pages/mypage/components/ProfileEditHeader.tsx index cc2373b..416e85a 100644 --- a/src/pages/mypage/components/ProfileEditHeader.tsx +++ b/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 (
      diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index b507077..3be00c2 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/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 (
      diff --git a/src/pages/onboarding/OnboardingTag.tsx b/src/pages/onboarding/OnboardingTag.tsx index f0f470c..c02f04c 100644 --- a/src/pages/onboarding/OnboardingTag.tsx +++ b/src/pages/onboarding/OnboardingTag.tsx @@ -55,7 +55,7 @@ export const OnboardingTag = () => { }); }; - console.log(tag); + // console.log(tag); return (
      diff --git a/src/shared/SystemHeader.tsx b/src/shared/SystemHeader.tsx index 676c0c9..4434700 100644 --- a/src/shared/SystemHeader.tsx +++ b/src/shared/SystemHeader.tsx @@ -19,7 +19,7 @@ export const SystemHeader = () => { const { user, logout } = useUserStore(); const { data } = useGetMyProfile(); - console.log(data); + // console.log(data); const handleLogout = async () => { try { From fd5971561f22643abfe13ecbf7dcaf4b7c41363a Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 18:32:22 +0900 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20homePage=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=9C=A0=EB=AC=B4=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?api=20=EC=9A=94=EC=B2=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/my.ts | 6 ++-- src/lib/recommendation.ts | 11 +++---- src/pages/home/HomePage.tsx | 36 +++++----------------- src/pages/home/components/InterestPage.tsx | 27 ++++++++++++++++ src/pages/home/components/PostCardList.tsx | 5 ++- src/shared/SkeletonList.tsx | 11 +++++++ src/shared/SystemHeader.tsx | 9 +++--- 7 files changed, 62 insertions(+), 43 deletions(-) create mode 100644 src/pages/home/components/InterestPage.tsx create mode 100644 src/shared/SkeletonList.tsx diff --git a/src/lib/my.ts b/src/lib/my.ts index d4ebef4..35c241e 100644 --- a/src/lib/my.ts +++ b/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, }); }; diff --git a/src/lib/recommendation.ts b/src/lib/recommendation.ts index d0aa4bc..b900bbe 100644 --- a/src/lib/recommendation.ts +++ b/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, }); }; diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index fd70034..f08e91e 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,11 +1,9 @@ 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"; @@ -15,14 +13,14 @@ import { SearchPostList } from "./components/SearchPostList"; import useUserStore from "../../store/useUserStore"; import { toast } from "react-toastify"; import Alert from "@/assets/icons/alert2.svg"; -import { SkeletonCard } from "../../shared/SkeletonCard"; +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(); @@ -76,33 +74,15 @@ export const HomePage = () => { )} {/* 나와맞는 게시글 */} - {selectedTab === 1 && ( - <> - }> + - {isRefreshing ? ( -
        - {Array.from({ length: 16 }).map((_, i) => ( - - ))} -
      - ) : ( - - {Array.from({ length: 16 }).map((_, i) => ( - - ))} -
    - } - > - - - )} - + )} + {(selectedTab === 2 || selectedTab === 3) && ( )} diff --git a/src/pages/home/components/InterestPage.tsx b/src/pages/home/components/InterestPage.tsx new file mode 100644 index 0000000..8644f1d --- /dev/null +++ b/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 ( + <> + + {isRefreshing ? ( + // 반복되는 Skeleton UI는 별도 컴포넌트로 빼면 깔끔합니다. + ) : ( + + )} + + ); +}; diff --git a/src/pages/home/components/PostCardList.tsx b/src/pages/home/components/PostCardList.tsx index 6eae7d7..1628200 100644 --- a/src/pages/home/components/PostCardList.tsx +++ b/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 diff --git a/src/shared/SkeletonList.tsx b/src/shared/SkeletonList.tsx new file mode 100644 index 0000000..bc303ee --- /dev/null +++ b/src/shared/SkeletonList.tsx @@ -0,0 +1,11 @@ +import { SkeletonCard } from "./SkeletonCard"; + +export const SkeletonList = () => { + return ( +
      + {Array.from({ length: 16 }).map((_, i) => ( + + ))} +
    + ); +}; diff --git a/src/shared/SystemHeader.tsx b/src/shared/SystemHeader.tsx index 4434700..e9a8757 100644 --- a/src/shared/SystemHeader.tsx +++ b/src/shared/SystemHeader.tsx @@ -18,8 +18,9 @@ export const SystemHeader = () => { const modalRef = useRef(null); const { user, logout } = useUserStore(); - const { data } = useGetMyProfile(); - // console.log(data); + const isLogin = !!user?.accessToken; + + const { data } = useGetMyProfile(isLogin); const handleLogout = async () => { try { @@ -33,8 +34,6 @@ export const SystemHeader = () => { } }; - const isLogin = !!user?.accessToken; - const handleNavClick = (item: { name: string; nav?: string }) => { if (item.name === "로그아웃") { handleLogout(); @@ -98,7 +97,7 @@ export const SystemHeader = () => { )} mypage { From 482f4592943111e79f4e0385e4d4a1f0d901a300 Mon Sep 17 00:00:00 2001 From: JeonSuna Date: Tue, 3 Feb 2026 18:34:28 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20enabled=20=EC=A1=B0=EA=B1=B4=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EC=97=AC=EB=B6=80=20optional=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/my.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/my.ts b/src/lib/my.ts index 35c241e..80ff672 100644 --- a/src/lib/my.ts +++ b/src/lib/my.ts @@ -21,7 +21,7 @@ export const getMyProfile = async () => { return data; }; -export const useGetMyProfile = (enabled: boolean) => { +export const useGetMyProfile = (enabled?: boolean) => { return useQuery({ queryKey: ["my", "profile"], queryFn: getMyProfile,