diff --git a/public/index.html b/public/index.html index a634084..228de28 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/components/Cart/StoreList.js b/src/components/Cart/StoreList.js index cf05496..ebdfffc 100644 --- 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
; + if (isLoading) return ; 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 index 4f386d2..8160a75 100644 --- 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,17 +18,20 @@ const CategoryBar = ({ categories, onClick }) => { return ( - {categories.map((categories) => ( - { - handleClick(categories); - }} - selected={selectedCategory === categories} - > - {categories} - - ))} + + {categories.map((categories) => ( + + { + handleClick(categories); + }} + selected={selectedCategory === categories} + > + {categories} + + + ))} + ); }; @@ -33,9 +39,11 @@ const CategoryBar = ({ categories, onClick }) => { 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 new file mode 100644 index 0000000..313e57b --- /dev/null +++ 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 ( + + + {filteredVisitList.map((item, index) => ( + + ))} + + 방문 전인 가게만 삭제할 수 있어요 + + ); +}; + +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 new file mode 100644 index 0000000..bf80745 --- /dev/null +++ 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 ( + + { + handleClick(); + }} + isChecked={isChecked} + /> + +
+ store +
+ + 분식 + {item.store} + +
{item.status}
+
+
+ + + ); +}; + +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 index 1eb42b3..ecc5496 100644 --- 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({ diff --git a/src/components/Market/VisitItem.js b/src/components/Market/VisitItem.js index 8b73718..7ebf5d8 100644 --- a/src/components/Market/VisitItem.js +++ b/src/components/Market/VisitItem.js @@ -1,37 +1,138 @@ 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 { useState } from "react"; +import Button from "components/Common/Button"; -const VisitItem = ({ index, item, isLast }) => { +const VisitItem = ({ + index, + item, + isLast, + openId, + handleOpenModal = () => {}, +}) => { + const onCompleteClick = () => { + handleOpenModal(null); + }; + const onCancelClick = () => { + handleOpenModal(null); + }; return ( - - - {index} - {!isLast &&
} {/* 수정된 부분 */} - - - -
- store -
- - 분식 - {item.store} - -
-
-
- 사진을 추가해주세요 - review -
+ + +
0 ? "photo-added" : "" + }`} + > + 사진을 추가해주세요 + + +
+ + {photos.map((photo, index) => ( + + {`preview-${index}`} + + ))} +
@@ -95,6 +131,10 @@ const ReviewPage = () => { ); }; +const StyledSwiper = styled(Swiper)` + width: 99%; +`; + const BottomBar = styled.div` padding: 0 20px 25px 20px; `; @@ -191,12 +231,13 @@ const Review = styled.div` flex-direction: column; align-items: center; justify-content: center; - width: 100%; + width: calc(100% - 40px); height: 154px; background-color: ${({ theme }) => theme.color.gray50}; gap: 11px; border-radius: 8px; border: 1px solid ${({ theme }) => theme.color.gray100}; + padding: 20px; span { font-size: 18px; @@ -212,6 +253,23 @@ const Review = styled.div` } } } + + .photo-added { + width: 104px; + height: 104px; + padding: 0; + span { + display: none; + } + } + + .preview-image { + width: 104px; + height: 104px; + object-fit: cover; + border-radius: 12px; + border: 1px solid ${({ theme }) => theme.color.gray100}; + } `; const Menu = styled.div` diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js index 1fb54b5..de948f6 100644 --- a/src/pages/StorePage.js +++ b/src/pages/StorePage.js @@ -8,6 +8,7 @@ import StoreInfo from "../components/Store/StoreInfo"; import NavBar from "../components/Common/NavBar.js"; import useSyluvAxios from "hooks/useSyluvAxios"; import MenuItemDetail from "components/Store/MenuItemDetail"; +import Splash from "components/Common/Splash"; const PageWrapper = styled.div` font-family: "Pretendard", sans-serif; @@ -112,7 +113,7 @@ const StorePage = () => { }; if (isStoreLoading || isReviewLoading) { - return
Loading...
; + return ; } if (isStoreError || isReviewError) {