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

QA 전 배포
TEAM-SYLUV · Aug 4, 2024 · baf6ad9 · baf6ad9
2 parents c7a3582 + 4375323
commit baf6ad9
Show file tree

Hide file tree

Showing 35 changed files with 1,017 additions and 900 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,12 +17,12 @@ import OrderListPage from "pages/OrderListPage";
 import OrderDetailPage from "pages/OrderDetailPage";
 import OrderPage from "pages/OrderPage";
 import VisitListPage from "pages/VisitListPage";
-import OrderSuccess from "pages/OrderSuccess";
 import MyPage from "pages/MyPage";
 import OwnerPage from "owner/pages/OwnerPage";
 import OwnerDetailPage from "owner/pages/OwnerDetailPage";
 import PayCallback from "utils/PayCallback";
 import OrderRequest from "utils/OrderRequest";
+import OrderResult from "pages/OrderResult";
 
 const App = () => {
     useEffect(() => {
@@ -48,8 +48,8 @@ const App = () => {
                                 <Route path="/cart" element={<CartPage />} />
                                 <Route path="/order" element={<OrderPage />} />
                                 <Route
-                                    path="/ordersuccess"
-                                    element={<OrderSuccess />}
+                                    path="/order/result"
+                                    element={<OrderResult />}
                                 />
                                 <Route
                                     path="/menuTest"
@@ -82,7 +82,10 @@ const App = () => {
                                     path="/oauth/kakao/callback"
                                     element={<OauthCallback />}
                                 />
-                                <Route path="/owner" element={<OwnerPage />} />
+                                <Route
+                                    path="/owner/:storeId"
+                                    element={<OwnerPage />}
+                                />
                                 <Route
                                     path="/owner/:storeId/:orderId"
                                     element={<OwnerDetailPage />}

diff --git a/src/components/Common/Header.js b/src/components/Common/Header.js
@@ -8,7 +8,8 @@ import { useNavigate } from "react-router-dom";
 
 const Header = ({
     title,
-    backSrc = -1,
+    onLeftClick = () => {},
+    backSrc,
     cart = true,
     home = false,
     back = true,
@@ -18,7 +19,6 @@ const Header = ({
     handleRight = () => {},
 }) => {
     const navigate = useNavigate();
-    // const totalItemCount = useCartStore((state) => state.totalItemCount);
 
     return (
         <>
@@ -27,11 +27,15 @@ const Header = ({
                 <LeftSection>
                     {back && (
                         <BackButton
-                            onClick={() =>
-                                navigate(backSrc, {
-                                    replace: true,
-                                })
-                            }
+                            onClick={() => {
+                                if (backSrc) {
+                                    navigate(backSrc, {
+                                        replace: true,
+                                    });
+                                } else if (onLeftClick) {
+                                    onLeftClick();
+                                }
+                            }}
                         >
                             <BackIcon />
                         </BackButton>

diff --git a/src/components/Home/NearbyMarket.js b/src/components/Home/NearbyMarket.js
@@ -18,9 +18,9 @@ const NearbyMarket = ({ username }) => {
     const { location, error } = useGeoLocation(geolocationOptions);
     const [nearMarket, setNearMarket] = useState("");
     const [text, setText] = useState(username ? username : "시럽");
-    const { setName } = useTokenStore();
+    const { setName, getAccessToken } = useTokenStore();
     useEffect(() => {
-        if (username === undefined) {
+        if (username === undefined && getAccessToken()) {
             syluvAxios.get("/users/mypage").then((res) => {
                 setName(res.data.payload.name);
                 setText(res.data.payload.name);

diff --git a/src/components/Login/Welcome.js b/src/components/Login/Welcome.js
@@ -7,94 +7,94 @@ import { useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 const Welcome = () => {
-    const navigate = useNavigate();
-    const [isOwnerHovered, setIsOwnerHovered] = useState(false);
-    const [isCustomerHovered, setIsCustomerHovered] = useState(false);
+  const navigate = useNavigate();
+  const [isOwnerHovered, setIsOwnerHovered] = useState(false);
+  const [isCustomerHovered, setIsCustomerHovered] = useState(false);
 
-    const handleClick = useCallback(() => {
-        navigate("/");
-    }, [navigate]);
+  const handleClick = useCallback(() => {
+    navigate("/");
+  }, [navigate]);
 
-    return (
-        <Container>
-            <Title>
-                시장 방문객이신가요,
-                <br />
-                소상공인이신가요?
-            </Title>
-            <UserContainer>
-                <Button
-                    onClick={() => navigate("/owner/1")}
-                    onMouseEnter={() => setIsOwnerHovered(true)}
-                    onMouseLeave={() => setIsOwnerHovered(false)}
-                >
-                    <ButtonTitle>소상공인</ButtonTitle>
-                    {isOwnerHovered ? <OwnerClick /> : <Owner />}
-                </Button>
-                <Button
-                    onClick={handleClick}
-                    onMouseEnter={() => setIsCustomerHovered(true)}
-                    onMouseLeave={() => setIsCustomerHovered(false)}
-                >
-                    <ButtonTitle>손님</ButtonTitle>
-                    {isCustomerHovered ? <CustomerClick /> : <Customer />}
-                </Button>
-            </UserContainer>
-        </Container>
-    );
+  return (
+    <Container>
+      <Title>
+        시장 방문객이신가요,
+        <br />
+        사장님이신가요?
+      </Title>
+      <UserContainer>
+        <Button
+          onClick={() => navigate("/owner/1")}
+          onMouseEnter={() => setIsOwnerHovered(true)}
+          onMouseLeave={() => setIsOwnerHovered(false)}
+        >
+          <ButtonTitle>소상공인</ButtonTitle>
+          {isOwnerHovered ? <OwnerClick /> : <Owner />}
+        </Button>
+        <Button
+          onClick={handleClick}
+          onMouseEnter={() => setIsCustomerHovered(true)}
+          onMouseLeave={() => setIsCustomerHovered(false)}
+        >
+          <ButtonTitle>손님</ButtonTitle>
+          {isCustomerHovered ? <CustomerClick /> : <Customer />}
+        </Button>
+      </UserContainer>
+    </Container>
+  );
 };
 
 const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    height: 100dvh;
-    padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: 0 20px;
 `;
 
 const Title = styled.span`
-    font-size: 24px;
-    color: ${({ theme }) => theme.color.gray900};
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-    line-height: 32px;
-    text-align: center;
-    position: absolute;
-    top: 20%;
+  font-size: 24px;
+  color: ${({ theme }) => theme.color.gray900};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: 32px;
+  text-align: center;
+  position: absolute;
+  top: 20%;
 `;
 
 const UserContainer = styled.div`
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
 `;
 
 const Button = styled.button`
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    height: 154px;
-    width: 161px;
-    padding: 17px;
-    border-radius: 8px;
-    color: ${({ theme }) => theme.color.gray300};
-    border: 1px solid ${({ theme }) => theme.color.gray200};
-    background-color: ${({ theme }) => theme.color.gray50};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  height: 154px;
+  width: 161px;
+  padding: 17px;
+  border-radius: 8px;
+  color: ${({ theme }) => theme.color.gray300};
+  border: 1px solid ${({ theme }) => theme.color.gray200};
+  background-color: ${({ theme }) => theme.color.gray50};
 
-    &:hover {
-        box-shadow: 0px 4px 12px rgba(248, 63, 105, 0.08);
-        background-color: rgba(248, 63, 105, 0.04);
-        border: 1px solid ${({ theme }) => theme.color.primary};
-        color: ${({ theme }) => theme.color.gray900};
-    }
+  &:hover {
+    box-shadow: 0px 4px 12px rgba(248, 63, 105, 0.08);
+    background-color: rgba(248, 63, 105, 0.04);
+    border: 1px solid ${({ theme }) => theme.color.primary};
+    color: ${({ theme }) => theme.color.gray900};
+  }
 `;
 
 const ButtonTitle = styled.div`
-    font-size: 16px;
-    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+  font-size: 16px;
+  font-weight: ${({ theme }) => theme.fontWeight.semiBold};
 `;
 
 export default Welcome;
diff --git a/src/components/Market/EditVisitItem.js b/src/components/Market/EditVisitItem.js
@@ -1,15 +1,43 @@
 import CheckButton from "components/Cart/CheckButton";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 const EditVisitItem = ({ item, handleSelect = () => {} }) => {
     const [isChecked, setIsChecked] = useState(false);
+    const [status, setStatus] = useState(null);
+    const [style, setStyle] = useState(false);
 
     const handleClick = () => {
         setIsChecked(!isChecked);
         handleSelect(item.visitListId);
     };
 
+    useEffect(() => {
+        switch (item.status) {
+            case "BEFORE":
+                setStatus("방문 전");
+                break;
+            case "PAYMENT":
+                setStatus("주문 확인 중");
+                setStyle(true);
+                break;
+            case "PREPARING":
+                setStatus("준비 중");
+                setStyle(true);
+                break;
+            case "PREPARED":
+                setStatus("준비 완료");
+                setStyle(true);
+                break;
+            case "VISITED":
+                setStatus("방문 완료");
+                break;
+            default:
+                setStatus("Unknown status");
+                break;
+        }
+    }, []);
+
     return (
         <ListItem>
             <CheckButton
@@ -26,7 +54,7 @@ const EditVisitItem = ({ item, handleSelect = () => {} }) => {
                             <span>{item.category}</span>
                             <span className="store-name">{item.store}</span>
                         </di>
-                        <div className="status">방문 전</div>
+                        <div className="status">{status}</div>
                     </div>
                 </div>
             </Wrapper>

diff --git a/src/components/Market/MarketInfo.js b/src/components/Market/MarketInfo.js
@@ -38,6 +38,7 @@ const Container = styled.div`
     display: flex;
     flex-direction: column;
     gap: 16px;
+    margin-top: 20px;
     margin-bottom: 32px;
 `;