feat: add radioButton component

src/@types/RadioButton.styles.ts

@@ -0,0 +1,70 @@
+import { css } from 'styled-components';
+
+import { RadioButtonProps } from '@/Component/Common/RadioButton/RadioButton';
+import { fontSizes } from '@/style/theme/size';
+export const sizeToRadioButtonStyles = (
+  buttonSize: RadioButtonProps['buttonSize']
+) => {
+  switch (buttonSize) {
+    case 'xs':
+      return {
+        fontSize: '12px',
+        lineHeight: '1.2',
+        minHeight: '20px',
+      };
+
+    case 'sm':
+      return {
+        fontSize: fontSizes.xs,
+        lineHeight: '1.4',
+        minHeight: '25px',
+      };
+
+    case 'md':
+      return {
+        fontSize: fontSizes.sm,
+        lineHeight: '1.6',
+        minHeight: '30px',
+      };
+
+    case 'lg':
+      return {
+        fontSize: fontSizes.md,
+        lineHeight: '1.8',
+        minHeight: '35px',
+      };
+
+    case 'xl':
+      return {
+        fontSize: fontSizes.lg,
+        lineHeight: '2.0',
+        minHeight: '40px',
+      };
+
+    default:
+      return {
+        lineHeight: '1.6',
+        minHeight: '30px',
+      };
+  }
+};
+export const getRadioButtonStyle = (props: RadioButtonProps) => {
+  const size = props?.buttonSize ?? 'sm';
+  const getSizeStyle = sizeToRadioButtonStyles(size);
+  const color = props?.isInValid ? '#E53E3E' : props?.colorScheme ?? 'inherit';
+
+  return css`
+    color: ${color};
+    border-radius: 0;
+    ${getSizeStyle};
+    ${props?.isDisabled &&
+    css`
+      color: #e0e0e0;
+      cursor: not-allowed;
+    `}
+    ${props?.isInValid &&
+    css`
+      color: #e53e3e;
+    `}
+  `;
+};

src/Component/Blog/UserSessionInfo/UserSessionInfo.tsx

@@ -0,0 +1,39 @@
+import { BarChart, YAxis, Tooltip, Bar, CartesianGrid } from 'recharts';
+
+import Flex from '@/Component/Common/Flex/Flex';
+import useGetUserSessionInfoQuery from '@/hooks/queries/useGetUserSessionInfoQuery';
+
+const UserSessionInfo = () => {
+  const { data } = useGetUserSessionInfoQuery();
+  //city,value
+
+  const cityScreenPageViewPerSessionData = data?.rows?.map((row) => {
+    return {
+      x: row?.dimensionValues?.[0]?.value,
+      y: row?.metricValues?.[0]?.value,
+    };
+  });
+
+  return (
+    <Flex flexDirection="column">
+      <h2>유저당 한 세션당 방문한 페이지 그래프</h2>
+      <BarChart
+        width={730}
+        height={250}
+        data={cityScreenPageViewPerSessionData}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <YAxis tick={{ fontSize: 12 }} />
+        <Tooltip
+          formatter={(_value, _name, props) => {
+            return `${props.payload.x}에서 ${_value}개의 View`;
+          }}
+        ></Tooltip>
+
+        <Bar dataKey="y" fill="#8884d8" barSize={200} />
+      </BarChart>
+    </Flex>
+  );
+};
+
+export default UserSessionInfo;

src/Component/Common/Calendar/DateGrid.tsx

@@ -1,16 +1,21 @@
 import { useState } from 'react';
 
 import { getDate, isSaturday, isSunday, isToday } from 'date-fns';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 interface DateGridProps {
   prevMonthDates: Date[];
   currentMonthDates: Date[];
+  onSelectDate?: (_newDate: Date) => void;
 }
 
 const DAYS = ['일', '월', '화', '수', '목', '금', '토'];
 
-const DateGrid = ({ prevMonthDates, currentMonthDates }: DateGridProps) => {
+const DateGrid = ({
+  prevMonthDates,
+  currentMonthDates,
+  onSelectDate,
+}: DateGridProps) => {
   const [currentCell, setCurrentCell] = useState<null | Date>(null);
   return (
     <GridContainer>
@@ -24,7 +29,10 @@ const DateGrid = ({ prevMonthDates, currentMonthDates }: DateGridProps) => {
       ))}
       {currentMonthDates.map((currentDate) => (
         <DateCell
-          onClick={() => setCurrentCell(currentDate)}
+          onClick={() => {
+            onSelectDate && onSelectDate(currentDate);
+            setCurrentCell(currentDate);
+          }}
           key={currentDate.toString()}
           isToday={isToday(currentDate)}
           isSaturDay={isSaturday(currentDate)}

src/Component/Common/RadioButton/RadioButton.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import RadioButton from '@/Component/Common/RadioButton/RadioButton';
+
+const meta: Meta<typeof RadioButton> = {
+  title: '라디오 버튼 컴포넌트',
+  component: RadioButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    value: {
+      defaultValue: '라디오버튼',
+      description: '라디오버튼에 들어갈 값입니다. 숫자나 문자열이 들어갑니다.',
+      control: {
+        type: 'text',
+      },
+    },
+    colorScheme: {
+      description: '라디오 버튼의 색상 스킴입니다.',
+      control: {
+        type: 'color',
+      },
+    },
+    buttonSize: {
+      description: '라디오 버튼의 크기를 설정합니다.',
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+    },
+    isDisabled: {
+      description: '라디오 버튼을 비활성화할지 여부입니다.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    isInValid: {
+      description: '라디오 버튼이 유효한지 여부를 나타냅니다.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioButton>;
+
+export const BaseRadioButton: Story = {};

src/Component/Common/RadioButton/RadioButton.tsx

@@ -0,0 +1,72 @@
+import React, { CSSProperties, ComponentPropsWithoutRef } from 'react';
+
+import styled from 'styled-components';
+
+import {
+  getRadioButtonStyle,
+  sizeToRadioButtonStyles,
+} from '@/@types/RadioButton.styles';
+import Flex from '@/Component/Common/Flex/Flex';
+
+type ExcludeSizePropsFromInput = Omit<
+  ComponentPropsWithoutRef<'input'>,
+  'size'
+>;
+
+type buttonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface RadioButtonProps extends ExcludeSizePropsFromInput {
+  readonly colorScheme?: CSSProperties['color'];
+  readonly buttonSize?: buttonSize;
+  readonly isDisabled?: boolean;
+  readonly value?: string | number | readonly string[];
+  readonly isInValid?: boolean;
+}
+
+const StyledRadioButton = styled.input<RadioButtonProps>`
+  ${(props) => getRadioButtonStyle(props)}
+`;
+
+const StyledRadioButtonLabel = styled.label<RadioButtonProps>`
+  ${(props) => getRadioButtonStyle(props)}
+`;
+
+export default function RadioButton({
+  colorScheme,
+  buttonSize,
+  value,
+  isDisabled = false,
+  isInValid = false,
+  ...rest
+}: RadioButtonProps) {
+  return (
+    <Flex
+      {...rest}
+      alignItems="center"
+      gap="2px"
+      style={{
+        cursor: 'pointer',
+        ...rest.style,
+      }}
+    >
+      <StyledRadioButton
+        type="radio"
+        colorScheme={colorScheme}
+        value={value?.toString()}
+        isInValid={isInValid}
+        isDisabled={isDisabled}
+      ></StyledRadioButton>
+
+      <StyledRadioButtonLabel
+        htmlFor={value?.toString()}
+        colorScheme={colorScheme}
+        buttonSize={buttonSize}
+        isInValid={isInValid}
+        isDisabled={isDisabled}
+        style={rest.style}
+      >
+        {value?.toString()}
+      </StyledRadioButtonLabel>
+    </Flex>
+  );
+}

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

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import ActiveUserChart from '@/Component/BackOffice/ActiveUserChart/ActiveUserChart';
 import ActiveUSerSessionChart from '@/Component/BackOffice/ActiveUserSessionChart/ActiveUserSessionChart';
 import SelectedDateUserCountInfo from '@/Component/BackOffice/SelectedDateUserCount/SelectedDateUserCount';
+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';
@@ -93,6 +94,10 @@ export default function BackOfficePage() {
             <ActiveUserChart selectDate={date} type={dataType} />
             <ActiveUSerSessionChart />
           </Flex>
+
+          <Flex>
+            <UserSessionInfo />
+          </Flex>
         </Flex>
       </Suspense>
     </StyledMain>

src/hooks/queries/queryKey/index.ts

@@ -6,6 +6,7 @@ import {
   getActiveUserCountByDate,
   getPostDetailViewsCount,
   getPlatformUserCount,
+  getUserSessionInfo,
 } from '@/services/BigQuery';
 import { getGuestBook } from '@/services/GuestBook';
 import {
@@ -94,7 +95,8 @@ const gaQueryOptions = {
     queryFn: getPlatformUserCount,
   }),
   visitedUserSession: () => ({
-    queryKey: gaQueryKey.visitedUserSession,
+    queryKey: gaQueryKey.visitedUserSession(),
+    queryFn: getUserSessionInfo,
   }),
 };
 export {

src/hooks/queries/useGetUserSessionInfoQuery.ts

@@ -0,0 +1,7 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { gaQueryOptions } from '@/hooks/queries/queryKey';
+
+export default function useGetUserSessionInfoQuery() {
+  return useQuery(gaQueryOptions.visitedUserSession());
+}

src/services/BigQuery/index.ts

@@ -35,3 +35,11 @@ export const getPlatformUserCount = async () => {
     )
   ).data;
 };
+
+export const getUserSessionInfo = async () => {
+  return (
+    await get<google.analytics.data.v1beta.IRunReportResponse>(
+      '/api/user-session'
+    )
+  ).data;
+};