feature: 평면도 요소 추가하여 grid 설정

src/asset/css/BookLocation.css

@@ -1,56 +1,91 @@
 .book-location__map {
   height: 100%;
   background-color: #f4f4f4;
-  padding: 0.3rem;
+  padding: 0 1rem 0 1rem;
   display: grid;
-  grid-template-columns: repeat(5, 0.5fr);
-  grid-template-rows: repeat(7, 1fr);
-  grid-gap: 0.2rem;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(10, 1fr);
+  grid-gap: 0.5rem;
   grid-template-areas:
-    ". . . shelf-1 shelf-1"
-    "saseo saseo saseo shelf-1 shelf-1"
-    ". . . shelf-2 shelf-2"
-    ". . . shelf-2 shelf-2"
-    "shelf-5 . . shelf-3 shelf-3"
-    "shelf-5 . . shelf-3 shelf-3"
-    "shelf-4 shelf-4 shelf-4 shelf-4 shelf-4";
+    "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: #c9c6c6;
+  background-color: #e9e9e9;
   color: #5f3f36;
 }
 
-.book-location__map > .highlight {
-  background-color: #5f3f36;
+.book-location__map > .map-highlight {
+  background-color: #736757;
   color: white;
 }
 
-.book-location__map > .saseo {
-  grid-area: saseo;
+.book-location__map > .map-shelf {
+  font-weight: bold;
+  font-size: 1.5rem;
 }
 
-.book-location__map > .shelf-1 {
+.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 > .shelf-2 {
+.book-location__map > .map-shelf-2 {
   grid-area: shelf-2;
 }
 
-.book-location__map > .shelf-3 {
+.book-location__map > .map-shelf-3 {
   grid-area: shelf-3;
 }
 
-.book-location__map > .shelf-4 {
+.book-location__map > .map-shelf-4 {
   grid-area: shelf-4;
 }
 
-.book-location__map > .shelf-5 {
+.book-location__map > .map-shelf-5 {
   grid-area: shelf-5;
 }

src/component/book/location/BookLocationMap.tsx

@@ -1,20 +1,28 @@
+import { callSignAtShelf } from "~/util/bookShelfLocation";
+
 type Props = {
   highlightIndex: number;
 };
 
 const BookLocationMap = ({ highlightIndex }: Props) => {
-  const shelves = ["1", "2", "3", "4", "5"];
-
+  const shelves = callSignAtShelf;
   return (
     <div className="book-location__map">
-      <div className="saseo">사서</div>
+      <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
-          className={`shelf-${index + 1} ${
-            highlightIndex === index ? "highlight" : ""
+          key={index}
+          className={`map-shelf map-shelf-${index + 1} ${
+            highlightIndex === index ? "map-highlight" : ""
           }`}
         >
-          {shelf}
+          {shelf.length > 5 ? "비개발 도서" : shelf.join(" ")}
         </div>
       ))}
     </div>

src/util/bookShelfLocation.ts

@@ -15,7 +15,7 @@ const lowerCaseRange = Array.from(
   (_, i) => String.fromCharCode("b".charCodeAt(0) + i),
 );
 
-const callSignAtShelf = [
+export const callSignAtShelf = [
   ["A", "D", "F", "I"],
   ["B", "E", "G", "N", "J"],
   ["K", "H", "O"],