[FEAT] 메인페이지 api연결

src/constants/tag.ts

@@ -1,3 +1,26 @@
+export const TAG_CATEGORY_MAP = {
+  IOS: "iOS",
+  ANDROID: "Android",
+  FRONTEND: "Frontend",
+  BACKEND: "Backend",
+  DATA_ENGINEERING: "Data_Engineering",
+  DATA_SCIENCE: "Data_Science",
+  DATABASE: "Database",
+  AI_ML: "AI_ML",
+  DEVOPS: "DevOps",
+  CLOUD: "Cloud",
+  SYSTEMS_OS: "Systems_OS",
+  NETWORKING: "Networking",
+  SECURITY: "Security",
+  GAME_DEV: "Game_Dev",
+  AR_VR_XR: "AR_VR_XR",
+  EMBEDDED_IOT: "Embedded_IoT",
+  BLOCKCHAIN_WEB3: "Blockchain_Web3",
+  QA_TEST: "QA_Test",
+  PRODUCT_UX: "Product_UX",
+  ARCHITECTURE: "Architecture",
+} as const;
+
 export const TAG = [
   "iOS",
   "Android",

src/hooks/useGetInfiniteBookmarkList.ts

@@ -0,0 +1,20 @@
+//북마크 리스트 무한스크롤
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { getBookmarkList } from "../lib/activity";
+
+export const useInfiniteBookmarkPosts = (size = 20) => {
+  return useSuspenseInfiniteQuery({
+    queryKey: ["posts", "bookmarks"],
+    queryFn: ({ pageParam }) =>
+      getBookmarkList({
+        lastBookmarkId: pageParam,
+        size,
+      }),
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => {
+      if (!lastPage.data.hasNext) return undefined;
+      return lastPage.data.lastBookmarkId;
+    },
+    select: res => res.pages,
+  });
+};

src/hooks/useGetInfiniteCompaniesList.ts

@@ -0,0 +1,35 @@
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { getCompaniesPostList } from "../lib/post";
+
+interface UseInfiniteCompaniesPostsParams {
+  companies: string[];
+  size?: number;
+}
+
+export const useInfiniteCompaniesPosts = ({
+  companies,
+  size = 20,
+}: UseInfiniteCompaniesPostsParams) => {
+  return useSuspenseInfiniteQuery({
+    queryKey: ["posts", "companies", companies],
+    queryFn: ({ pageParam }) =>
+      getCompaniesPostList({
+        companies,
+        size,
+        ...pageParam,
+      }),
+
+    initialPageParam: {},
+
+    getNextPageParam: lastPage => {
+      if (!lastPage.data?.hasNext) return undefined;
+
+      return {
+        lastPublishedAt: lastPage.data.lastPublishedAt,
+        lastPostId: lastPage.data.lastPostId,
+      };
+    },
+
+    select: res => res.pages,
+  });
+};

src/hooks/useGetInfinitePostList.ts

@@ -0,0 +1,48 @@
+// src/hooks/useInfinitePosts.ts
+import {
+  useSuspenseInfiniteQuery,
+  type QueryFunctionContext,
+} from "@tanstack/react-query";
+import type { PageParamType, PostResponseDto } from "../types/post";
+import { getPostList } from "../lib/post";
+
+interface UseInfinitePostsParams {
+  sortBy: "LATEST" | "POPULAR";
+  size?: number;
+}
+
+export const useInfinitePosts = ({
+  sortBy,
+  size = 20,
+}: UseInfinitePostsParams) => {
+  return useSuspenseInfiniteQuery<
+    PostResponseDto, // queryFn return
+    Error, // error
+    PostResponseDto[], // select result
+    ["posts", typeof sortBy], // queryKey
+    PageParamType
+  >({
+    queryKey: ["posts", sortBy],
+    queryFn: ({
+      pageParam,
+    }: QueryFunctionContext<["posts", typeof sortBy], PageParamType>) =>
+      getPostList({
+        sortBy,
+        size,
+        ...pageParam,
+      }),
+
+    initialPageParam: {},
+
+    getNextPageParam: lastPage => {
+      if (!lastPage.data?.hasNext) return undefined;
+
+      return {
+        lastPublishedAt: lastPage.data.lastPublishedAt,
+        lastPostId: lastPage.data.lastPostId,
+      };
+    },
+
+    select: res => res.pages,
+  });
+};

src/index.css

@@ -185,15 +185,6 @@
   }
 }
 
-html {
-  -ms-overflow-style: none; /* IE, Edge */
-  scrollbar-width: none; /* Firefox */
-  overscroll-behavior: none;
-}
-html::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
-}
-
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }

src/lib/activity.ts

@@ -0,0 +1,56 @@
+//사용자 활동 api
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import api from "./api";
+import type { UseInfiniteBookmarkPostsParams } from "../types/post";
+
+//1. 북마크 추가
+export const postBookmark = async (postId: number) => {
+  const { data } = await api.post("/api/v1/activities/bookmarks", { postId });
+  return data;
+};
+
+export const usePostBookmark = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (postId: number) => postBookmark(postId),
+    onSuccess: async () => {
+      console.log("북마크성공");
+      await queryClient.invalidateQueries({
+        queryKey: ["posts"],
+      });
+    },
+    onError: err => console.log(err),
+  });
+};
+
+//1. 북마크 제거
+export const deleteBookmark = async (postId: number) => {
+  const { data } = await api.delete("/api/v1/activities/bookmarks", {
+    data: { postId },
+  });
+  return data;
+};
+
+export const useDeleteBookmark = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (postId: number) => deleteBookmark(postId),
+    onSuccess: () => {
+      console.log("북마크 삭제");
+      queryClient.invalidateQueries({
+        queryKey: ["posts"],
+      });
+    },
+    onError: err => console.log(err),
+  });
+};
+
+//북마크 목록 조회
+export const getBookmarkList = async (
+  params: UseInfiniteBookmarkPostsParams,
+) => {
+  const { data } = await api.get("/api/v1/activities/bookmarks", { params });
+  return data;
+};

src/lib/api.ts

@@ -1,15 +1,32 @@
 import axios from "axios";
-import useUserStore from "../store/useUserStore";
+// import useUserStore from "../store/useUserStore";
 const api = axios.create({
   baseURL: "https://techfork.shop",
 });
 
-// const TEMP_TOKEN = import.meta.env.VITE_APP_DEV_TOKEN;
+const TEMP_TOKEN = import.meta.env.VITE_APP_DEV_TOKEN;
+
+// api.interceptors.request.use(
+//   config => {
+//     const accessToken = useUserStore.getState().user?.accessToken;
+//     if (accessToken) {
+//       config.headers.Authorization = `Bearer ${accessToken}`;
+//     }
+
+//     return config;
+//   },
+//   error => {
+//     return Promise.reject(error);
+//   },
+// );
+
+// export default api;
+
 api.interceptors.request.use(
   config => {
-    const accessToken = useUserStore.getState().user?.accessToken;
-    if (accessToken) {
-      config.headers.Authorization = `Bearer ${accessToken}`;
+    // const accessToken = useUserStore.getState().user?.accessToken;
+    if (TEMP_TOKEN) {
+      config.headers.Authorization = `Bearer ${TEMP_TOKEN}`;
     }
 
     return config;

src/lib/company.ts

@@ -0,0 +1,16 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import api from "./api";
+
+//게시글이 있는 회사 목록 조회
+export const getCompanyList = async () => {
+  const { data } = await api.get("/api/v2/posts/companies");
+  return data;
+};
+
+export const useGetCompany = () => {
+  return useSuspenseQuery({
+    queryFn: getCompanyList,
+    queryKey: ["company"],
+    select: res => res.data,
+  });
+};

src/lib/my.ts

@@ -0,0 +1,18 @@
+//사용자와 관련된 정보를 가져옵니다.
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import api from "./api";
+
+//내 관심사 조회
+export const getMyInterest = async () => {
+  const { data } = await api.get("/api/v1/users/me/interests");
+  return data;
+};
+
+export const useGetMyInterest = () => {
+  return useSuspenseQuery({
+    queryKey: ["my", "interest"],
+    queryFn: getMyInterest,
+    select: res => res.data.interests,
+  });
+};

src/lib/post.ts

@@ -0,0 +1,38 @@
+// 최근 게시글 , 인기있는 게시글
+
+import type { PostResponseDto } from "../types/post";
+import api from "./api";
+
+export interface GetPostListParams {
+  sortBy: "LATEST" | "POPULAR";
+  size?: number;
+  lastPublishedAt?: string;
+  lastPostId?: number;
+}
+export const getPostList = async (
+  params: GetPostListParams,
+): Promise<PostResponseDto> => {
+  const res = await api.get("/api/v2/posts/recent", {
+    params,
+  });
+
+  return res.data;
+};
+
+//기업별 게시글 조회
+
+export interface GetCompaniesPostListParams {
+  companies?: string[];
+  size?: number;
+  lastPublishedAt?: string;
+  lastPostId?: number;
+}
+export const getCompaniesPostList = async (
+  params: GetCompaniesPostListParams,
+): Promise<PostResponseDto> => {
+  const res = await api.get("/api/v2/posts/by-company", {
+    params,
+  });
+
+  return res.data;
+};

src/lib/recommendation.ts

@@ -0,0 +1,42 @@
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import api from "./api";
+
+//추천 게시글 조회
+export const getRecommendPostList = async () => {
+  const { data } = await api.get("/api/v1/recommendations");
+  return data;
+};
+
+export const useGetRecommendPostList = () => {
+  return useSuspenseQuery({
+    queryKey: ["my", "recommend"],
+    queryFn: getRecommendPostList,
+    select: res => res.data,
+  });
+};
+
+//추천 새로고침
+export const postRecommendList = async () => {
+  const { data } = await api.post("/api/v1/recommendations/regenerate");
+  return data;
+};
+
+export const usePostRecommendPostList = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: postRecommendList,
+    onSuccess: async () => {
+      console.log("성공");
+      await queryClient.refetchQueries({
+        queryKey: ["my", "recommend"],
+      });
+    },
+    onError: err => {
+      console.log(err);
+    },
+  });
+};

src/pages/Login/KakaoLogin.tsx

@@ -27,5 +27,5 @@ export const KakaoLogin = () => {
   }, []);
 
   console.log(searchParams);
-  return <div>카카오로그인</div>;
+  return <div></div>;
 };