Merge pull request Yanabada#254 from Yanabada/feature/Yanabada#253

Feature/Yanabada#253
Gaoridang · Feb 22, 2024 · 7aaa4f6 · 7aaa4f6
2 parents 8818ad3 + 01cebc6
commit 7aaa4f6
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 46 deletions.
diff --git a/src/pages/home/components/SpecialServices/index.tsx b/src/pages/home/components/SpecialServices/index.tsx
@@ -41,7 +41,7 @@ const SpecialServices = () => {
           <div className="title">
             <div>
               <h2>HAPPY NEW YEAR</h2>
-              <h3>새해 핫플레이스 양도숙박권 모음</h3>
+              <h3>2024년을 시작하는 신년 파티룸</h3>
             </div>
             <ArrowRight />
           </div>

diff --git a/src/pages/products/components/NoProduct/index.tsx b/src/pages/products/components/NoProduct/index.tsx
@@ -5,20 +5,22 @@ import * as S from "./styles";
 const NoProduct = () => {
   return (
     <S.Container>
-      <NoProductIcon />
-      <S.BannerWrapper
-        initial={{ y: "30px", opacity: 0.3 }}
-        animate={{
-          y: 15,
-          opacity: 1,
-          transition: {
-            duration: 0.3,
-            ease: "easeOut"
-          }
-        }}
-      >
-        <NoProductBanner />
-      </S.BannerWrapper>
+      <a href="https://www.yanolja.com/" target="_blank">
+        <NoProductIcon />
+        <S.BannerWrapper
+          initial={{ y: "30px", opacity: 0.3 }}
+          animate={{
+            y: 15,
+            opacity: 1,
+            transition: {
+              duration: 0.3,
+              ease: "easeOut"
+            }
+          }}
+        >
+          <NoProductBanner />
+        </S.BannerWrapper>
+      </a>
     </S.Container>
   );
 };

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/index.tsx b/src/pages/products/index.tsx
@@ -17,8 +17,12 @@ const Products = () => {
   const navigate = useNavigate();
 
   const customBack = () => {
-    setMapOpen();
-    navigate(location.pathname);
+    if (isMapOpen) {
+      setMapOpen();
+      navigate(location.pathname);
+    } else {
+      navigate("/");
+    }
   };
 
   return (
@@ -27,8 +31,8 @@ const Products = () => {
         title={isMapOpen ? "지도검색" : "상품리스트"}
         type={isMapOpen ? "backClose" : "back"}
         hasBorder={false}
-        isCustom={isMapOpen}
-        {...(isMapOpen && { customBack: customBack })}
+        isCustom={true}
+        {...{ customBack: customBack }}
       />
       <S.Container>
         <Link to="/search">

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} />
       ))}