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

api 수정 반영 배포
TEAM-SYLUV · Aug 2, 2024 · a119b00 · a119b00
2 parents e1383dc + f8afe99
commit a119b00
Show file tree

Hide file tree

Showing 21 changed files with 415 additions and 189 deletions.
diff --git a/src/App.js b/src/App.js
@@ -69,10 +69,6 @@ const App = () => {
                                     path="/menu/:menuItemId"
                                     element={<MenuItemDetail />}
                                 />
-                                <Route
-                                    path="/review/:orderId"
-                                    element={<ReviewPage />}
-                                />
                                 <Route
                                     path="/visit"
                                     element={<VisitListPage />}

diff --git a/src/assets/images/foot_check.svg b/src/assets/images/foot_check.svg
diff --git a/src/assets/images/foot_check2.svg b/src/assets/images/foot_check2.svg
diff --git a/src/assets/images/warning.svg b/src/assets/images/warning.svg
diff --git a/src/components/Market/CartegoryBar.js b/src/components/Market/CartegoryBar.js
@@ -18,7 +18,7 @@ const CategoryBar = ({ categories, onClick }) => {
 
     return (
         <CategoryContainer>
-            <Swiper slidesPerView={7} spaceBetween={8}>
+            <Swiper slidesPerView={6} spaceBetween={8}>
                 {categories.map((categories) => (
                     <SwiperSlide key={categories}>
                         <Category

diff --git a/src/components/Market/VisitItem.js b/src/components/Market/VisitItem.js
@@ -1,8 +1,11 @@
 import styled from "styled-components";
 import { ReactComponent as Time } from "assets/images/visit_time.svg";
 import { ReactComponent as Time2 } from "assets/images/visit_time2.svg";
+import { ReactComponent as Gom } from "assets/images/foot_check.svg";
+import { ReactComponent as Gom2 } from "assets/images/foot_check2.svg";
 import { useCallback, useEffect, useState } from "react";
 import Button from "components/Common/Button";
+import useSyluvAxios from "hooks/useSyluvAxios";
 
 const VisitItem = ({
     index,
@@ -12,7 +15,8 @@ const VisitItem = ({
     handleOpenModal = () => {},
 }) => {
     const [status, setStatus] = useState(null);
-    const [style, setStyle] = useState(true);
+    const [style, setStyle] = useState(false);
+    const syluvAxios = useSyluvAxios();
     const onCompleteClick = useCallback(() => {
         handleOpenModal(null);
     }, [handleOpenModal]);
@@ -40,41 +44,62 @@ const VisitItem = ({
                 break;
         }
     }, []);
+
+    const handleVisitComplete = useCallback(() => {
+        syluvAxios
+            .patch(`/market/${item.visitListId}/visitlist/visited`)
+            .then((res) => {
+                setStatus("방문 완료");
+                setStyle(false);
+                onCompleteClick();
+            });
+    }, [item.visitListId]);
+
     return (
         <>
-            <ListItem
-                onClick={() => {
-                    handleOpenModal(index);
-                }}
-            >
+            <ListItem>
                 <Container>
                     <Number>{index + 1}</Number>
                     {!isLast && <div className="line" />} {/* 수정된 부분 */}
                 </Container>
 
                 <Wrapper>
                     <div className="store">
-                        <img
-                            src="https://via.placeholder.com/100"
-                            alt="store"
-                        />
+                        <img src={item.imageUrl} alt="store" />
                         <div className="store-info">
                             <div>
                                 <div className="store-header">
-                                    <span>분식</span>
+                                    <span>카테고리주세요</span>
                                     <span className="store-name">
                                         {item.store}
                                     </span>
                                 </div>
                             </div>
-                            <div className={`status ${style ? "color" : ""}`}>
-                                {status}
-                            </div>
+                            {
+                                <div
+                                    className={`status ${style ? "color" : ""}`}
+                                >
+                                    {status}
+                                </div>
+                            }
                         </div>
                     </div>
+                    <Foot able={style}>
+                        {style ? (
+                            <Gom2
+                                onClick={() =>
+                                    handleOpenModal(item.visitListId)
+                                }
+                            />
+                        ) : (
+                            <Gom />
+                        )}
+                    </Foot>
                     <div className="time">
                         {style ? <Time2 /> : <Time />}
-                        <span className={`${style ? "color" : ""}`}>11:21</span>
+                        <span className={`${style ? "color" : ""}`}>
+                            {item.visitedTime}
+                        </span>
                     </div>
                 </Wrapper>
             </ListItem>
@@ -90,7 +115,7 @@ const VisitItem = ({
                             <Button
                                 text="완료했어요"
                                 onClick={() => {
-                                    onCompleteClick();
+                                    handleVisitComplete();
                                 }}
                             />
                             <Button
@@ -110,6 +135,18 @@ const VisitItem = ({
 
 export default VisitItem;
 
+const Foot = styled.div`
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+
+    ${(props) =>
+        !props.able &&
+        `cursor: default;
+        `}
+`;
+
 const ModalContainer = styled.div`
     z-index: 1000;
     top: 0;
@@ -189,7 +226,6 @@ const Number = styled.div`
 `;
 
 const ListItem = styled.div`
-    cursor: pointer;
     display: flex;
     justify-content: space-between;
 

diff --git a/src/components/Market/VisitList.js b/src/components/Market/VisitList.js
@@ -20,14 +20,6 @@ const VisitList = ({ visitList }) => {
                         openId={openedModal}
                         handleOpenModal={handleOpenModal}
                     />
-                    <div
-                        className="visit-complete"
-                        onClick={() => {
-                            handleOpenModal(item.visitListId);
-                        }}
-                    >
-                        방문 완료
-                    </div>
                 </Container>
             ))}
         </ListContainer>

diff --git a/src/components/Market/VisitTab.js b/src/components/Market/VisitTab.js
@@ -5,7 +5,11 @@ import { useState } from "react";
 import EditList from "./EditList";
 import useSyluvAxios from "hooks/useSyluvAxios";
 
-const VisitTab = ({ visitList, onChange = () => {} }) => {
+const VisitTab = ({
+    visitList,
+    handleVisitList = () => {},
+    onChange = () => {},
+}) => {
     const [isEdit, setIsEdit] = useState(false);
     const [selectedList, setSelectedList] = useState([]);
     const syluvAxios = useSyluvAxios();
@@ -21,13 +25,20 @@ const VisitTab = ({ visitList, onChange = () => {} }) => {
     const handleDelete = async () => {
         try {
             await Promise.all(
-                selectedList.map((id) =>
-                    syluvAxios.delete(`/market/${id}/visitlist/delete`)
+                selectedList.map((visitListId) =>
+                    syluvAxios.delete(`/market/${visitListId}/visitlist/delete`)
                 )
             );
 
+            onChange();
+
+            handleVisitList({
+                changedList: visitList.filter(
+                    (item) => !selectedList.includes(item.visitListId)
+                ),
+            });
+
             setSelectedList([]);
-            onChange(selectedList);
             setIsEdit(!isEdit);
         } catch (error) {
             console.error("방문 리스트 삭제 중 에러가 발생했습니다:", error);

diff --git a/src/components/OrderList/OrderDetail/MenuItem.js b/src/components/OrderList/OrderDetail/MenuItem.js
@@ -0,0 +1,68 @@
+import styled from "styled-components";
+
+const MenuItem = ({ item }) => {
+    const handlePrice = (price) => {
+        return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    };
+
+    return (
+        <Container>
+            <img src="https://via.placeholder.com/150" alt="menu" />
+            <div className="menu">
+                <div className="menu-header">
+                    <span className="title-text">{item.menuName}</span>
+                    <span className="sub-text"> {item.quantity}개</span>
+                </div>
+                <span className="price">
+                    가격: {handlePrice(item.totalPrice)}원
+                </span>
+            </div>
+        </Container>
+    );
+};
+
+export default MenuItem;
+
+const Container = styled.div`
+    padding: 24px 20px;
+    display: flex;
+    gap: 12px;
+    position: relative;
+
+    border-top: 1px solid ${({ theme }) => theme.color.gray100};
+
+    img {
+        width: 78px;
+        height: 78px;
+        border-radius: 12px;
+    }
+
+    .menu {
+        margin: 2px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .menu-header {
+            display: flex;
+            font-weight: ${({ theme }) => theme.fontWeight.medium};
+            flex-direction: column;
+            font-size: 14px;
+            gap: 8px;
+
+            .title-text {
+                color: ${({ theme }) => theme.color.black900};
+            }
+
+            .sub-text {
+                color: ${({ theme }) => theme.color.gray500};
+            }
+        }
+
+        .price {
+            font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+            color: ${({ theme }) => theme.color.black900};
+            font-size: 16px;
+        }
+    }
+`;