From 128efd485d917b98cbdb735a7f4243778dde2791 Mon Sep 17 00:00:00 2001
From: nalsae <nalsae0207@naver.com>
Date: Tue, 12 Dec 2023 15:53:45 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20=E2=9C=A8=20Feat=20:=20=EC=A0=95?=
 =?UTF-8?q?=EC=9B=90=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=B0=A9?=
 =?UTF-8?q?=EB=AA=85=EB=A1=9D=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?(#352)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/garden/[id]/page.tsx | 34 +++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/client/src/app/garden/[id]/page.tsx b/client/src/app/garden/[id]/page.tsx
index cfccfd5c..5f82af07 100644
--- a/client/src/app/garden/[id]/page.tsx
+++ b/client/src/app/garden/[id]/page.tsx
@@ -5,11 +5,14 @@ import useUserStore from '@/stores/userStore';
 
 import useSyncGarden from '@/hooks/useSyncGarden';
 
-import LoadingNotice from '@/components/common/LoadingNotice';
-import ErrorNotice from '@/components/common/ErrorNotice';
-import ShareModal from '@/components/common/ShareModal';
-import ShareButton from '@/components/common/ShareButton';
-import Footer from '@/components/common/Footer';
+import {
+  CommonButton,
+  ErrorNotice,
+  Footer,
+  LoadingNotice,
+  ShareButton,
+  ShareModal,
+} from '@/components/common';
 import {
   GardenMap,
   GardenSidebar,
@@ -19,6 +22,7 @@ import {
   PurchaseInfoModal,
   PurchaseModal,
   EmptyInventoryModal,
+  GuestbookModal,
 } from '@/components/garden';
 
 interface GardenProps {
@@ -26,7 +30,7 @@ interface GardenProps {
 }
 
 export default function Garden({ params }: GardenProps) {
-  const { isOpen, type } = useModalStore();
+  const { isOpen, type, changeType, open } = useModalStore();
   const { userId } = useUserStore();
 
   const { isLoading, isError } = useSyncGarden(params.id);
@@ -39,10 +43,16 @@ export default function Garden({ params }: GardenProps) {
     if (type === 'purchase') return <PurchaseModal />;
     if (type === 'emptyInventory') return <EmptyInventoryModal />;
     if (type === 'share') return <ShareModal location="garden" />;
+    if (type === 'guestbook') return <GuestbookModal isOwner={true} />;
   };
 
   const isOwner = userId === params.id;
 
+  const handleGuestbook = () => {
+    changeType('guestbook');
+    open();
+  };
+
   return (
     <>
       <div className="h-auto min-h-full pb-[343px] mx-auto">
@@ -64,11 +74,17 @@ export default function Garden({ params }: GardenProps) {
             </>
           )}
         </div>
-        <div className="pt-6  text-center">
-          <ShareButton location="garden" position="bottom" />
-        </div>
+        {!isLoading && !isError && (
+          <div className="flex justify-center gap-2 pt-6 text-center">
+            <ShareButton location="garden" position="bottom" />
+            <CommonButton type="button" size="md" onClick={handleGuestbook}>
+              방명록
+            </CommonButton>
+          </div>
+        )}
         {isOpen && renderModal(type)}
       </div>
+
       <Footer />
     </>
   );