feat: island item no exist State Modal

JangAyeon · Feb 26, 2024 · 7921df6 · 7921df6
1 parent 0297802
commit 7921df6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/components/molecules/LandEdit.tsx b/components/molecules/LandEdit.tsx
@@ -1,10 +1,14 @@
 import styled from "@emotion/styled"
-import { Dispatch, SetStateAction } from "react"
+import { Dispatch, SetStateAction, useEffect } from "react"
 
+import AuthModal from "@/components/modal/AuthModal"
 import LandCategory from "@/components/molecules/LandCategory"
 import LandItem from "@/components/molecules/LandItem"
 import LandType from "@/components/molecules/LandType"
 
+import useIsland from "@/hooks/useIsland"
+import useStateModal from "@/hooks/useStateModal"
+
 import { ICategory } from "@/types/categoryTabs"
 
 interface ILandEdit {
@@ -14,8 +18,27 @@ interface ILandEdit {
 }
 
 const LandEdit = ({ list, setCategory, category }: ILandEdit) => {
+  const { islandItemExist } = useIsland()
+  const { state, text, isOpen, setIsOpen, setStateModal } = useStateModal()
+  useEffect(() => {
+    if (islandItemExist.length === 0) {
+      setStateModal({
+        state: "fail",
+        text: "카드 게임 플레이를 통해 아이템을 구하세요",
+        isOpen: true,
+      })
+    }
+  }, [islandItemExist])
   return (
     <EditWrapper>
+      {text && isOpen && (
+        <AuthModal
+          state={state}
+          text={text}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+        />
+      )}
       <LandCategory list={list} category={category} setCategory={setCategory} />
       <LandSelectWrapper>
         {category === 0 ? <LandType /> : <LandItem />}

diff --git a/components/molecules/LandItem.tsx b/components/molecules/LandItem.tsx
@@ -1,5 +1,4 @@
 import styled from "@emotion/styled"
-import { useEffect } from "react"
 import "swiper/css"
 import { Swiper, SwiperSlide } from "swiper/react"
 
@@ -13,21 +12,19 @@ import { ItemIdProps } from "@/types/common/islandProps"
 const LandItem = () => {
   const { islandItemExist } = useIsland()
   const { swiperSetting, currentSlide } = useSwiper()
-  /*
-  useEffect(() => {
-    console.log("land item", list)
-  }, [list])
-*/
+
   return (
-    <SliderWrapper>
-      <Swiper {...swiperSetting}>
-        {islandItemExist.map((id: ItemIdProps, idx: number) => (
-          <SwiperSlide key={idx}>
-            <Slide id={id} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    </SliderWrapper>
+    <>
+      <SliderWrapper>
+        <Swiper {...swiperSetting}>
+          {islandItemExist.map((id: ItemIdProps, idx: number) => (
+            <SwiperSlide key={idx}>
+              <Slide id={id} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </SliderWrapper>
+    </>
   )
 }