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;