관리자 메인 페이지 구현 ( issue #318 )

src/api/activityLog.api.ts

@@ -1,4 +1,8 @@
-import type { ApiMyComments, ApiMyInquiries } from './../models/activityLog';
+import type {
+  ApiAllInquiries,
+  ApiMyComments,
+  ApiMyInquiries,
+} from './../models/activityLog';
 import { httpClient } from './http.api';
 
 export const getMyComments = async () => {
@@ -22,3 +26,13 @@ export const getMyInquiries = async () => {
     throw e;
   }
 };
+
+export const getAllInquiries = async () => {
+  try {
+    const response = await httpClient.get<ApiAllInquiries>(`/inquiry`);
+    return response.data.data;
+  } catch (e) {
+    console.error('전체 문의 조회 에러', e);
+    throw e;
+  }
+};

src/api/alarm.api.ts

@@ -1,4 +1,5 @@
 import type { ApiAlarmList } from '../models/alarm';
+import useAuthStore from '../store/authStore';
 import { httpClient } from './http.api';
 
 export const getAlarmList = async () => {
@@ -36,14 +37,19 @@ export const patchAlarm = async (id: number) => {
 };
 
 export const testLiveAlarm = async () => {
-  try {
-    const response = await httpClient.get<ApiAlarmList>(
-      `/user/send-alarm?alarmFilter=0`
-    );
+  const { accessToken } = useAuthStore.getState();
+  if (accessToken) {
+    try {
+      const response = await httpClient.get<ApiAlarmList>(
+        `/user/send-alarm?alarmFilter=0`
+      );
 
-    return response;
-  } catch (e) {
-    console.error(e);
-    throw e;
+      return response;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  } else {
+    throw new Error('인증 토큰이 없습니다.');
   }
 };

src/api/auth.api.ts

@@ -1,4 +1,9 @@
-import type { ApiOauth, ApiVerifyNickname, VerifyEmail } from '../models/auth';
+import {
+  ApiGetAllUsers,
+  type ApiOauth,
+  type ApiVerifyNickname,
+  type VerifyEmail,
+} from '../models/auth';
 import { httpClient } from './http.api';
 import { loginFormValues } from '../pages/login/Login';
 import { registerFormValues } from '../pages/user/register/Register';
@@ -100,3 +105,13 @@ export const getOauthLogin = async (oauthAccessToken: string) => {
     throw e;
   }
 };
+
+export const getAllUsers = async () => {
+  try {
+    const response = await httpClient.get<ApiGetAllUsers>(`/users`);
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/report.api.ts

@@ -1,4 +1,4 @@
-import type { ApiPostContent } from '../models/report';
+import { ApiAllReports, type ApiPostContent } from '../models/report';
 import { httpClient } from './http.api';
 
 export const postReport = async (formData: ApiPostContent) => {
@@ -13,3 +13,13 @@ export const postReport = async (formData: ApiPostContent) => {
     throw error;
   }
 };
+
+export const getAllReports = async () => {
+  try {
+    const response = await httpClient.get<ApiAllReports>(`/reports`);
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/components/admin/mainCard/graphCard/GraphCard.styled.ts

@@ -1,3 +1,5 @@
 import styled from 'styled-components';
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  height: 350px;
+`;

src/components/admin/mainCard/graphCard/GraphCard.tsx

@@ -1,8 +1,97 @@
 import React from 'react';
 import * as S from './GraphCard.styled';
+import { Line } from 'react-chartjs-2';
+import 'chart.js/auto';
+import { ChartData, ChartOptions } from 'chart.js';
 
 const GraphCard = () => {
-  return <S.Container>GraphCard Component</S.Container>;
+  return (
+    <S.Container>
+      <Line data={data} options={options} />
+    </S.Container>
+  );
+};
+
+const data: ChartData<'line'> = {
+  labels: [
+    '월요일',
+    '화요일',
+    '수요일',
+    '목요일',
+    '금요일',
+    '토요일',
+    '일요일',
+  ],
+  datasets: [
+    {
+      label: '방문자 수',
+      data: [8, 6, 4, 0, 7, 5, 3],
+      fill: true,
+      backgroundColor: 'rgba(54, 162, 235, 0.2)',
+      borderColor: 'rgba(54, 162, 235, 1)',
+      borderWidth: 2,
+      tension: 0.3,
+      pointRadius: 5,
+      pointBackgroundColor: '#ffffff',
+      pointBorderColor: 'rgba(54, 162, 235, 1)',
+      pointBorderWidth: 2,
+      pointHoverRadius: 6,
+    },
+  ],
+};
+
+const options: ChartOptions<'line'> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: true,
+    },
+    title: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      grid: {
+        display: true,
+        borderDash: [5, 5],
+        color: 'rgba(0,0,0,0.1)',
+      },
+      ticks: {
+        font: {
+          size: 14,
+        },
+        color: '#333',
+      },
+    },
+    y: {
+      grid: {
+        display: true,
+        drawBorder: false,
+
+        borderDash: [5, 5],
+        color: 'rgba(0,0,0,0.1)',
+      },
+      ticks: {
+        stepSize: 2,
+        font: {
+          size: 14,
+        },
+        color: '#333',
+        callback: (value) => `${value}`,
+      },
+      beginAtZero: true,
+      suggestedMax: 8,
+    },
+  },
+  animation: {
+    duration: 800,
+    easing: 'easeOutQuart',
+  },
 };
 
 export default GraphCard;

src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts

@@ -1,3 +1,44 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+`;
+
+export const UserArea = styled.div`
+  display: flex;
+`;
+
+export const ContentArea = styled(Link)`
+  margin-left: 16px;
+`;
+
+export const NickName = styled.p`
+  font-size: 14px;
+`;
+
+export const Email = styled.p`
+  font-size: 9px;
+  opacity: 50%;
+`;
+
+export const MoveToUsersArea = styled(Link)`
+  display: flex;
+  align-items: center;
+`;
+
+export const Text = styled.p`
+  font-size: 9px;
+`;
+
+export const Arrow = styled.img`
+  width: 11px;
+  height: 11px;
+`;

src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx

@@ -1,8 +1,47 @@
 import React from 'react';
 import * as S from './AllUserPreview.styled';
+import { useGetAllUsers } from '../../../../hooks/admin/useGetAllUsers';
+import Avatar from '../../../common/avatar/Avatar';
+import { ADMIN_ROUTE } from '../../../../constants/routes';
+import arrow_right from '../../../../assets/ArrowRight.svg';
+import LoadingSpinner from '../../../common/loadingSpinner/LoadingSpinner';
 
 const AllUserPreview = () => {
-  return <S.Container>AllUserPreview Component</S.Container>;
+  const { allUserData, isLoading, isFetching } = useGetAllUsers();
+
+  if (isLoading || isFetching) {
+    return <LoadingSpinner />;
+  }
+
+  if (!allUserData || allUserData.length === 0) {
+    return <S.Container>가입된 회원이 없습니다.</S.Container>;
+  }
+
+  const previewList = allUserData
+    ? allUserData.length > 6
+      ? allUserData.slice(0, 4)
+      : allUserData
+    : [];
+
+  return (
+    <S.Container>
+      {previewList?.map((user) => (
+        <S.Wrapper key={user.id}>
+          <S.UserArea>
+            <Avatar image={user.user.img} size='40px' />
+            <S.ContentArea to={`${ADMIN_ROUTE.allUser}/${user.id}`}>
+              <S.NickName>{user.user.nickname}</S.NickName>
+              <S.Email>{user.email}</S.Email>
+            </S.ContentArea>
+          </S.UserArea>
+          <S.MoveToUsersArea to={`${ADMIN_ROUTE.allUser}/${user.id}`}>
+            <S.Text>상세 보기</S.Text>
+            <S.Arrow src={arrow_right} />
+          </S.MoveToUsersArea>
+        </S.Wrapper>
+      ))}
+    </S.Container>
+  );
 };
 
 export default AllUserPreview;

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts

@@ -1,3 +1,69 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+`;
+
+export const Content = styled.div`
+  display: flex;
+`;
+
+export const Inquiry = styled(Link)`
+  margin-left: 16px;
+`;
+
+export const Category = styled.p`
+  font-size: 9px;
+  opacity: 0.5;
+`;
+
+export const Title = styled.p`
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const StateArea = styled.div`
+  display: flex;
+`;
+
+export const InquiriesDate = styled.p`
+  font-size: 9px;
+  opacity: 0.5;
+`;
+
+export const Divider = styled.p`
+  font-size: 9px;
+  opacity: 0.2;
+  margin-left: 3px;
+  margin-right: 3px;
+`;
+
+export const InquiryState = styled.p<{ $isCompleted: boolean }>`
+  font-size: 9px;
+  color: ${({ $isCompleted }) => ($isCompleted ? `#07DE00` : `#DE1A00`)};
+`;
+
+export const MoveToInquiryArea = styled(Link)`
+  display: flex;
+  font-size: 9px;
+`;
+
+export const Text = styled.p`
+  font-size: 9px;
+`;
+
+export const Arrow = styled.img`
+  width: 11px;
+  height: 11px;
+`;