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

베포
TEAM-SYLUV · Jul 30, 2024 · 5874982 · 5874982
2 parents 5108f5c + 6d22f3e
commit 5874982
Show file tree

Hide file tree

Showing 19 changed files with 726 additions and 229 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko-KR">
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/components/Cart/StoreList.js b/src/components/Cart/StoreList.js
@@ -5,6 +5,7 @@ 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 Splash from "components/Common/Splash";
 
 const StoreList = ({ cartList, setCartList, isLoading }) => {
     const syluvAxios = useSyluvAxios();
@@ -25,7 +26,7 @@ const StoreList = ({ cartList, setCartList, isLoading }) => {
         }
     }, [cartList]);
 
-    if (isLoading) return <div></div>;
+    if (isLoading) return <Splash />;
 
     const stores = cartList.reduce((acc, item) => {
         acc[item.storeName] = acc[item.storeName] || [];

diff --git a/src/components/Market/CartegoryBar.js b/src/components/Market/CartegoryBar.js
@@ -1,5 +1,8 @@
 import { useState } from "react";
 import styled from "styled-components";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
 
 const CategoryBar = ({ categories, onClick }) => {
     const [selectedCategory, setSelectedCategory] = useState("전체");
@@ -15,27 +18,32 @@ const CategoryBar = ({ categories, onClick }) => {
 
     return (
         <CategoryContainer>
-            {categories.map((categories) => (
-                <Category
-                    key={categories}
-                    onClick={() => {
-                        handleClick(categories);
-                    }}
-                    selected={selectedCategory === categories}
-                >
-                    {categories}
-                </Category>
-            ))}
+            <Swiper slidesPerView={7} spaceBetween={8}>
+                {categories.map((categories) => (
+                    <SwiperSlide key={categories}>
+                        <Category
+                            onClick={() => {
+                                handleClick(categories);
+                            }}
+                            selected={selectedCategory === categories}
+                        >
+                            {categories}
+                        </Category>
+                    </SwiperSlide>
+                ))}
+            </Swiper>
         </CategoryContainer>
     );
 };
 
 export default CategoryBar;
 
 const CategoryContainer = styled.div`
+    width: 100%;
     display: flex;
     gap: 12px;
     margin-bottom: 12px;
+    text-wrap: nowrap;
 `;
 
 const Category = styled.div`
@@ -46,7 +54,7 @@ const Category = styled.div`
     border-radius: 54px;
     font-size: 14px;
     text-align: center;
-    padding: 8px 12px;
+    padding: 8px 0px;
     cursor: pointer;
     color: ${(props) =>
         props.selected ? props.theme.color.primary : props.theme.color.gray400};

diff --git a/src/components/Market/EditList.js b/src/components/Market/EditList.js
@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import EditVisitItem from "./EditVisitItem";
+
+const EditList = ({ visitList, handleSelect = () => {} }) => {
+    const filteredVisitList = visitList.filter(
+        (item) => item.status === "BEFORE"
+    );
+    return (
+        <Wrapper>
+            <ListContainer>
+                {filteredVisitList.map((item, index) => (
+                    <EditVisitItem
+                        item={item}
+                        key={index} // 추가된 부분: key prop
+                        handleSelect={handleSelect}
+                    />
+                ))}
+            </ListContainer>
+            <Infomation>방문 전인 가게만 삭제할 수 있어요</Infomation>
+        </Wrapper>
+    );
+};
+
+export default EditList;
+
+const Wrapper = styled.div`
+    position: relative;
+    height: 58dvh;
+`;
+
+const Infomation = styled.div`
+    position: absolute;
+    width: calc(100% - 40px);
+    margin-bottom: 20px;
+    left: 20px;
+    height: 43px;
+    border-radius: 4px;
+    background-color: ${({ theme }) => theme.color.gray400};
+    bottom: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: white;
+    font-weight: ${({ theme }) => theme.fontWeight.medium};
+`;
+
+const ListContainer = styled.div`
+    margin-top: 18px;
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px;
+    gap: 32px;
+`;
diff --git a/src/components/Market/EditVisitItem.js b/src/components/Market/EditVisitItem.js
@@ -0,0 +1,176 @@
+import CheckButton from "components/Cart/CheckButton";
+import { useState } from "react";
+import styled from "styled-components";
+
+const EditVisitItem = ({ item, handleSelect = () => {} }) => {
+    const [isChecked, setIsChecked] = useState(false);
+
+    const handleClick = () => {
+        setIsChecked(!isChecked);
+        handleSelect(item.id);
+    };
+
+    return (
+        <ListItem>
+            <CheckButton
+                onClick={() => {
+                    handleClick();
+                }}
+                isChecked={isChecked}
+            />
+            <Wrapper>
+                <div className="store">
+                    <img src="https://via.placeholder.com/100" alt="store" />
+                    <div className="store-info">
+                        <di className="store-header">
+                            <span>분식</span>
+                            <span className="store-name">{item.store}</span>
+                        </di>
+                        <div className="status">{item.status}</div>
+                    </div>
+                </div>
+            </Wrapper>
+        </ListItem>
+    );
+};
+
+export default EditVisitItem;
+
+const ModalContainer = styled.div`
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const VisitModal = styled.div`
+    width: 296px;
+    height: 140px;
+    background-color: white;
+    border-radius: 5px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+
+    .buttons {
+        width: 100%;
+        display: flex;
+        gap: 12px;
+    }
+
+    font-size: 18px;
+    color: ${({ theme }) => theme.color.gray900};
+    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+
+    .title-text {
+        font-size: 20px;
+        font-weight: ${({ theme }) => theme.fontWeight.bold};
+        color: ${({ theme }) => theme.color.primary};
+        margin-top: 16px;
+        margin-bottom: 20px;
+    }
+
+    .sub-text {
+        font-size: 14px;
+        color: ${({ theme }) => theme.color.gray600};
+        font-weight: ${({ theme }) => theme.fontWeight.regular};
+        margin-bottom: 20px;
+    }
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    .line {
+        border-left: 1px solid ${({ theme }) => theme.color.gray100};
+        width: 0px;
+        height: 77px;
+        margin-left: 10.5px;
+    }
+`;
+
+const Number = styled.div`
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.color.primary};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    font-weight: ${({ theme }) => theme.fontSize.semiBold};
+    color: white;
+`;
+
+const ListItem = styled.div`
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+        border-radius: 14px;
+        width: 70px;
+        height: 70px;
+    }
+`;
+
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    width: 100%;
+    margin-left: 12px;
+
+    .store {
+        display: flex;
+        gap: 12px;
+    }
+
+    .store-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin: 3px 0;
+    }
+
+    .store-header {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 12px;
+        color: ${({ theme }) => theme.color.gray400};
+        font-weight: ${({ theme }) => theme.fontWeight.medium};
+        .store-name {
+            font-size: 14px;
+            color: ${({ theme }) => theme.color.gray900};
+            font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+        }
+    }
+
+    .time {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        color: ${({ theme }) => theme.color.gray300};
+        font-weight: ${({ theme }) => theme.fontWeight.medium};
+    }
+
+    .status {
+        font-size: 12px;
+        color: ${({ theme }) => theme.color.gray300};
+        font-weight: ${({ theme }) => theme.fontWeight.medium};
+    }
+`;
diff --git a/src/components/Market/MarketTab.js b/src/components/Market/MarketTab.js
@@ -5,7 +5,20 @@ import { ReactComponent as SearchIcon } from "assets/images/search.svg";
 import MarketInfo from "./MarketInfo";
 import { useState } from "react";
 
-const categories = ["전체", "한식", "분식", "중식", "양식", "일식", "일반"];
+const categories = [
+    "전체",
+    "한식",
+    "분식",
+    "간식",
+    "음료",
+    "식료품",
+    "의류",
+    "의류잡화",
+    "직물",
+    "침구",
+    "생활잡화",
+    "기타",
+];
 
 const MarketTab = ({ marketInfo, marketHours, visitList }) => {
     const [searchInfo, setSearchInfo] = useState({