Feat: 바로주문 안내문 구현

src/components/views/StoreList/StoreList.jsx

@@ -20,7 +20,7 @@ const StoreList = ({ searchTerm = "" }) => {
     <div className="store_list">
       {displayStores.map((item) => (
         <div
-          key={item.idx} // React 리스트에서 각 요소는 고유한 key prop을 가져야 합니다.
+          key={item.idx}
           className="store_list_item"
           onClick={() => navigate(`/packagingStatus?storeId=${item.idx}`)}
         >

src/constants/images.js

@@ -31,6 +31,7 @@ export const IMAGES = {
   toLogin: require("../assets/images/btn_home_to_login.png"),
   couponBox: require("../assets/images/btn_home_coupon_box.png"),
   quickOrderGuide: require("../assets/images/ic_quick_order_guide.png"),
+  quickOrderGuideClose: require("../assets/images/btn_quick_order_guide_close.png"),
 
   // 카페
   cafeClose: require("../assets/images/ic_cafe_close.png"),

src/pages/HomePage/Homepage.css

@@ -70,6 +70,7 @@
 }
 
 .home_individual_quick_order {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: auto;
@@ -91,12 +92,44 @@
   margin-left: 1.5rem;
 }
 
-.home_individual_quick_order_guide {
+.home_individual_quick_order_guide_btn {
   width: 1.32181rem;
   height: 1.32181rem;
   margin-left: 0.31rem;
 }
 
+.home_individual_quick_order_guide {
+  position: absolute; /* 절대 위치 설정 */
+  left: 4.6rem;
+  bottom: 8rem;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  width: 8.6875rem;
+  height: 2.90338rem;
+  background: url(../../assets/images/bg_quick_order_guide.png) no-repeat center
+    center;
+  background-size: contain;
+}
+
+.home_individual_quick_order_guide span {
+  color: #fff;
+  font-family: "Pretendard Variable";
+  font-size: 0.4375rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0.6875rem; /* 157.143% */
+  margin: 0.5rem 0 1.03rem 0.62rem;
+}
+
+.home_individual_quick_order_guide img {
+  width: 0.3125rem;
+  height: 0.3125rem;
+  flex-shrink: 0;
+  margin-top: 0.44rem;
+  margin-right: 0.38rem;
+}
+
 .home_individual_quick_order_container {
   display: flex;
   flex-direction: row;

src/pages/HomePage/Homepage.jsx

@@ -8,7 +8,7 @@ import useFetchQuickOrder from "../../hooks/useFetchQuickOrder";
 import useFetchUserInfo from "../../hooks/useFetchUserInfo";
 import "./Homepage.css";
 // import usePostCoupon from "../../hooks/usePostCoupons";
-import React from "react";
+import React, { useState } from "react";
 import "slick-carousel/slick/slick-theme.css";
 import "slick-carousel/slick/slick.css";
 import Banner from "../../components/views/Home/Banner/Banner";
@@ -26,6 +26,11 @@ const HomePage = () => {
   // const handleCouponClick = (couponCode, couponId) => {
   //   postCoupon(couponCode, couponId, couponIssued, setCouponIssued);
   // };
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const toggleTooltip = () => {
+    setShowTooltip(!showTooltip); // 말풍선 표시 상태를 토글
+  };
 
   return (
     <div className="home">
@@ -58,8 +63,23 @@ const HomePage = () => {
                 <img
                   src={IMAGES.quickOrderGuide}
                   alt="guide"
-                  className="home_individual_quick_order_guide"
+                  className="home_individual_quick_order_guide_btn"
+                  onClick={toggleTooltip}
                 />
+                {showTooltip && (
+                  <div className="home_individual_quick_order_guide">
+                    <span>
+                      최근에 주문하신 주문건이에요.
+                      <br />
+                      클릭하면 바로 결제화면으로 넘어가요!
+                    </span>
+                    <img
+                      src={IMAGES.quickOrderGuideClose}
+                      alt="X"
+                      onClick={() => setShowTooltip(false)}
+                    />
+                  </div>
+                )}
               </div>
 
               <div className="home_individual_quick_order_container">

src/pages/StoreSearch/StoreSearch.jsx

@@ -14,13 +14,14 @@ function StoreSearch() {
   // 사용자 입력 처리
   const handleInputChange = (e) => {
     setSearchTerm(e.target.value);
+    // console.log("검색어:", searchTerm);
   };
 
   // 디바운싱 구현
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedSearchTerm(searchTerm);
-      console.log("검색어:", searchTerm);
+      console.log("디바운싱:", searchTerm);
     }, debounceDelay);
 
     // 컴포넌트가 unmount되거나 다음 useEffect가 실행되기 전에 타이머를 정리