Merge pull request #277 from Team-Lecue/SP1/Home

오랜만에 데브데브 머지 !!!!!

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

@@ -25,11 +25,11 @@ export const Title = styled.header`
 
 export const LecueBookList = styled.section`
   display: grid;
-  gap: 2.2rem;
+  gap: 2em 2.4rem;
   grid-template-columns: repeat(3, 1fr);
 
   width: 100%;
-  padding: 3rem 1.6rem 2.2rem;
+  padding: 3rem 1.6rem;
 `;
 
 export const LecueBook = styled.li`
@@ -38,13 +38,19 @@ export const LecueBook = styled.li`
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  position: relative;
 
   width: 100%;
-  height: 14rem;
 
   cursor: pointer;
 `;
 
+export const IconWrapper = styled.button`
+  position: absolute;
+  top: 0;
+  left: 0.1rem;
+`;
+
 export const BookImage = styled.img`
   width: 9.8rem;
   height: 9.8rem;

src/Home/components/LecueBookList/index.tsx

@@ -1,8 +1,10 @@
-// import { useNavigate } from 'react-router-dom';
-
-import { useNavigate } from 'react-router-dom';
+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';
 
 interface BookProps {
@@ -12,29 +14,51 @@ interface BookProps {
   favoriteName: string;
 }
 
-function LecueBookList() {
-  const { data } = useGetLecueBook();
+interface LecueBookListProps {
+  title: string;
+}
+
+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) => {
+    deleteMutation.mutate(bookId);
+  };
+
   return (
     <S.LecueBookListWrapper>
-      <S.Title>인기 레큐북 구경하기</S.Title>
-      <S.LecueBookList>
-        {data &&
-          data.data.map((book: BookProps) => (
-            <S.LecueBook
-              key={book.bookId}
-              onClick={() => handleClickLecueBook(book.bookUuid)}
-            >
-              <S.BookImage src={book.favoriteImage} alt="레큐북-이미지" />
+      <S.Title>{title}</S.Title>
+      {data && data.length !== 0 ? (
+        <S.LecueBookList>
+          {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.LecueBookList>
+        </S.LecueBookList>
+      ) : (
+        <NoBookmarkList />
+      )}
     </S.LecueBookListWrapper>
   );
 }

src/Home/components/NavigateLecueBook/NavigateLecueBook.style.ts

@@ -8,32 +8,30 @@ export const MainWrapper = styled.div`
 
 export const IconWrapper = styled.section`
   display: flex;
-  gap: 15.7rem;
-  justify-content: space-between;
+
+  /* 바뀔 수 있을 것 같으니 디자인 나오면 다시 확인해보기 ! */
+  gap: 16rem;
   align-items: baseline;
 
   width: 100%;
-  padding: 6rem 1.6rem 5rem;
+  margin: 4rem 1.8rem 3.5rem 1.6rem;
 `;
 
-export const ButtonWrapper = styled.section`
-  display: flex;
-  gap: 1rem;
-  flex-direction: column;
+export const DummyGraphic = styled.div`
+  width: 37.5rem;
+  height: 20rem;
 
-  padding: 0 9.5rem 4.9rem 0;
+  background-color: ${({ theme }) => theme.colors.LG};
 `;
 
-export const Button = styled.button<{ variant?: boolean }>`
-  width: 28rem;
-  height: 6.4rem;
+export const Button = styled.button`
+  padding: 2.1rem 9.4rem 2.2rem 8.8rem;
+  margin: 2rem 0 4rem;
 
   border: 0.1rem solid ${({ theme }) => theme.colors.BG};
   border-radius: 0 0.2rem 0.2rem 0;
   border-left: none;
-  background-color: ${({ theme, variant }) =>
-    variant ? theme.colors.white : theme.colors.BG};
-  color: ${({ theme, variant }) =>
-    variant ? theme.colors.BG : theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.BG};
+  color: ${({ theme }) => theme.colors.white};
   ${({ theme }) => theme.fonts.Title1_SB_16}
 `;

src/Home/components/NavigateLecueBook/index.tsx

@@ -1,18 +1,23 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { IcNotice, ImgLogoLecue } from '../../../assets';
+import { IcProfile, ImgLogoLecue } from '../../../assets';
 import CommonModal from '../../../components/common/Modal/CommonModal';
 import * as S from './NavigateLecueBook.style';
 
 function NavigateLecueBook() {
-  const NAVIGATE_CATEGORY = ['레큐북 만들기', '내 기록 보기'];
   const navigate = useNavigate();
   const [modalOn, setModalOn] = useState(false);
 
-  const handleClickNavBtn = (idx: number) => {
+  const handleClickIcProfile = () => {
+    const token = localStorage.getItem('token');
+
+    navigate('/mypage', { state: token });
+  };
+
+  const handleClickNavBtn = () => {
     if (localStorage.getItem('token')) {
-      idx === 0 ? navigate('/target') : navigate('/mypage');
+      navigate('/target');
     } else {
       setModalOn(true);
     }
@@ -22,29 +27,16 @@ function NavigateLecueBook() {
     <S.MainWrapper>
       <S.IconWrapper>
         <ImgLogoLecue />
-        <a
-          href="https://rileybyeon.notion.site/TEAM-LECUE-b7801fe345544442938d3e54980032e4?pvs=4"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <IcNotice />
-        </a>
+
+        <IcProfile onClick={handleClickIcProfile} />
       </S.IconWrapper>
 
-      <S.ButtonWrapper>
-        {NAVIGATE_CATEGORY.map((category, idx) => {
-          return (
-            <S.Button
-              type="button"
-              key={category}
-              variant={idx === 0}
-              onClick={() => handleClickNavBtn(idx)}
-            >
-              {category}
-            </S.Button>
-          );
-        })}
-      </S.ButtonWrapper>
+      {/* 임시로 넣은 것! 추후 새로운 그래픽으로 수정 */}
+      <S.DummyGraphic></S.DummyGraphic>
+
+      <S.Button type="button" onClick={handleClickNavBtn}>
+        레큐북 만들기
+      </S.Button>
 
       {modalOn && (
         <CommonModal

src/Home/components/NoBookmarkList/NoBookmarkList.style.ts

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+export const ListWrapper = styled.section`
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  padding: 3rem 0;
+`;
+
+export const DescriptionWrapper = styled.article`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const Description = styled.p`
+  color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Body2_M_14};
+`;
+
+export const NavigateBtn = styled.button`
+  padding: 0.8rem 2.8rem;
+
+  border: 0.1rem solid ${({ theme }) => theme.colors.BG};
+  border-radius: 0.6rem;
+  background-color: ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Body4_SB_14};
+`;

src/Home/components/NoBookmarkList/index.tsx

@@ -0,0 +1,28 @@
+import { useNavigate } from 'react-router';
+
+import * as S from './NoBookmarkList.style';
+
+const NoBookmarkList = () => {
+  const navigate = useNavigate();
+
+  const handleClickNavigateBtn = () => {
+    navigate('/mypage');
+  };
+
+  return (
+    <S.ListWrapper>
+      <S.DescriptionWrapper>
+        <S.Description>아직 즐겨찾기한 레큐북이 없어요.</S.Description>
+        <S.Description>
+          자주 보고 싶은 레큐북을 즐겨찾기 해보세요.
+        </S.Description>
+      </S.DescriptionWrapper>
+
+      <S.NavigateBtn type="button" onClick={handleClickNavigateBtn}>
+        레큐북 보러가기
+      </S.NavigateBtn>
+    </S.ListWrapper>
+  );
+};
+
+export default NoBookmarkList;

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

@@ -8,18 +8,21 @@ import useGetLecueBook from '../hooks/useGetLecueBook';
 import * as S from './Home.style';
 
 function Home({ handleStep }: StepProps) {
-  const { isLoading } = useGetLecueBook();
+  const token = localStorage.getItem('token');
+  const { isLoading: isLoadingLecueBook } = useGetLecueBook();
 
   useEffect(() => {
     handleStep(1);
   }, []);
 
-  return isLoading ? (
+  return isLoadingLecueBook ? (
     <LoadingPage />
   ) : (
     <S.Wrapper>
       <NavigateLecueBook />
-      <LecueBookList />
+
+      {token && <LecueBookList title="즐겨찾기한 레큐북" />}
+      <LecueBookList title="인기 레큐북 구경하기" />
     </S.Wrapper>
   );
 }