Merge pull request #155 from kakao-tech-campus-2nd-step3/feature/foot…

…er_리펙토링-#146

Feature/footer 리펙토링 #146

src/api/wishlistApi.ts

@@ -7,13 +7,13 @@ type WishlistData = {
 
 const useCreateWishlists = () => {
   const fetcher = (wishlistData: WishlistData) =>
-    defaultApi.post(`/api/wishlist/{product_id}`, wishlistData).then(({ data }) => data);
+    defaultApi.post(`/api/v1/wishlist/{product_id}`, wishlistData).then(({ data }) => data);
 
   return useMutation({ mutationFn: fetcher });
 };
 
-const useGetWishlists = () => {
-  const fetcher = () => needAuthDefaultApi.get(`/api/wishlist`).then(({ data }) => data);
+const useGetWishlists = (type: "product" | "farm") => {
+  const fetcher = () => needAuthDefaultApi.get(`/api/v1/wishlist`, { params: { type } }).then(({ data }) => data);
 
   return useQuery({
     queryKey: ["wishlists"],
@@ -22,7 +22,7 @@ const useGetWishlists = () => {
 };
 
 const useDeleteWishlists = () => {
-  const fetcher = (wishlistId: number) => defaultApi.delete(`/api/wishlist/${wishlistId}`).then(({ data }) => data);
+  const fetcher = (wishlistId: number) => defaultApi.delete(`/api/v1/wishlist/${wishlistId}`).then(({ data }) => data);
 
   return useMutation({ mutationFn: fetcher });
 };

src/components/features/FarmDetailPage/Product.tsx → src/components/features/FarmDetailPage/Schedule.tsx

@@ -17,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[]>([]);
@@ -38,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">
@@ -144,4 +144,4 @@ const Product = ({ scheduleId }: { scheduleId: number }) => {
   );
 };
 
-export default Product;
+export default Schedule;

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;

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" />

src/components/features/MyPage/Wishlist/ProductWish.tsx

@@ -12,7 +12,7 @@ type Product = {
 };
 
 const ProductWish = () => {
-  const { data: wishlists, isLoading, refetch } = useGetWishlists();
+  const { data: wishlists, isLoading, refetch } = useGetWishlists("product");
   const { mutate: deleteWishlist } = useDeleteWishlists();
 
   const handleDelete = (wishlistId: number) => {

src/components/features/SellerPage/BusinessRegister/index.tsx

@@ -68,7 +68,7 @@ const BusinessRegister = () => {
   };
 
   return (
-    <Box w="900px" minH="100vh" 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}>

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">
           회원 탈퇴

src/components/features/SellerPage/Tax.tsx/index.tsx

@@ -24,7 +24,7 @@ const Tax = () => {
   };
 
   return (
-    <Box w="900px" minH="100vh" 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">
           세금 계산기

src/components/features/StoreDetailPage/Product.tsx

@@ -36,7 +36,7 @@ const Product: React.FC<ProductProps> = ({ productId }) => {
 
   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">

src/components/layouts/Header.tsx

@@ -68,7 +68,7 @@ const Header = () => {
         <Flex align="center" gap="5">
           {loginCheck() ? (
             [
-              <Link to="/wish">
+              <Link to="/me/product-wish">
                 <Icon as={HeartOutlined} color="#1C4532" fontSize="25px" />
               </Link>,
               <Link to="/cart/product">

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 />

src/pages/FarmDetailPage/index.tsx

@@ -1,28 +1,36 @@
 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();
 
   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>
         </TabList>
 
         <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>
   );
 };
 

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>