fix: 책추가 버튼 활성화 조건 수정

components/bookcase/NoCards.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 
 import { BookcasePathKey } from "../../types/bookcase";
-import Empty from "./cardSection/Empty";
+import { Empty } from "../common";
 
 interface NoCardsProps {
   navIndex: BookcasePathKey;
@@ -11,7 +11,10 @@ export default function NoCards(props: NoCardsProps) {
 
   return (
     <StDefaultSection>
-      <Empty navIndex={navIndex} />
+      <Empty
+        text={navIndex === "/book" ? "아직 읽은 책이 없어요." : "이 단계의 책이 없어요."}
+        buttonVisible={navIndex === "/book"}
+      />
     </StDefaultSection>
   );
 }

components/bookcase/index.ts

@@ -10,6 +10,5 @@ export { default as StickyHeader } from "./addBook/StickyHeader";
 export { default as Cards } from "./Cards";
 export { default as AddBookCard } from "./cardSection/AddBookCard";
 export { default as BookCard } from "./cardSection/BookCard";
-export { default as Empty } from "./cardSection/Empty";
 export { default as Navigation } from "./Navigation";
 export { default as NoCards } from "./NoCards";

components/common/Empty.tsx

@@ -1,30 +1,32 @@
 import styled from "@emotion/styled";
 import Link from "next/link";
-import { useRouter } from "next/router";
 
 import { ImgEmptyBook } from "../../public/assets/images";
 import { DefaultButton } from "./styled/Button";
 import { ImageWrapper } from "./styled/Img";
-export default function Empty() {
-  const { asPath } = useRouter();
 
+interface EmptyProps {
+  text: string;
+  buttonVisible: boolean;
+}
+
+export default function Empty({ text, buttonVisible }: EmptyProps) {
   return (
     <StArticle>
       <StImg thumbnail={ImgEmptyBook.src} />
-      <StH3>{asPath === "/bookcase" || asPath === "/main" ? "아직 읽은 책이 없어요." : "이 단계의 책이 없어요."}</StH3>
+      <StH3>{text}</StH3>
 
       <StParagraph>
         북스테어즈만의 독서법을 통해
         <br /> 지식을 얻고 독서의 매력을 느껴보세요
       </StParagraph>
-      {asPath === "/bookcase" ||
-        (asPath === "/main" && (
-          <StAddBookBtn>
-            <Link href="/bookcase/add-book">
-              <StLink>+ 책 추가</StLink>
-            </Link>
-          </StAddBookBtn>
-        ))}
+      {buttonVisible && (
+        <StAddBookBtn>
+          <Link href="/bookcase/add-book">
+            <StLink>+ 책 추가</StLink>
+          </Link>
+        </StAddBookBtn>
+      )}
     </StArticle>
   );
 }

components/main/RecentBooks.tsx

@@ -41,7 +41,7 @@ export default function RecentBooks() {
                 <BookCard key={bookInfo.reviewId} bookcaseInfo={bookInfo} navIndex={"/main"} />
               ))
           ) : (
-            <Empty />
+            <Empty text="아직 읽은 책이 없어요." buttonVisible={true} />
           )}
         </StBookWrapper>
       </section>

core/atom/index.ts

@@ -17,11 +17,10 @@ export const isLoginState = atom<boolean>({
 export const navigatingBookInfoState = atom<NavigatingBookInfoState>({
   key: StateType.NAVIGATING_BOOK_INFO_STATE,
   default: {
-    reviewId: "62b5581c1b74916b7a94efc8",
-    title: "북노오오오오오트으으으으",
-    fromUrl: "/main",
-    fromSt: "/main",
-    reviewSt: 2,
+    reviewId: "",
+    title: "",
+    fromUrl: "",
+    fromSt: null,
   },
   effects_UNSTABLE: [persistAtom],
 });

pages/bookcase/index.tsx

@@ -17,7 +17,7 @@ export default function Bookcase() {
   const { fromSt } = navigatingBookInfo;
 
   const { isLogin } = useUser();
-  const [navIndex, setNavIndex] = useState<BookcasePathKey>(fromSt);
+  const [navIndex, setNavIndex] = useState<BookcasePathKey>(fromSt || "/book");
   const { bookcaseInfo, isLoading, isError } = useGetBookInfo(navIndex);
 
   const handleChangeNavIndex = (idx: BookcasePathKey) => {

types/bookcase.ts

@@ -12,7 +12,7 @@ export interface NavigatingBookInfoState {
   reviewId: string;
   title: string;
   fromUrl: string;
-  fromSt: BookcasePathKey;
+  fromSt: BookcasePathKey | null;
   reviewSt?: 2 | 3 | 4;
 }