diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
index 254d0f5..f4bed3d 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 6213e86..c6b98ee 100644
--- a/src/api/businessApi.ts
+++ b/src/api/businessApi.ts
@@ -13,6 +13,6 @@ const useCreateBusiness = () => {
   return useMutation({ mutationFn: fetcher });
 };
 
-const useGetBusinessDetail = () => null;
+const useGetBusiness = () => null;
 
-export { useCreateBusiness, useGetBusinessDetail };
+export { useCreateBusiness, useGetBusiness };
diff --git a/src/api/emailApi.ts b/src/api/emailApi.ts
index b633852..71ba09f 100644
--- a/src/api/emailApi.ts
+++ b/src/api/emailApi.ts
@@ -13,11 +13,21 @@ type LoginData = {
   password: string;
 };
 
-type FarmerData = {
+type FarmerRegisterData = {
   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;
@@ -39,7 +49,7 @@ const useLoginEmail = () => {
 };
 
 const useCreateFarmer = () => {
-  const fetcher = (farmerData: FarmerData) =>
+  const fetcher = (farmerData: FarmerRegisterData) =>
     needAuthDefaultApi.put(`/api/members/to-farmer`, farmerData).then(({ data }) => data);
   return useMutation({ mutationFn: fetcher });
 };
@@ -58,6 +68,20 @@ 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) =>
@@ -82,4 +106,12 @@ const useDeleteAccount = () => {
   });
 };
 
-export { useCreateEmail, useLoginEmail, useUpdateEmail, useUpdateAddress, useCreateFarmer, useDeleteAccount };
+export {
+  useCreateEmail,
+  useLoginEmail,
+  useUpdateEmail,
+  useUpdateAddress,
+  useCreateFarmer,
+  useUpdateFarmer,
+  useDeleteAccount,
+};
diff --git a/src/api/farmApi.ts b/src/api/farmApi.ts
index 49691c3..266d025 100644
--- a/src/api/farmApi.ts
+++ b/src/api/farmApi.ts
@@ -18,6 +18,22 @@ 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);
 
@@ -37,7 +53,7 @@ const useGetFarmDetail = (farmId: number) => {
 };
 
 const useCreateFarms = () => {
-  const fetcher = (farmData: FarmData) => defaultApi.post(`/api/farms`, farmData).then(({ data }) => data);
+  const fetcher = (farmData: FarmData) => defaultApi.post(`/api/farmer/farms`, farmData).then(({ data }) => data);
 
   return useMutation({ mutationFn: fetcher });
 };
@@ -57,4 +73,42 @@ const useUpdateFarms = (farmId: number) => {
   });
 };
 
-export { useGetFarms, useGetFarmDetail, useCreateFarms, useUpdateFarms };
+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,
+};
diff --git a/src/api/intercepters.ts b/src/api/intercepters.ts
index 22e29df..e2032ea 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 72fa8ca..3e91d80 100644
--- a/src/api/productApi.ts
+++ b/src/api/productApi.ts
@@ -5,12 +5,18 @@ 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
new file mode 100644
index 0000000..3cc1c70
--- /dev/null
+++ b/src/api/reviewApi.ts
@@ -0,0 +1,80 @@
+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
new file mode 100644
index 0000000..c54041a
--- /dev/null
+++ b/src/api/storeApi.ts
@@ -0,0 +1,30 @@
+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
new file mode 100644
index 0000000..1a777e2
--- /dev/null
+++ b/src/api/wishlistApi.ts
@@ -0,0 +1,30 @@
+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 fac45de..8b0cbfc 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 489d350..0034fbe 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 = "https://api.poomasi.shop/oauth2/authentication/kakao";
+  const link = `${process.env.REACT_APP_API_URL}/oauth2/authentication/kakao`;
 
   return (
     <Link href={link} isExternal>
diff --git a/src/components/features/FarmDetailPage/ProductDescription.tsx b/src/components/features/FarmDetailPage/ProductDescription.tsx
deleted file mode 100644
index 3d99cf7..0000000
--- a/src/components/features/FarmDetailPage/ProductDescription.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-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/FarmDetailPage/Product.tsx b/src/components/features/FarmDetailPage/Schedule.tsx
similarity index 88%
rename from src/components/features/FarmDetailPage/Product.tsx
rename to src/components/features/FarmDetailPage/Schedule.tsx
index e422c52..7fd53f9 100644
--- a/src/components/features/FarmDetailPage/Product.tsx
+++ b/src/components/features/FarmDetailPage/Schedule.tsx
@@ -1,7 +1,5 @@
 import { useState, useEffect } from "react";
-
-import { HeartOutlined } from "@ant-design/icons";
-import { Box, Button, Text, Flex, Icon, Divider, Select } from "@chakra-ui/react";
+import { Box, Button, Text, Flex, Divider, Select } from "@chakra-ui/react";
 import { useGetFarmDetail } from "@api/farmApi";
 import Image from "@components/common/Image";
 
@@ -19,7 +17,7 @@ const defaultFormData = {
   endTime: "",
 };
 
-const Product = ({ scheduleId }: { scheduleId: number }) => {
+const Schedule = ({ scheduleId }: { scheduleId: number }) => {
   const { data: farmDetail = defaultFormData } = useGetFarmDetail(scheduleId);
 
   const [dateOptions, setDateOptions] = useState<string[]>([]);
@@ -40,7 +38,7 @@ const Product = ({ scheduleId }: { scheduleId: number }) => {
 
   return (
     <Flex direction="row">
-      <Box mt={100} ml={200}>
+      <Box mt={100}>
         <Image w="500px" h="530px" borderRadius="12px" alt="farmImage" src={farmDetail.imageUrl} />
       </Box>
       <Flex direction="column" maxW="600px">
@@ -53,20 +51,6 @@ const Product = ({ 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"
@@ -160,4 +144,4 @@ const Product = ({ scheduleId }: { scheduleId: number }) => {
   );
 };
 
-export default Product;
+export default Schedule;
diff --git a/src/components/features/IntroductionPage/Introduction.tsx b/src/components/features/IntroductionPage/Introduction.tsx
index eb49bb7..5a5f858 100644
--- a/src/components/features/IntroductionPage/Introduction.tsx
+++ b/src/components/features/IntroductionPage/Introduction.tsx
@@ -8,17 +8,18 @@ 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 = () => (
-  <Box overflowY="auto" w="100vw" h="100vh">
+  <Flex align="center" direction="column" w="full" h="full" minH={`calc(100vh - ${size.footer.h} - ${size.header.h})`}>
     <Flex direction="column" w="full" h="fit-content">
-      <ImageCard bgImg={Intro1}>
+      <ImageCard borderRadius="none" bgImg={Intro1}>
         <Text m="auto" color="#FFFFFF" fontSize="32px" fontWeight="bold" textAlign="center">
           우리가 꿈꾸는 내일, 농민과 고객이 함께 만드는 새로운 유통
         </Text>
       </ImageCard>
     </Flex>
-    <Flex direction="column" w="full" h="100vh" mt="20">
+    <Flex direction="column" w="full" mt="20">
       <Text mb={1} color="#000000" fontSize="20px" fontWeight="bold" textAlign="center">
         품앗이 이야기
       </Text>
@@ -87,7 +88,7 @@ const Introduction = () => (
       <Image w="500px" h="800px" alt="Intro6" src={Intro6} />
     </Flex>
 
-    <Flex align="center" justify="center" direction="column" mt={200}>
+    <Flex align="center" justify="center" direction="column" my={200}>
       <Text mb={20} color="#1C4532" fontSize="32px" fontWeight="bold" textAlign="center">
         농업인의 땀과 소비자의 마음을 직접 이어,
         <br />
@@ -132,7 +133,7 @@ const Introduction = () => (
         </Box>
       </Flex>
     </Flex>
-  </Box>
+  </Flex>
 );
 
 export default Introduction;
diff --git a/src/components/features/MyPage/Category.tsx b/src/components/features/MyPage/Category.tsx
index d4607e2..36227da 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 flexShrink="1" w="330px" h="800px" border="none" borderRadius="20px" bgColor="#FFFFFF">
+  <Box pos="sticky" top="10" 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,11 +11,18 @@ const Category = () => (
           위시리스트
         </Text>
       </Flex>
-      <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
+        as={Link}
+        w="100px"
+        h="20px"
+        mt={3}
+        ml={5}
+        color="#5C5C5C"
+        fontSize="16px"
+        fontWeight="medium"
+        to="/me/product-wish"
+      >
+        위시리스트
       </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 391868c..088fd32 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: "CANCANCLE" | "CANREFUND" | "OTHER";
+  status: "CANCANCEL" | "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 === "CANCANCLE" && (
+        {status === "CANCANCEL" && (
           <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 25a161d..77f4fd5 100644
--- a/src/components/features/MyPage/Order/FarmList.tsx
+++ b/src/components/features/MyPage/Order/FarmList.tsx
@@ -1,56 +1,92 @@
+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 = () => (
-  <Flex justify="space-between" direction="row" mt={10}>
+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 (
     <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" 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 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">
+              주소 :&nbsp;
+            </Text>
+            <Text color="#000000" fontSize="16px" fontWeight="medium">
+              {item.address}
+            </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>
+          <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>
     </Flex>
-  </Flex>
-);
+  );
+};
 
 export default FarmList;
diff --git a/src/components/features/MyPage/Order/ReviewList.tsx b/src/components/features/MyPage/Order/ReviewList.tsx
index 14e5d3a..30a1088 100644
--- a/src/components/features/MyPage/Order/ReviewList.tsx
+++ b/src/components/features/MyPage/Order/ReviewList.tsx
@@ -1,54 +1,94 @@
-import { Flex, Button, Text } from "@chakra-ui/react";
-import store8 from "@assets/Image/Store/Store8.png";
+import { useState } from "react";
+import { Flex, Button, Text, Alert } from "@chakra-ui/react";
+
+import { useDeleteReviews } from "@api/reviewApi";
 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>
 
-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>
-);
+          <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,
+        }}
+      />
+    </>
+  );
+};
 
 export default ReviewList;
diff --git a/src/components/features/MyPage/Order/ReviewModal.tsx b/src/components/features/MyPage/Order/ReviewModal.tsx
index 6f2f578..ebf0695 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 } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { UploadOutlined } from "@ant-design/icons";
 import {
   Flex,
@@ -10,8 +10,10 @@ import {
   Divider,
   Icon,
   Input,
-  Box,
+  Textarea,
+  Alert,
 } 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";
@@ -20,14 +22,39 @@ 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 }) => {
+const ReviewModal: React.FC<ReviewModalProps> = ({
+  isOpen,
+  onClose,
+  productId,
+  farmId,
+  isEditing = false,
+  initialData,
+}) => {
   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) {
@@ -39,22 +66,67 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ isOpen, onClose, productId })
     setRating(newRating);
   };
 
-  const handleReviewTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleReviewTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setReviewText(event.target.value);
   };
 
   const handleReviewSubmit = () => {
     const reviewData = {
-      productId,
       rating,
-      reviewText,
-      imageUrl,
+      content: reviewText,
     };
-    postMessage(reviewData);
+    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();
   };
 
   return (
-    <BasicModal isOpen={isOpen} onClose={onClose} maxW="800px" maxH="1000px">
+    <BasicModal isOpen={isOpen} onClose={onClose} maxW="800px" maxH="1100px">
       <ModalCloseButton _hover={{ bg: "#FFFFFF" }} />
       <ModalHeader color="#22543D" fontSize="25px" fontWeight="bold">
         후기 쓰기
@@ -80,32 +152,34 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ isOpen, onClose, productId })
               as={UploadOutlined}
               mx="5"
               mt={12}
-              ml={-200}
+              ml={-230}
               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={95}>
+            <Flex pos="relative" align="flex-end" justify="flex-end" w="100%" h="200px" mt="5" mr={100}>
               <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>
 
-          <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}>
+          <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}>
             <Button
               w="230px"
               h="50px"
@@ -117,6 +191,7 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ isOpen, onClose, productId })
               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 d5953c1..5d419d3 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 "CANCANCLE";
+  if (other(status)) return "CANCANCEL";
   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
new file mode 100644
index 0000000..a4cf0e0
--- /dev/null
+++ b/src/components/features/MyPage/Wishlist/ProductWish.tsx
@@ -0,0 +1,114 @@
+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 2f2087f..be926cb 100644
--- a/src/components/features/SchedulePage/ScheduleCard.tsx
+++ b/src/components/features/SchedulePage/ScheduleCard.tsx
@@ -1,4 +1,5 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+import { Box, Flex, Text } from "@chakra-ui/react";
 import ImageCard, { ImageCardProps } from "@components/common/ImageCard";
 import { Schedule } from "@type/index";
 
@@ -7,23 +8,29 @@ type ScheduleCardProps = ImageCardProps & {
 };
 
 const ScheduleCard = ({ item, ...props }: ScheduleCardProps) => (
-  <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>
+  <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>
 );
 
 export default ScheduleCard;
diff --git a/src/components/features/SellerPage/AddFarm/index.tsx b/src/components/features/SellerPage/AddFarm/index.tsx
index b541e1d..e13956b 100644
--- a/src/components/features/SellerPage/AddFarm/index.tsx
+++ b/src/components/features/SellerPage/AddFarm/index.tsx
@@ -111,6 +111,7 @@ 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 998032e..dca770c 100644
--- a/src/components/features/SellerPage/AddProduct/index.tsx
+++ b/src/components/features/SellerPage/AddProduct/index.tsx
@@ -6,6 +6,7 @@ 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;
@@ -18,6 +19,7 @@ type FormData = {
   addressDetail: string;
   shippingFee: string;
   phoneNumber: string;
+  isEdit: boolean;
 };
 
 const defaultFormData = {
@@ -49,7 +51,8 @@ type AddProduct = {
 
 const AddProduct = ({ isEdit, originProduct }: AddProduct) => {
   const [formData, setFormData] = useState<FormData>(originProduct || defaultFormData);
-  const [info, setInfo] = useState(defaultInfo);
+  const [info, setInfo] = useState<Info>(defaultInfo);
+
   const [address, setAddress] = useState<string>("");
   const navigate = useNavigate();
 
@@ -84,7 +87,16 @@ const AddProduct = ({ isEdit, originProduct }: AddProduct) => {
 
   const handleSubmit = async () => {
     if (isEdit) {
-      updateProduct(formData)
+      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],
+      })
         .then(() => {
           setAlert({ message: `Product updated successfully!`, status: "success" });
         })
@@ -92,7 +104,16 @@ const AddProduct = ({ isEdit, originProduct }: AddProduct) => {
           setAlert({ message: "Error updating product.", status: "error" });
         });
     } else {
-      createProduct(formData)
+      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],
+      })
         .then(() => {
           setAlert({ message: `Product registered successfully!`, status: "success" });
           setFormData(defaultFormData);
@@ -116,9 +137,12 @@ 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 b177df3..58972fe 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;
-  productImageState: string;
+  mainImage: 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 214438c..9bfc3b3 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" h="100%" mx="auto" border="none" borderRadius="12px" bgColor="#FFFFFF">
+    <Box w="900px" 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 1baf3e9..04e72a7 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" mt={-550} ml={500} border="none" borderRadius="12px" bgColor="#FFFFFF">
+    <Box w="700px" h="300px" 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/SellerPage/Tax.tsx/index.tsx b/src/components/features/SellerPage/Tax.tsx/index.tsx
index 64adfe3..69aafed 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" h="770px" mx="auto" border="none" borderRadius="12px" bgColor="#FFFFFF">
+    <Box w="900px" mx="auto" pb="20" 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 6ff7038..b615310 100644
--- a/src/components/features/StoreDetailPage/Product.tsx
+++ b/src/components/features/StoreDetailPage/Product.tsx
@@ -1,8 +1,13 @@
 import { HeartOutlined } from "@ant-design/icons";
-import { Box, Button, Image, Text, Flex, Icon, Divider, HStack, Input, useNumberInput } from "@chakra-ui/react";
+import { Box, Button, Image, Text, Flex, Icon, Divider, Alert, HStack, Input, useNumberInput } from "@chakra-ui/react";
+import { useCreateWishlists } from "@api/wishlistApi";
 import store1 from "@assets/Image/Store/Store1.png";
 
-const Product = () => {
+type ProductProps = {
+  productId: number;
+};
+
+const Product: React.FC<ProductProps> = ({ productId }) => {
   const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } = useNumberInput({
     step: 1,
     defaultValue: 1,
@@ -14,9 +19,24 @@ const Product = () => {
   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} ml={200}>
+      <Box mt={100}>
         <Image w="500px" h="460px" borderRadius="12px" alt="product" src={store1} />
       </Box>
       <Flex direction="column" maxW="600px">
@@ -56,6 +76,7 @@ const Product = () => {
             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
deleted file mode 100644
index 18f23b7..0000000
--- a/src/components/features/StoreDetailPage/ProductDescription.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-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 3da6eda..1f15241 100644
--- a/src/components/features/StorePage/ProductCard.tsx
+++ b/src/components/features/StorePage/ProductCard.tsx
@@ -1,3 +1,4 @@
+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";
@@ -9,29 +10,31 @@ export type ProductCardProps = {
 } & CardProps;
 
 const ProductCard = ({ item, ...props }: ProductCardProps) => (
-  <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>
-      {item?.tag && (
-        <Text ml="auto" px="3" color="white" bg="#22543D" borderRadius="lg">
-          {item.tag}
+  <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>
-      )}
-    </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>
+        {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>
+  </Link>
 );
 
 export default ProductCard;
diff --git a/src/components/features/StorePage/ProductList/ProductFilter/index.tsx b/src/components/features/StorePage/ProductList/ProductFilter/index.tsx
index 74d4266..66c6bb3 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%">
+  <Flex direction="column" w="250px" h="100%" pt="10">
     <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 bada6b4..abb04fc 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} columns={3} gap="25px" />
+        <ProductsView filters={productFilterState.filters} py="10" columns={3} gap="25px" />
       </Flex>
     </Flex>
   );
diff --git a/src/components/features/StorePage/StoreBanner.tsx b/src/components/features/StorePage/StoreBanner.tsx
index 22c9f44..d0a64df 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 6f2960d..a09ee9b 100644
--- a/src/components/layouts/Header.tsx
+++ b/src/components/layouts/Header.tsx
@@ -1,109 +1,92 @@
-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 { Link, useLocation } from "react-router-dom";
+import { HeartOutlined, ShoppingCartOutlined, LogoutOutlined } from "@ant-design/icons";
+import { 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 Header = () => {
-  const [activeMenu, setActiveMenu] = useState<string>("");
+const menuLinks = [
+  {
+    name: "소개",
+    link: "/introduction",
+  },
+  {
+    name: "상점",
+    link: "/store",
+  },
+  {
+    name: "농장",
+    link: "/schedule",
+  },
+];
 
-  const { loginCheck, logout, sellerCheck } = useLogin();
+const Header = () => {
+  const location = useLocation();
 
-  const handleMenuClick = (menu: string) => {
-    setActiveMenu(menu);
-  };
+  const { user, loginCheck, logout, sellerCheck } = useLogin();
   return (
     <Flex pos="relative" direction="column" shadow="lg" bgColor="#FFFFFF">
-      <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>
+      <Flex align="center" justify="space-between" p="5">
+        <Flex>
+          <Link to="/">
+            <Image h="30px" objectFit="contain" alt="poomasi" src={poomasi} />
           </Link>
-          <Link to="/store">
+          {sellerCheck() && (
             <Text
-              mx="30px"
-              color={activeMenu === "상점" ? "#1C4532" : "#999999"}
-              fontSize="20px"
+              as={Link}
+              align="center"
+              ml="3"
+              p="2"
+              color="white"
+              fontSize="12px"
               fontWeight="regular"
+              bg="#1C4532"
+              borderRadius="xl"
               cursor="pointer"
-              onClick={() => handleMenuClick("상점")}
+              to="/seller"
             >
-              상점
+              farmer
             </Text>
-          </Link>
-          <Link to="/schedule">
+          )}
+          {menuLinks.map(menuLink => (
             <Text
-              mx="30px"
-              color={activeMenu === "농장" ? "#1C4532" : "#999999"}
+              key={menuLink.link}
+              as={Link}
+              mx="5"
+              color={menuLink.link === location.pathname ? "#1C4532" : "#999999"}
               fontSize="20px"
               fontWeight="regular"
               cursor="pointer"
-              onClick={() => handleMenuClick("농장")}
+              to={menuLink.link}
             >
-              농장
+              {menuLink.name}
             </Text>
-          </Link>
+          ))}
         </Flex>
 
-        {/* <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 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>
+          )}
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx
index 836eb33..6f9a671 100644
--- a/src/components/layouts/MainLayout.tsx
+++ b/src/components/layouts/MainLayout.tsx
@@ -2,10 +2,12 @@ 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 271fec3..c615d7f 100644
--- a/src/components/layouts/MyPageLayout.tsx
+++ b/src/components/layouts/MyPageLayout.tsx
@@ -1,9 +1,10 @@
 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" h="100vh" py="10" bg="#F5F5F5">
+  <Flex justify="center" direction="row" w="100vw" minH={`calc(100vh - ${size.header.h})`} 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
new file mode 100644
index 0000000..b81c45d
--- /dev/null
+++ b/src/components/layouts/ScrollSaver.tsx
@@ -0,0 +1,19 @@
+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 b46a42b..4a8efaa 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 = (accessToken: string) => {
+  const login = async (accessToken: string) =>
     defaultApi
       .get("/api/members/self", {
         headers: {
@@ -20,7 +20,8 @@ const useLogin = () => {
           role: data.role,
         });
       });
-  };
+
+  const refreshLogin = async () => login(user?.token || "");
 
   const logout = () => {
     setUser(null);
@@ -30,7 +31,7 @@ const useLogin = () => {
 
   const sellerCheck = () => user?.role === "ROLE_FARMER";
 
-  return { login, logout, loginCheck, sellerCheck };
+  return { user, login, logout, refreshLogin, loginCheck, sellerCheck };
 };
 
 export default useLogin;
diff --git a/src/hooks/useScrollSaver.ts b/src/hooks/useScrollSaver.ts
new file mode 100644
index 0000000..0e260e8
--- /dev/null
+++ b/src/hooks/useScrollSaver.ts
@@ -0,0 +1,26 @@
+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 b725c57..ba0df62 100644
--- a/src/mocks/mockItem/mockFarms.ts
+++ b/src/mocks/mockItem/mockFarms.ts
@@ -5,26 +5,40 @@ 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
new file mode 100644
index 0000000..3b0e4d5
--- /dev/null
+++ b/src/mocks/mockItem/mockReviews.ts
@@ -0,0 +1,52 @@
+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 99774a4..fe3443f 100644
--- a/src/pages/CallbackPage/index.tsx
+++ b/src/pages/CallbackPage/index.tsx
@@ -1,14 +1,17 @@
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, 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);
+    login(accessToken).then(() => {
+      navigate("/");
+    });
   }
 
   return null;
diff --git a/src/pages/FarmDetailPage/index.tsx b/src/pages/FarmDetailPage/index.tsx
index 7473b06..c5ff0a0 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 } from "@chakra-ui/react";
+import { Tab, Tabs, TabList, TabPanels, TabPanel, Flex } from "@chakra-ui/react";
+import AddPreview from "@components/common/AddPreview";
 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 (
-    <>
-      <Product scheduleId={scheduleId} />
+    <Flex align="center" direction="column" w="100vw">
+      <Schedule scheduleId={scheduleId} />
 
-      <Tabs mt={100} ml={200}>
+      <Tabs mt={100}>
         <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,7 +22,15 @@ const FarmDetailPage = () => {
 
         <TabPanels py="10px">
           <TabPanel>
-            <ProductDescription scheduleId={scheduleId} />
+            <AddPreview
+              info={{
+                title: "",
+                mainImage: "",
+                detailTitles: ["", "", ""],
+                detailDescriptions: ["", "", ""],
+                detailImages: ["", "", ""],
+              }}
+            />
           </TabPanel>
           <TabPanel>
             <ReviewList />
@@ -31,7 +39,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 1be401c..8206528 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} columns={3} gap="25px" />
+        <GridView items={products || []} ItemComponent={ProductCard} py="10" columns={3} gap="25px" />
       </Flex>
     </Flex>
   );
diff --git a/src/pages/MyPage/FarmListPage.tsx b/src/pages/MyPage/FarmListPage.tsx
index be3d060..35d75ae 100644
--- a/src/pages/MyPage/FarmListPage.tsx
+++ b/src/pages/MyPage/FarmListPage.tsx
@@ -1,9 +1,32 @@
+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">
-    <FarmList />
+    {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>
+    ))}
   </Card>
 );
 
diff --git a/src/pages/MyPage/OrdersPage.tsx b/src/pages/MyPage/OrdersPage.tsx
index 1341c76..b4a7f2e 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%" h="800px" overflowY="scroll" overflowX="hidden" p="10">
+  <Card title="상품 주문 내역" w="100%" 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
new file mode 100644
index 0000000..d5d591a
--- /dev/null
+++ b/src/pages/MyPage/ProductWishlistPage.tsx
@@ -0,0 +1,11 @@
+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 25aa435..70e71fa 100644
--- a/src/pages/MyPage/ReviewListPage.tsx
+++ b/src/pages/MyPage/ReviewListPage.tsx
@@ -1,10 +1,33 @@
+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">
-    <ReviewList />
+    {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>
+    ))}
   </Card>
 );
 
diff --git a/src/pages/StoreDetailPage/index.tsx b/src/pages/ProductDetailPage/index.tsx
similarity index 55%
rename from src/pages/StoreDetailPage/index.tsx
rename to src/pages/ProductDetailPage/index.tsx
index b55bc9c..4cb3c81 100644
--- a/src/pages/StoreDetailPage/index.tsx
+++ b/src/pages/ProductDetailPage/index.tsx
@@ -1,12 +1,12 @@
-import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Tab, Tabs, TabList, TabPanels, TabPanel, Flex } from "@chakra-ui/react";
+import AddPreview from "@components/common/AddPreview";
 import Product from "@components/features/StoreDetailPage/Product";
-import ProductDescription from "@components/features/StoreDetailPage/ProductDescription";
 import ReviewList from "@components/features/StoreDetailPage/ReviewList";
 
 const StoreDetailPage = () => (
-  <>
-    <Product />
-    <Tabs mt={100} ml={200}>
+  <Flex align="center" direction="column" w="100vw">
+    <Product productId={1} />
+    <Tabs mt={100}>
       <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,14 +14,22 @@ const StoreDetailPage = () => (
 
       <TabPanels py="10px">
         <TabPanel>
-          <ProductDescription />
+          <AddPreview
+            info={{
+              title: "",
+              mainImage: "",
+              detailTitles: ["", "", ""],
+              detailDescriptions: ["", "", ""],
+              detailImages: ["", "", ""],
+            }}
+          />
         </TabPanel>
         <TabPanel>
           <ReviewList />
         </TabPanel>
       </TabPanels>
     </Tabs>
-  </>
+  </Flex>
 );
 
 export default StoreDetailPage;
diff --git a/src/pages/WishPage/index.tsx b/src/pages/WishPage/index.tsx
new file mode 100644
index 0000000..44d4b46
--- /dev/null
+++ b/src/pages/WishPage/index.tsx
@@ -0,0 +1,14 @@
+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 cd9a0e8..c552425 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -1,8 +1,9 @@
+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 BuyerMyPage from "@pages/BuyerMyPage";
+import useScrollSaver from "@hooks/useScrollSaver";
 import CallbackPage from "@pages/CallbackPage";
 import EmailLoginPage from "@pages/EmailLoginPage";
 import EmailRegisterPage from "@pages/EmailRegisterPage";
@@ -16,12 +17,13 @@ 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";
@@ -34,10 +36,16 @@ 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: "/",
@@ -52,20 +60,8 @@ const AppRouter = () => {
           element: <IntroductionPage />,
         },
         {
-          path: "BuyerMyPage",
-          element: <BuyerMyPage />,
-        },
-        {
-          path: "SellerMyPage",
-          element: <SellerMyPage />,
-        },
-        {
-          path: "StoreDetail",
-          element: <StoreDetailPage />,
-        },
-        {
-          path: "schedule/:scheduleId",
-          element: <FarmDetailPage />,
+          path: "wish",
+          element: <WishPage />,
         },
         {
           path: "seller",
@@ -134,6 +130,10 @@ const AppRouter = () => {
               index: true,
               element: <MyPage />,
             },
+            {
+              path: "product-wish",
+              element: <ProductWishlistPage />,
+            },
             {
               path: "orders",
               element: <MyOrdersPage />,
@@ -178,7 +178,16 @@ const AppRouter = () => {
         },
         {
           path: "store",
-          element: <StorePage />,
+          children: [
+            {
+              index: true,
+              element: <StorePage />,
+            },
+            {
+              path: ":productId",
+              element: <ProductDetailPage />,
+            },
+          ],
         },
         {
           path: "callback/:provider",
@@ -186,7 +195,16 @@ const AppRouter = () => {
         },
         {
           path: "schedule",
-          element: <SchedulePage />,
+          children: [
+            {
+              index: true,
+              element: <SchedulePage />,
+            },
+            {
+              path: ":scheduleId",
+              element: <FarmDetailPage />,
+            },
+          ],
         },
         {
           path: "cart/product",
diff --git a/src/types/index.ts b/src/types/index.ts
index 4ee6565..ca29c5f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -6,6 +6,8 @@ export type Farm = Item & {
   name: string;
   address: string;
   profile?: string;
+  description: string;
+  date: string;
 };
 
 export type Product = Item & {
@@ -20,6 +22,14 @@ 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;