feat: 백오피스를 위한 Drawer컴포넌트 추가

src/Component/BackOffice/BackOfficeDrawer/BackOfficeDrawer.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Activity, AddCircle, CalendarSearch } from 'iconic-react';
+
+import ReportButton from '@/Component/Blog/ReportButton/ReportButton';
+import RssButton from '@/Component/Blog/RssButton/RssButton';
+import SearchPostButton from '@/Component/Blog/SearchPost/SearchPost';
+import Drawer from '@/Component/Common/Drawer/Drawer';
+import DrawerImage from '@/Component/Common/Drawer/DrawerImage';
+import IconButton from '@/Component/Common/IconButton/IconButton';
+import ToggleDarkModeButton from '@/Component/DarkMode/ToggoeButton';
+
+export default function BackOfficeDrawer() {
+  const [isDrawerOpen, setDrawerOpen] = useState(true);
+
+  return (
+    <div>
+      <Activity
+        cursor={'pointer'}
+        size={50}
+        onClick={() => setDrawerOpen(!isDrawerOpen)}
+      />
+      <Drawer
+        direction="right"
+        handleOpen={setDrawerOpen}
+        isOpen={isDrawerOpen}
+      >
+        <ul
+          style={{
+            height: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            cursor: 'pointer',
+          }}
+        >
+          <IconButton
+            icon={
+              <AddCircle
+                size="32"
+                color="#FF8A65"
+                variant="Bold"
+                style={{
+                  cursor: 'pointer',
+                }}
+              />
+            }
+            style={{
+              border: 'none',
+            }}
+          />
+
+          <IconButton
+            icon={
+              <CalendarSearch
+                size="32"
+                color="#FF8A65"
+                variant="Bold"
+                style={{
+                  cursor: 'pointer',
+                }}
+              />
+            }
+            tabIndex={0}
+            style={{
+              border: 'none',
+            }}
+          />
+        </ul>
+      </Drawer>
+    </div>
+  );
+}

src/Component/Common/Calendar/Calendar.tsx

@@ -5,8 +5,10 @@ import useCalendar from '@/hooks/useCalendar';
 
 const Calendar = ({
   onSelectDate,
+  maxSelectableYear,
   isDateInRange,
 }: {
+  maxSelectableYear?: number;
   isDateInRange?: (_newDate: Date) => boolean;
   onSelectDate?: (_newDate: Date) => void;
 }) => {
@@ -24,6 +26,7 @@ const Calendar = ({
   return (
     <Flex width={'350px'} flexDirection="column">
       <MonthNavigation
+        maxSelectableYear={maxSelectableYear}
         nextMonth={nextMonth}
         prevMonth={prevMonth}
         date={currentDate}

src/Component/Common/Calendar/MonthNavigation.tsx

@@ -11,15 +11,21 @@ interface MonthNavigationProps {
   readonly setCurrentDate: (_newYear: string) => void;
   readonly prevMonth: () => void;
   readonly nextMonth: () => void;
+  //최대 선택가능환 연도
+  readonly maxSelectableYear?: number;
 }
 
 const MonthNavigation = ({
   date,
   setCurrentDate,
   prevMonth,
   nextMonth,
+  maxSelectableYear,
 }: MonthNavigationProps) => {
-  const selectableYearOptions = generateYearOptionsFromDate();
+  const selectableYearOptions = generateYearOptionsFromDate(
+    new Date(),
+    maxSelectableYear
+  );
 
   const { setFalse, state: clickedYear, toggle } = useBoolean();
   return (

src/Component/Common/DateRangePicker/DateRangePicker.tsx

@@ -30,6 +30,7 @@ const DateRangePicker = ({
   return (
     <Flex flexWrap="wrap">
       <Calendar
+        maxSelectableYear={2}
         onSelectDate={(newDate) => selectCurrentDate(newDate)}
         isDateInRange={isDateWithRange}
       />
@@ -38,6 +39,7 @@ const DateRangePicker = ({
         <Calendar
           onSelectDate={(newDate) => selectEndDate(newDate)}
           isDateInRange={isDateWithRange}
+          maxSelectableYear={2}
         />
       )}
       <ToastContainer enterTimeout={500} leaveTimeout={1000} />

src/Component/Common/NavigationBar/Navbar.tsx

@@ -30,6 +30,18 @@ const StyledNavBarLayout = styled.nav`
   z-index: 100;
 `;
 
+const StyledNavBarColumnLayout = styled.nav`
+  position: sticky;
+  top: 0;
+  cursor: pointer;
+  display: block;
+  left: 0;
+  width: 350px;
+  font-size: 20px;
+  background-color: ${({ theme }) => theme.currentTheme.body};
+  z-index: 100;
+`;
+
 const StyledNavBarTitle = styled(Link)`
   @media ${({ theme }) => theme.device.mobile} {
     font-size: 14px;
@@ -87,8 +99,13 @@ function Navbar({
       );
     case 'column':
       return (
-        <StyledNavBarLayout>
-          <Flex gap={'10px'} flexDirection="column">
+        <StyledNavBarColumnLayout>
+          <Flex
+            gap={'10px'}
+            flexDirection="column"
+            alignItems="flex-start"
+            justifyContent="flex-start"
+          >
             {links.map((link) => (
               <StyledNavBarTitle
                 style={currentPathStyle(link.to)}
@@ -100,7 +117,7 @@ function Navbar({
             ))}
           </Flex>
           {hasDrawer && drawer}
-        </StyledNavBarLayout>
+        </StyledNavBarColumnLayout>
       );
   }
 }

src/app/(root)/(routes)/backoffice/create/page.tsx

@@ -1,9 +1,11 @@
 'use client';
 import { useState } from 'react';
 
-import { ResponsiveContainer, LineChart, Line, XAxis } from 'recharts';
+import { ResponsiveContainer, LineChart, Line, XAxis, Tooltip } from 'recharts';
 
 import BigQueryCreateForm from '@/Component/Blog/BigQueryCreateForm/BigQueryCreateForm';
+import Flex from '@/Component/Common/Flex/Flex';
+import Spinner from '@/Component/Common/Spinner/Spinner';
 import usePostGAReport from '@/hooks/mutations/usecreateGAReportMutation';
 
 export default function GaReportCreatePage() {
@@ -35,6 +37,11 @@ export default function GaReportCreatePage() {
           );
         }}
       />
+      {isLoading && (
+        <Flex justifyContent="center" alignItems="center" height={'500px'}>
+          <Spinner></Spinner>
+        </Flex>
+      )}
       <ResponsiveContainer width={720} height={400}>
         <LineChart data={userCountData}>
           <Line
@@ -53,6 +60,11 @@ export default function GaReportCreatePage() {
               right: 13,
             }}
           />
+          <Tooltip
+            formatter={(data) => {
+              return data;
+            }}
+          ></Tooltip>
         </LineChart>
       </ResponsiveContainer>
     </>

src/app/(root)/(routes)/backoffice/page.tsx

@@ -1,76 +1,27 @@
 'use client';
-import { useState, Suspense } from 'react';
-
-import styled from 'styled-components';
+import { Suspense } from 'react';
 
 import ActiveUserChart from '@/Component/BackOffice/ActiveUserChart/ActiveUserChart';
 import ActiveUSerSessionChart from '@/Component/BackOffice/ActiveUserSessionChart/ActiveUserSessionChart';
+import BackOfficeDrawer from '@/Component/BackOffice/BackOfficeDrawer/BackOfficeDrawer';
 import SelectedDateUserCountInfo from '@/Component/BackOffice/SelectedDateUserCount/SelectedDateUserCount';
+import UserCountInfo from '@/Component/Blog/UserCountInfo/UserCountInfo';
 import UserSessionInfo from '@/Component/Blog/UserSessionInfo/UserSessionInfo';
-import Button from '@/Component/Common/Button/Button';
-import ButtonGroup from '@/Component/Common/ButtonGroup/ButtonGroup';
-import DropDown from '@/Component/Common/DropDown/DropDown';
 import Flex from '@/Component/Common/Flex/Flex';
+import ModalHeader from '@/Component/Common/Modal/ModalHeader';
 import Spinner from '@/Component/Common/Spinner/Spinner';
 
-const StyledMain = styled.main`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-`;
-
-export default function BackOfficePage() {
-  const [dataType, setDataType] = useState<'총 사용자 수' | '참여 시간'>(
-    '총 사용자 수'
-  );
-  const [date, setDate] = useState<'7일' | '30일' | '90일'>('7일');
-
+export default function BackOffice() {
   return (
-    <StyledMain>
-      <DropDown
-        onChangeSelectedItem={(item) => {
-          if (item && item?.key === '참여 시간') {
-            setDataType(item?.key);
-          }
-          if (item && item?.key === '총 사용자 수') {
-            setDataType(item?.key);
-          }
-        }}
-        items={[
-          {
-            key: '총 사용자 수',
-            label: '총 사용자 수',
-            text: '사용자의 총 사용자 수입니다.',
-          },
-          {
-            key: '참여 시간',
-            label: '참여 시간',
-            text: '사용자의 참여 시간입니다',
-          },
-        ]}
-      />
-      <ButtonGroup spacing={15}>
-        <Button
-          label="30일"
-          variant="primary"
-          size="small"
-          onClick={() => setDate('30일')}
-        ></Button>
-        <Button
-          size="small"
-          label="7일"
-          variant="primary"
-          onClick={() => setDate('7일')}
-        ></Button>
-        <Button
-          label="90일"
-          size="small"
-          variant="primary"
-          onClick={() => setDate('90일')}
-        ></Button>
-      </ButtonGroup>
+    <main
+      style={{
+        alignItems: 'flex-start',
+      }}
+    >
+      <Flex justifyContent="flex-start" width={'80%'}>
+        <BackOfficeDrawer></BackOfficeDrawer>
+        <ModalHeader as="h1">BackOffice</ModalHeader>
+      </Flex>
 
       <Suspense
         fallback={
@@ -89,17 +40,13 @@ export default function BackOfficePage() {
           justifyContent="center"
           alignItems="center"
         >
-          <SelectedDateUserCountInfo date={date} />
-          <Flex justifyContent="space-around">
-            <ActiveUserChart selectDate={date} type={dataType} />
-            <ActiveUSerSessionChart />
-          </Flex>
-
+          <Flex justifyContent="space-around"></Flex>
           <Flex>
+            <UserCountInfo />
             <UserSessionInfo />
           </Flex>
         </Flex>
       </Suspense>
-    </StyledMain>
+    </main>
   );
 }