diff --git a/src/App.js b/src/App.js index 8e86266..8f3b63e 100644 --- a/src/App.js +++ b/src/App.js @@ -69,10 +69,6 @@ const App = () => { path="/menu/:menuItemId" element={} /> - } - /> } diff --git a/src/assets/images/foot_check.svg b/src/assets/images/foot_check.svg new file mode 100644 index 0000000..e9ff83b --- /dev/null +++ b/src/assets/images/foot_check.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/foot_check2.svg b/src/assets/images/foot_check2.svg new file mode 100644 index 0000000..cf2ffb7 --- /dev/null +++ b/src/assets/images/foot_check2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/warning.svg b/src/assets/images/warning.svg new file mode 100644 index 0000000..6a8a2be --- /dev/null +++ b/src/assets/images/warning.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Market/CartegoryBar.js b/src/components/Market/CartegoryBar.js index 8160a75..ee34575 100644 --- a/src/components/Market/CartegoryBar.js +++ b/src/components/Market/CartegoryBar.js @@ -18,7 +18,7 @@ const CategoryBar = ({ categories, onClick }) => { return ( - + {categories.map((categories) => ( {}, }) => { 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,13 +44,20 @@ const VisitItem = ({ break; } }, []); + + const handleVisitComplete = useCallback(() => { + syluvAxios + .patch(`/market/${item.visitListId}/visitlist/visited`) + .then((res) => { + setStatus("방문 완료"); + setStyle(false); + onCompleteClick(); + }); + }, [item.visitListId]); + return ( <> - { - handleOpenModal(index); - }} - > + {index + 1} {!isLast &&
} {/* 수정된 부분 */} @@ -54,27 +65,41 @@ const VisitItem = ({
- store + store
- 분식 + 카테고리주세요 {item.store}
-
- {status} -
+ { +
+ {status} +
+ }
+ + {style ? ( + + handleOpenModal(item.visitListId) + } + /> + ) : ( + + )} +
{style ? :
@@ -90,7 +115,7 @@ const VisitItem = ({
방문할 시각 -
+
setHour(e.target.value)} + onChange={(e) => handleTimeChange(e)} /> 시 { /> 분
+
+ + 에러메세지 뭐라해요 +
연락처 @@ -80,6 +93,7 @@ const OrderPage = () => { onClick={() => { navigate("/ordersuccess"); }} + error={true} > {new Intl.NumberFormat("ko-KR").format(51000)}원 결제하기 @@ -91,6 +105,7 @@ const OrderPage = () => { const Container = styled.div` margin-top: -12px; width: 100%; + margin-bottom: 80px; .section { display: flex; @@ -99,6 +114,15 @@ const Container = styled.div` padding: 28px 20px; border-bottom: 1px solid ${({ theme }) => theme.color.gray100}; + .error-message { + display: flex; + gap: 4px; + color: #ff3b30; + font-size: 14px; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + align-items: center; + } + .call { height: 48px; border-radius: 8px; @@ -164,6 +188,13 @@ const Container = styled.div` } } + .error { + input { + border: 1px solid #ff3b30; + color: #ff3b30; + } + } + button { height: 154px; border: 1px solid ${({ theme }) => theme.color.gray200}; @@ -210,8 +241,15 @@ const OrderButton = styled.button` border-radius: 8px; cursor: pointer; + ${({ error }) => + error && + ` + background-color: #b3b3b3; + cursor: not-allowed; + `} + @media (max-width: 480px) { - width: calc(100% - 40px); + width: calc(100dvw - 40px); } `; export default OrderPage; diff --git a/src/pages/ReviewPage.js b/src/pages/ReviewPage.js index d511567..9862de7 100644 --- a/src/pages/ReviewPage.js +++ b/src/pages/ReviewPage.js @@ -5,21 +5,18 @@ import starFilled from "assets/images/star-fill.png"; import add from "assets/images/add-button.png"; import { useEffect, useState } from "react"; import Button from "components/Common/Button"; -import { useNavigate, useParams } from "react-router-dom"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/navigation"; import useSyluvAxios from "hooks/useSyluvAxios"; -const ReviewPage = () => { +const ReviewPage = ({ name, date, handleClick = () => {}, orderId }) => { const [review, setReview] = useState(""); const [currentCount, setCurrentCount] = useState(0); const [rating, setRating] = useState(0); const [ratingText, setRatingText] = useState(""); const [photos, setPhotos] = useState([]); - const { orderId } = useParams(); const syluvAxios = useSyluvAxios(); - const navigate = useNavigate(); useEffect(() => { setCurrentCount(review.length); @@ -75,7 +72,7 @@ const ReviewPage = () => { console.log(response); }) .finally(() => { - navigate(-1, { replace: true }); + handleClick(); }); }; @@ -87,10 +84,12 @@ const ReviewPage = () => { menu
- 진아 수산 - 연어 회 + {name} + + 이거 뭘로표시함 메뉴별로 리뷰? +
- 2024년 7월 17일 오후 08:12 + {date}
diff --git a/src/utils/OauthCallback.js b/src/utils/OauthCallback.js index 2124276..6d3c818 100644 --- a/src/utils/OauthCallback.js +++ b/src/utils/OauthCallback.js @@ -44,7 +44,6 @@ const OauthCallback = () => { idToken: idToken, } ); - console.log(response.data.payload); return response.data.payload; } catch (error) { throw new Error("Failed to get Syluv token");