Fix: 상품 판매 완료 클릭 오류 해결

Yanabada · Feb 22, 2024 · 0ea6acc · 0ea6acc
1 parent e38ba2a
commit 0ea6acc
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 27 deletions.
diff --git a/src/pages/products/components/Order/index.tsx b/src/pages/products/components/Order/index.tsx
@@ -14,17 +14,17 @@ const orderList = [
 ];
 
 const Order = () => {
-  const [open, setOpen] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
   const orderParams = searchParams.get("order");
 
+  const [open, setOpen] = useState(false);
+  const { isCheck, setIsCheck } = CheckStore(); // useState 호출을 조건부 렌더링 외부로 이동
+
   const handleClick = (orderId: string) => {
     searchParams.set("order", orderId);
     setSearchParams(searchParams);
   };
 
-  const { isCheck, setIsCheck } = CheckStore();
-
   const orderLabel = orderList.find((list) => list.id === orderParams);
 
   return (

diff --git a/src/pages/products/components/ProductCard/index.tsx b/src/pages/products/components/ProductCard/index.tsx
@@ -17,12 +17,6 @@ interface ProductCardProps {
 }
 
 const ProductCard = ({ product }: ProductCardProps) => {
-  const { isCheck } = CheckStore();
-
-  if (product.status === "SOLD_OUT" && isCheck) {
-    return null;
-  }
-
   const { recentItem, setRecentItem } = RecentStore();
 
   useEffect(() => {
@@ -32,6 +26,12 @@ const ProductCard = ({ product }: ProductCardProps) => {
     }
   }, [recentItem]);
 
+  const { isCheck } = CheckStore();
+
+  if (product.status === "SOLD_OUT" && isCheck) {
+    return null;
+  }
+
   const handleLocalStorage = () => {
     const updateRecentItem: RecentType = {
       id: product.id,
@@ -77,21 +77,23 @@ const ProductCard = ({ product }: ProductCardProps) => {
               </S.UserContainer>
             </S.StarUserContainer>
             <S.RightInnerContainer>
-              <S.TimerNegoContainer>
-                <S.TimerContainer>
-                  <S.TimerIcon />
-                  <S.TimerText>{formatRemainingTime(product.saleEnd)}</S.TimerText>
-                </S.TimerContainer>
-                {product.canNegotiate ? (
-                  <S.NegoContainer>
-                    <p>가격제안가능</p>
-                  </S.NegoContainer>
-                ) : (
-                  <S.NoNegoContainer>
-                    <p>가격제안불가</p>
-                  </S.NoNegoContainer>
-                )}
-              </S.TimerNegoContainer>
+              {product.status !== "SOLD_OUT" && (
+                <S.TimerNegoContainer>
+                  <S.TimerContainer>
+                    <S.TimerIcon />
+                    <S.TimerText>{formatRemainingTime(product.saleEnd)}</S.TimerText>
+                  </S.TimerContainer>
+                  {product.canNegotiate ? (
+                    <S.NegoContainer>
+                      <p>가격제안가능</p>
+                    </S.NegoContainer>
+                  ) : (
+                    <S.NoNegoContainer>
+                      <p>가격제안불가</p>
+                    </S.NoNegoContainer>
+                  )}
+                </S.TimerNegoContainer>
+              )}
               <S.PriceContainer>
                 <S.PriceText>원가</S.PriceText>
                 <S.Price>{numberFormat(product.price)}원</S.Price>

diff --git a/src/pages/products/stores/checkStore.ts b/src/pages/products/stores/checkStore.ts
@@ -5,7 +5,7 @@ interface CheckState {
   setIsCheck: (check: boolean) => void;
 }
 
-const CheckStore = create<CheckState>((set) => ({
+const CheckStore = create<CheckState>()((set) => ({
   isCheck: false,
   setIsCheck: (check: boolean) =>
     set({

diff --git a/src/pages/speicialProducts/index.tsx b/src/pages/speicialProducts/index.tsx
@@ -1,6 +1,6 @@
 import UpperNavBar from "@components/navBar/upperNavBar";
 import useProducts from "@pages/products/api/queries";
-// import Order from "@pages/products/components/Order";
+import Order from "@pages/products/components/Order";
 import ProductCard from "@pages/products/components/ProductCard";
 import logo from "@assets/2024_dragon.png";
 import { ScrollRestoration } from "react-router-dom";
@@ -22,7 +22,7 @@ const SpecialProducts = () => {
           <p>2024년을 시작하는 신년 파티룸</p>
         </div>
       </S.Wrapper>
-      {/* <Order /> */}
+      <Order />
       {products.map((product) => (
         <ProductCard key={product.id} product={product} />
       ))}