From 17dbaecc17b8972cf67d5e3fd49aaa0719276608 Mon Sep 17 00:00:00 2001
From: imi21123 <imi21123@naver.com>
Date: Tue, 7 Nov 2023 20:07:12 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20HomePage-PackagingStatusPage-StoreDetai?=
 =?UTF-8?q?lPage=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/HomePage/Homepage.jsx               |  6 ++-
 .../PackagingStatusPage.jsx                   | 42 ++++++++++++-------
 src/pages/PackagingStatusPage/style.css       |  6 +--
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx
index ff8c63a..942d1fc 100644
--- a/src/pages/HomePage/Homepage.jsx
+++ b/src/pages/HomePage/Homepage.jsx
@@ -11,6 +11,7 @@ import "./Homepage.css";
 
 function Homepage() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   // const [quickOrderItems, setQuickOrderItems] = useState([
   //   { id: 1, name: "커피파로스" },
   //   { id: 2, name: "오르다" },
@@ -160,7 +161,10 @@ function Homepage() {
           <div className="very-pick-list">
             <div className="very-pick-items">
               {dummyVeryPickItems.map((item) => (
-                <Link to="/storeDetail" className="very-pick-item">
+                <Link
+                  to={`/packagingStatus?storeId=${item.id}`}
+                  className="very-pick-item"
+                >
                   <React.Fragment>
                     <div className="pick-name">{item.name}</div>
                     <div className="pick-address">{item.address}</div>
diff --git a/src/pages/PackagingStatusPage/PackagingStatusPage.jsx b/src/pages/PackagingStatusPage/PackagingStatusPage.jsx
index e3251f5..cce4d9d 100644
--- a/src/pages/PackagingStatusPage/PackagingStatusPage.jsx
+++ b/src/pages/PackagingStatusPage/PackagingStatusPage.jsx
@@ -4,8 +4,14 @@ import takeOut from "../../assets/images/take_out.svg";
 import takeIn from "../../assets/images/take_in.svg";
 import promotion from "../../assets/images/promotion.svg";
 import "./style.css";
+import { Link, useLocation } from "react-router-dom";
 
 const PackagingStatusPage = () => {
+  const takeoutStatus = "";
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const storeId = params.get("storeId");
+
   return (
     <div className="packaging-status-page">
       <Header />
@@ -20,23 +26,27 @@ const PackagingStatusPage = () => {
         alt="promotion"
       />
 
-      <div className="packaging-status-page__btn">
-        <img
-          className="packaging-status-page__btn__img"
-          src={takeOut}
-          alt="takeOut"
-        />
-        <text className="packaging-status-page__text">가져갈게요</text>
-      </div>
+      <Link to={`/storeDetail?storeId=${storeId}&inout=2`}>
+        <div className="packaging-status-page__btn">
+          <img
+            className="packaging-status-page__btn__img"
+            src={takeOut}
+            alt="takeOut"
+          />
+          <span className="packaging-status-page__text">가져갈게요</span>
+        </div>
+      </Link>
 
-      <div className="packaging-status-page__btn">
-        <img
-          className="packaging-status-page__btn__img"
-          src={takeIn}
-          alt="takeOut"
-        />
-        <text className="packaging-status-page__text">먹고갈게요</text>
-      </div>
+      <Link to={`/storeDetail?storeId=${storeId}&inout=1`}>
+        <div className="packaging-status-page__btn">
+          <img
+            className="packaging-status-page__btn__img"
+            src={takeIn}
+            alt="takeOut"
+          />
+          <span className="packaging-status-page__text">먹고갈게요</span>
+        </div>
+      </Link>
     </div>
   );
 };
diff --git a/src/pages/PackagingStatusPage/style.css b/src/pages/PackagingStatusPage/style.css
index bee7156..bce48ad 100644
--- a/src/pages/PackagingStatusPage/style.css
+++ b/src/pages/PackagingStatusPage/style.css
@@ -35,15 +35,15 @@
 
 .packaging-status-page__btn {
   display: flex;
-  width: 100%;
+  width: 21.5625rem;
   height: 3.0625rem;
   flex-shrink: 0;
   border-radius: 0.1875rem;
   border: 1px solid #dadada;
   background: #fff;
   flex-direction: row;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
   margin-bottom: 0.44rem;
 }