Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…

…nto feature/#62

src/App.error.tsx

@@ -0,0 +1,26 @@
+import { FallbackProps } from 'react-error-boundary';
+import styled from '@emotion/styled';
+
+const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
+  return (
+    <Container>
+      <span>App 전체 에러 발생</span>
+      <button onClick={resetErrorBoundary}>다시 시도</button>
+    </Container>
+  );
+};
+
+export default ErrorFallback;
+
+const Container = styled.div`
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;

src/App.loading.tsx

@@ -0,0 +1,112 @@
+import styled from '@emotion/styled';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+import theme from '@styles/theme';
+
+const Loading = () => {
+  return (
+    <Container>
+      <Sidebar />
+      <Section>
+        <Header />
+        <OutletLayout />
+      </Section>
+    </Container>
+  );
+};
+
+export default Loading;
+
+const BaseSkeleton = styled(Skeleton)`
+  width: 100%;
+
+  border-radius: 16px;
+
+  background-color: #f2f4f5;
+`;
+
+const Container = styled.div`
+  position: relative;
+
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+
+  display: flex;
+
+  background-color: white;
+  overflow: hidden;
+`;
+
+const Sidebar = styled(BaseSkeleton)`
+  position: fixed;
+
+  width: 100px;
+  min-height: 100%;
+
+  overflow: hidden;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
+`;
+
+const Section = styled.div`
+  --sidebar-width: 100px;
+
+  width: 100%;
+  min-width: calc(100vh - var(--sidebar-width));
+  height: 100vh;
+
+  margin-left: var(--sidebar-width);
+  padding: 0 22px;
+
+  display: flex;
+  flex-direction: column;
+
+  ${theme.response.tablet} {
+    min-width: 0;
+
+    margin-left: 0;
+    padding: 0 15px;
+  }
+`;
+
+const Header = styled(BaseSkeleton)`
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 85px;
+
+  border-radius: 20px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${theme.response.tablet} {
+    height: 65px;
+
+    border-radius: 10px;
+  }
+`;
+
+const OutletLayout = styled(BaseSkeleton)`
+  width: 100%;
+  height: 85vh;
+  max-height: 85vh;
+
+  margin-top: 16px;
+  border-radius: 20px;
+
+  ${theme.response.tablet} {
+    margin-top: 15px;
+
+    margin-top: 0;
+    border-radius: 10px;
+  }
+`;

src/App.tsx

@@ -13,8 +13,8 @@ import { Suspense } from 'react';
 import { MainRouter } from './routes';
 import GlobalStyles from '@styles/GlobalStyles';
 import theme from '@styles/theme';
-import { ErrorApp } from '@components/ErrorFallback';
-import { LoadingApp } from '@components/Loading';
+import ErrorFallback from './App.error';
+import Loading from './App.loading';
 
 const queryClient = new QueryClient();
 
@@ -28,9 +28,9 @@ const App = () => {
           <GlobalStyles />
           <ErrorBoundary
             onReset={reset}
-            FallbackComponent={ErrorApp}
+            FallbackComponent={ErrorFallback}
           >
-            <Suspense fallback={<LoadingApp />}>
+            <Suspense fallback={<Loading />}>
               <BrowserRouter>
                 <MainRouter />
               </BrowserRouter>

src/api/index.ts

@@ -1,9 +1,14 @@
 export { default as instance } from './lib/instance';
 export { default as postLogin } from './lib/postLogin';
 export { default as postRefreshToken } from './lib/postRefreshToken';
+export {
+  getCouponList,
+  couponUpdateApi,
+  couponDeleteApi,
+  couponToggleApi
+} from './lib/getCouponList';
 export { default as getTotalReport } from './lib/getTotalReport';
 export { default as getYearReport } from './lib/getYearReport';
-export { default as getCouponList } from './lib/getCouponList';
 export { default as getHeaderAccommodation } from './lib/getHeaderAccommodation';
 export { default as getMonthReports } from './lib/getMonthReports';
 export { default as getDailyReport } from './lib/getDailyReport';

src/api/lib/getCouponList.ts

@@ -1,8 +1,13 @@
-import { CouponListResponse } from '@/types/couponList';
+import {
+  CouponDeleteCredential,
+  CouponListResponse,
+  CouponToggleCredential,
+  CouponUpdateCredential
+} from '@/types/couponList';
 import { instance } from '..';
 
 // 쿠폰 정보 가져오는 api
-const getCouponList = async (
+export const getCouponList = async (
   accommodationId: number,
   date?: string,
   status?: string,
@@ -22,4 +27,31 @@ const getCouponList = async (
   return response.data;
 };
 
-export default getCouponList;
+// 쿠폰 수정 api
+export const couponUpdateApi = async (credential: CouponUpdateCredential) => {
+  const couponNumber = credential.coupon_number;
+  const response = await instance.put(
+    `/v1/coupons/${couponNumber}`,
+    credential
+  );
+  return response.data;
+};
+
+// 쿠폰 삭제 api
+export const couponDeleteApi = async (
+  credential: CouponDeleteCredential
+): Promise<void> => {
+  const couponNumber = credential.coupon_number;
+  const response = await instance.delete(`/v1/coupons/${couponNumber}`);
+  return response.data;
+};
+
+// 토클 on/off api
+export const couponToggleApi = async (credential: CouponToggleCredential) => {
+  const couponNumber = credential.coupon_number;
+  const response = await instance.put(
+    `/v1/coupons/${couponNumber}/expose`,
+    credential
+  );
+  return response.data;
+};

src/api/lib/getHeaderAccommodation.ts

@@ -1,13 +1,16 @@
 import { AxiosResponse } from 'axios';
 
 import { instance } from '..';
-import { HeaderAccommodationResult } from '@/types/layout';
+import {
+  HeaderAccommodationData,
+  HeaderAccommodationResult
+} from '@/types/layout';
 
-const getHeaderAccommodation = async (): Promise<HeaderAccommodationResult> => {
+const getHeaderAccommodation = async (): Promise<HeaderAccommodationData> => {
   const response: AxiosResponse<HeaderAccommodationResult, Error> =
     await instance.get(`/v1/accommodation`);
 
-  return response.data;
+  return response.data.accommodation_responses;
 };
 
 export default getHeaderAccommodation;

src/api/lib/getLocalCouponUsage.ts

@@ -1,14 +1,13 @@
 import { instance } from '..';
+import { LocalCouponUsageResult } from '@/types/dashboard';
 
-const getLocalCouponUsage = async (id: number) => {
-  try {
-    const response = await instance.get(
-      `v1/dashboards/${id}/coupons/local/count`
-    );
-    return response.data;
-  } catch (err) {
-    console.error(err);
-  }
+const getLocalCouponUsage = async (
+  id: number
+): Promise<LocalCouponUsageResult> => {
+  const response = await instance.get(
+    `v1/dashboards/${id}/coupons/local/count`
+  );
+  return response.data;
 };
 
 export default getLocalCouponUsage;

src/api/lib/getMonthReports.ts

@@ -1,12 +1,10 @@
 import { instance } from '..';
 
-const getMonthReports = async (id: number) => {
-  try {
-    const response = await instance.get(`v1/dashboards/${id}/reports/month`);
-    return response.data;
-  } catch (err) {
-    console.error(err);
-  }
+import { MonthReportsResults } from '@/types/dashboard';
+
+const getMonthReports = async (id: number): Promise<MonthReportsResults[]> => {
+  const response = await instance.get(`v1/dashboards/${id}/reports/month`);
+  return response.data.monthly_data_responses;
 };
 
 export default getMonthReports;

src/components/CouponList/CouponBanner/index.tsx

@@ -2,8 +2,15 @@ import styled from '@emotion/styled';
 import theme from '@styles/theme';
 
 import bannerIcon from '@assets/icons/ic-couponlist-speaker.svg';
+import { useRecoilValue } from 'recoil';
+import { headerAccommodationState } from '@recoil/index';
+// import { useGetCouponRanking } from '@hooks/queries/useGetCouponRanking';
 
 const CouponBanner = () => {
+  const headerAccommodation = useRecoilValue(headerAccommodationState);
+  const sigunguData = headerAccommodation.sigungu;
+  // const { data } = useGetCouponRanking(headerAccommodation.id);
+
   return (
     <BannerContainer>
       <TabBanner>
@@ -14,7 +21,8 @@ const CouponBanner = () => {
         <div>
           <TabBannerTitle>이번 달 우리 지역 인기 쿠폰</TabBannerTitle>
           <TabBannerContent>
-            OO구에서 가장 많이 사용된 쿠폰은? 재방문 고객 20% 할인쿠폰 이에요!
+            {sigunguData}에서 가장 많이 사용된 쿠폰은?
+            {/* <span>{data.first_coupon_title}쿠폰</span>이에요! */}
           </TabBannerContent>
         </div>
       </TabBanner>
@@ -46,9 +54,16 @@ const TabBanner = styled.div`
 const TabBannerTitle = styled.div`
   font-size: 12px;
   font-style: normal;
+  font-weight: 500;
   margin-bottom: 6px;
 `;
 const TabBannerContent = styled.div`
   font-size: 17px;
   font-style: normal;
+  font-weight: 500;
+
+  span {
+    margin: 0px 5px;
+    border-bottom: 1px solid;
+  }
 `;

src/components/CouponList/CouponHeader/index.tsx

@@ -69,6 +69,10 @@ const CouponRegisterButton = styled.div`
 
   font-size: 17px;
   color: ${theme.colors.white};
-  background: #ff3478;
+  background: linear-gradient(91deg, #ff3478 1.39%, #ff83ad 98.63%);
   cursor: pointer;
+
+  &:hover {
+    background: #b22655;
+  }
 `;