diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts index f4bed3d..254d0f5 100644 --- a/src/api/axiosInstance.ts +++ b/src/api/axiosInstance.ts @@ -19,8 +19,8 @@ const needAuthDefaultApi = axios.create({ baseURL: process.env.REACT_APP_API_URL, headers: { "Content-Type": "application/json", - Authorization: JSON.parse(localStorage.getItem("poomasi-user") || "{}")?.token - ? `Bearer ${JSON.parse(localStorage.getItem("poomasi-user") || "{}").token}` + Authorization: JSON.parse(localStorage.getItem("poomasi_user") || "{}")?.token + ? `Bearer ${JSON.parse(localStorage.getItem("poomasi_user") || "{}").token}` : undefined, }, withCredentials: true, diff --git a/src/api/businessApi.ts b/src/api/businessApi.ts index c6b98ee..6213e86 100644 --- a/src/api/businessApi.ts +++ b/src/api/businessApi.ts @@ -13,6 +13,6 @@ const useCreateBusiness = () => { return useMutation({ mutationFn: fetcher }); }; -const useGetBusiness = () => null; +const useGetBusinessDetail = () => null; -export { useCreateBusiness, useGetBusiness }; +export { useCreateBusiness, useGetBusinessDetail }; diff --git a/src/api/emailApi.ts b/src/api/emailApi.ts index 71ba09f..b633852 100644 --- a/src/api/emailApi.ts +++ b/src/api/emailApi.ts @@ -13,21 +13,11 @@ type LoginData = { password: string; }; -type FarmerRegisterData = { +type FarmerData = { name: string; address: string; phone: string; }; - -type FarmerData = { - name: string; - email: string; - password: string; - phoneNumber: string; - storeName: string; - storeAddress: string; -}; - type AddressData = { defaultAddress: string; addressDetail: string; @@ -49,7 +39,7 @@ const useLoginEmail = () => { }; const useCreateFarmer = () => { - const fetcher = (farmerData: FarmerRegisterData) => + const fetcher = (farmerData: FarmerData) => needAuthDefaultApi.put(`/api/members/to-farmer`, farmerData).then(({ data }) => data); return useMutation({ mutationFn: fetcher }); }; @@ -68,20 +58,6 @@ const useUpdateEmail = () => { }); }; -const useUpdateFarmer = () => { - const queryClient = useQueryClient(); - const fetcher = (updateData: FarmerData) => - needAuthDefaultApi.put(`/api/members/update/farmer`, updateData).then(({ data }) => data); - - return useMutation({ - mutationFn: fetcher, - onSuccess: () => - queryClient.invalidateQueries({ - queryKey: ["farmer"], - }), - }); -}; - const useUpdateAddress = () => { const queryClient = useQueryClient(); const fetcher = (updateData: AddressData) => @@ -106,12 +82,4 @@ const useDeleteAccount = () => { }); }; -export { - useCreateEmail, - useLoginEmail, - useUpdateEmail, - useUpdateAddress, - useCreateFarmer, - useUpdateFarmer, - useDeleteAccount, -}; +export { useCreateEmail, useLoginEmail, useUpdateEmail, useUpdateAddress, useCreateFarmer, useDeleteAccount }; diff --git a/src/api/farmApi.ts b/src/api/farmApi.ts index 266d025..49691c3 100644 --- a/src/api/farmApi.ts +++ b/src/api/farmApi.ts @@ -18,22 +18,6 @@ type FarmData = { endTime: string; }; -type ReservationData = { - farmId: number; - startTime: string; - endTime: string; - date: ["startDate", "endDate"]; -}; - -const useGetFarm = () => { - const fetcher = () => defaultApi.get(`/api/farms/{farmId}/detail`).then(({ data }) => data); - - return useQuery({ - queryKey: ["farms"], - queryFn: fetcher, - }); -}; - const useGetFarms = () => { const fetcher = () => defaultApi.get(`/api/farms`).then(({ data }) => data); @@ -53,7 +37,7 @@ const useGetFarmDetail = (farmId: number) => { }; const useCreateFarms = () => { - const fetcher = (farmData: FarmData) => defaultApi.post(`/api/farmer/farms`, farmData).then(({ data }) => data); + const fetcher = (farmData: FarmData) => defaultApi.post(`/api/farms`, farmData).then(({ data }) => data); return useMutation({ mutationFn: fetcher }); }; @@ -73,42 +57,4 @@ const useUpdateFarms = (farmId: number) => { }); }; -const useDeleteFarms = (farmId: number) => { - const queryClient = useQueryClient(); - - const fetcher = () => defaultApi.delete(`/api/farmer/farms/${farmId}`).then(({ data }) => data); - - return useMutation({ - mutationFn: fetcher, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ["farms"] }); - }, - }); -}; - -const useCreateReservations = () => { - const fetcher = (reservationData: ReservationData) => - defaultApi.post(`/api/farms/schedule`, reservationData).then(({ data }) => data); - - return useMutation({ mutationFn: fetcher }); -}; - -const useGetReservations = (farmId: number) => { - const fetcher = () => defaultApi.get(`/api/farms/schedule?farmId=17&year=2024&month=10`).then(({ data }) => data); - - return useQuery({ - queryKey: ["reservations", farmId], - queryFn: fetcher, - }); -}; - -export { - useGetFarm, - useGetFarms, - useGetFarmDetail, - useCreateFarms, - useUpdateFarms, - useDeleteFarms, - useCreateReservations, - useGetReservations, -}; +export { useGetFarms, useGetFarmDetail, useCreateFarms, useUpdateFarms }; diff --git a/src/api/intercepters.ts b/src/api/intercepters.ts index e2032ea..22e29df 100644 --- a/src/api/intercepters.ts +++ b/src/api/intercepters.ts @@ -13,10 +13,10 @@ const refrechIntercepter = async (response: AxiosResponse): Promise<AxiosRespons alert("로그아웃 되었습니다. 다시 로그인해주세요."); window.location.href = "/"; }); - const user = JSON.parse(localStorage.getItem("poomasi-user") || "{}"); + const user = JSON.parse(localStorage.getItem("poomasi_user") || "{}"); localStorage.setItem( - "poomasi-user", + "poomasi_user", JSON.stringify({ ...user, token: result, diff --git a/src/api/productApi.ts b/src/api/productApi.ts index 3e91d80..72fa8ca 100644 --- a/src/api/productApi.ts +++ b/src/api/productApi.ts @@ -5,18 +5,12 @@ type ProductData = { categoryId: number; name: string; description: string; + imageUrl: string; stock: string; price: string; growEnv: string; shippingFee: string; phoneNumber: string; - mainTitle: string; - subTitle1: string; - subDesc1: string; - subTitle2: string; - subDesc2: string; - subTitle3: string; - subDesc3: string; }; const useGetProducts = () => { diff --git a/src/api/reviewApi.ts b/src/api/reviewApi.ts deleted file mode 100644 index 3cc1c70..0000000 --- a/src/api/reviewApi.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; -import { defaultApi } from "@api/axiosInstance"; - -type ReviewData = { - rating: number; - content: string; - product_id?: number; - farm_id?: number; -}; - -const useGetProductReviews = (reviewId: number) => { - const fetcher = () => defaultApi.get(`/api/products/{product_id}/reviews`).then(({ data }) => data); - - return useQuery({ - queryKey: ["reviews", reviewId], - queryFn: fetcher, - }); -}; - -const useCreateProductReviews = () => { - const fetcher = (reviewData: ReviewData) => - defaultApi.post(`/api/products/{product_id}/reviews`, reviewData).then(({ data }) => data); - - return useMutation({ mutationFn: fetcher }); -}; - -const useUpdateReviews = (reviewId: number) => { - const queryClient = useQueryClient(); - - const fetcher = (reviewData: ReviewData) => - defaultApi.put(`/api/reviews/{review_id}`, reviewData).then(({ data }) => data); - - return useMutation({ - mutationFn: fetcher, - onSuccess: () => - queryClient.invalidateQueries({ - queryKey: ["reviews", reviewId], - }), - }); -}; - -const useDeleteReviews = (reviewId: number) => { - const queryClient = useQueryClient(); - - const fetcher = () => defaultApi.delete(`/api/reviews/${reviewId}`).then(({ data }) => data); - - return useMutation({ - mutationFn: fetcher, - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: ["reviews", reviewId], - }); - }, - }); -}; - -const useGetFarmReviews = (reviewId: number) => { - const fetcher = () => defaultApi.get(`/api/farms/{farm_id}/reviews`).then(({ data }) => data); - - return useQuery({ - queryKey: ["reviews", reviewId], - queryFn: fetcher, - }); -}; - -const useCreateFarmReviews = () => { - const fetcher = (reviewData: ReviewData) => - defaultApi.post(`/api/farms/{reservationId}/reviews`, reviewData).then(({ data }) => data); - - return useMutation({ mutationFn: fetcher }); -}; - -export { - useGetProductReviews, - useCreateProductReviews, - useUpdateReviews, - useDeleteReviews, - useGetFarmReviews, - useCreateFarmReviews, -}; diff --git a/src/api/storeApi.ts b/src/api/storeApi.ts deleted file mode 100644 index c54041a..0000000 --- a/src/api/storeApi.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { defaultApi } from "@api/axiosInstance"; - -type StoreData = { - name: string; - address: string; - phone: number; -}; - -const useCreateStore = () => { - const fetcher = (storeData: StoreData) => defaultApi.post(`/api/stores`, storeData).then(({ data }) => data); - - return useMutation({ mutationFn: fetcher }); -}; - -const useUpdateStore = () => { - const queryClient = useQueryClient(); - - const fetcher = (storeData: StoreData) => defaultApi.put(`/api/stores`, storeData).then(({ data }) => data); - - return useMutation({ - mutationFn: fetcher, - onSuccess: () => - queryClient.invalidateQueries({ - queryKey: ["store"], - }), - }); -}; - -export { useCreateStore, useUpdateStore }; diff --git a/src/api/wishlistApi.ts b/src/api/wishlistApi.ts deleted file mode 100644 index 1a777e2..0000000 --- a/src/api/wishlistApi.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { useQuery, useMutation } from "@tanstack/react-query"; -import { defaultApi, needAuthDefaultApi } from "@api/axiosInstance"; - -type WishlistData = { - product_id: number; -}; - -const useCreateWishlists = () => { - const fetcher = (wishlistData: WishlistData) => - defaultApi.post(`/api/v1/wishlist/{product_id}`, wishlistData).then(({ data }) => data); - - return useMutation({ mutationFn: fetcher }); -}; - -const useGetWishlists = (type: "product" | "farm") => { - const fetcher = () => needAuthDefaultApi.get(`/api/v1/wishlist`, { params: { type } }).then(({ data }) => data); - - return useQuery({ - queryKey: ["wishlists"], - queryFn: fetcher, - }); -}; - -const useDeleteWishlists = () => { - const fetcher = (wishlistId: number) => defaultApi.delete(`/api/v1/wishlist/${wishlistId}`).then(({ data }) => data); - - return useMutation({ mutationFn: fetcher }); -}; - -export { useCreateWishlists, useGetWishlists, useDeleteWishlists }; diff --git a/src/atoms/userAtom.ts b/src/atoms/userAtom.ts index 8b0cbfc..fac45de 100644 --- a/src/atoms/userAtom.ts +++ b/src/atoms/userAtom.ts @@ -7,7 +7,7 @@ type UserAtomValue = { role: string; }; -const userAtom = atom(localStorage.getItem("poomasi-user") ?? ""); +const userAtom = atom(localStorage.getItem("poomasi_user") ?? ""); const userAtomWithPersistence = atom( get => { @@ -16,7 +16,7 @@ const userAtomWithPersistence = atom( }, (_, set, data: UserAtomValue | null) => { set(userAtom, JSON.stringify(data)); - localStorage.setItem("poomasi-user", JSON.stringify(data)); + localStorage.setItem("poomasi_user", JSON.stringify(data)); }, ); diff --git a/src/components/common/KaKaoLoginButton.tsx b/src/components/common/KaKaoLoginButton.tsx index 0034fbe..489d350 100644 --- a/src/components/common/KaKaoLoginButton.tsx +++ b/src/components/common/KaKaoLoginButton.tsx @@ -4,7 +4,7 @@ import Image from "@components/common/Image"; type KaKaoLoginButtonProps = ImageProps; const KaKaoLoginButton = ({ ...props }: KaKaoLoginButtonProps) => { - const link = `${process.env.REACT_APP_API_URL}/oauth2/authentication/kakao`; + const link = "https://api.poomasi.shop/oauth2/authentication/kakao"; return ( <Link href={link} isExternal> diff --git a/src/components/features/FarmDetailPage/Schedule.tsx b/src/components/features/FarmDetailPage/Product.tsx similarity index 88% rename from src/components/features/FarmDetailPage/Schedule.tsx rename to src/components/features/FarmDetailPage/Product.tsx index 7fd53f9..e422c52 100644 --- a/src/components/features/FarmDetailPage/Schedule.tsx +++ b/src/components/features/FarmDetailPage/Product.tsx @@ -1,5 +1,7 @@ import { useState, useEffect } from "react"; -import { Box, Button, Text, Flex, Divider, Select } from "@chakra-ui/react"; + +import { HeartOutlined } from "@ant-design/icons"; +import { Box, Button, Text, Flex, Icon, Divider, Select } from "@chakra-ui/react"; import { useGetFarmDetail } from "@api/farmApi"; import Image from "@components/common/Image"; @@ -17,7 +19,7 @@ const defaultFormData = { endTime: "", }; -const Schedule = ({ scheduleId }: { scheduleId: number }) => { +const Product = ({ scheduleId }: { scheduleId: number }) => { const { data: farmDetail = defaultFormData } = useGetFarmDetail(scheduleId); const [dateOptions, setDateOptions] = useState<string[]>([]); @@ -38,7 +40,7 @@ const Schedule = ({ scheduleId }: { scheduleId: number }) => { return ( <Flex direction="row"> - <Box mt={100}> + <Box mt={100} ml={200}> <Image w="500px" h="530px" borderRadius="12px" alt="farmImage" src={farmDetail.imageUrl} /> </Box> <Flex direction="column" maxW="600px"> @@ -51,6 +53,20 @@ const Schedule = ({ scheduleId }: { scheduleId: number }) => { {farmDetail.price}원 / {farmDetail.maxTeam}팀(최대인원: {farmDetail.maxPeople}명) </Text> </Flex> + <Flex + align="center" + justify="center" + w="50px" + h="50px" + mt={100} + ml={10} + color="#FFFFFF" + borderRadius="12px" + cursor="pointer" + bgColor="#FC8181" + > + <Icon as={HeartOutlined} fontSize="30px" /> + </Flex> </Flex> <Divider w="500px" @@ -144,4 +160,4 @@ const Schedule = ({ scheduleId }: { scheduleId: number }) => { ); }; -export default Schedule; +export default Product; diff --git a/src/components/features/FarmDetailPage/ProductDescription.tsx b/src/components/features/FarmDetailPage/ProductDescription.tsx new file mode 100644 index 0000000..3d99cf7 --- /dev/null +++ b/src/components/features/FarmDetailPage/ProductDescription.tsx @@ -0,0 +1,93 @@ +import { Box, Text, Flex } from "@chakra-ui/react"; +import { useGetFarmDetail } from "@api/farmApi"; +import Image from "@components/common/Image"; + +const defaultInfo = { + title: "", + mainImage: "", + detailTitles: ["", "", ""], + detailDescriptions: ["", "", ""], + detailImages: ["", "", ""], +}; + +const ProductDescription = ({ scheduleId }: { scheduleId: number }) => { + const { data: farmDetail = defaultInfo } = useGetFarmDetail(scheduleId); + + return ( + <Flex direction="column"> + <Text mt={5} color="#000000" fontSize="32px" fontWeight="bold"> + {farmDetail.title} + </Text> + <Flex direction="row"> + <Image w="500px" h="490px" mt={10} borderRadius="12px" alt="mainImage" src={farmDetail.mainImage} /> + <Flex direction="column"> + <Box w="520px" h="150px" mt={10} ml={10} borderRadius="12px" bgColor="#22543D"> + <Flex direction="row"> + <Flex direction="column" ml={8}> + <Text mt={7} color="#FFFFFF" fontSize="27px" fontWeight="bold"> + {farmDetail.detailTitles[0]} + </Text> + <Text color="#FFFFFF" fontSize="15px" fontWeight="medium"> + {farmDetail.detailDescriptions[0]} + </Text> + </Flex> + <Image + w="120px" + h="120px" + mt={4} + ml={67} + borderRadius="100px" + alt="detailImage" + src={farmDetail.detailImages[0]} + /> + </Flex> + </Box> + <Box w="520px" h="150px" mt={5} ml={10} borderRadius="12px" bgColor="#22543D"> + <Flex direction="row"> + <Flex direction="column" ml={8}> + <Text mt={7} color="#FFFFFF" fontSize="27px" fontWeight="bold"> + {farmDetail.detailTitles[1]} + </Text> + <Text color="#FFFFFF" fontSize="15px" fontWeight="medium"> + {farmDetail.detailDescriptions[1]} + </Text> + </Flex> + <Image + w="120px" + h="120px" + mt={4} + ml={41} + borderRadius="100px" + alt="detailImage" + src={farmDetail.detailImages[0]} + /> + </Flex> + </Box> + <Box w="520px" h="150px" mt={5} ml={10} borderRadius="12px" bgColor="#22543D"> + <Flex direction="row"> + <Flex direction="column" ml={8}> + <Text mt={7} color="#FFFFFF" fontSize="27px" fontWeight="bold"> + {farmDetail.detailTitles[2]} + </Text> + <Text color="#FFFFFF" fontSize="15px" fontWeight="medium"> + {farmDetail.detailDescriptions[2]} + </Text> + </Flex> + <Image + w="120px" + h="120px" + mt={4} + ml={41} + borderRadius="100px" + alt="detailImage" + src={farmDetail.detailImages[0]} + /> + </Flex> + </Box> + </Flex> + </Flex> + </Flex> + ); +}; + +export default ProductDescription; diff --git a/src/components/features/IntroductionPage/Introduction.tsx b/src/components/features/IntroductionPage/Introduction.tsx index 5a5f858..eb49bb7 100644 --- a/src/components/features/IntroductionPage/Introduction.tsx +++ b/src/components/features/IntroductionPage/Introduction.tsx @@ -8,18 +8,17 @@ import Intro7 from "@assets/Image/Intro/Intro7.png"; import Intro8 from "@assets/Image/Intro/Intro8.png"; import Image from "@components/common/Image"; import ImageCard from "@components/common/ImageCard"; -import size from "@constants/size"; const Introduction = () => ( - <Flex align="center" direction="column" w="full" h="full" minH={`calc(100vh - ${size.footer.h} - ${size.header.h})`}> + <Box overflowY="auto" w="100vw" h="100vh"> <Flex direction="column" w="full" h="fit-content"> - <ImageCard borderRadius="none" bgImg={Intro1}> + <ImageCard bgImg={Intro1}> <Text m="auto" color="#FFFFFF" fontSize="32px" fontWeight="bold" textAlign="center"> 우리가 꿈꾸는 내일, 농민과 고객이 함께 만드는 새로운 유통 </Text> </ImageCard> </Flex> - <Flex direction="column" w="full" mt="20"> + <Flex direction="column" w="full" h="100vh" mt="20"> <Text mb={1} color="#000000" fontSize="20px" fontWeight="bold" textAlign="center"> 품앗이 이야기 </Text> @@ -88,7 +87,7 @@ const Introduction = () => ( <Image w="500px" h="800px" alt="Intro6" src={Intro6} /> </Flex> - <Flex align="center" justify="center" direction="column" my={200}> + <Flex align="center" justify="center" direction="column" mt={200}> <Text mb={20} color="#1C4532" fontSize="32px" fontWeight="bold" textAlign="center"> 농업인의 땀과 소비자의 마음을 직접 이어, <br /> @@ -133,7 +132,7 @@ const Introduction = () => ( </Box> </Flex> </Flex> - </Flex> + </Box> ); export default Introduction; diff --git a/src/components/features/MyPage/Category.tsx b/src/components/features/MyPage/Category.tsx index 36227da..d4607e2 100644 --- a/src/components/features/MyPage/Category.tsx +++ b/src/components/features/MyPage/Category.tsx @@ -3,7 +3,7 @@ import { HeartOutlined, ProfileOutlined, UserOutlined } from "@ant-design/icons" import { Text, Flex, Box, Icon, Link as ChakraLink } from "@chakra-ui/react"; const Category = () => ( - <Box pos="sticky" top="10" flexShrink="1" w="330px" h="800px" border="none" borderRadius="20px" bgColor="#FFFFFF"> + <Box flexShrink="1" w="330px" h="800px" border="none" borderRadius="20px" bgColor="#FFFFFF"> <Flex direction="column"> <Flex direction="row" mt={10} ml={5}> <Icon as={HeartOutlined} color="#22543D" fontSize="25px" /> @@ -11,18 +11,11 @@ const Category = () => ( 위시리스트 </Text> </Flex> - <ChakraLink - as={Link} - w="100px" - h="20px" - mt={3} - ml={5} - color="#5C5C5C" - fontSize="16px" - fontWeight="medium" - to="/me/product-wish" - > - 위시리스트 + <ChakraLink as={Link} w="50px" h="20px" mt={3} ml={5} color="#5C5C5C" fontSize="16px" fontWeight="medium"> + 농산품 + </ChakraLink> + <ChakraLink as={Link} w="68px" h="20px" mt={1} ml={5} color="#5C5C5C" fontSize="16px" fontWeight="medium"> + 농장 체험 </ChakraLink> <Flex direction="row" mt={10} ml={5}> <Icon as={ProfileOutlined} color="#22543D" fontSize="25px" /> diff --git a/src/components/features/MyPage/Order/ContactModal.tsx b/src/components/features/MyPage/Order/ContactModal.tsx index 088fd32..391868c 100644 --- a/src/components/features/MyPage/Order/ContactModal.tsx +++ b/src/components/features/MyPage/Order/ContactModal.tsx @@ -6,7 +6,7 @@ import CancelOrderModal from "./CancelOrderModal"; import ContactNumberModal from "./ContactNumberModal"; interface ContactModalProps { - status: "CANCANCEL" | "CANREFUND" | "OTHER"; + status: "CANCANCLE" | "CANREFUND" | "OTHER"; isOpen: boolean; onClose: () => void; maxW?: string; @@ -101,7 +101,7 @@ const ContactModal: React.FC<ContactModalProps> = ({ {status === "CANREFUND" && ( <RefundModal isOpen={isRefundModalOpen} onClose={handleCloseRefundModal} productId={productId} /> )} - {status === "CANCANCEL" && ( + {status === "CANCANCLE" && ( <CancelOrderModal isOpen={isRefundModalOpen} onClose={handleCloseRefundModal} productId={productId} /> )} </ModalBody> diff --git a/src/components/features/MyPage/Order/FarmList.tsx b/src/components/features/MyPage/Order/FarmList.tsx index 77f4fd5..25a161d 100644 --- a/src/components/features/MyPage/Order/FarmList.tsx +++ b/src/components/features/MyPage/Order/FarmList.tsx @@ -1,92 +1,56 @@ -import { useState } from "react"; import { Flex, Button, Text } from "@chakra-ui/react"; import farm1 from "@assets/Image/Farm/Farm1.png"; import Image from "@components/common/Image"; -import { Farm } from "@type/index"; -import ContactNumberModal from "./ContactNumberModal"; -import ReviewModal from "./ReviewModal"; -const FarmList = ({ item }: { item: Farm }) => { - const [isReviewModalOpen, setIsReviewModalOpen] = useState(false); - const [isContactModalOpen, setIsContactModalOpen] = useState(false); - - const handleOpenReviewModal = () => { - setIsReviewModalOpen(true); - }; - - const handleCloseReviewModal = () => { - setIsReviewModalOpen(false); - }; - - const handleOpenContactModal = () => { - setIsContactModalOpen(true); - }; - - const handleCloseContactModal = () => { - setIsContactModalOpen(false); - }; - - return ( +const FarmList = () => ( + <Flex justify="space-between" direction="row" mt={10}> <Flex direction="column"> + <Text color="#000000" fontSize="20px" fontWeight="bold"> + 2024.09.14 + </Text> <Text mt={3} color="#000000" fontSize="16px" fontWeight="bold"> - {item.name} + 지민이네 복숭아 농장 </Text> - <Flex align="center" justify="space-between" direction="row" gap="10px"> - <Image mt={3} w="150px" borderRadius="xl" h="150px" src={farm1} alt="Farm image" /> - <Flex align="flex-start" justify="flex-start" direction="column" ml={-10}> - <Flex direction="row"> - <Text color="#000000" fontSize="16px" fontWeight="bold"> - 주소 : - </Text> - <Text color="#000000" fontSize="16px" fontWeight="medium"> - {item.address} - </Text> - </Flex> - - <Text color="#000000" fontSize="16px" fontWeight="bold"> - 한 줄 소개 - </Text> - <Text w="300px" color="#000000" fontSize="16px" fontWeight="medium"> - {item.description} - </Text> - </Flex> - <Flex justify="center" direction="column" gap="10px"> - <Button - w="200px" - h="45px" - color="#22543D" - fontSize="20px" - fontWeight="bold" - borderWidth="1px" - borderColor="#22543D" - borderRadius="12px" - _hover={{ bgColor: "#FFFFFF" }} - bgColor="#FFFFFF" - onClick={handleOpenContactModal} - > - 📞 문의 - </Button> - {isContactModalOpen && <ContactNumberModal isOpen={isContactModalOpen} onClose={handleCloseContactModal} />} - <Button - w="200px" - h="45px" - color="#FFFFFF" - fontSize="20px" - fontWeight="bold" - borderWidth="1px" - borderColor="#22543D" - borderRadius="12px" - _hover={{ bgColor: "#22543D" }} - bgColor="#22543D" - onClick={handleOpenReviewModal} - > - ✍️ 후기 쓰기 - </Button> - {isReviewModalOpen && <ReviewModal isOpen={isReviewModalOpen} onClose={handleCloseReviewModal} />} - </Flex> + <Flex align="center" direction="row" gap="10px"> + <Image mt={3} w="150px" h="150px" src={farm1} alt="Farm image" /> + <Text w="250px" color="#000000" fontSize="16px" fontWeight="medium"> + 가끔 지민은 학교에서 심각하게 집에 가고싶을 때가 있어요. 그럴 때면 로만이나 자스민에서 산 달달한 복숭아 + 아이스티를 마시며 향수병을 달랩니다. + </Text> </Flex> </Flex> - ); -}; + + <Flex justify="center" direction="column" gap="10px"> + <Button + w="230px" + h="50px" + color="#22543D" + fontSize="24px" + fontWeight="bold" + borderWidth="1px" + borderColor="#22543D" + borderRadius="12px" + _hover={{ bgColor: "#FFFFFF" }} + bgColor="#FFFFFF" + > + 문의하기 + </Button> + <Button + w="230px" + h="50px" + color="#FFFFFF" + fontSize="24px" + fontWeight="bold" + borderWidth="1px" + borderColor="#22543D" + borderRadius="12px" + _hover={{ bgColor: "#22543D" }} + bgColor="#22543D" + > + 후기쓰기 + </Button> + </Flex> + </Flex> +); export default FarmList; diff --git a/src/components/features/MyPage/Order/ReviewList.tsx b/src/components/features/MyPage/Order/ReviewList.tsx index 30a1088..14e5d3a 100644 --- a/src/components/features/MyPage/Order/ReviewList.tsx +++ b/src/components/features/MyPage/Order/ReviewList.tsx @@ -1,94 +1,54 @@ -import { useState } from "react"; -import { Flex, Button, Text, Alert } from "@chakra-ui/react"; - -import { useDeleteReviews } from "@api/reviewApi"; +import { Flex, Button, Text } from "@chakra-ui/react"; +import store8 from "@assets/Image/Store/Store8.png"; import Image from "@components/common/Image"; -import { Review } from "@type/index"; -import ReviewModal from "./ReviewModal"; - -const ReviewList = ({ item }: { item: Review }) => { - const [isEditModalOpen, setIsEditModalOpen] = useState(false); - const { mutate: deleteReview } = useDeleteReviews(item.id); - - const handleDelete = () => { - deleteReview(undefined, { - onSuccess: () => { - <Alert title="해당 리뷰가 삭제되었습니다." />; - }, - onError: () => { - <Alert title="삭제에 실패했습니다. 다시 시도해주세요." />; - }, - }); - }; - - const handleEditClick = () => { - setIsEditModalOpen(true); - }; - - const handleEditModalClose = () => { - setIsEditModalOpen(false); - }; - - return ( - <> - <Flex direction="column"> - <Flex justify="space-between" direction="row" flex="1" mt={3}> - <Flex justify="flex-start" direction="column"> - <Text mt={3} color="#000000" fontSize="16px" fontWeight="medium"> - {item.name} - </Text> - <Image mt={3} w="150px" h="150px" borderRadius="xl" src={item.image} alt="Review image" /> - <Text mt={3} color="#000000" fontSize="16px" fontWeight="medium"> - {item.description} - </Text> - </Flex> - <Flex justify="center" direction="column" gap="10px"> - <Button - w="200px" - h="45px" - color="#22543D" - fontSize="20px" - fontWeight="bold" - borderWidth="1px" - borderColor="#22543D" - borderRadius="12px" - _hover={{ bgColor: "#FFFFFF" }} - bgColor="#FFFFFF" - onClick={handleDelete} - > - 리뷰 삭제 - </Button> - <Button - w="200px" - h="45px" - color="#FFFFFF" - fontSize="20px" - fontWeight="bold" - borderWidth="1px" - borderColor="#22543D" - borderRadius="12px" - _hover={{ bgColor: "#22543D" }} - bgColor="#22543D" - onClick={handleEditClick} - > - 리뷰 수정 - </Button> - </Flex> - </Flex> - </Flex> - <ReviewModal - isOpen={isEditModalOpen} - onClose={handleEditModalClose} - isEditing - initialData={{ - rating: item.rating, - content: item.description, - id: item.id, - }} - /> - </> - ); -}; +const ReviewList = () => ( + <Flex justify="space-between" direction="row" mt={10}> + <Flex direction="column"> + <Text color="#000000" fontSize="20px" fontWeight="bold"> + 2024.09.14 + </Text> + + <Text mt={3} color="#000000" fontSize="16px" fontWeight="medium"> + 건호네 하나뿐인 미나리 + </Text> + <Image mt={3} w="150px" h="150px" src={store8} alt="Review image" /> + <Text mt={3} color="#000000" fontSize="16px" fontWeight="medium"> + 기대 안하고 샀는데 생각보다 괜찮아요. + </Text> + </Flex> + + <Flex justify="center" direction="column" gap="10px"> + <Button + w="230px" + h="50px" + color="#22543D" + fontSize="24px" + fontWeight="bold" + borderWidth="1px" + borderColor="#22543D" + borderRadius="12px" + _hover={{ bgColor: "#FFFFFF" }} + bgColor="#FFFFFF" + > + 리뷰 삭제 + </Button> + <Button + w="230px" + h="50px" + color="#FFFFFF" + fontSize="24px" + fontWeight="bold" + borderWidth="1px" + borderColor="#22543D" + borderRadius="12px" + _hover={{ bgColor: "#22543D" }} + bgColor="#22543D" + > + 리뷰 수정 + </Button> + </Flex> + </Flex> +); export default ReviewList; diff --git a/src/components/features/MyPage/Order/ReviewModal.tsx b/src/components/features/MyPage/Order/ReviewModal.tsx index ebf0695..6f2f578 100644 --- a/src/components/features/MyPage/Order/ReviewModal.tsx +++ b/src/components/features/MyPage/Order/ReviewModal.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState, useEffect } from "react"; +import React, { useRef, useState } from "react"; import { UploadOutlined } from "@ant-design/icons"; import { Flex, @@ -10,10 +10,8 @@ import { Divider, Icon, Input, - Textarea, - Alert, + Box, } from "@chakra-ui/react"; -import { useCreateFarmReviews, useCreateProductReviews, useUpdateReviews } from "@api/reviewApi"; import Image from "@components/common/Image"; import StarRating from "@components/common/StarRating"; import BasicModal from "@components/common/modal/BasicModal"; @@ -22,39 +20,14 @@ type ReviewModalProps = { isOpen: boolean; onClose: () => void; productId?: number; - farmId?: number; - isEditing?: boolean; - initialData?: { - rating: number; - content: string; - id: number; - }; }; -const ReviewModal: React.FC<ReviewModalProps> = ({ - isOpen, - onClose, - productId, - farmId, - isEditing = false, - initialData, -}) => { +const ReviewModal: React.FC<ReviewModalProps> = ({ isOpen, onClose, productId }) => { const mainImageInputRef = useRef<HTMLInputElement>(null); const [imageUrl, setImageUrl] = useState<string>(); const [rating, setRating] = useState<number>(0); const [reviewText, setReviewText] = useState<string>(""); - const { mutate: createProductReview } = useCreateProductReviews(); - const { mutate: createFarmReview } = useCreateFarmReviews(); - const { mutate: updateReview } = useUpdateReviews(initialData?.id || 0); - - useEffect(() => { - if (isEditing && initialData) { - setRating(initialData.rating); - setReviewText(initialData.content); - } - }, [isEditing, initialData]); - const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0]; if (file) { @@ -66,67 +39,22 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ setRating(newRating); }; - const handleReviewTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { + const handleReviewTextChange = (event: React.ChangeEvent<HTMLInputElement>) => { setReviewText(event.target.value); }; const handleReviewSubmit = () => { const reviewData = { + productId, rating, - content: reviewText, + reviewText, + imageUrl, }; - if (isEditing && initialData) { - updateReview( - { ...reviewData, farm_id: initialData.id }, - { - onSuccess: () => { - <Alert title="리뷰가 성공적으로 수정되었습니다." />; - setTimeout(onClose, 2000); - }, - onError: () => { - <Alert title="리뷰 수정 중 오류가 발생했습니다." />; - }, - }, - ); - } else { - if (productId) { - createProductReview( - { ...reviewData, product_id: productId }, - { - onSuccess: () => { - <Alert title="상품 리뷰가 성공적으로 등록되었습니다." />; - setTimeout(onClose, 2000); - }, - onError: () => { - <Alert title="상품 리뷰 등록 중 오류가 발생했습니다." />; - }, - }, - ); - } - - if (farmId) { - createFarmReview( - { ...reviewData, farm_id: farmId }, - { - onSuccess: () => { - <Alert title="농장 리뷰가 성공적으로 등록되었습니다." />; - setTimeout(onClose, 2000); - }, - onError: () => { - <Alert title="농장 리뷰 등록 중 오류가 발생했습니다." />; - }, - }, - ); - } - } - }; - - const handleCancel = () => { - onClose(); + postMessage(reviewData); }; return ( - <BasicModal isOpen={isOpen} onClose={onClose} maxW="800px" maxH="1100px"> + <BasicModal isOpen={isOpen} onClose={onClose} maxW="800px" maxH="1000px"> <ModalCloseButton _hover={{ bg: "#FFFFFF" }} /> <ModalHeader color="#22543D" fontSize="25px" fontWeight="bold"> 후기 쓰기 @@ -152,34 +80,32 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ as={UploadOutlined} mx="5" mt={12} - ml={-230} + ml={-200} color="#000000" fontSize="30px" cursor="pointer" onClick={() => mainImageInputRef.current?.click()} /> - <Flex pos="relative" align="flex-end" justify="flex-end" w="100%" h="200px" mt="5" mr={100}> + <Flex pos="relative" align="flex-end" justify="flex-end" w="100%" h="200px" mt="5" mr={95}> <Image flexShrink="0" w="200px" h="200px" objectFit="cover" alt="main image" src={imageUrl} /> <Input ref={mainImageInputRef} display="none" accept="image/*" onChange={handleImageChange} type="file" /> </Flex> </Flex> - <Textarea - w="600px" - h="150px" - mt={10} - p="10px" - borderWidth="0.4px" - borderColor="#000000" - _focus={{ borderColor: "#000000", boxShadow: "none" }} - _placeholder={{ color: "#D9D9D9", fontWeight: "bold", fontSize: "16px" }} - bgColor="#FFFFFF" - onChange={handleReviewTextChange} - placeholder="구매하신 상품의 후기를 남겨주시면 다른 구매자들에게도 도움이 됩니다." - value={reviewText} - /> - - <Flex justify="center" direction="row" gap="5px" mt={10} mb={10}> + <Box w="600px" h="150px" mt={10} borderWidth="0.4px" borderColor="#000000" bgColor="#FFFFFF"> + <Input + w="500px" + mt={2} + ml={2} + border="none" + _focus={{ borderColor: "transparent", boxShadow: "none" }} + _placeholder={{ color: "#D9D9D9", fontWeight: "bold", fontSize: "16px" }} + onChange={handleReviewTextChange} + placeholder="구매하신 상품의 후기를 남겨주시면 다른 구매자들에게도 도움이 됩니다." + value={reviewText} + /> + </Box> + <Flex justify="center" direction="row" gap="5px" mt={10}> <Button w="230px" h="50px" @@ -191,7 +117,6 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ borderRadius="12px" _hover={{ bgColor: "#FFFFFF" }} bgColor="#FFFFFF" - onClick={handleCancel} > 작성 취소 </Button> diff --git a/src/components/features/MyPage/OrderItem/ProductOrderItem.tsx b/src/components/features/MyPage/OrderItem/ProductOrderItem.tsx index 5d419d3..d5953c1 100644 --- a/src/components/features/MyPage/OrderItem/ProductOrderItem.tsx +++ b/src/components/features/MyPage/OrderItem/ProductOrderItem.tsx @@ -27,7 +27,7 @@ const nonButton = (status: ProductOrderStatus) => const other = (status: ProductOrderStatus) => !canReview(status) && !nonButton(status); const contactStatus = (status: ProductOrderStatus) => { - if (other(status)) return "CANCANCEL"; + if (other(status)) return "CANCANCLE"; if (status === "DELIVERED") return "CANREFUND"; return "OTHER"; }; diff --git a/src/components/features/MyPage/Wishlist/ProductWish.tsx b/src/components/features/MyPage/Wishlist/ProductWish.tsx deleted file mode 100644 index a4cf0e0..0000000 --- a/src/components/features/MyPage/Wishlist/ProductWish.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Flex, Button, Text, Box, Alert, Spinner } from "@chakra-ui/react"; -import { useDeleteWishlists, useGetWishlists } from "@api/wishlistApi"; -import farm1 from "@assets/Image/Farm/Farm1.png"; -import Image from "@components/common/Image"; - -type Product = { - id: number; - name: string; - tag: string; - price: number; - deliveryFee: number; -}; - -const ProductWish = () => { - const { data: wishlists, isLoading, refetch } = useGetWishlists("product"); - const { mutate: deleteWishlist } = useDeleteWishlists(); - - const handleDelete = (wishlistId: number) => { - deleteWishlist(wishlistId, { - onSuccess: () => { - <Alert title="해당 상품이 위시리스트에서 삭제되었습니다." />; - refetch(); - }, - onError: () => { - <Alert title="삭제에 실패했습니다. 다시 시도해주세요." />; - }, - }); - }; - - if (isLoading) { - return <Spinner color="#22543D" size="xl" />; - } - - return ( - <Flex direction="column"> - {wishlists?.map((product: Product) => ( - <Flex direction="row" gap="10px"> - <Image mt={3} w="150px" borderRadius="xl" h="150px" src={farm1} alt="Farm image" /> - <Flex justify="space-between" flex="1"> - <Flex justify="center" direction="column"> - <Flex direction="row"> - <Text color="#000000" fontSize="20px" fontWeight="bold"> - {product.name} - </Text> - <Box as={Flex} justify="center" w="70px" h="25px" mt={1} ml={5} borderRadius="12px" bgColor="#22543D"> - <Text color="#FFFFFF" fontSize="16px" fontWeight="medium"> - {product.tag} - </Text> - </Box> - </Flex> - - <Flex direction="row"> - <Text color="#000000" fontSize="16px" fontWeight="bold"> - 가격: - </Text> - <Text ml={2} color="#22543D" fontSize="16px" fontWeight="bold"> - {product.price.toLocaleString()} - </Text> - <Text color="#000000" fontSize="16px" fontWeight="bold"> - 원 - </Text> - </Flex> - - <Flex direction="row"> - <Text color="#000000" fontSize="16px" fontWeight="bold"> - 배송비: - </Text> - <Text ml={2} color="#22543D" fontSize="16px" fontWeight="bold"> - {product.deliveryFee} - </Text> - <Text color="#000000" fontSize="16px" fontWeight="bold"> - 원 - </Text> - </Flex> - </Flex> - <Flex justify="center" direction="column" gap="10px"> - <Button - w="200px" - h="45px" - color="#22543D" - fontSize="20px" - fontWeight="bold" - borderWidth="1px" - borderColor="#22543D" - borderRadius="12px" - _hover={{ bgColor: "#FFFFFF" }} - bgColor="#FFFFFF" - onClick={() => handleDelete(product.id)} - > - 삭제 - </Button> - <Button - w="200px" - h="45px" - color="#FFFFFF" - fontSize="20px" - fontWeight="bold" - borderWidth="1px" - borderColor="#22543D" - borderRadius="12px" - _hover={{ bgColor: "#22543D" }} - bgColor="#22543D" - > - 장바구니 - </Button> - </Flex> - </Flex> - </Flex> - ))} - </Flex> - ); -}; - -export default ProductWish; diff --git a/src/components/features/SchedulePage/ScheduleCard.tsx b/src/components/features/SchedulePage/ScheduleCard.tsx index be926cb..2f2087f 100644 --- a/src/components/features/SchedulePage/ScheduleCard.tsx +++ b/src/components/features/SchedulePage/ScheduleCard.tsx @@ -1,5 +1,4 @@ -import { Link } from "react-router-dom"; -import { Box, Flex, Text } from "@chakra-ui/react"; +import { Flex, Text } from "@chakra-ui/react"; import ImageCard, { ImageCardProps } from "@components/common/ImageCard"; import { Schedule } from "@type/index"; @@ -8,29 +7,23 @@ type ScheduleCardProps = ImageCardProps & { }; const ScheduleCard = ({ item, ...props }: ScheduleCardProps) => ( - <Box as={Link} to={`/schedule/${item.id}`}> - <ImageCard - h="full" - {...props} - imageProps={{ - filter: "auto", - brightness: item?.mainImage ? 1 : 0.6, - }} - bgImg={item.mainImage} - _hover={{ - transform: "scale(1.05)", - }} - > - <Flex align="center" direction="column" w="full" mt="auto" mb="10"> - <Text px="5" color="green" bg="white" borderRadius="xl"> - {item.farm.address} - </Text> - <Text color="white" fontSize="2xl" fontWeight="bold"> - {item.name} - </Text> - </Flex> - </ImageCard> - </Box> + <ImageCard + {...props} + imageProps={{ + filter: "auto", + brightness: item?.mainImage ? 1 : 0.6, + }} + bgImg={item.mainImage} + > + <Flex align="center" direction="column" w="full" mt="auto" mb="10"> + <Text px="5" color="green" bg="white" borderRadius="xl"> + {item.farm.address} + </Text> + <Text color="white" fontSize="2xl" fontWeight="bold"> + {item.name} + </Text> + </Flex> + </ImageCard> ); export default ScheduleCard; diff --git a/src/components/features/SellerPage/AddFarm/index.tsx b/src/components/features/SellerPage/AddFarm/index.tsx index e13956b..b541e1d 100644 --- a/src/components/features/SellerPage/AddFarm/index.tsx +++ b/src/components/features/SellerPage/AddFarm/index.tsx @@ -111,7 +111,6 @@ const AddFarm = ({ isEdit, originFarm }: AddFarm) => { setFormData(prevData => ({ ...prevData, ...data, - date: [prevData.startDate, prevData.endDate], })); }; diff --git a/src/components/features/SellerPage/AddProduct/index.tsx b/src/components/features/SellerPage/AddProduct/index.tsx index dca770c..998032e 100644 --- a/src/components/features/SellerPage/AddProduct/index.tsx +++ b/src/components/features/SellerPage/AddProduct/index.tsx @@ -6,7 +6,6 @@ import { useCreateProducts, useUpdateProducts } from "@api/productApi"; import BasicInfo from "./BasicInfo"; import DetailInfo from "./DetailInfo"; import PriceInfo from "./PriceInfo"; -import { Info } from "./type"; type FormData = { categoryId: number; @@ -19,7 +18,6 @@ type FormData = { addressDetail: string; shippingFee: string; phoneNumber: string; - isEdit: boolean; }; const defaultFormData = { @@ -51,8 +49,7 @@ type AddProduct = { const AddProduct = ({ isEdit, originProduct }: AddProduct) => { const [formData, setFormData] = useState<FormData>(originProduct || defaultFormData); - const [info, setInfo] = useState<Info>(defaultInfo); - + const [info, setInfo] = useState(defaultInfo); const [address, setAddress] = useState<string>(""); const navigate = useNavigate(); @@ -87,16 +84,7 @@ const AddProduct = ({ isEdit, originProduct }: AddProduct) => { const handleSubmit = async () => { if (isEdit) { - updateProduct({ - ...formData, - mainTitle: info.title, - subTitle1: info.detailTitles[0], - subTitle2: info.detailTitles[1], - subTitle3: info.detailTitles[2], - subDesc1: info.detailDescriptions[0], - subDesc2: info.detailDescriptions[1], - subDesc3: info.detailDescriptions[2], - }) + updateProduct(formData) .then(() => { setAlert({ message: `Product updated successfully!`, status: "success" }); }) @@ -104,16 +92,7 @@ const AddProduct = ({ isEdit, originProduct }: AddProduct) => { setAlert({ message: "Error updating product.", status: "error" }); }); } else { - createProduct({ - ...formData, - mainTitle: info.title, - subTitle1: info.detailTitles[0], - subTitle2: info.detailTitles[1], - subTitle3: info.detailTitles[2], - subDesc1: info.detailDescriptions[0], - subDesc2: info.detailDescriptions[1], - subDesc3: info.detailDescriptions[2], - }) + createProduct(formData) .then(() => { setAlert({ message: `Product registered successfully!`, status: "success" }); setFormData(defaultFormData); @@ -137,12 +116,9 @@ const AddProduct = ({ isEdit, originProduct }: AddProduct) => { )} <BasicInfo formData={formData} onChange={handleBasicInfoChange} /> <DetailInfo - infoProps={{ - info, - setInfo, - }} onAddressChange={handleAddressChange} address={address} + infoProps={{ info, setInfo }} formData={formData} onChange={handleDetailInfoChange} /> diff --git a/src/components/features/SellerPage/AddProduct/type.ts b/src/components/features/SellerPage/AddProduct/type.ts index 58972fe..b177df3 100644 --- a/src/components/features/SellerPage/AddProduct/type.ts +++ b/src/components/features/SellerPage/AddProduct/type.ts @@ -1,6 +1,6 @@ export type Info = { title: string; - mainImage: string; + productImageState: string; detailTitles: string[]; detailDescriptions: string[]; detailImages: string[]; diff --git a/src/components/features/SellerPage/BusinessRegister/index.tsx b/src/components/features/SellerPage/BusinessRegister/index.tsx index 9bfc3b3..214438c 100644 --- a/src/components/features/SellerPage/BusinessRegister/index.tsx +++ b/src/components/features/SellerPage/BusinessRegister/index.tsx @@ -68,7 +68,7 @@ const BusinessRegister = () => { }; return ( - <Box w="900px" mx="auto" border="none" borderRadius="12px" bgColor="#FFFFFF"> + <Box w="900px" h="100%" mx="auto" border="none" borderRadius="12px" bgColor="#FFFFFF"> <Flex direction="column"> {alert && ( <Alert mb={4} status={alert.status}> diff --git a/src/components/features/SellerPage/MyInfo/Logout.tsx b/src/components/features/SellerPage/MyInfo/Logout.tsx index 04e72a7..1baf3e9 100644 --- a/src/components/features/SellerPage/MyInfo/Logout.tsx +++ b/src/components/features/SellerPage/MyInfo/Logout.tsx @@ -9,7 +9,7 @@ const Logout = () => { }; return ( - <Box w="700px" h="300px" mx="auto" border="none" borderRadius="12px" bgColor="#FFFFFF"> + <Box w="700px" h="300px" mt={-550} ml={500} border="none" borderRadius="12px" bgColor="#FFFFFF"> <Flex direction="column"> <Text mt={10} ml={10} color="#22543D" fontSize="20px" fontWeight="bold"> 회원 탈퇴 diff --git a/src/components/features/SellerPage/Tax.tsx/index.tsx b/src/components/features/SellerPage/Tax.tsx/index.tsx index 69aafed..64adfe3 100644 --- a/src/components/features/SellerPage/Tax.tsx/index.tsx +++ b/src/components/features/SellerPage/Tax.tsx/index.tsx @@ -24,7 +24,7 @@ const Tax = () => { }; return ( - <Box w="900px" mx="auto" pb="20" border="none" borderRadius="12px" bgColor="#FFFFFF"> + <Box w="900px" h="770px" mx="auto" border="none" borderRadius="12px" bgColor="#FFFFFF"> <Flex direction="column"> <Text mt={10} ml={10} color="#22543D" fontSize="20px" fontWeight="bold"> 세금 계산기 diff --git a/src/components/features/StoreDetailPage/Product.tsx b/src/components/features/StoreDetailPage/Product.tsx index b615310..6ff7038 100644 --- a/src/components/features/StoreDetailPage/Product.tsx +++ b/src/components/features/StoreDetailPage/Product.tsx @@ -1,13 +1,8 @@ import { HeartOutlined } from "@ant-design/icons"; -import { Box, Button, Image, Text, Flex, Icon, Divider, Alert, HStack, Input, useNumberInput } from "@chakra-ui/react"; -import { useCreateWishlists } from "@api/wishlistApi"; +import { Box, Button, Image, Text, Flex, Icon, Divider, HStack, Input, useNumberInput } from "@chakra-ui/react"; import store1 from "@assets/Image/Store/Store1.png"; -type ProductProps = { - productId: number; -}; - -const Product: React.FC<ProductProps> = ({ productId }) => { +const Product = () => { const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } = useNumberInput({ step: 1, defaultValue: 1, @@ -19,24 +14,9 @@ const Product: React.FC<ProductProps> = ({ productId }) => { const dec = getDecrementButtonProps(); const input = getInputProps(); - const createWishlistMutation = useCreateWishlists(); - - const handleAddToWishlist = () => { - const wishlistData = { product_id: productId }; - - createWishlistMutation.mutate(wishlistData, { - onSuccess: () => { - <Alert title="위시리스트에 추가되었습니다!" />; - }, - onError: () => { - <Alert title="위시리스트 추가 중 문제가 발생했습니다." />; - }, - }); - }; - return ( <Flex direction="row"> - <Box mt={100}> + <Box mt={100} ml={200}> <Image w="500px" h="460px" borderRadius="12px" alt="product" src={store1} /> </Box> <Flex direction="column" maxW="600px"> @@ -76,7 +56,6 @@ const Product: React.FC<ProductProps> = ({ productId }) => { borderRadius="12px" cursor="pointer" bgColor="#FC8181" - onClick={handleAddToWishlist} > <Icon as={HeartOutlined} fontSize="30px" /> </Flex> diff --git a/src/components/features/StoreDetailPage/ProductDescription.tsx b/src/components/features/StoreDetailPage/ProductDescription.tsx new file mode 100644 index 0000000..18f23b7 --- /dev/null +++ b/src/components/features/StoreDetailPage/ProductDescription.tsx @@ -0,0 +1,69 @@ +import { Box, Image, Text, Flex } from "@chakra-ui/react"; +import store1 from "@assets/Image/Store/Store1.png"; +import store5 from "@assets/Image/Store/Store5.png"; +import store6 from "@assets/Image/Store/Store6.png"; +import store7 from "@assets/Image/Store/Store7.png"; + +const ProductDescription = () => ( + <Flex direction="column" mb={50}> + <Text mt={10} color="#000000" fontSize="32px" fontWeight="bold"> + 건호네 포도에 대해서 소개합니다😀 + </Text> + <Flex direction="row"> + <Image w="500px" h="490px" mt={10} borderRadius="12px" alt="store1" src={store1} /> + <Flex direction="column"> + <Box w="520px" h="150px" mt={10} ml={10} borderRadius="12px" bgColor="#22543D"> + <Flex direction="row"> + <Flex direction="column" ml={8}> + <Text mt={7} color="#FFFFFF" fontSize="27px" fontWeight="bold"> + 신선함의 상징 + </Text> + <Text color="#FFFFFF" fontSize="15px" fontWeight="medium"> + 매일 아침 수확한 포도를 즉시 배송하여, + <br /> + 여러분의 식탁에 가장 신선한 맛을 전해드립니다. + </Text> + </Flex> + <Image w="120px" h="120px" mt={4} ml={50} borderRadius="100px" alt="store5" src={store5} /> + </Flex> + </Box> + <Box w="520px" h="150px" mt={5} ml={10} borderRadius="12px" bgColor="#22543D"> + <Flex direction="row"> + <Flex direction="column" ml={8}> + <Text mt={6} color="#FFFFFF" fontSize="27px" fontWeight="bold"> + 건강한 선택 + </Text> + <Text color="#FFFFFF" fontSize="13px" fontWeight="medium"> + 포도는 비타민과 항산화 물질이 풍부하여 + <br /> + 면역력 강화와 피부 건강에 도움을 줍니다. + <br /> + 자연 그대로의 맛을 느끼며 건강을 챙기세요. + </Text> + </Flex> + <Image w="120px" h="120px" mt={4} ml={109} borderRadius="100px" alt="store6" src={store6} /> + </Flex> + </Box> + <Box w="520px" h="150px" mt={5} ml={10} borderRadius="12px" bgColor="#22543D"> + <Flex direction="row"> + <Flex direction="column" ml={8}> + <Text mt={6} color="#FFFFFF" fontSize="27px" fontWeight="bold"> + 다채로운 활용 + </Text> + <Text color="#FFFFFF" fontSize="13px" fontWeight="medium"> + 포도는 샐러드, 디저트, 주스 등 + <br /> + 다양한 요리에 활용할 수 있습니다. + <br /> + 창의적인 레시피와 함께 포도의 매력을 만끽하세요! + </Text> + </Flex> + <Image w="120px" h="120px" mt={4} ml={76} borderRadius="100px" alt="store7" src={store7} /> + </Flex> + </Box> + </Flex> + </Flex> + </Flex> +); + +export default ProductDescription; diff --git a/src/components/features/StorePage/ProductCard.tsx b/src/components/features/StorePage/ProductCard.tsx index 1f15241..3da6eda 100644 --- a/src/components/features/StorePage/ProductCard.tsx +++ b/src/components/features/StorePage/ProductCard.tsx @@ -1,4 +1,3 @@ -import { Link } from "react-router-dom"; import { Flex, Text } from "@chakra-ui/react"; import Avatar from "@components/common/Avatar"; import Card, { CardProps } from "@components/common/Card"; @@ -10,31 +9,29 @@ export type ProductCardProps = { } & CardProps; const ProductCard = ({ item, ...props }: ProductCardProps) => ( - <Link to={`/store/${item.id}`}> - <Card {...props} _hover={{ transform: "translateY(-10px)" }}> - <Image w="full" borderRadius="2xl" alt={item.name} aspectRatio="1" src={item.mainImage} /> - <Flex py="3"> - <Text maxW="70%" fontSize="lg" fontWeight="bold" isTruncated> - {item.name} - </Text> - {item?.tag && ( - <Text ml="auto" px="3" color="white" bg="#22543D" borderRadius="lg"> - {item.tag} - </Text> - )} - </Flex> - <Text>{item.unit}</Text> - <Text my="3">{item.pricePerGram}</Text> - <Text overflow="hidden" color="#999" noOfLines={3}> - {item.description} + <Card {...props}> + <Image w="full" borderRadius="2xl" alt={item.name} aspectRatio="1" src={item.mainImage} /> + <Flex py="3"> + <Text maxW="70%" fontSize="lg" fontWeight="bold" isTruncated> + {item.name} </Text> - <Text color="#999">{item.farm.address}</Text> - <Flex align="center" py="3"> - <Avatar src={item.farm.profile} /> - <Text ml="1">{item.farm.name}</Text> - </Flex> - </Card> - </Link> + {item?.tag && ( + <Text ml="auto" px="3" color="white" bg="#22543D" borderRadius="lg"> + {item.tag} + </Text> + )} + </Flex> + <Text>{item.unit}</Text> + <Text my="3">{item.pricePerGram}</Text> + <Text overflow="hidden" color="#999" noOfLines={3}> + {item.description} + </Text> + <Text color="#999">{item.farm.address}</Text> + <Flex align="center" py="3"> + <Avatar src={item.farm.profile} /> + <Text ml="1">{item.farm.name}</Text> + </Flex> + </Card> ); export default ProductCard; diff --git a/src/components/features/StorePage/ProductList/ProductFilter/index.tsx b/src/components/features/StorePage/ProductList/ProductFilter/index.tsx index 66c6bb3..74d4266 100644 --- a/src/components/features/StorePage/ProductList/ProductFilter/index.tsx +++ b/src/components/features/StorePage/ProductList/ProductFilter/index.tsx @@ -10,7 +10,7 @@ type ProductFilterProps = { }; const ProductFilter = ({ items = [], filterState = useFilters() }: ProductFilterProps) => ( - <Flex direction="column" w="250px" h="100%" pt="10"> + <Flex direction="column" w="250px" h="100%"> <Text w="full" py="5" fontSize="xl" fontWeight="bold"> 필터 </Text> diff --git a/src/components/features/StorePage/ProductList/index.tsx b/src/components/features/StorePage/ProductList/index.tsx index abb04fc..bada6b4 100644 --- a/src/components/features/StorePage/ProductList/index.tsx +++ b/src/components/features/StorePage/ProductList/index.tsx @@ -12,7 +12,7 @@ const ProductList = () => { <Flex gap="5" w="100%" h="100vh"> <ProductFilter filterState={productFilterState} items={mockCategory.map(encodeCategory)} /> <Flex overflow="scroll" w="100%" h="100%"> - <ProductsView filters={productFilterState.filters} py="10" columns={3} gap="25px" /> + <ProductsView filters={productFilterState.filters} columns={3} gap="25px" /> </Flex> </Flex> ); diff --git a/src/components/features/StorePage/StoreBanner.tsx b/src/components/features/StorePage/StoreBanner.tsx index d0a64df..22c9f44 100644 --- a/src/components/features/StorePage/StoreBanner.tsx +++ b/src/components/features/StorePage/StoreBanner.tsx @@ -8,7 +8,7 @@ const StoreBanner = () => ( <Image h="full" src="/assets/image/vegetables.png" /> <Flex align="center" justify="center" direction="column" w="470px" h="full" color="white"> <Text fontSize="xl" fontWeight="bold"> - 믿고 먹는 건강한 먹거리,{" "} + 믿고 먹는 건간한 먹거리,{" "} <Text as="span" color="#48BB78"> 품앗이 </Text>{" "} diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx index a09ee9b..6f2960d 100644 --- a/src/components/layouts/Header.tsx +++ b/src/components/layouts/Header.tsx @@ -1,92 +1,109 @@ -import { Link, useLocation } from "react-router-dom"; -import { HeartOutlined, ShoppingCartOutlined, LogoutOutlined } from "@ant-design/icons"; -import { Flex, Text, Icon } from "@chakra-ui/react"; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { HeartOutlined, ShoppingCartOutlined } from "@ant-design/icons"; +import { Box, Flex, Text, Icon } from "@chakra-ui/react"; import poomasi from "@assets/logo/logo.png"; -import Avatar from "@components/common/Avatar"; import Image from "@components/common/Image"; import useLogin from "@hooks/useLogin"; -const menuLinks = [ - { - name: "소개", - link: "/introduction", - }, - { - name: "상점", - link: "/store", - }, - { - name: "농장", - link: "/schedule", - }, -]; - const Header = () => { - const location = useLocation(); + const [activeMenu, setActiveMenu] = useState<string>(""); + + const { loginCheck, logout, sellerCheck } = useLogin(); - const { user, loginCheck, logout, sellerCheck } = useLogin(); + const handleMenuClick = (menu: string) => { + setActiveMenu(menu); + }; return ( <Flex pos="relative" direction="column" shadow="lg" bgColor="#FFFFFF"> - <Flex align="center" justify="space-between" p="5"> - <Flex> - <Link to="/"> - <Image h="30px" objectFit="contain" alt="poomasi" src={poomasi} /> + <Flex justify="flex-end" p="1px 60px" color="#1C4532" fontSize="8px" fontWeight="regular"> + {loginCheck() + ? [ + <Text as={Link} mr="12px" to="/me"> + 마이페이지 + </Text>, + <Text cursor="pointer" onClick={logout}> + 로그아웃 + </Text>, + ] + : [ + <Text as={Link} mr="12px" to="/email/register"> + 회원가입 + </Text>, + <Text as={Link} to="/login"> + 로그인 + </Text>, + ]} + {sellerCheck() && ( + <Text as={Link} ml="12px" to="/seller"> + 판매자 페이지 + </Text> + )} + </Flex> + + <Flex align="center" justify="space-between" p="10px 50px"> + <Link to="/"> + <Image h="30px" objectFit="contain" alt="poomasi" src={poomasi} /> + </Link> + + <Flex align="center" mx="20px" ml={-70}> + <Link to="/introduction"> + <Text + mx="30px" + color={activeMenu === "소개" ? "#1C4532" : "#999999"} + fontSize="20px" + fontWeight="regular" + cursor="pointer" + onClick={() => handleMenuClick("소개")} + > + 소개 + </Text> </Link> - {sellerCheck() && ( + <Link to="/store"> <Text - as={Link} - align="center" - ml="3" - p="2" - color="white" - fontSize="12px" + mx="30px" + color={activeMenu === "상점" ? "#1C4532" : "#999999"} + fontSize="20px" fontWeight="regular" - bg="#1C4532" - borderRadius="xl" cursor="pointer" - to="/seller" + onClick={() => handleMenuClick("상점")} > - farmer + 상점 </Text> - )} - {menuLinks.map(menuLink => ( + </Link> + <Link to="/schedule"> <Text - key={menuLink.link} - as={Link} - mx="5" - color={menuLink.link === location.pathname ? "#1C4532" : "#999999"} + mx="30px" + color={activeMenu === "농장" ? "#1C4532" : "#999999"} fontSize="20px" fontWeight="regular" cursor="pointer" - to={menuLink.link} + onClick={() => handleMenuClick("농장")} > - {menuLink.name} + 농장 </Text> - ))} + </Link> </Flex> - <Flex align="center" gap="5"> - {loginCheck() ? ( - [ - <Link to="/me/product-wish"> - <Icon as={HeartOutlined} color="#1C4532" fontSize="25px" /> - </Link>, - <Link to="/cart/product"> - <Icon as={ShoppingCartOutlined} color="#1C4532" fontSize="25px" /> - </Link>, - <Flex as={Link} gap="1" to="/me"> - <Avatar size="sm" src={user.profile} /> - <Text color="#1C4532" fontSize="20px" fontWeight="regular" cursor="pointer"> - {user.name}님 - </Text> - </Flex>, - <Icon as={LogoutOutlined} color="#1C4532" fontSize="25px" cursor="pointer" onClick={() => logout()} />, - ] - ) : ( - <Text as={Link} color="#1C4532" fontSize="20px" fontWeight="regular" cursor="pointer" to="/login"> - 로그인 - </Text> - )} + {/* <Input + w="400px" + h="40px" + ml={10} + px="20px" + border="2px solid #1C4532" + borderColor="#1C4532" + borderRadius="12px" + _placeholder={{ color: "#B3B3B3" }} + placeholder="검색어를 입력해주세요." + /> */} + + <Flex ml={250}> + <Box mx="10px" color="#1C4532" cursor="pointer"> + <Icon as={HeartOutlined} fontSize="25px" /> + </Box> + <Box mx="10px" color="#1C4532" cursor="pointer"> + <Icon as={ShoppingCartOutlined} fontSize="25px" /> + </Box> </Flex> </Flex> </Flex> diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx index 6f9a671..836eb33 100644 --- a/src/components/layouts/MainLayout.tsx +++ b/src/components/layouts/MainLayout.tsx @@ -2,12 +2,10 @@ import { Outlet } from "react-router-dom"; import { Box } from "@chakra-ui/react"; import Footer from "@components/layouts/Footer"; import Header from "@components/layouts/Header"; -import ScrollSaver from "@components/layouts/ScrollSaver"; import size from "@constants/size"; const MainLayout = () => ( <div className="main-layout"> - <ScrollSaver /> <Header /> <Box w="100vw" minH={`calc(100vh - ${size.header.h})`}> <Outlet /> diff --git a/src/components/layouts/MyPageLayout.tsx b/src/components/layouts/MyPageLayout.tsx index c615d7f..271fec3 100644 --- a/src/components/layouts/MyPageLayout.tsx +++ b/src/components/layouts/MyPageLayout.tsx @@ -1,10 +1,9 @@ import { Outlet } from "react-router-dom"; import { Flex } from "@chakra-ui/react"; import Category from "@components/features/MyPage/Category"; -import size from "@constants/size"; const MyPageLayout = () => ( - <Flex justify="center" direction="row" w="100vw" minH={`calc(100vh - ${size.header.h})`} py="10" bg="#F5F5F5"> + <Flex justify="center" direction="row" w="100vw" h="100vh" py="10" bg="#F5F5F5"> <Flex gap="10" w="1100px"> <Category /> <Outlet /> diff --git a/src/components/layouts/ScrollSaver.tsx b/src/components/layouts/ScrollSaver.tsx deleted file mode 100644 index b81c45d..0000000 --- a/src/components/layouts/ScrollSaver.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useEffect, useState } from "react"; -import { useLocation } from "react-router-dom"; -import useScrollSaver from "@hooks/useScrollSaver"; - -const ScrollSaver = () => { - const location = useLocation(); - const [prevLocation, setPrevLocation] = useState(location.pathname); - const { getScroll, setScroll } = useScrollSaver(); - - useEffect(() => { - setScroll(prevLocation, window.scrollY); - setPrevLocation(location.pathname); - window.scrollTo(0, getScroll(location.pathname)); - }, [location]); - - return null; -}; - -export default ScrollSaver; diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts index 4a8efaa..b46a42b 100644 --- a/src/hooks/useLogin.ts +++ b/src/hooks/useLogin.ts @@ -5,7 +5,7 @@ import { userAtomWithPersistence } from "@atom/userAtom"; const useLogin = () => { const [user, setUser] = useAtom(userAtomWithPersistence); - const login = async (accessToken: string) => + const login = (accessToken: string) => { defaultApi .get("/api/members/self", { headers: { @@ -20,8 +20,7 @@ const useLogin = () => { role: data.role, }); }); - - const refreshLogin = async () => login(user?.token || ""); + }; const logout = () => { setUser(null); @@ -31,7 +30,7 @@ const useLogin = () => { const sellerCheck = () => user?.role === "ROLE_FARMER"; - return { user, login, logout, refreshLogin, loginCheck, sellerCheck }; + return { login, logout, loginCheck, sellerCheck }; }; export default useLogin; diff --git a/src/hooks/useScrollSaver.ts b/src/hooks/useScrollSaver.ts deleted file mode 100644 index 0e260e8..0000000 --- a/src/hooks/useScrollSaver.ts +++ /dev/null @@ -1,26 +0,0 @@ -const useScrollSaver = () => { - const initScroll = () => { - const originScrolls = sessionStorage.getItem("poomasi-scroll-index"); - if (!originScrolls) { - sessionStorage.setItem("poomasi-scroll-index", JSON.stringify({})); - } - }; - - const setScroll = (location: string, scroll: number) => { - initScroll(); - const scrolls = sessionStorage.getItem("poomasi-scroll-index"); - const scrollsObj = JSON.parse(scrolls || "{}"); - scrollsObj[location] = scroll; - sessionStorage.setItem("poomasi-scroll-index", JSON.stringify(scrollsObj)); - }; - - const getScroll = (location: string) => { - const scrolls = sessionStorage.getItem("poomasi-scroll-index"); - const scroll = JSON.parse(scrolls || "{}")[location]; - return scroll || 0; - }; - - return { initScroll, setScroll, getScroll }; -}; - -export default useScrollSaver; diff --git a/src/mocks/mockItem/mockFarms.ts b/src/mocks/mockItem/mockFarms.ts index ba0df62..b725c57 100644 --- a/src/mocks/mockItem/mockFarms.ts +++ b/src/mocks/mockItem/mockFarms.ts @@ -5,40 +5,26 @@ const mockFarms: Farm[] = [ id: 1, name: "건호 농장", address: "부산진구 개금동", - description: - "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.", - date: "2024.09.14", }, { id: 2, name: "토마토 농장", address: "부산 장전동", - description: - "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.", - date: "2024.10.14", }, { id: 3, name: "지민 농장", address: "경남 양산시 덕게동", - description: - "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.", - date: "2024.09.24", }, { id: 4, name: "할로윈 농장", address: "청담 에이프릴 영어학원", - description: - "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.", - date: "2024.09.12", }, { id: 5, name: "가지싫어 농장", address: "부산 해운대구 반송동", - description: "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 가지를 먹으며 향수병을 달랩니다.", - date: "2024.09.04", }, ]; diff --git a/src/mocks/mockItem/mockReviews.ts b/src/mocks/mockItem/mockReviews.ts deleted file mode 100644 index 3b0e4d5..0000000 --- a/src/mocks/mockItem/mockReviews.ts +++ /dev/null @@ -1,52 +0,0 @@ -const mockReviews = [ - { - id: 1, - name: "건호네 미나리", - image: "/assets/image/fresh_veggies.png", - description: "신선하고 맛있는 미나리! 무농약으로 재배되어 믿고 먹을 수 있어요.", - rating: 5, - date: "2024-09-14", - }, - { - id: 2, - name: "토맛 토마토", - image: "/assets/image/fresh_veggies.png", - description: "달콤하고 신선한 토마토, 정말 맛있어요! 샐러드에 넣어 먹으면 최고입니다.", - rating: 4, - date: "2024-09-14", - }, - { - id: 3, - name: "깻잎장수 지민", - image: "/assets/image/fresh_veggies.png", - description: "향긋한 깻잎, 엄마의 손맛이 느껴져요. 쌈으로 먹으면 더욱 맛있습니다.", - rating: 5, - date: "2024-09-24", - }, - { - id: 4, - name: "할로윈 늙은 호박", - image: "/assets/image/fresh_veggies.png", - description: "늙은 호박으로 만든 전이 너무 맛있어요. 할로윈에 꼭 추천합니다!", - rating: 5, - date: "2024-09-04", - }, - { - id: 5, - name: "몸에 좋은척 하는 기이이이이이이이이이이이인 가지", - image: "/assets/image/fresh_veggies.png", - description: "가지의 다양한 요리를 시도해보세요. 건강에도 좋고 맛도 좋습니다.", - rating: 5, - date: "2024-09-14", - }, - { - id: 6, - name: "집에 가고싶을 땐 복숭아를", - image: "/assets/image/fresh_veggies.png", - description: "달콤한 복숭아 아이스티로 더위를 날려보세요. 기분이 좋아지는 맛입니다.", - rating: 4.5, - date: "2024-09-21", - }, -]; - -export default mockReviews; diff --git a/src/pages/CallbackPage/index.tsx b/src/pages/CallbackPage/index.tsx index fe3443f..99774a4 100644 --- a/src/pages/CallbackPage/index.tsx +++ b/src/pages/CallbackPage/index.tsx @@ -1,17 +1,14 @@ -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; import useLogin from "@hooks/useLogin"; const CallbackPage = () => { const [searchParams] = useSearchParams(); - const navigate = useNavigate(); const { login } = useLogin(); const accessToken = searchParams.get("access"); if (accessToken) { - login(accessToken).then(() => { - navigate("/"); - }); + login(accessToken); } return null; diff --git a/src/pages/FarmDetailPage/index.tsx b/src/pages/FarmDetailPage/index.tsx index c5ff0a0..7473b06 100644 --- a/src/pages/FarmDetailPage/index.tsx +++ b/src/pages/FarmDetailPage/index.tsx @@ -1,9 +1,9 @@ import { useParams } from "react-router-dom"; -import { Tab, Tabs, TabList, TabPanels, TabPanel, Flex } from "@chakra-ui/react"; -import AddPreview from "@components/common/AddPreview"; +import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react"; import Direction from "@components/features/FarmDetailPage/Direciton"; +import Product from "@components/features/FarmDetailPage/Product"; +import ProductDescription from "@components/features/FarmDetailPage/ProductDescription"; import ReviewList from "@components/features/FarmDetailPage/ReviewList"; -import Schedule from "@components/features/FarmDetailPage/Schedule"; const FarmDetailPage = () => { const params = useParams(); @@ -11,10 +11,10 @@ const FarmDetailPage = () => { const scheduleId = Number(params?.scheduleId); return ( - <Flex align="center" direction="column" w="100vw"> - <Schedule scheduleId={scheduleId} /> + <> + <Product scheduleId={scheduleId} /> - <Tabs mt={100}> + <Tabs mt={100} ml={200}> <TabList w="1100px"> <Tab _selected={{ color: "#1C4532", fontSize: "24px", fontWeight: "bold", bg: "none" }}>상품 설명</Tab> <Tab _selected={{ color: "#1C4532", fontSize: "24px", fontWeight: "bold", bg: "none" }}>후기</Tab> @@ -22,15 +22,7 @@ const FarmDetailPage = () => { <TabPanels py="10px"> <TabPanel> - <AddPreview - info={{ - title: "", - mainImage: "", - detailTitles: ["", "", ""], - detailDescriptions: ["", "", ""], - detailImages: ["", "", ""], - }} - /> + <ProductDescription scheduleId={scheduleId} /> </TabPanel> <TabPanel> <ReviewList /> @@ -39,7 +31,7 @@ const FarmDetailPage = () => { </Tabs> <Direction key="userId" lat={43} lng={128} /> - </Flex> + </> ); }; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 8206528..1be401c 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -24,7 +24,7 @@ const Home = () => { <Review /> </Flex> <BestScheduleSection /> - <GridView items={products || []} ItemComponent={ProductCard} py="10" columns={3} gap="25px" /> + <GridView items={products || []} ItemComponent={ProductCard} columns={3} gap="25px" /> </Flex> </Flex> ); diff --git a/src/pages/MyPage/FarmListPage.tsx b/src/pages/MyPage/FarmListPage.tsx index 35d75ae..be3d060 100644 --- a/src/pages/MyPage/FarmListPage.tsx +++ b/src/pages/MyPage/FarmListPage.tsx @@ -1,32 +1,9 @@ -import { Flex, Text } from "@chakra-ui/react"; -import ListView from "@components/ItemView/ListView"; import Card from "@components/common/Card"; import FarmList from "@components/features/MyPage/Order/FarmList"; -import mockFarms from "@mocks/mockItem/mockFarms"; -import { Farm } from "@type/index"; - -const sortedFarms = mockFarms.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); - -const groupedFarms = sortedFarms.reduce<Farm[][]>((acc, cur) => { - const last = acc[acc.length - 1]; - if (!last || last[0].date !== cur.date) { - acc.push([cur]); - } else { - last.push(cur); - } - return acc; -}, []); const FarmListPage = () => ( <Card title="농장 체험 내역" w="100%" h="fit-content" p="10"> - {groupedFarms.map(farms => ( - <Flex key={farms[0].date} direction="column" mb={4}> - <Text py="2" fontWeight="bold" borderBottom="0.7px solid #000000"> - {farms[0].date} - </Text> - <ListView items={farms} ItemComponent={FarmList} /> - </Flex> - ))} + <FarmList /> </Card> ); diff --git a/src/pages/MyPage/OrdersPage.tsx b/src/pages/MyPage/OrdersPage.tsx index b4a7f2e..1341c76 100644 --- a/src/pages/MyPage/OrdersPage.tsx +++ b/src/pages/MyPage/OrdersPage.tsx @@ -18,7 +18,7 @@ const splitedOrders = sortedOrders.reduce<Order[][]>((acc, cur) => { }, []); const MyOrdersPage = () => ( - <Card title="상품 주문 내역" w="100%" p="10"> + <Card title="상품 주문 내역" w="100%" h="800px" overflowY="scroll" overflowX="hidden" p="10"> {splitedOrders.map(orders => ( <Flex key={orders[0].orderDate} direction="column"> <Text py="2">{orders[0].orderDate}</Text> diff --git a/src/pages/MyPage/ProductWishlistPage.tsx b/src/pages/MyPage/ProductWishlistPage.tsx deleted file mode 100644 index d5d591a..0000000 --- a/src/pages/MyPage/ProductWishlistPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Card from "@components/common/Card"; - -import ProductWish from "@components/features/MyPage/Wishlist/ProductWish"; - -const ProductWishlistPage = () => ( - <Card title="위시리스트" w="100%" h="fit-content" p="10"> - <ProductWish /> - </Card> -); - -export default ProductWishlistPage; diff --git a/src/pages/MyPage/ReviewListPage.tsx b/src/pages/MyPage/ReviewListPage.tsx index 70e71fa..25aa435 100644 --- a/src/pages/MyPage/ReviewListPage.tsx +++ b/src/pages/MyPage/ReviewListPage.tsx @@ -1,33 +1,10 @@ -import { Flex, Text } from "@chakra-ui/react"; -import ListView from "@components/ItemView/ListView"; import Card from "@components/common/Card"; import ReviewList from "@components/features/MyPage/Order/ReviewList"; -import mockReviews from "@mocks/mockItem/mockReviews"; -import { Review } from "@type/index"; - -const sortedReviews = mockReviews.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); - -const groupedReviews = sortedReviews.reduce<Review[][]>((acc, cur) => { - const last = acc[acc.length - 1]; - if (!last || last[0].date !== cur.date) { - acc.push([cur]); - } else { - last.push(cur); - } - return acc; -}, []); const ReviewListPage = () => ( <Card title="리뷰 관리" w="100%" h="fit-content" p="10"> - {groupedReviews.map(reviews => ( - <Flex key={reviews[0].date} direction="column" mb={4}> - <Text py="2" fontWeight="bold" borderBottom="0.7px solid #000000"> - {reviews[0].date} - </Text> - <ListView items={reviews} ItemComponent={ReviewList} /> - </Flex> - ))} + <ReviewList /> </Card> ); diff --git a/src/pages/ProductDetailPage/index.tsx b/src/pages/StoreDetailPage/index.tsx similarity index 55% rename from src/pages/ProductDetailPage/index.tsx rename to src/pages/StoreDetailPage/index.tsx index 4cb3c81..b55bc9c 100644 --- a/src/pages/ProductDetailPage/index.tsx +++ b/src/pages/StoreDetailPage/index.tsx @@ -1,12 +1,12 @@ -import { Tab, Tabs, TabList, TabPanels, TabPanel, Flex } from "@chakra-ui/react"; -import AddPreview from "@components/common/AddPreview"; +import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react"; import Product from "@components/features/StoreDetailPage/Product"; +import ProductDescription from "@components/features/StoreDetailPage/ProductDescription"; import ReviewList from "@components/features/StoreDetailPage/ReviewList"; const StoreDetailPage = () => ( - <Flex align="center" direction="column" w="100vw"> - <Product productId={1} /> - <Tabs mt={100}> + <> + <Product /> + <Tabs mt={100} ml={200}> <TabList w="1100px"> <Tab _selected={{ color: "#1C4532", fontSize: "24px", fontWeight: "bold", bg: "none" }}>상품 설명</Tab> <Tab _selected={{ color: "#1C4532", fontSize: "24px", fontWeight: "bold", bg: "none" }}>후기</Tab> @@ -14,22 +14,14 @@ const StoreDetailPage = () => ( <TabPanels py="10px"> <TabPanel> - <AddPreview - info={{ - title: "", - mainImage: "", - detailTitles: ["", "", ""], - detailDescriptions: ["", "", ""], - detailImages: ["", "", ""], - }} - /> + <ProductDescription /> </TabPanel> <TabPanel> <ReviewList /> </TabPanel> </TabPanels> </Tabs> - </Flex> + </> ); export default StoreDetailPage; diff --git a/src/pages/WishPage/index.tsx b/src/pages/WishPage/index.tsx deleted file mode 100644 index 44d4b46..0000000 --- a/src/pages/WishPage/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Flex } from "@chakra-ui/react"; -import Card from "@components/common/Card"; - -import ProductWish from "@components/features/MyPage/Wishlist/ProductWish"; - -const WishPage = () => ( - <Flex align="center" justify="center" h="100%"> - <Card title="위시리스트" w="80%" h="fit-content" p="10"> - <ProductWish /> - </Card> - </Flex> -); - -export default WishPage; diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx index c552425..cd9a0e8 100644 --- a/src/routes/AppRouter.tsx +++ b/src/routes/AppRouter.tsx @@ -1,9 +1,8 @@ -import { useEffect } from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import MainLayout from "@components/layouts/MainLayout"; import MyPageLayout from "@components/layouts/MyPageLayout"; import SellerLayout from "@components/layouts/SellerLayout"; -import useScrollSaver from "@hooks/useScrollSaver"; +import BuyerMyPage from "@pages/BuyerMyPage"; import CallbackPage from "@pages/CallbackPage"; import EmailLoginPage from "@pages/EmailLoginPage"; import EmailRegisterPage from "@pages/EmailRegisterPage"; @@ -17,13 +16,12 @@ import DeliveryPage from "@pages/MyPage/DeliveryPage"; import FarmListPage from "@pages/MyPage/FarmListPage"; import MyInfoPage from "@pages/MyPage/MyInfoPage"; import MyOrdersPage from "@pages/MyPage/OrdersPage"; -import ProductWishlistPage from "@pages/MyPage/ProductWishlistPage"; import ReviewListPage from "@pages/MyPage/ReviewListPage"; import WithdrawPage from "@pages/MyPage/WithdrawPage"; import ProductCartPage from "@pages/ProductCartPage"; -import ProductDetailPage from "@pages/ProductDetailPage"; import RegisterPage from "@pages/RegisterPage"; import SchedulePage from "@pages/SchedulePage"; +import SellerMyPage from "@pages/SellerMyPage"; import SellerPage from "@pages/SellerPage"; import BizRegister from "@pages/SellerPage/BizRegister"; import FarmEdit from "@pages/SellerPage/FarmEdit"; @@ -36,16 +34,10 @@ import SellerProductListPage from "@pages/SellerPage/SellerProductList"; import SellerWithdraw from "@pages/SellerPage/SellerWithdraw"; import SoldOuts from "@pages/SellerPage/SoldOuts"; import TaxCalculator from "@pages/SellerPage/TaxCalculator"; +import StoreDetailPage from "@pages/StoreDetailPage"; import StorePage from "@pages/StorePage"; -import WishPage from "@pages/WishPage"; const AppRouter = () => { - const { initScroll } = useScrollSaver(); - - useEffect(() => { - initScroll(); - }, []); - const routers = createBrowserRouter([ { path: "/", @@ -60,8 +52,20 @@ const AppRouter = () => { element: <IntroductionPage />, }, { - path: "wish", - element: <WishPage />, + path: "BuyerMyPage", + element: <BuyerMyPage />, + }, + { + path: "SellerMyPage", + element: <SellerMyPage />, + }, + { + path: "StoreDetail", + element: <StoreDetailPage />, + }, + { + path: "schedule/:scheduleId", + element: <FarmDetailPage />, }, { path: "seller", @@ -130,10 +134,6 @@ const AppRouter = () => { index: true, element: <MyPage />, }, - { - path: "product-wish", - element: <ProductWishlistPage />, - }, { path: "orders", element: <MyOrdersPage />, @@ -178,16 +178,7 @@ const AppRouter = () => { }, { path: "store", - children: [ - { - index: true, - element: <StorePage />, - }, - { - path: ":productId", - element: <ProductDetailPage />, - }, - ], + element: <StorePage />, }, { path: "callback/:provider", @@ -195,16 +186,7 @@ const AppRouter = () => { }, { path: "schedule", - children: [ - { - index: true, - element: <SchedulePage />, - }, - { - path: ":scheduleId", - element: <FarmDetailPage />, - }, - ], + element: <SchedulePage />, }, { path: "cart/product", diff --git a/src/types/index.ts b/src/types/index.ts index ca29c5f..4ee6565 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -6,8 +6,6 @@ export type Farm = Item & { name: string; address: string; profile?: string; - description: string; - date: string; }; export type Product = Item & { @@ -22,14 +20,6 @@ export type Product = Item & { farm: Farm; }; -export type Review = Item & { - name: string; - description: string; - rating: number; - image?: string; - date: string; -}; - export type Schedule = Item & { name: string; farm: Farm;