Merge pull request #334 from Team-Lecue/feature/Detail

dev로 고공

src/CreateBook/components/BookInput/index.tsx

@@ -7,7 +7,7 @@ interface BookInputProps {
 
 function BookInput({ title, changeTitle }: BookInputProps) {
   const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value.length <= 15) {
+    if (e.target.value.length <= 10) {
       changeTitle(e.target.value);
     }
   };
@@ -20,7 +20,7 @@ function BookInput({ title, changeTitle }: BookInputProps) {
           value={title}
           onChange={handleChangeInput}
         />
-        <S.WordCount>({title.length}/15)</S.WordCount>
+        <S.WordCount>({title.length}/10)</S.WordCount>
       </S.InputContainer>
     </S.TitleWrapper>
   );

src/Detail/api/getBookDetailLogin.ts

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

src/Detail/components/BookInfoBox/BookInfoBox.style.ts

@@ -66,8 +66,18 @@ export const BookInfoHeaderItem = styled.p<{ backgroundColor: string }>`
   ${({ theme }) => theme.fonts.E_Caption_R_12};
 `;
 
-export const BookInfoTitle = styled.p<{ backgroundColor: string }>`
+export const BookInfoTitle = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
   margin-top: 0.7rem;
+`;
+
+export const BookInfoTitleText = styled.p<{ backgroundColor: string }>`
+  max-width: 16.3rem;
+
+  overflow: hidden;
 
   color: ${({ theme, backgroundColor }) => {
     backgroundColor;
@@ -78,7 +88,11 @@ export const BookInfoTitle = styled.p<{ backgroundColor: string }>`
         return theme.colors.BG;
     }
   }};
+
   ${({ theme }) => theme.fonts.Head2_SB_18};
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const BookInfoContent = styled.p<{ backgroundColor: string }>`
@@ -96,3 +110,8 @@ export const BookInfoContent = styled.p<{ backgroundColor: string }>`
   }};
   ${({ theme }) => theme.fonts.Body3_R_14};
 `;
+
+export const FavoriteBtn = styled.button`
+  width: 2.2rem;
+  height: 2.2rem;
+`;

src/Detail/components/BookInfoBox/index.tsx

@@ -1,4 +1,13 @@
-import { IcCrown, IcDate } from '../../../assets';
+import { useEffect, useState } from 'react';
+
+import {
+  IcCrown,
+  IcDate,
+  IcZigzagStarOff,
+  IcZigzagStarOn,
+} from '../../../assets';
+import useDeleteFavorite from '../../../libs/hooks/useDeleteFavorite';
+import usePostFavorite from '../../../libs/hooks/usePostFavorite';
 import * as S from './BookInfoBox.style';
 
 interface BookInfoBoxProps {
@@ -8,6 +17,9 @@ interface BookInfoBoxProps {
   title: string;
   description: string;
   bookBackgroundColor: string;
+  bookId: number;
+  isFavorite?: boolean;
+  bookUuid: string;
 }
 
 function BookInfoBox({
@@ -17,7 +29,24 @@ function BookInfoBox({
   title,
   description,
   bookBackgroundColor,
+  isFavorite,
+  bookId,
+  bookUuid,
 }: BookInfoBoxProps) {
+  const token = localStorage.getItem('token');
+  const [isLogin, setIsLogin] = useState(false);
+
+  const postFavoriteMutation = usePostFavorite('lecueBookDetail', bookUuid);
+  const deleteFavoriteMutation = useDeleteFavorite('lecueBookDetail', bookUuid);
+
+  const handleFavoriteBtn = () => {
+    isFavorite ? deleteFavoriteMutation(bookId) : postFavoriteMutation(bookId);
+  };
+
+  useEffect(() => {
+    token ? setIsLogin(true) : setIsLogin(false);
+  }, []);
+
   return (
     <S.BookInfoBoxWrapper backgroundColor={bookBackgroundColor}>
       <S.ProfileImageWrapper>
@@ -38,8 +67,15 @@ function BookInfoBox({
             </S.BookInfoHeaderItem>
           </S.BookInfoHeaderItemWrapper>
         </S.BookInfoHeader>
-        <S.BookInfoTitle backgroundColor={bookBackgroundColor}>
-          {title}
+        <S.BookInfoTitle>
+          <S.BookInfoTitleText backgroundColor={bookBackgroundColor}>
+            {title}
+          </S.BookInfoTitleText>
+          {isLogin && (
+            <S.FavoriteBtn type="button" onClick={handleFavoriteBtn}>
+              {isFavorite ? <IcZigzagStarOn /> : <IcZigzagStarOff />}
+            </S.FavoriteBtn>
+          )}
         </S.BookInfoTitle>
         <S.BookInfoContent backgroundColor={bookBackgroundColor}>
           {description}

src/Detail/hooks/useGetBookDetailLogin.ts

@@ -0,0 +1,22 @@
+import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+import { getBookDetailLogin } from '../api/getBookDetailLogin';
+
+export default function useGetBookDetailLogin(bookUuid: string) {
+  const navigate = useNavigate();
+
+  const { data: bookDetail, isLoading } = useQuery(
+    ['get-bookDetail-login', bookUuid],
+    () => getBookDetailLogin(bookUuid),
+    {
+      onError: () => {
+        navigate('/error');
+      },
+      refetchOnMount: 'always',
+      refetchOnWindowFocus: false,
+    },
+  );
+
+  return { bookDetail, isLoading };
+}

src/Detail/page/DetailPage/index.tsx

@@ -8,13 +8,18 @@ import BookInfoBox from '../../components/BookInfoBox';
 import LecueNoteListContainer from '../../components/LecueNoteListContainer';
 import SlideBanner from '../../components/SlideBanner';
 import useGetBookDetail from '../../hooks/useGetBookDetail';
+import useGetBookDetailLogin from '../../hooks/useGetBookDetailLogin';
 import * as S from './DetailPage.style';
 
 function DetailPage() {
   const [isEditable, setIsEditable] = useState(true);
 
+  const token = window.localStorage.getItem('token');
+
   const { bookUuid } = useParams() as { bookUuid: string };
-  const { bookDetail, isLoading } = useGetBookDetail(bookUuid);
+  const { bookDetail, isLoading } = token
+    ? useGetBookDetailLogin(bookUuid)
+    : useGetBookDetail(bookUuid);
   const postMutation = usePostStickerState(bookUuid);
 
   const setEditableStateFalse = () => {
@@ -29,7 +34,7 @@ function DetailPage() {
       <S.DetailPageBodyWrapper>
         <SlideBanner name={bookDetail.favoriteName} />
         <S.LecueBookContainer>
-          <BookInfoBox {...bookDetail} />
+          <BookInfoBox {...bookDetail} bookUuid={bookUuid} />
           <LecueNoteListContainer
             bookId={bookDetail.bookId}
             bookUuid={bookUuid}

src/History/components/MyLecueBook/index.tsx

@@ -25,7 +25,7 @@ function MyLecueBook(props: LecueBookProps) {
   const navigate = useNavigate();
 
   const deleteBookMutation = useDeleteMyBook();
-  const postFavoriteMutation = usePostFavorite();
+  const postFavoriteMutation = usePostFavorite('mypage');
   const deleteFavoriteMutation = useDeleteFavorite('myLecueBook');
 
   const convertNoteCount = (noteNum: number) => {

src/assets/index.ts

@@ -30,6 +30,8 @@ import IcStar from './icon/ic_star.svg?react';
 import IcStarDefault from './icon/ic_star_default.svg?react';
 import IcWaste from './icon/ic_waste.svg?react';
 import IcX from './icon/ic_x.svg?react';
+import IcZigzagStarOff from './icon/ic_zigzag_star_off.svg?react';
+import IcZigzagStarOn from './icon/ic_zigzag_star_on.svg?react';
 import ImgBook from './img/img_book.svg?react';
 import ImgBookBackgray from './img/img_book_backgray.svg?react';
 import ImgBookOrange from './img/img_book_orange.svg?react';
@@ -98,6 +100,8 @@ export {
   IcStarDefault,
   IcWaste,
   IcX,
+  IcZigzagStarOff,
+  IcZigzagStarOn,
   ImgBook,
   ImgBookBackgray,
   ImgBookOrange,

src/libs/hooks/useDeleteFavorite.ts

@@ -3,11 +3,11 @@ import { useNavigate } from 'react-router-dom';
 
 import deleteFavorite from '../api/deleteFavorite';
 
-const useDeleteFavorite = (state: string) => {
+const useDeleteFavorite = (state: string, bookUuid?: string) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
-  const handleRefetchQueries = (state: string) => {
+  const handleRefetchQueries = (state: string, bookUuid?: string) => {
     switch (state) {
       case 'home':
         queryClient.refetchQueries(['get-favorite'], {
@@ -26,6 +26,12 @@ const useDeleteFavorite = (state: string) => {
           exact: true,
         });
         break;
+
+      case 'lecueBookDetail':
+        queryClient.refetchQueries(['get-bookDetail-login', bookUuid], {
+          exact: true,
+        });
+        break;
     }
   };
 
@@ -35,7 +41,7 @@ const useDeleteFavorite = (state: string) => {
     },
     onError: () => navigate('/error'),
     onSuccess: () => {
-      handleRefetchQueries(state);
+      handleRefetchQueries(state, bookUuid);
     },
   });
   return mutation.mutate;

src/libs/hooks/usePostFavorite.ts

@@ -3,18 +3,33 @@ import { useNavigate } from 'react-router-dom';
 
 import postFavorite from '../api/postFavorite';
 
-const usePostFavorite = () => {
+const usePostFavorite = (state: string, bookUuid?: string) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+
+  const handleRefetchQueries = (state: string, bookUuid?: string) => {
+    switch (state) {
+      case 'mypage':
+        queryClient.refetchQueries(['get-my-lecueBook'], {
+          exact: true,
+        });
+        break;
+
+      case 'lecueBookDetail':
+        queryClient.refetchQueries(['get-bookDetail-login', bookUuid], {
+          exact: true,
+        });
+        break;
+    }
+  };
+
   const mutation = useMutation({
     mutationFn: (bookId: number) => {
       return postFavorite(bookId);
     },
     onError: () => navigate('/error'),
     onSuccess: () => {
-      queryClient.refetchQueries(['get-my-lecueBook'], {
-        exact: true,
-      });
+      handleRefetchQueries(state, bookUuid);
     },
   });
   return mutation.mutate;