Merge pull request #79 from Duri-Salon/feat(salon)/statistics-page

[feat] 매출 통계 훅 구현, Income 페이지에 데이터 로드, 메인헤더 로그인 문구 변경

apps/duri/src/components/home/reservation/UpcomingReservation.tsx

@@ -26,7 +26,6 @@ interface UpcomingReservationProps {
 const UpcomingReservation = ({
   imageURL,
   address,
-  kakaoURL,
   name,
   phone,
   price,
@@ -42,7 +41,6 @@ const UpcomingReservation = ({
 
   const handleClickChatButton = () => {
     //오픈채팅방 주소 알려주는 모달 뜨게?하면 될 듯
-    console.log(kakaoURL);
   };
 
   const handleClickShopButton = () => {

apps/duri/src/components/payment/Widget.tsx

@@ -68,10 +68,6 @@ const PaymentWidget = ({
     widgets.setAmount(amount);
   }, [widgets, amount]);
 
-  useEffect(() => {
-    console.log(uuidData);
-  }, [uuidData]);
-
   return (
     <Container direction="column">
       <Flex direction="column" className="wrapper">

apps/duri/src/components/request/Calendar.tsx

@@ -29,7 +29,6 @@ const MonthlyCalendar = ({ onSelect }: CalendarProps) => {
       const stringDate = format(value, 'yyyy-MM-dd');
       onSelect('day', stringDate);
     }
-    console.log(value);
   };
   return (
     <Flex margin="7px 0 0 0" padding="0 20px">

apps/duri/src/mocks/index.ts

@@ -1,11 +1,8 @@
 export async function enableMocking() {
-  console.log(import.meta.env.VITE_MSW_ENABLED);
   if (import.meta.env.VITE_MSW_ENABLED === 'true') {
     const { worker } = await import('./browser');
     return await worker.start({
       onUnhandledRequest: 'bypass',
     });
-  } else {
-    console.log('MSW is disabled');
   }
 }

apps/duri/src/pages/My/MyReview.tsx

@@ -24,7 +24,6 @@ const MyReviewPage = () => {
 
   useEffect(() => {
     if (reviewListData) {
-      console.log(reviewListData);
       setReviewCount(reviewListData.reviewCnt);
       setReviewList(reviewListData.reviewList);
     }

apps/duri/src/pages/Payment/Success.tsx

@@ -68,8 +68,6 @@ const SuccessPage = () => {
         quotationId: quotationId,
       };
 
-      // console.log(paymentInfo)
-
       postPaymentConfirm(paymentInfo);
     }
   }, [verifySuccess]);

apps/duri/src/pages/Quotation/QuotationDetail.tsx

@@ -70,8 +70,6 @@ const QuotationDetailPage = () => {
       setBestRatingShop(bestRatingShop);
       setBestShop(bestShop);
       setQuotationList(quotationListData.quotations);
-
-      console.log(quotationListData);
     }
   }, [quotationListData]);
 

apps/duri/src/pages/Quotation/index.tsx

@@ -19,10 +19,6 @@ const QuotationPage = () => {
     window.scrollTo(0, 0);
   }, []);
 
-  useEffect(() => {
-    console.log(requestList);
-  }, [requestList]);
-
   return (
     <MobileLayout backgroundColor={theme.palette.Gray_White}>
       <Header title="요청서 및 견적서" />

apps/duri/src/pages/Review/ReviewModify.tsx

@@ -47,7 +47,6 @@ const ReviewModifyPage = () => {
 
   useEffect(() => {
     if (reviewData) {
-      console.log(reviewData);
       setPetInfo(reviewData.petInfo);
       setImageURL(reviewData.imgUrl);
       setValue('rating', reviewData.rating);

apps/duri/src/pages/Shop/index.tsx

@@ -175,11 +175,9 @@ const Shop = () => {
     if (searchShops.length > 0) {
       setIsSearchMode(true);
       setShops(searchShops);
-      // console.log('검색결과:', searchShops);
     } else {
       setIsSearchMode(false);
       setShops(nearbyShops);
-      // console.log('내주변:', nearbyShops);
     }
   }, [searchShops, nearbyShops]);
 

apps/salon/src/App.tsx

@@ -19,6 +19,8 @@ import ReservationPage from '@pages/Quotation/ReservationPage';
 
 import PrivateRoute from '@components/PrivateRoute';
 
+import IncomePage from './pages/Income/Income';
+
 function App() {
   return (
     <BrowserRouter>
@@ -47,6 +49,8 @@ function App() {
             path="/portfolio/:groomerId/:portfolioId"
             element={<PortfolioDetailPage />}
           />
+
+          <Route path="/income" element={<IncomePage />} />
         </Route>
       </Routes>
     </BrowserRouter>

apps/salon/src/components/income/MonthIncomeStatistic.tsx

@@ -0,0 +1,14 @@
+import { IncomeMonthListType } from '@duri-fe/utils/src/apis/types/income';
+
+interface MonthIncomeStatisticProps {
+  beforeRatio: number; //전월대비 증감
+  incomeMonthList: IncomeMonthListType[]; //최근 5달 매출 리스트
+}
+
+export const MonthIncomeStatistic = ({
+  beforeRatio,
+  incomeMonthList,
+}: MonthIncomeStatisticProps) => {
+  console.log(incomeMonthList, beforeRatio);
+  return <div>MonthIncomeStatistic</div>;
+};

apps/salon/src/components/income/PetStatistic.tsx

@@ -0,0 +1,28 @@
+interface PetStatisticProps {
+  agePetStatistic?: {
+    standard: string;
+    ratio: number;
+    count: number;
+  }[];
+
+  diseasePetStatistic?: {
+    standard: string;
+    ratio: number;
+    count: number;
+  }[];
+
+  characterPetStatistic?: {
+    standard: string;
+    ratio: number;
+    count: number;
+  }[];
+}
+
+export const PetStatistic = ({
+  agePetStatistic,
+  characterPetStatistic,
+  diseasePetStatistic,
+}: PetStatisticProps) => {
+    console.log(agePetStatistic, diseasePetStatistic, characterPetStatistic);
+  return <div>PetStatistic</div>;
+};

apps/salon/src/components/income/RecentIncomeStatistic.tsx

@@ -0,0 +1,16 @@
+import { IncomeMonthListType } from '@duri-fe/utils/src/apis/types/income';
+
+interface RecentIncomeStatisticProps {
+  incomeMonthList: IncomeMonthListType[]; //선택, 이전, 이번달 매출 리스트
+  beforeRatio: number; //전월 대비 증감
+  nowRatio: number; //이번달 대비 증감
+}
+
+export const RecentIncomeStatistic = ({
+  incomeMonthList,
+  beforeRatio,
+  nowRatio,
+}: RecentIncomeStatisticProps) => {
+  console.log(incomeMonthList, beforeRatio, nowRatio);
+  return <div>RecentIncomeStatistic</div>;
+};

apps/salon/src/components/onboarding/InputSalonOwner.tsx

@@ -362,7 +362,6 @@ const InputSalonOwner = ({
         <Button
           bg={theme.palette.Black}
           fontColor={theme.palette.White}
-          // onClick={() => console.log(historyYear, historyMonths, license)}
           onClick={handleSubmit(onSubmitSalonOwnerData)}
         >
           다음 단계

apps/salon/src/mocks/index.ts

@@ -1,10 +1,6 @@
 export async function enableMocking() {
-    console.log(import.meta.env.VITE_MSW_ENABLED)
-    if (import.meta.env.VITE_MSW_ENABLED === 'true') {
-      const { worker } = await import('./browser');
-      return await worker.start();
-    }
-    else {
-      console.log('MSW is disabled');
-    }
-  }
+  if (import.meta.env.VITE_MSW_ENABLED === 'true') {
+    const { worker } = await import('./browser');
+    return await worker.start();
+  }
+}

apps/salon/src/pages/Income/Income.tsx

@@ -0,0 +1,58 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Header, MobileLayout, SalonNavbar } from '@duri-fe/ui';
+import {
+  useGetAgeStatistic,
+  useGetCharacterStatistic,
+  useGetDiseaseStatistic,
+  useGetSelectedMonthIncome,
+  useGetThisMonthIncome,
+} from '@duri-fe/utils';
+import { MonthIncomeStatistic } from '@salon/components/income/MonthIncomeStatistic';
+import { PetStatistic } from '@salon/components/income/PetStatistic';
+import { RecentIncomeStatistic } from '@salon/components/income/RecentIncomeStatistic';
+
+const IncomePage = () => {
+  const navigate = useNavigate();
+  const handleClickBack = () => {
+    navigate('/');
+  };
+
+  const { data: monthIncomeData } = useGetThisMonthIncome({});
+  const { data: selectedIncomeData } = useGetSelectedMonthIncome({ month: 12 });
+  const { data: agePetStatistic } = useGetAgeStatistic({});
+  const { data: diseasePetStatistic } = useGetDiseaseStatistic({});
+  const { data: characterPetStatistic } = useGetCharacterStatistic({});
+
+  return (
+    <MobileLayout>
+      <Header
+        title="매출"
+        titleAlign="start"
+        backIcon
+        onClickBack={handleClickBack}
+      />
+      {monthIncomeData && (
+        <MonthIncomeStatistic
+          beforeRatio={monthIncomeData.beforeRatio}
+          incomeMonthList={monthIncomeData.incomeMonthList}
+        />
+      )}
+
+      {selectedIncomeData && (
+        <RecentIncomeStatistic
+          incomeMonthList={selectedIncomeData.incomeMonthList}
+          beforeRatio={selectedIncomeData.beforeRatio}
+          nowRatio={selectedIncomeData.nowRatio}
+        />
+      )}
+      {<PetStatistic
+        agePetStatistic={agePetStatistic?.ageList}
+        diseasePetStatistic={diseasePetStatistic?.diseaseList}
+        characterPetStatistic={characterPetStatistic?.characterList}
+      />}
+      <SalonNavbar />
+    </MobileLayout>
+  );
+};
+export default IncomePage;

apps/salon/src/pages/Onboarding/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Flex, MobileLayout, StatusBar } from '@duri-fe/ui';
@@ -38,11 +38,6 @@ const OnboardingPage = () => {
 
   const { mutateAsync, isSuccess, error } = usePostShopInfo();
 
-  useEffect(() => {
-    console.log(salonFormData);
-    console.log(salonOwnerFormData);
-  }, [salonFormData, salonOwnerFormData]);
-
   // TODO: 프로필 이미지
   const [profileImage, setProfileImage] = useState<File | null>(null);
 

packages/ui/src/components/Header/MainHeader.tsx

@@ -1,4 +1,4 @@
-import { Doori, Flex, Magnifier, Notification, theme } from '@duri-fe/ui';
+import { Doori, Flex, Magnifier, Notification, Text, theme } from '@duri-fe/ui';
 import styled from '@emotion/styled';
 
 import { HeightFitFlex } from '../FlexBox/Flex';
@@ -58,7 +58,9 @@ export const MainHeader = ({
         )}
         {login && (
           <LoginButton>
-            <LoginLink href="/login">Login</LoginLink>
+            <LoginLink href="/login">
+              <Text typo='Caption5'>로그인/회원가입</Text>
+            </LoginLink>
           </LoginButton>
         )}
       </IconContainer>
@@ -88,5 +90,4 @@ const LoginLink = styled.a`
 
 const LoginButton = styled.div`
   cursor: pointer;
-  padding: 5px 10px;
 `;

packages/ui/src/components/Quotation/RequestQuotation.tsx

@@ -43,8 +43,6 @@ export const RequestQuotation = ({
   const { age, breed, gender, image, neutering, name, weight } =
     requestList.pet; //펫정보
 
-  console.log(requestList);
-
   return (
     <>
       {/** 펫 정보 */}

packages/utils/src/apis/duri/hooks/my.ts

@@ -50,9 +50,11 @@ export const usePutPetInfo = () => {
     mutationFn: ({ petId, formData }: { petId: number; formData: FormData }) =>
       putPetInfo(petId, formData),
     onSuccess: () => {
-        alert('펫 정보가 수정되었습니다.');
+      alert('펫 정보가 수정되었습니다.');
+    },
+    onError: () => {
+      alert('펫 정보 수정에 실패했습니다.');
     },
-    onError: (error) => console.log(error),
   });
 };
 
@@ -69,8 +71,13 @@ export const usePutUserInfo = (handleNavigate: () => void) => {
   const { mutateAsync } = useMutation({
     mutationKey: ['putUserInfo'],
     mutationFn: (formData: FormData) => putUserInfo(formData),
-    onSuccess: () => handleNavigate(),
-    onError: (error) => console.log(error),
+    onSuccess: () => {
+      alert('회원 정보가 수정되었습니다.');
+      handleNavigate();
+    },
+    onError: () => {
+      alert('회원 정보 수정에 실패했습니다.');
+    },
   });
   return { mutateAsync };
 };
@@ -107,8 +114,10 @@ export const useDeletePetInfo = () => {
       setTimeout(() => {
         alert('펫 정보가 삭제되었습니다.');
         window.location.reload();
-      }, 2000)
+      }, 2000);
+    },
+    onError: () => {
+      alert('펫 정보 삭제에 실패했습니다.');
     },
-    onError: (error) => console.log(error),
   });
 };