[FE] ✨ Feat : 정원 페이지에 방명록 버튼 구현 (codestates-seb#352)

nalsae · Dec 12, 2023 · 128efd4 · 128efd4
1 parent b8c2c91
commit 128efd4
Showing 1 changed file with 25 additions and 9 deletions.
diff --git 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,14 +22,15 @@ import {
   PurchaseInfoModal,
   PurchaseModal,
   EmptyInventoryModal,
+  GuestbookModal,
 } from '@/components/garden';
 
 interface GardenProps {
   params: { id: string };
 }
 
 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 />
     </>
   );