From 6c1a037e214056bb3223908e2faa79c560962ad3 Mon Sep 17 00:00:00 2001
From: choihooo <hochoi8621@naver.com>
Date: Mon, 29 Jul 2024 17:33:56 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Book.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/Book.tsx b/src/components/Book.tsx
index 08155de..a995490 100644
--- a/src/components/Book.tsx
+++ b/src/components/Book.tsx
@@ -40,11 +40,22 @@ interface PageProps {
 }
 
 const Page = forwardRef<HTMLDivElement, PageProps>((props, ref) => {
+  // 이미지의 소스 결정
   const imageSource = props.number % 2 === 0 ? 'images/tmpRight.png' : 'images/tmpLeft.png';
 
+  // 페이지의 왼쪽인지 오른쪽인지 결정
+  const isLeftPage = props.number % 2 !== 0;
+
+  // 조건에 따라 그림자 방향과 스타일을 설정
+  const shadowClass = isLeftPage ? 'shadow-[10px_0_20px_rgba(0,0,0,0.5)]' : 'shadow-[-10px_0_20px_rgba(0,0,0,0.5)]';
+
   return (
-    <div className="bg-gray-100" ref={ref}>
-      <img src={imageSource} alt="" className="w-[600px] h-[700px] fixed -z-10 rounded-l-sm rounded-r-sm" />
+    <div className="relative flex items-center justify-center bg-gray-100" ref={ref} style={{ height: '100vh' }}>
+      <img
+        src={imageSource}
+        alt=""
+        className={`w-[600px] h-[700px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -z-10 rounded-l-sm rounded-r-sm ${shadowClass}`}
+      />
       <div className="z-10">{props.children}</div>
     </div>
   );
@@ -262,31 +273,24 @@ const Book = forwardRef((props: BookProps, ref) => {
         <div className="fixed flex flex-col left-[5%] top-[15%] animate-slideInFromLeft z-50">
           <button
             onClick={() => handleCloseModalAndMovePage(1)}
-            className={`bg-cover w-[100px] h-[40px] mb-3 ${
-              (curPage === 1 || curPage === 2) ? 'bg-[url("assets/images/CountryIndex.png")]' : 'bg-[url("assets/images/FiledIndex.png")]'
-            }`}
+            className="bg-[url('assets/images/CountryIndex.png')] bg-cover w-[100px] h-[40px] mb-3"
           >
             나라별
           </button>
           <button
             onClick={() => handleCloseModalAndMovePage(3)}
-            className={`bg-cover w-[100px] h-[40px] mb-3 ${
-              (curPage === 3 || curPage === 4) ? 'bg-[url("assets/images/CountryIndex.png")]' : 'bg-[url("assets/images/FiledIndex.png")]'
-            }`}
+            className="bg-[url('assets/images/FiledIndex.png')] bg-cover w-[100px] h-[40px] mb-3"
           >
             분야별
           </button>
           <button
-            onClick={handleShowGreatList}
-            className={`bg-cover w-[100px] h-[40px] ${
-              (curPage === 5 || curPage === 6) ? 'bg-[url("assets/images/CountryIndex.png")]' : 'bg-[url("assets/images/FiledIndex.png")]'
-            }`}
+            onClick={handleShowGreatList} // 버튼 클릭 시 페이지 이동 후 모달 표시
+            className="bg-[url('assets/images/FiledIndex.png')] bg-cover w-[100px] h-[40px]"
           >
             전체
           </button>
         </div>
       )}
-
       {/* <div className="z-10">
         <button onClick={prevPage}>이전 페이지</button>
         <button onClick={nextPage}>다음 페이지</button>