관리자 메인 페이지 구현 ( 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/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: 10px;
+  height: 10px;
+`;

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

@@ -1,8 +1,38 @@
 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';
 
 const AllUserPreview = () => {
-  return <S.Container>AllUserPreview Component</S.Container>;
+  const { allUserData, isLoading } = useGetAllUsers();
+
+  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={undefined} 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: 50%;
+`;
+
+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 Date = styled.p`
+  font-size: 9px;
+  opacity: 50%;
+`;
+
+export const Divider = styled.p`
+  font-size: 9px;
+  opacity: 20%;
+  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;
+`;

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx

@@ -1,8 +1,45 @@
-import React from 'react';
 import * as S from './InquiresPreview.styled';
+import { useGetAllInquiries } from '../../../../hooks/admin/useGetAllInquiries';
+import Avatar from '../../../common/avatar/Avatar';
+import { ADMIN_ROUTE } from '../../../../constants/routes';
+import arrow_right from '../../../../assets/ArrowRight.svg';
 
 const InquiresPreview = () => {
-  return <S.Container>InquiresPreview Component</S.Container>;
+  const { allInquiriesData } = useGetAllInquiries();
+
+  const previewList = allInquiriesData
+    ? allInquiriesData.length > 6
+      ? allInquiriesData.slice(0, 4)
+      : allInquiriesData
+    : [];
+
+  return (
+    <S.Container>
+      {previewList?.map((inquiry) => (
+        <S.Wrapper key={inquiry.id}>
+          <S.Content>
+            {/* <Link to={`${ADMIN_ROUTE.}`} */}
+            <Avatar image={inquiry.user.img} size='40px' />
+            <S.Inquiry to={`${ADMIN_ROUTE.inquiries}/${inquiry.id}`}>
+              <S.Category>{inquiry.category}</S.Category>
+              <S.Title>{inquiry.title}</S.Title>
+              <S.StateArea>
+                <S.Date>{inquiry.createdAt}</S.Date>
+                <S.Divider>|</S.Divider>
+                <S.InquiryState $isCompleted={inquiry.state}>
+                  {inquiry.state ? '답변 완료' : '답변 대기 중'}
+                </S.InquiryState>
+              </S.StateArea>
+            </S.Inquiry>
+          </S.Content>
+          <S.MoveToInquiryArea to={`${ADMIN_ROUTE.inquiries}/${inquiry.id}`}>
+            <S.Text>상세 보기</S.Text>
+            <S.Arrow src={arrow_right} />
+          </S.MoveToInquiryArea>
+        </S.Wrapper>
+      ))}
+    </S.Container>
+  );
 };
 
 export default InquiresPreview;