Merge pull request #59 from LikeLion-Hackathon-T1/develop

손님 뷰 UI 완성

public/index.html

@@ -7,7 +7,7 @@
         <meta name="theme-color" content="#000000" />
         <meta
             name="description"
-            content="Web site created using create-react-app"
+            content="시장과 사랑에 빠지게 될 달콤한 나들이, Syluv"
         />
         <script
             type="text/javascript"

src/App.js

@@ -17,6 +17,9 @@ import OrderListPage from "pages/OrderListPage";
 import OrderDetailPage from "pages/OrderDetailPage";
 import OrderPage from "pages/OrderPage";
 import ReviewPage from "pages/ReviewPage";
+import VisitListPage from "pages/VisitListPage";
+import OrderSuccess from "pages/OrderSuccess";
+import MyPage from "pages/MyPage";
 const App = () => {
     useEffect(() => {
         if (window.location.host === "syluv.store") {
@@ -40,6 +43,10 @@ const App = () => {
                                 />
                                 <Route path="/cart" element={<CartPage />} />
                                 <Route path="/order" element={<OrderPage />} />
+                                <Route
+                                    path="/ordersuccess"
+                                    element={<OrderSuccess />}
+                                />
                                 <Route
                                     path="/menuTest"
                                     element={<MenuTestPage />}
@@ -64,6 +71,11 @@ const App = () => {
                                     path="/review/:orderId"
                                     element={<ReviewPage />}
                                 />
+                                <Route
+                                    path="/visit"
+                                    element={<VisitListPage />}
+                                />
+                                <Route path="/mypage" element={<MyPage />} />
                                 <Route path="/qr" element={<QrPage />} />
                                 <Route path="/qrgen" element={<QrGenPage />} />
                                 <Route

src/components/Cart/StoreList.js

@@ -1,15 +1,17 @@
 import styled from "styled-components";
 import Store from "./Store";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import useSyluvAxios from "hooks/useSyluvAxios";
 import { useNavigate } from "react-router-dom";
-import { ReactComponent as NoItem } from "assets/images/no-item.svg";
-import Button from "components/Common/Button";
+import noItem from "assets/images/no-cart.png";
 import Splash from "components/Common/Splash";
+import Toast from "components/Common/Toast";
 
 const StoreList = ({ cartList, setCartList, isLoading }) => {
     const syluvAxios = useSyluvAxios();
     const navigate = useNavigate();
+    const [selectedStore, setSelectedStore] = useState(null);
+    const [toastMessage, setToastMessage] = useState("");
 
     const toggleStoreCheck = useCallback(
         (storeName, isChecked) => {
@@ -40,6 +42,9 @@ const StoreList = ({ cartList, setCartList, isLoading }) => {
                     return item;
                 });
             });
+
+            // 체크된 스토어 업데이트
+            setSelectedStore(isChecked ? storeName : null);
         },
         [setCartList]
     );
@@ -78,11 +83,27 @@ const StoreList = ({ cartList, setCartList, isLoading }) => {
         return acc;
     }, {});
 
-    const totalAmount = cartList.reduce(
+    const selectedItems = cartList.filter((item) => item.isChecked);
+    const totalAmount = selectedItems.reduce(
         (acc, item) => acc + item.price * item.quantity,
         0
     );
 
+    const handleOrder = () => {
+        const selectedStores = [
+            ...new Set(selectedItems.map((item) => item.storeName)),
+        ];
+        if (selectedStores.length > 1) {
+            setToastMessage("한 번에 한 가게만 주문할 수 있어요");
+        } else {
+            navigate("/order");
+        }
+    };
+
+    const closeToast = () => {
+        setToastMessage("");
+    };
+
     return (
         <CartList>
             {Object.keys(stores).length > 0 ? (
@@ -97,35 +118,45 @@ const StoreList = ({ cartList, setCartList, isLoading }) => {
                 ))
             ) : (
                 <NoItemContainer>
-                    <NoItem />
-                    <Button
-                        onClick={() => navigate("/")}
-                        type="2"
-                        text="유도문구 뭐하지"
-                    />
+                    <span className="title-text">장바구니가 비어있어요</span>
+                    <img src={noItem} alt="no-item" width={158} height={158} />
+                    <span className="sub-text">
+                        시장을 구경하고
+                        <br />
+                        장바구니를 채워주세요
+                    </span>
                 </NoItemContainer>
             )}
-            {Object.keys(stores).length > 0 && (
-                <OrderButton onClick={() => navigate("/order")}>
-                    {new Intl.NumberFormat("ko-KR").format(totalAmount)}원
+            <ButtonContainer>
+                <OrderButton onClick={handleOrder} disabled={totalAmount === 0}>
+                    {totalAmount > 0
+                        ? `${new Intl.NumberFormat("ko-KR").format(
+                              totalAmount
+                          )}원 `
+                        : null}
                     주문하기
                 </OrderButton>
+            </ButtonContainer>
+            {toastMessage && (
+                <Toast
+                    message={toastMessage}
+                    message2="먼저 주문할 가게만 선택해주세요"
+                    onClose={closeToast}
+                />
             )}
         </CartList>
     );
 };
 
-const CartList = styled.div`
-    margin-top: 7px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    margin-bottom: 72px;
+const ButtonContainer = styled.div`
+    position: fixed;
+    bottom: 0px;
+    padding: 20px 0px;
+    background-color: white;
+    border-top: 1px solid ${({ theme }) => theme.color.gray100};
 `;
 
 const OrderButton = styled.button`
-    position: fixed;
-    bottom: 12px;
     width: 440px;
     height: 48px;
     margin: 0px 20px;
@@ -138,8 +169,21 @@ const OrderButton = styled.button`
     cursor: pointer;
 
     @media (max-width: 480px) {
-        width: calc(100% - 40px);
+        width: calc(100dvw - 40px);
     }
+
+    &:disabled {
+        background-color: ${({ theme }) => theme.color.gray300};
+        cursor: default;
+    }
+`;
+
+const CartList = styled.div`
+    margin-top: 7px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-bottom: 88px;
 `;
 
 const NoItemContainer = styled.div`
@@ -152,6 +196,18 @@ const NoItemContainer = styled.div`
     gap: 43px;
 
     height: calc(100dvh - 140px);
+
+    .title-text {
+        font-size: 20px;
+        font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+    }
+
+    .sub-text {
+        font-size: 18px;
+        font-weight: ${({ theme }) => theme.fontWeight.medium};
+        text-align: center;
+        color: ${({ theme }) => theme.color.gray600};
+    }
 `;
 
 export default StoreList;

src/components/Common/Search.js

@@ -8,6 +8,22 @@ const Search = ({ marketList }) => {
     const navigate = useNavigate();
     const [searchInput, setSearchInput] = useState("");
 
+    const getHighlightedText = (text, highlight) => {
+        const highlightIndex = Hangul.search(text, highlight);
+        if (highlightIndex === -1) return text;
+
+        const startIndex = highlightIndex;
+        const endIndex = highlightIndex + highlight.length;
+
+        return (
+            <>
+                {text.substring(0, startIndex)}
+                <Highlight>{text.substring(startIndex, endIndex)}</Highlight>
+                {text.substring(endIndex)}
+            </>
+        );
+    };
+
     const filteredMarkets = marketList.filter(
         (market) => Hangul.search(market.marketName, searchInput) >= 0
     );
@@ -24,7 +40,7 @@ const Search = ({ marketList }) => {
                 }
             }
         },
-        [filteredMarkets]
+        [filteredMarkets, navigate]
     );
 
     return (
@@ -41,14 +57,17 @@ const Search = ({ marketList }) => {
                     <div>
                         {filteredMarkets.length > 0 ? (
                             filteredMarkets.map((market, index) => (
-                                <span
+                                <SearchResult
                                     key={index}
                                     onClick={() => {
                                         navigate(`/market/${market.marketId}`);
                                     }}
                                 >
-                                    {market.marketName}
-                                </span>
+                                    {getHighlightedText(
+                                        market.marketName,
+                                        searchInput
+                                    )}
+                                </SearchResult>
                             ))
                         ) : (
                             <NoResults>검색 결과가 없습니다.</NoResults>
@@ -111,15 +130,6 @@ const Container = styled.div`
             flex-direction: column;
             gap: 10px;
             margin-bottom: 10px;
-
-            span {
-                padding: 0 14px;
-                padding-top: 10px;
-                font-size: 16px;
-                color: ${({ theme }) => theme.color.gray500};
-                font-weight: ${({ theme }) => theme.fontWeight.regular};
-                border-top: 1px solid ${({ theme }) => theme.color.gray100};
-            }
         }
     }
 `;
@@ -140,6 +150,16 @@ const SearchInput = styled.input`
     }
 `;
 
+const SearchResult = styled.span`
+    padding: 0 14px;
+    padding-top: 10px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray500};
+    font-weight: ${({ theme }) => theme.fontWeight.regular};
+    border-top: 1px solid ${({ theme }) => theme.color.gray100};
+    cursor: pointer;
+`;
+
 const NoResults = styled.span`
     padding: 0 14px;
     padding-top: 10px;
@@ -148,3 +168,7 @@ const NoResults = styled.span`
     font-weight: ${({ theme }) => theme.fontWeight.regular};
     border-top: 1px solid ${({ theme }) => theme.color.gray100};
 `;
+
+const Highlight = styled.span`
+    color: ${({ theme }) => theme.color.primary};
+`;

src/components/Common/Splash.js

@@ -13,7 +13,10 @@ const Splash = () => {
 export default Splash;
 
 const Wrapper = styled.div`
-    width: 100%;
+    position: fixed;
+    top: 0;
+    z-index: 5000;
+    width: 480px;
     height: 100dvh;
 
     background-color: ${({ theme }) => theme.color.primary};
@@ -31,4 +34,8 @@ const Wrapper = styled.div`
         font-weight: ${({ theme }) => theme.fontWeight.bold};
         color: white;
     }
+
+    @media (max-width: 480px) {
+        width: 100%;
+    }
 `;

src/components/Common/TabBar.js

@@ -11,7 +11,7 @@ import { useNavigate } from "react-router-dom";
 const TabBar = ({ activeTab }) => {
     const navigate = useNavigate();
     const handleTabClick = (tab) => {
-        navigate(`/${tab}`);
+        navigate(`/${tab}`, { replace: true });
     };
     return (
         <>
@@ -99,7 +99,7 @@ const TabBar = ({ activeTab }) => {
 export default TabBar;
 
 const Spacer = styled.div`
-    height: 72px;
+    height: 80px;
     width: 1px;
 `;
 
@@ -111,6 +111,7 @@ const Container = styled.div`
     height: 72px;
     background-color: white;
     box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.05);
+    margin-bottom: 8px;
     .wrapper {
         position: relative;
         padding: 0 40px;