[✨FEATURE] 커뮤니티 연결

src/common/Header.tsx

@@ -29,11 +29,15 @@ const NavItems = [
       pathname.startsWith('/others') || pathname.startsWith('/community'),
   },
 
+  {
+    label: '스크랩',
+    path: '/mytodo/scrap',
+  },
+
   //마이드림
   {
     label: '나의 할일',
     path: '/mytodo/list',
-    match: (pathname: string) => pathname.startsWith('/mytodo'),
   },
 ];
 

src/hook/community/query/useCommunityGetTodo.ts

@@ -0,0 +1,79 @@
+import api from '@hook/api';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+export interface CommunityItem {
+  id: number;
+  name: string;
+  level: string;
+  imageUrl?: string;
+  dDay?: string;
+  description: string;
+  saveCount: number;
+  isSaved: boolean;
+}
+
+export interface CommunityGetTodoResponse {
+  content: CommunityItem[];
+  number: number;
+  size: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+  numberOfElements: number;
+  pageable: {
+    pageNumber: number;
+  };
+  sort: { empty: boolean; sorted: boolean; unsorted: boolean };
+}
+
+type BaseParams = {
+  jobName: string;
+  level: string;
+  sort: string;
+  size: number;
+};
+
+const fetchCommunityPage = async ({
+  jobName,
+  level,
+  sort,
+  page,
+  size,
+}: BaseParams & { page: number }): Promise<CommunityGetTodoResponse> => {
+  const token =
+    typeof window !== 'undefined' ? localStorage.getItem('accessToken') : null;
+
+  const res = await api.get('/v1/community/todos', {
+    params: { jobName, level, sort, page, size },
+    ...(token ? { headers: { Authorization: `Bearer ${token}` } } : {}),
+  });
+  const result = res.data?.data;
+
+  return {
+    content: result.content,
+    number: result.number,
+    size: result.size,
+    first: result.first,
+    last: result.last,
+    empty: result.empty,
+    numberOfElements: result.numberOfElements,
+    pageable: { pageNumber: result.pageable?.pageNumber ?? page },
+    sort: result.sort,
+  };
+};
+
+export const useCommunityGetTodo = (params: BaseParams) => {
+  return useInfiniteQuery({
+    queryKey: ['CommunityGetTodo', params],
+    initialPageParam: 0,
+    queryFn: ({ pageParam }) =>
+      fetchCommunityPage({ ...params, page: pageParam as number }),
+
+    getNextPageParam: (lastPage) => {
+      if (lastPage.last) return undefined;
+      return lastPage.number + 1;
+    },
+
+    retry: 0,
+  });
+};

src/hook/community/useCommunityAddTodoMutation.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from '@hook/api';
+
+interface CommunityAddTodoRequest {
+  id: number;
+}
+
+interface CommunityAddTodoResponse {
+  success: boolean;
+  data: {
+    id: number;
+    message: string;
+  };
+}
+
+export const useCommunityAddTodoMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    CommunityAddTodoResponse,
+    unknown,
+    CommunityAddTodoRequest
+  >({
+    mutationFn: async ({ id }) => {
+      const token = localStorage.getItem('accessToken');
+      if (!token) {
+        throw new Error('인증 토큰이 없습니다. 로그인 후 다시 시도해주세요.');
+      }
+
+      const { data } = await api.post(
+        `/v1/community/todos/${id}`,
+        { id },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['CommunityGetTodo', 'mdTodo', 'community'],
+      });
+    },
+    onError: (error) => {
+      console.error('할일 추가 실패:', error);
+    },
+  });
+};

src/hook/community/useDeleteCommunityTodos.ts

@@ -0,0 +1,38 @@
+import api from '@hook/api';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+interface DeleteCommunityTodo {
+  id: number;
+}
+
+export const useDeleteCommunityTodosMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id }: DeleteCommunityTodo) => {
+      const token = localStorage.getItem('accessToken');
+      if (!token) {
+        throw new Error('인증 토큰이 없습니다. 로그인 후 다시 시도해주세요.');
+      }
+
+      const response = await api.delete(`/v1/community/todos/${id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+        data: { id },
+      });
+      return response.data;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['CommunityGetTodo'],
+      });
+      queryClient.refetchQueries({
+        queryKey: ['CommunityGetTodo'],
+      });
+    },
+
+    onError: (error) => {
+      console.error('내 할일 삭제 실패:', error);
+    },
+  });
+};

src/hook/community/useInfinityScroll.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type UseInfiniteScrollOptions = {
+  onIntersect: () => void;
+  enabled?: boolean;
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number;
+  once?: boolean;
+};
+
+export function useInfiniteScroll<T extends HTMLElement>({
+  onIntersect,
+  enabled = true,
+  root = null,
+  rootMargin = '200px',
+  threshold = 0,
+  once = false,
+}: UseInfiniteScrollOptions) {
+  const ref = useRef<T | null>(null);
+  const calledOnceRef = useRef(false);
+
+  const handleIntersect = useCallback(
+    (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+      const entry = entries[0];
+      if (!entry?.isIntersecting) return;
+      if (once && calledOnceRef.current) return;
+
+      onIntersect();
+
+      if (once) {
+        calledOnceRef.current = true;
+        observer.unobserve(entry.target);
+      }
+    },
+    [onIntersect, once]
+  );
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+
+    if (typeof IntersectionObserver === 'undefined') return;
+
+    const observer = new IntersectionObserver(handleIntersect, {
+      root,
+      rootMargin,
+      threshold,
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled, root, rootMargin, threshold, handleIntersect]);
+
+  useEffect(() => {
+    if (!enabled) calledOnceRef.current = false;
+  }, [enabled]);
+
+  return ref;
+}

src/pages/community/Community.tsx

@@ -1,90 +1,16 @@
-//  import DropDownIcon from '@assets/icons/drop_down.svg?react';
-import Arrow from '@assets/icons/arrow.svg?react';
-import Bookmark from '@assets/icons/bookmark.svg?react';
 import CommunityRightSide from './components/CommunityRightSide';
-import CommunityDropdown from './components/CommunityDropdown';
-import { useGetHotPopularQuery } from '@hook/community/query/useGetHotPopularQuery';
-import jobNames, { findJobIdByName } from '@utils/data/community/jobs';
-import { useCommunityStore } from '@store/useCommunityStore';
-import { useNavigate } from 'react-router-dom';
+import CommunityLeftSide from './components/CommunityLeftSide';
 
 const Community = () => {
-  const navigate = useNavigate();
-  const { selectedJobName } = useCommunityStore();
-  const { data: popularTodos = [] } = useGetHotPopularQuery();
   return (
-    <div className="flex h-full w-full flex-row gap-[22px] bg-gray-50 px-[120px]">
-      <div className="mt-[95px] flex-col items-start">
-        <div className="flex w-[384px] flex-col items-start rounded-[20px] bg-white p-[30px]">
-          <CommunityDropdown
-            options={jobNames}
-            value={jobNames[0]}
-            onSelect={(value) => {
-              console.log(value);
-            }}
-          />
-
-          <div className="text-black font-T02-B"> 꿈꾸는 드리머</div>
-
-          <div
-            className="mt-[30px] flex w-full flex-row items-center justify-end text-gray-500 font-B02-SB"
-            onClick={() => {
-              // 하드코딩 매핑된 jobId 사용
-              const id = findJobIdByName(selectedJobName);
-              navigate(`/others/${id ?? 1}`);
-            }}
-          >
-            전체보기
-            <Arrow />
-          </div>
-        </div>
-
-        <div className="mb-[102px] mt-[22px] flex w-[384px] flex-col items-start rounded-[20px] bg-white px-[30px] pb-[30px] pt-10">
-          <div className="text-black font-T04-B">
-            {' '}
-            {selectedJobName} HOT 할 일
-          </div>
-          <div className="mt-[37px] flex w-full flex-col items-start">
-            {popularTodos.map((item, idx) => (
-              <div
-                key={item.id}
-                className="flex w-full flex-row items-start justify-between py-4"
-              >
-                <div className="flex flex-row items-center gap-[15px]">
-                  <div className="text-purple-500 font-T05-SB">{idx + 1}</div>
-                  <div className="flex flex-row items-center gap-[15px]">
-                    <img
-                      src={item.imageUrl}
-                      alt="프로필이미지"
-                      className="h-[30px] w-[30px] rounded-full bg-gray-50"
-                    />
-
-                    <div className="flex flex-col">
-                      <div className="flex w-full flex-row items-start justify-between gap-[10px]">
-                        <div className="flex-1 break-words text-black font-B01-SB">
-                          {item.description}
-                        </div>
-                        <div className="mr-2 shrink-0 whitespace-nowrap text-gray-500 font-C01-R">
-                          {item.dDay}
-                        </div>
-                      </div>
-                      <div className="mt-1 text-gray-500 font-C01-R">
-                        {item.name}
-                      </div>
-                    </div>
-                  </div>
-                </div>
+    <div className="flex h-full w-full gap-[22px] bg-gray-50 px-[120px]">
+      <div className="sticky top-0 h-fit w-[384px] flex-shrink-0">
+        <CommunityLeftSide />
+      </div>
 
-                <div className="flex flex-row items-center gap-[6px] text-purple-500">
-                  <Bookmark />
-                  <span className="font-B03-SB">{item.saveCount}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
+      <div className="flex-1">
+        <CommunityRightSide />
       </div>
-      <CommunityRightSide />
     </div>
   );
 };