Merge pull request #636 from jiphyeonjeon-42/632-feature-책-위치-보여주기

feat: 도서 위치 보여주기 및 집현전 평면도

src/asset/css/BookDetail.css

@@ -37,9 +37,11 @@
 
 .book-detail__photo {
   margin: 0 0rem 1rem 0;
+  width: 34.8rem;
+  height: 51.1rem;
 }
 
-.book-detail__photo img {
+.book-detail__photo-location {
   width: 34.8rem;
   height: 51.1rem;
 }
@@ -107,39 +109,58 @@
   font-weight: bold;
 }
 
-.book-likes {
-  display: flex;
-  justify-content: center;
-}
-
-.like_button_box {
-  font-size: 16px;
-}
-
 .like_button {
   background: none;
-  padding: 0;
+  padding: 1rem;
   border: 0;
   cursor: pointer;
+  font-size: 1.6rem;
+  border: solid 0.1rem #c0bebe;
+  border-radius: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.like_button:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .like__icon {
   width: 1.5rem;
   margin-right: 0.5rem;
 }
 
+.book-detail_buttons {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.location_button {
+  background: none;
+  padding: 1rem;
+  border: 0;
+  cursor: pointer;
+  font-size: 1.6rem;
+  border: solid 0.1rem #c0bebe;
+  border-radius: 1.5rem;
+}
+
 @media screen and (min-width: 768px) and (max-width: 1200px) {
   .book-detail {
     width: 55%;
   }
 
-  .book-detail__photo img {
+  .book-detail__photo-location {
     width: 32rem;
     height: 47rem;
   }
 
   .book-detail__photo {
     margin: 0 0 1rem 0;
+    width: 32rem;
+    height: 47rem;
   }
 
   .book-detail__info-value {
@@ -192,11 +213,9 @@
 
   .book-detail__photo {
     margin: 0 auto 1rem auto !important;
-    width: 80%;
-    height: 25%;
   }
 
-  .book-detail__photo img {
+  .book-detail__photo-location {
     width: 100%;
     height: 100%;
   }

src/asset/css/BookLocation.css

@@ -0,0 +1,91 @@
+.book-location__map {
+  height: 100%;
+  background-color: #f4f4f4;
+  padding: 0 1rem 0 1rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(10, 1fr);
+  grid-gap: 0.5rem;
+  grid-template-areas:
+    "cluster . . shelf-1"
+    "cluster selfservice . shelf-1"
+    "cluster entrance . return"
+    "cluster sofa-1 . shelf-2"
+    "cluster sofa-1 . shelf-2"
+    "cluster shelf-5 . sofa-3"
+    "cluster shelf-5 . sofa-3"
+    "cluster sofa-2 . shelf-3"
+    "cluster sofa-2 . shelf-3"
+    "cluster shelf-4 shelf-4 shelf-4";
+}
+
+.book-location__map > div {
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+  background-color: #e9e9e9;
+  color: #5f3f36;
+}
+
+.book-location__map > .map-highlight {
+  background-color: #736757;
+  color: white;
+}
+
+.book-location__map > .map-shelf {
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.book-location__map > .map-selfservice {
+  grid-area: selfservice;
+}
+
+.book-location__map > .map-entrance {
+  grid-area: entrance;
+  background-color: #f4f4f4;
+}
+
+.book-location__map > .map-cluster {
+  grid-area: cluster;
+  background-color: #f4f4f4;
+}
+
+.book-location__map > .map-return {
+  grid-area: return;
+}
+
+.book-location__map > .map-sofa-1 {
+  grid-area: sofa-1;
+}
+
+.book-location__map > .map-sofa-2 {
+  grid-area: sofa-2;
+}
+
+.book-location__map > .map-sofa-3 {
+  grid-area: sofa-3;
+}
+
+.book-location__map > .map-shelf-1 {
+  grid-area: shelf-1;
+}
+
+.book-location__map > .map-shelf-2 {
+  grid-area: shelf-2;
+}
+
+.book-location__map > .map-shelf-3 {
+  grid-area: shelf-3;
+}
+
+.book-location__map > .map-shelf-4 {
+  grid-area: shelf-4;
+}
+
+.book-location__map > .map-shelf-5 {
+  grid-area: shelf-5;
+}

src/component/book/BookDetail.tsx

@@ -1,12 +1,14 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import { useGetBooksInfoId } from "~/api/books/useGetBooksInfoId";
 import BookReservation from "~/component/book/BookReservation";
 import BookStatus from "~/component/book/BookStatus";
+import BookLocation from "./location/BookLocation";
 import Review from "~/component/book/review/Review";
 import Banner from "~/component/utils/Banner";
 import Image from "~/component/utils/Image";
 import Like from "~/component/book/like/Like";
+import LocationButton from "~/component/book/location/LocationButton";
 import TagWrapper from "~/component/book/tag/TagWrapper";
 import "~/asset/css/BookDetail.css";
 import { Book } from "~/type";
@@ -30,7 +32,7 @@ const BookDetail = () => {
   const myRef = useRef<HTMLDivElement>(null);
   const recentScrollPosition = useRef(0);
   const location = useLocation();
-
+  const [isBookLocationVisible, setIsBookLocationVisible] = useState(false);
   useEffect(() => {
     recentScrollPosition.current = window.scrollY;
     myRef.current?.scrollIntoView();
@@ -53,6 +55,10 @@ const BookDetail = () => {
     );
   }
 
+  const handleBookLocationVisible = () => {
+    setIsBookLocationVisible(!isBookLocationVisible);
+  };
+
   const isAvailableReservation = () => {
     const { books } = bookDetailInfo;
     const noProblemBooksCnt = books?.filter(book => book.status === 0).length;
@@ -83,10 +89,22 @@ const BookDetail = () => {
         <div className="book-content">
           <div className="book-detail__photo-likes">
             <div className="book-detail__photo">
-              <Image src={bookDetailInfo.image} alt={bookDetailInfo.title} />
+              {isBookLocationVisible ? (
+                <BookLocation bookDetailInfo={bookDetailInfo} />
+              ) : (
+                <Image
+                  className="book-detail__photo-location"
+                  src={bookDetailInfo.image}
+                  alt={bookDetailInfo.title}
+                />
+              )}
             </div>
-            <div className="book-likes">
+            <div className="book-detail_buttons">
               <Like bookInfoId={id} />
+              <LocationButton
+                isBookLocationVisible={isBookLocationVisible}
+                onToggleVisibility={handleBookLocationVisible}
+              />
             </div>
           </div>
           <div className="book-detail">

src/component/book/like/Like.tsx

@@ -1,6 +1,5 @@
 import { useGetLike, usePostLike, useDeleteLike } from "~/api/like";
 import { usePermission } from "~/hook/usePermission";
-
 import Image from "~/component/utils/Image";
 import FilledLike from "~/asset/img/like_filled.svg";
 import EmptyLike from "~/asset/img/like_empty.svg";
@@ -11,7 +10,6 @@ type Props = {
 
 const Like = ({ bookInfoId }: Props) => {
   const { is42Authenticated } = usePermission();
-
   const { like, setLike } = useGetLike({ bookInfoId: +bookInfoId });
   const { setBookInfoId: requestdelete } = useDeleteLike({ setLike });
   const { setBookInfoId: requestPost } = usePostLike({ setLike });
@@ -24,21 +22,22 @@ const Like = ({ bookInfoId }: Props) => {
   };
 
   return (
-    <div className="like_button_box">
-      {is42Authenticated ? (
-        <button
-          className="like_button"
-          type="button"
-          onClick={like.isLiked ? deleteLike : postLike}
-        >
+    <div>
+      <button
+        className="like_button"
+        type="button"
+        onClick={like.isLiked ? deleteLike : postLike}
+        disabled={!is42Authenticated}
+      >
+        {is42Authenticated ? (
           <Image
             className="like__icon"
             src={like.isLiked ? FilledLike : EmptyLike}
             alt={like.isLiked ? "liked" : "unliked"}
           />
-        </button>
-      ) : null}
-      {`좋아요 ${like.likeNum}`}
+        ) : null}
+        {`좋아요 ${like.likeNum}`}
+      </button>
     </div>
   );
 };

src/component/book/location/BookLocation.tsx

@@ -0,0 +1,28 @@
+import { BookInfo } from "../../../type";
+import "~/asset/css/BookLocation.css";
+import "~/asset/css/BookDetail.css";
+import { memo } from "react";
+import { findBookShelfIndex } from "~/util/bookShelfLocation";
+import BookLocationMap from "~/component/book/location/BookLocationMap";
+
+type BookLocationProps = {
+  bookDetailInfo: BookInfo;
+};
+
+const BookLocation = memo(({ bookDetailInfo }: BookLocationProps) => {
+  const { books } = bookDetailInfo;
+
+  if (books === undefined) {
+    return null;
+  }
+
+  const callSignFirstChar = books[0].callSign[0].at(0) ?? "";
+  const bookShelfIndex = findBookShelfIndex(callSignFirstChar);
+  return (
+    <div className="book-detail__photo-location">
+      <BookLocationMap highlightIndex={bookShelfIndex} />
+    </div>
+  );
+});
+
+export default BookLocation;

src/component/book/location/BookLocationMap.tsx

@@ -0,0 +1,32 @@
+import { callSignAtShelf } from "~/util/bookShelfLocation";
+
+type Props = {
+  highlightIndex: number;
+};
+
+const BookLocationMap = ({ highlightIndex }: Props) => {
+  const shelves = callSignAtShelf;
+  return (
+    <div className="book-location__map">
+      <div className="map-selfservice">무인대출/반납</div>
+      <div className="map-sofa-1">소파</div>
+      <div className="map-sofa-2">소파</div>
+      <div className="map-sofa-3">소파</div>
+      <div className="map-entrance">입구</div>
+      <div className="map-return">반납서가</div>
+      <div className="map-cluster">5클러스터</div>
+      {shelves.map((shelf, index) => (
+        <div
+          key={index}
+          className={`map-shelf map-shelf-${index + 1} ${
+            highlightIndex === index ? "map-highlight" : ""
+          }`}
+        >
+          {shelf.length > 5 ? "비개발 도서" : shelf.join(" ")}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BookLocationMap;

src/component/book/location/LocationButton.tsx

@@ -0,0 +1,23 @@
+type Props = {
+  isBookLocationVisible: boolean;
+  onToggleVisibility: () => void;
+};
+
+const LocationButton = ({
+  isBookLocationVisible,
+  onToggleVisibility,
+}: Props) => {
+  return (
+    <div>
+      <button
+        className="location_button"
+        type="button"
+        onClick={onToggleVisibility}
+      >
+        {isBookLocationVisible ? "표지 보기" : "도서 위치"}
+      </button>
+    </div>
+  );
+};
+
+export default LocationButton;