feat: create ga report form UI

src/Component/Blog/BigQueryCreateForm/BigQueryCreateForm.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BigQueryForm from '@/Component/Blog/BigQueryCreateForm/BigQueryCreateForm';
+const meta: Meta<typeof BigQueryForm> = {
+  title: 'GA 데이터 보고서 생성 폼',
+  component: BigQueryForm,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof BigQueryForm>;
+
+export const BasicBigQueryForm: Story = {};

src/Component/Blog/BigQueryCreateForm/BigQueryCreateForm.tsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+import DateRangePicker from '@/Component/Common/DateRangePicker/DateRangePicker';
+import Flex from '@/Component/Common/Flex/Flex';
+
+const BIGQUERY_VALUE = [
+  '총 사용자 수',
+  '참여 시간',
+  '도시별 한 페이지 당 방문 세션 수',
+  '방문자의 기기 유형(모바일,PC)',
+];
+
+const Form = styled.form`
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  margin: 0 auto;
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+const RadioButton = styled.input`
+  margin-right: 10px;
+`;
+
+const SubmitButton = styled.button`
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 20px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+export default function BigQueryCreateForm() {
+  const handleSubmit = (e: SubmitEvent) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Flex flexDirection="column" width="100%" gap="50px">
+      <Flex
+        flexDirection="column"
+        gap="25px"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <h4>😎 데이터의 종류를 선택해주세요</h4>
+        <Flex gap="15px" flexWrap="wrap" justifyContent="center">
+          {BIGQUERY_VALUE.map((value) => (
+            <Label key={value}>
+              <RadioButton type="radio" value={value} name="reportType" />
+              {value}
+            </Label>
+          ))}
+        </Flex>
+      </Flex>
+
+      <Flex flexDirection="column" gap="25px">
+        <h4>📆 날짜를 선택해주세요</h4>
+        <DateRangePicker />
+        <SubmitButton type="submit">보고서 생성</SubmitButton>
+      </Flex>
+    </Flex>
+  );
+}

src/Component/Common/Calendar/MonthNavigation.tsx

@@ -1,5 +1,3 @@
-
-
 import { getYear, getMonth } from 'date-fns';
 import { ArrowLeft, ArrowRight } from 'iconic-react';
 
@@ -22,8 +20,8 @@ const MonthNavigation = ({
 }: MonthNavigationProps) => {
   const years = Array.from({ length: 20 }).map((year, index) => {
     return {
-      key: (getYear(date) + index).toString(),
-      label: (getYear(date) + index).toString(),
+      key: (getYear(date) - index).toString(),
+      label: (getYear(date) - index).toString(),
     };
   });
 

src/Component/Common/RadioButton/RadioButton.tsx

@@ -39,6 +39,8 @@ export default function RadioButton({
   isInValid = false,
   ...rest
 }: RadioButtonProps) {
+  const id = value?.toString();
+
   return (
     <Flex
       {...rest}
@@ -50,15 +52,16 @@ export default function RadioButton({
       }}
     >
       <StyledRadioButton
+        id={id}
         type="radio"
         colorScheme={colorScheme}
-        value={value?.toString()}
+        value={id}
         isInValid={isInValid}
         isDisabled={isDisabled}
       ></StyledRadioButton>
 
       <StyledRadioButtonLabel
-        htmlFor={value?.toString()}
+        htmlFor={id}
         colorScheme={colorScheme}
         buttonSize={buttonSize}
         isInValid={isInValid}

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

@@ -0,0 +1,6 @@
+'use client';
+import BigQueryCreateForm from '@/Component/Blog/BigQueryCreateForm/BigQueryCreateForm';
+
+export default function GaReportCreatePage() {
+  return <BigQueryCreateForm></BigQueryCreateForm>;
+}