Skip to content

Commit

Permalink
feat: add ga create mutation func(..ing..)
Browse files Browse the repository at this point in the history
  • Loading branch information
khj0426 committed Jun 15, 2024
1 parent 78269e5 commit 6dd84a6
Show file tree
Hide file tree
Showing 13 changed files with 236 additions and 58 deletions.
1 change: 1 addition & 0 deletions src/@types/RadioButton.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const getRadioButtonStyle = (props: RadioButtonProps) => {
const color = props?.isInValid ? '#E53E3E' : props?.colorScheme ?? 'inherit';

return css`
cursor: pointer;
color: ${color};
border-radius: 0;
${getSizeStyle};
Expand Down
80 changes: 49 additions & 31 deletions src/Component/Blog/BigQueryCreateForm/BigQueryCreateForm.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import { useRef, useState } from 'react';

import styled from 'styled-components';

import Button from '@/Component/Common/Button/Button';
import DateRangePicker from '@/Component/Common/DateRangePicker/DateRangePicker';
import Flex from '@/Component/Common/Flex/Flex';

const BIGQUERY_VALUE = [
export const BIGQUERY_VALUE = [
'총 사용자 수',
'참여 시간',
'도시별 한 페이지 당 방문 세션 수',
'방문자의 기기 유형(모바일,PC)',
];

const Form = styled.form`
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
margin: 0 auto;
`;
] as const;

const Label = styled.label`
display: flex;
Expand All @@ -27,26 +23,21 @@ 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();
};
export default function BigQueryCreateForm({
onSubmit,
}: {
onSubmit?: (
_type: typeof BIGQUERY_VALUE[number],
_startDate: Date,
_endDate: Date
) => void;
}) {
const dateRef = useRef<null | {
startDate: Date;
endDate: Date;
}>(null);

const [type, setType] = useState<null | typeof BIGQUERY_VALUE[number]>(null);
return (
<Flex flexDirection="column" width="100%" gap="50px">
<Flex
Expand All @@ -59,7 +50,14 @@ export default function BigQueryCreateForm() {
<Flex gap="15px" flexWrap="wrap" justifyContent="center">
{BIGQUERY_VALUE.map((value) => (
<Label key={value}>
<RadioButton type="radio" value={value} name="reportType" />
<RadioButton
type="radio"
value={value}
name="reportType"
onClick={() => {
setType(value);
}}
/>
{value}
</Label>
))}
Expand All @@ -68,8 +66,28 @@ export default function BigQueryCreateForm() {

<Flex flexDirection="column" gap="25px">
<h4>📆 날짜를 선택해주세요</h4>
<DateRangePicker />
<SubmitButton type="submit">보고서 생성</SubmitButton>
<DateRangePicker
onSelectDateRange={(startDate, endDate) => {
dateRef.current = {
startDate,
endDate,
};
}}
/>
<Button
label="보고서 생성"
variant="secondary"
onClick={() => {
if (type && dateRef.current)
onSubmit?.(
type,
dateRef.current?.startDate,
dateRef.current.endDate
);
}}
>
보고서 생성
</Button>
</Flex>
</Flex>
);
Expand Down
2 changes: 0 additions & 2 deletions src/Component/Common/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default function Button({
disabled,
onClick,
children,
label = 'Button',
...rest
}: ButtonProps) {
return (
Expand All @@ -32,7 +31,6 @@ export default function Button({
role="button"
{...rest}
>
{label}
{children}
</StyledBaseButton>
);
Expand Down
3 changes: 2 additions & 1 deletion src/Component/Common/Calendar/DateGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const GridContainer = styled.div`
display: grid;
width: 300px;
grid-template-columns: repeat(7, 1fr);
background-color: #f5f5f5;
`;

const DayHeader = styled.div`
Expand All @@ -87,7 +88,7 @@ const DateCell = styled.div<DateCellProps>`
cursor: pointer;
background-color: ${(props) =>
props.isSelected
? buttonTheme.variant_backgroundColor.light_blue
? 'rgb(255, 138, 101)'
: props.isPrevMonth
? '#e0e0e0'
: 'none'};
Expand Down
16 changes: 14 additions & 2 deletions src/Component/Common/Calendar/MonthNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,20 @@ const MonthNavigation = ({
<span>{getMonth(date) + 1}</span>
</Flex>
<Flex gap={'5px'}>
<IconButton icon={<ArrowLeft />} onClick={prevMonth} />
<IconButton icon={<ArrowRight />} onClick={nextMonth} />
<IconButton
style={{
border: 'none',
}}
icon={<ArrowLeft color="rgb(255, 138, 101)" />}
onClick={prevMonth}
/>
<IconButton
icon={<ArrowRight color="rgb(255, 138, 101)" />}
onClick={nextMonth}
style={{
border: 'none',
}}
/>
</Flex>
</Flex>
);
Expand Down
22 changes: 16 additions & 6 deletions src/Component/Common/DateRangePicker/DateRangePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,20 @@ import { ToastContainer, ToastManager } from '@/Component/Common/Toast';
import useDateRangeCalendar from '@/hooks/useDateRangeCalendar';
interface DateRangePickerProps {
readonly isFutureDaysRestricted?: boolean;
readonly onSelectDateRange?: (_startDate: Date, _endDate: Date) => void;
}

const DateRangePicker = ({
isFutureDaysRestricted = true,
onSelectDateRange,
}: DateRangePickerProps) => {
const { selectCurrentDate, selectEndDate, hasError, isDateWithRange } =
useDateRangeCalendar({ isFutureDaysRestricted });
const {
selectCurrentDate,
startDate,
selectEndDate,
hasError,
isDateWithRange,
} = useDateRangeCalendar({ isFutureDaysRestricted, onSelectDateRange });

useEffect(() => {
if (hasError) {
Expand All @@ -26,10 +33,13 @@ const DateRangePicker = ({
onSelectDate={(newDate) => selectCurrentDate(newDate)}
isDateInRange={isDateWithRange}
/>
<Calendar
onSelectDate={(newDate) => selectEndDate(newDate)}
isDateInRange={isDateWithRange}
/>

{startDate && (
<Calendar
onSelectDate={(newDate) => selectEndDate(newDate)}
isDateInRange={isDateWithRange}
/>
)}
<ToastContainer enterTimeout={500} leaveTimeout={1000} />
</Flex>
);
Expand Down
7 changes: 7 additions & 0 deletions src/app/(root)/(routes)/(home)/not-found.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use client'

import NotFoundErrorFallback from "@/Component/Common/ErrorFallback/NotFoundErrorfallback"

export default function GlobalNotFound(){
return <NotFoundErrorFallback />
}
14 changes: 13 additions & 1 deletion src/app/(root)/(routes)/backoffice/create/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
'use client';
import BigQueryCreateForm from '@/Component/Blog/BigQueryCreateForm/BigQueryCreateForm';
import usePostGAReport from '@/hooks/mutations/usecreateGAReportMutation';

export default function GaReportCreatePage() {
return <BigQueryCreateForm></BigQueryCreateForm>;
const { mutate } = usePostGAReport();
return (
<BigQueryCreateForm
onSubmit={(type, start, end) => {
mutate({
type,
startDate: start,
endDate: end,
});
}}
></BigQueryCreateForm>
);
}
42 changes: 28 additions & 14 deletions src/app/api/active-users/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,33 @@ import { formatDateToString } from '@/utils/formatDateToString';
export const dynamic = 'force-dynamic';

export async function GET(req: NextRequest) {
const startDate = req.nextUrl.searchParams.get('date');
const date = req.nextUrl.searchParams.get('date');
const startDate = req.nextUrl.searchParams.get('startDate');
const endDate = req.nextUrl.searchParams.get('endDate');

const now = new Date();

const queryStringToDate = new Map([
['오늘', formatDateToString(now)],
['어제', formatDateToString(new Date(now.setDate(now.getDate() - 1)))],
['7일', formatDateToString(new Date(now.setDate(now.getDate() - 7)))],
['30일', formatDateToString(new Date(now.setMonth(now.getMonth() - 1)))],
['90일', formatDateToString(new Date(now.setMonth(now.getMonth() - 3)))],
['1년', formatDateToString(new Date(now.setMonth(now.getMonth() - 12)))],
['오늘', formatDateToString(new Date())],
['어제', formatDateToString(new Date(now.getTime() - 24 * 60 * 60 * 1000))],
[
'7일',
formatDateToString(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)),
],
[
'30일',
formatDateToString(new Date(new Date().setMonth(now.getMonth() - 1))),
],
[
'90일',
formatDateToString(new Date(new Date().setMonth(now.getMonth() - 3))),
],
[
'1년',
formatDateToString(
new Date(new Date().setFullYear(now.getFullYear() - 1))
),
],
]);

const report = async function runReport() {
Expand All @@ -35,14 +51,12 @@ export async function GET(req: NextRequest) {
},
},
},
//시작 일자가 있으면 해당 시작일자로 고정 그렇지 않으면 전체 기간
// 시작 일자가 있으면 해당 시작일자로 고정, 그렇지 않으면 전체 기간
dateRanges: [
{
startDate: startDate
? queryStringToDate.get(startDate)
: '2020-03-11',
//현재 시간으로 설정
endDate: formatDateToString(new Date()),
startDate:
startDate || (date && queryStringToDate.get(date)) || '2020-03-11',
endDate: endDate ?? formatDateToString(new Date()),
},
],
metrics: [
Expand All @@ -66,7 +80,7 @@ export async function GET(req: NextRequest) {
return NextResponse.json(
{
data: 'Report finished',
datalist: reportResults[0].activeUsers.metricValues,
datalist: reportResults[0]?.activeUsers?.metricValues || [],
},
{
status: 200,
Expand Down
33 changes: 33 additions & 0 deletions src/app/api/report/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { NextRequest, NextResponse } from 'next/server';

import { get } from '@/utils/axiosClient';
import { formatDateToString } from '@/utils/formatDateToString';

export async function POST(req: NextRequest) {
const { type, startDate, endDate } = await req.json();
console.log(startDate, endDate);
switch (type) {
case '총 사용자 수':
return (
await get(
`/api/active-users?startDate=${formatDateToString(
new Date(startDate)
)}&endDate=${formatDateToString(new Date(endDate))}`
)
).data;
return {};
case '참여 시간':
return {};
case '도시별 한 페이지 당 방문 세션 수':
return {};
case '방문자의 기기 유형(모바일,PC)':
return {};
}

return NextResponse.json(
{ type },
{
status: 200,
}
);
}
39 changes: 39 additions & 0 deletions src/app/global-error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
'use client';

import { useEffect } from 'react';

import * as Sentry from '@sentry/nextjs';

import ErrorFallback from '@/Component/Common/ErrorFallback/Errorfallback';

export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
Sentry.setContext('Application 에러', {
error,
});

Sentry.withScope((scope) => {
scope.setTag('type', 'Application');
scope.setTag('error-name', error.name);

Sentry.captureException(error, {
level: 'error',
extra: {
type: 'Application 에러',
...error,
},
});
});
}, []);
return (
<Sentry.ErrorBoundary>
<ErrorFallback error={error} reset={reset} />
</Sentry.ErrorBoundary>
);
}
Loading

0 comments on commit 6dd84a6

Please sign in to comment.