Merge pull request #269 from Team-Lecue/Home/#259-add-api

[ Home ] 즐겨찾기 관련 기능 api 연결

src/Home/api/getLecueBook.ts

@@ -2,7 +2,7 @@ import { api } from '../../libs/api';
 
 const getLecueBook = async () => {
   const { data } = await api.get('/api/common/home');
-  return data;
+  return data.data;
 };
 
 export default getLecueBook;

src/Home/components/LecueBookList/LecueBookList.style.ts

@@ -45,7 +45,7 @@ export const LecueBook = styled.li`
   cursor: pointer;
 `;
 
-export const IconWrapper = styled.div`
+export const IconWrapper = styled.button`
   position: absolute;
   top: 0;
   left: 0.1rem;

src/Home/components/LecueBookList/index.tsx

@@ -1,6 +1,9 @@
 import { useNavigate } from 'react-router';
 
 import { IcHomeFavorite } from '../../../assets';
+import useDeleteFavorite from '../../../libs/hooks/useDeleteFavorite';
+import useGetFavorite from '../../../libs/hooks/useGetFavorite';
+import useGetLecueBook from '../../hooks/useGetLecueBook';
 import NoBookmarkList from '../NoBookmarkList';
 import * as S from './LecueBookList.style';
 
@@ -13,50 +16,45 @@ interface BookProps {
 
 interface LecueBookListProps {
   title: string;
-  data?: BookProps[];
 }
 
-function LecueBookList({ title, data }: LecueBookListProps) {
+function LecueBookList({ title }: LecueBookListProps) {
   const navigate = useNavigate();
+  const deleteMutation = useDeleteFavorite();
   const isBookmark = title.includes('즐겨찾기');
+  const { data } = isBookmark ? useGetFavorite() : useGetLecueBook();
 
   const handleClickLecueBook = (uuid: string) => {
     navigate(`/lecue-book/${uuid}`);
   };
 
   const handleClickFavoriteIcon = (bookId: number) => {
-    // api가 나오면 서버 통신 코드로 변경할 예정! (현재는 임시로 구현해둠)
-    const clickedBookMark = document.getElementById(`${bookId}`);
-
-    if (clickedBookMark) {
-      clickedBookMark.style.display = 'none';
-    }
+    deleteMutation.mutate(bookId);
   };
 
   return (
     <S.LecueBookListWrapper>
       <S.Title>{title}</S.Title>
-      {data ? (
+      {data && data.length !== 0 ? (
         <S.LecueBookList>
-          {data &&
-            data.map((book: BookProps) => (
-              <S.LecueBook key={book.bookId} id={`${book.bookId}`}>
-                {isBookmark && (
-                  <S.IconWrapper
-                    onClick={() => handleClickFavoriteIcon(book.bookId)}
-                  >
-                    <IcHomeFavorite />
-                  </S.IconWrapper>
-                )}
+          {data.map((book: BookProps) => (
+            <S.LecueBook key={book.bookId} id={`${book.bookId}`}>
+              {isBookmark && (
+                <S.IconWrapper
+                  onClick={() => handleClickFavoriteIcon(book.bookId)}
+                >
+                  <IcHomeFavorite />
+                </S.IconWrapper>
+              )}
 
-                <S.BookImage
-                  src={book.favoriteImage}
-                  alt="레큐북-이미지"
-                  onClick={() => handleClickLecueBook(book.bookUuid)}
-                />
-                <S.BookTitle>{book.favoriteName}</S.BookTitle>
-              </S.LecueBook>
-            ))}
+              <S.BookImage
+                src={book.favoriteImage}
+                alt="레큐북-이미지"
+                onClick={() => handleClickLecueBook(book.bookUuid)}
+              />
+              <S.BookTitle>{book.favoriteName}</S.BookTitle>
+            </S.LecueBook>
+          ))}
         </S.LecueBookList>
       ) : (
         <NoBookmarkList />

src/Home/components/NavigateLecueBook/index.tsx

@@ -10,11 +10,9 @@ function NavigateLecueBook() {
   const [modalOn, setModalOn] = useState(false);
 
   const handleClickIcProfile = () => {
-    if (localStorage.getItem('token')) {
-      navigate('/mypage');
-    } else {
-      setModalOn(true);
-    }
+    const token = localStorage.getItem('token');
+
+    navigate('/mypage', { state: token });
   };
 
   const handleClickNavBtn = () => {

src/Home/hooks/useGetLecueBook.ts

@@ -6,14 +6,14 @@ import getLecueBook from '../api/getLecueBook';
 const useGetLecueBook = () => {
   const navigate = useNavigate();
 
-  const { isLoading, data } = useQuery({
+  const { isLoading: isLoadingLecueBook, data: lecueBook } = useQuery({
     queryKey: ['get-lecue-book'],
     queryFn: () => getLecueBook(),
     onError: () => navigate('/error'),
     refetchOnWindowFocus: false,
   });
 
-  return { isLoading, data };
+  return { isLoading: isLoadingLecueBook, data: lecueBook };
 };
 
 export default useGetLecueBook;

src/Home/page/index.tsx

@@ -9,20 +9,20 @@ import * as S from './Home.style';
 
 function Home({ handleStep }: StepProps) {
   const token = localStorage.getItem('token');
-  const { isLoading, data } = useGetLecueBook();
+  const { isLoading: isLoadingLecueBook } = useGetLecueBook();
 
   useEffect(() => {
     handleStep(1);
   }, []);
 
-  return isLoading ? (
+  return isLoadingLecueBook ? (
     <LoadingPage />
   ) : (
     <S.Wrapper>
       <NavigateLecueBook />
-      {/* 서버 api 나오면 즐겨찾기 data props로 넘겨주는 부분 추가할 예정 */}
+
       {token && <LecueBookList title="즐겨찾기한 레큐북" />}
-      <LecueBookList title="인기 레큐북 구경하기" data={data.data} />
+      <LecueBookList title="인기 레큐북 구경하기" />
     </S.Wrapper>
   );
 }

src/libs/api/deleteFavorite.ts

@@ -0,0 +1,16 @@
+import { api } from '../../libs/api';
+
+const deleteFavorite = async (bookId: number) => {
+  const token = localStorage.getItem('token');
+  const { data } = await api.delete('/api/favorite', {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    data: { bookId: bookId },
+  });
+
+  return data;
+};
+
+export default deleteFavorite;

src/libs/api/getFavorite.ts

@@ -0,0 +1,14 @@
+import { api } from '../../libs/api';
+
+const getFavorite = async () => {
+  const token = localStorage.getItem('token');
+  const { data } = await api.get('/api/favorite', {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return data.data;
+};
+
+export default getFavorite;

src/libs/hooks/useDeleteFavorite.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+import deleteFavorite from '../api/deleteFavorite';
+
+const useDeleteFavorite = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: (bookId: number) => {
+      return deleteFavorite(bookId);
+    },
+    onError: () => navigate('/error'),
+    onSuccess: () => {
+      queryClient.refetchQueries(['get-favorite'], { exact: true });
+    },
+  });
+  return mutation;
+};
+
+export default useDeleteFavorite;

src/libs/hooks/useGetFavorite.ts

@@ -0,0 +1,19 @@
+import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+import getFavorite from '../api/getFavorite';
+
+const useGetFavorite = () => {
+  const navigate = useNavigate();
+
+  const { isLoading: isLoadingFavorite, data: favorite } = useQuery({
+    queryKey: ['get-favorite'],
+    queryFn: () => getFavorite(),
+    onError: () => navigate('/error'),
+    refetchOnWindowFocus: false,
+  });
+
+  return { isLoading: isLoadingFavorite, data: favorite };
+};
+
+export default useGetFavorite;