[Admin-v0.0.3-1]

[Admin-v0.0.3-1]

apps/admin/package.json

@@ -14,6 +14,13 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@tanstack/react-query-devtools": "^4.20.4",
+    "@toast-ui/editor": "^3.2.1",
+    "@toast-ui/editor-plugin-chart": "^3.0.1",
+    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
+    "@toast-ui/editor-plugin-color-syntax": "^3.1.0",
+    "@toast-ui/editor-plugin-table-merged-cell": "^3.1.0",
+    "@toast-ui/editor-plugin-uml": "^3.0.1",
+    "@toast-ui/react-editor": "^3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",

apps/admin/src/components/events/dashboard/CheckList.tsx

@@ -0,0 +1,23 @@
+import { ListHeader, Spacing } from '@dudoong/ui';
+import BorderBox from '@dudoong/ui/src/layout/BorderBox';
+import ListContents from './ListContents';
+
+const CheckList = ({ check }: { check: boolean[] | null }) => {
+  if (!check) check = [false, false, false];
+  return (
+    <BorderBox padding={[36, 32]} shadow>
+      <ListHeader
+        title={'체크리스트'}
+        size={'listHeader_20'}
+        description={
+          '공연을 등록하기 이전에 필수로 수행 되어야 할 체크리스트 입니다.'
+        }
+        padding={0}
+      />
+      <Spacing size={22} />
+      <ListContents check={check} />
+    </BorderBox>
+  );
+};
+
+export default CheckList;

apps/admin/src/components/events/dashboard/EventInfo.tsx

@@ -0,0 +1,82 @@
+import { FlexBox, Spacing, theme } from '@dudoong/ui';
+import { ReactComponent as Bucket } from '@assets/bucket.svg';
+import { ReactComponent as BucketCheck } from '@assets/bucketcheck.svg';
+import { TicketPerforatedFill } from '@dudoong/ui';
+import MiniBox from './MiniBox';
+import TotalBox from './TotalBox';
+import TicketRatio from './TicketRatio';
+import { DashBoardStatisticResponse } from '@lib/apis/event/eventType';
+import { useQuery } from '@tanstack/react-query';
+import EventApi from '@lib/apis/event/EventApi';
+import { Dispatch, SetStateAction } from 'react';
+import { AdminBottomButtonTypeKey } from '@components/shared/layout/AdminBottomButton';
+
+interface EventInfoProps {
+  eventId: string;
+  setButtonType: Dispatch<SetStateAction<AdminBottomButtonTypeKey>>;
+}
+
+const EventInfo = ({ eventId, setButtonType }: EventInfoProps) => {
+  // 이벤트 통계 정보 api
+  const { data } = useQuery(
+    ['eventStatistics'],
+    () => EventApi.GET_EVENT_STATISTICS(eventId),
+    {
+      onSuccess: (data: DashBoardStatisticResponse) => {
+        if (checkIsSold(data)) {
+          setButtonType('pay');
+        } else {
+          setButtonType('deleteEvent');
+        }
+        console.log('GET_EVENT_STATISTICS : ', data);
+      },
+    },
+  );
+
+  return (
+    <FlexBox align={'center'} gap={13}>
+      <div>
+        <FlexBox align={'center'} gap={13}>
+          <MiniBox
+            icon={
+              <TicketPerforatedFill
+                fill={theme.palette.main_500}
+                size={'25px'}
+              />
+            }
+            count={data ? data?.issuedCount : 0}
+          >
+            발급된 티켓
+          </MiniBox>
+          <MiniBox icon={<Bucket />} count={data ? data?.notApprovedCount : 0}>
+            미승인 주문
+          </MiniBox>
+          <MiniBox icon={<BucketCheck />} count={data ? data?.doneCount : 0}>
+            완료된 주문
+          </MiniBox>
+        </FlexBox>
+        <Spacing size={13} />
+        <TotalBox total={data ? data?.sellAmount : '0'} />
+      </div>
+      <TicketRatio
+        checked={data ? data?.enteredCount : 0}
+        notChecked={data ? data?.notEnteredCount : 0}
+      />
+    </FlexBox>
+  );
+};
+
+export default EventInfo;
+
+const checkIsSold = (data: DashBoardStatisticResponse | undefined) => {
+  if (!data) return false;
+  if (
+    !data.notApprovedCount &&
+    !data.notEnteredCount &&
+    !data.doneCount &&
+    !data.enteredCount &&
+    !data.issuedCount
+  )
+    return false;
+  return true;
+};

apps/admin/src/components/events/dashboard/ListContents.tsx

@@ -0,0 +1,80 @@
+import { FlexBox, Spacing, Text } from '@dudoong/ui';
+import { CheckLg } from '@dudoong/ui';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+const listOption = [
+  '공연 기본 정보',
+  '공연 이미지 / 상세 정보 작성',
+  '하나 이상의 티켓 생성',
+];
+
+const ListContents = ({ check }: { check: boolean[] }) => {
+  return (
+    <>
+      {listOption.map((option, index) => {
+        return (
+          <div key={index}>
+            <Spacing size={10} />
+            <ListContent text={option} ischecked={check[index] ? 1 : 0} />
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default ListContents;
+
+const ListContent = ({
+  text,
+  ischecked,
+}: {
+  text: string;
+  ischecked: number;
+}) => {
+  return (
+    <FlexBox align={'center'} justify={'start'} gap={16}>
+      <CheckMarker ischecked={ischecked} />
+      <Text typo={'P_Text_16_M'} color={'gray_500'}>
+        {text}
+      </Text>
+    </FlexBox>
+  );
+};
+
+const CheckMarker = ({ ischecked }: { ischecked: number }) => {
+  return (
+    <MarkerContainer align={'center'} ischecked={ischecked}>
+      <CheckLg />
+    </MarkerContainer>
+  );
+};
+
+interface MarkerContainerProps {
+  ischecked: number;
+}
+
+const MarkerContainer = styled(FlexBox)<MarkerContainerProps>`
+  width: 20px;
+  height: 20px;
+  background-color: ${({ ischecked, theme }) =>
+    ischecked ? theme.palette.point_mint : theme.palette.gray_300};
+  border-radius: 10px;
+  box-sizing: border-box;
+
+  ${({ ischecked, theme }) =>
+    ischecked &&
+    css`
+      border: 1px ${theme.palette.black} solid;
+    `};
+
+  & > svg {
+    width: 10px;
+  }
+
+  & > svg > path {
+    color: ${({ ischecked, theme }) =>
+      ischecked ? theme.palette.black : theme.palette.white};
+  }
+`;

apps/admin/src/components/events/dashboard/MiniBox.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import BorderBox from '@dudoong/ui/src/layout/BorderBox';
+import { css } from '@emotion/react';
+import { FlexBox, Spacing, Text } from '@dudoong/ui';
+
+const MiniBox = ({
+  icon,
+  count,
+  children,
+}: {
+  icon: ReactNode;
+  count: number;
+  children: ReactNode;
+}) => {
+  return (
+    <BorderBox
+      shadow
+      padding={[49, 29]}
+      css={css`
+        width: 171px;
+        height: 171px;
+      `}
+    >
+      <FlexBox align={'center'} direction={'column'}>
+        {icon}
+        <Spacing size={2} />
+        <Text typo={'P_Header_20_B'} color={'gray_500'}>
+          {count}장
+        </Text>
+        <Spacing size={4} />
+        <Text typo={'P_Text_14_R'} color={'gray_500'}>
+          {children}
+        </Text>
+      </FlexBox>
+    </BorderBox>
+  );
+};
+
+export default MiniBox;

apps/admin/src/components/events/dashboard/TicketRatio.tsx

@@ -0,0 +1,91 @@
+import BorderBox from '@dudoong/ui/src/layout/BorderBox';
+import { css } from '@emotion/react';
+import { FlexBox, Spacing, Text, PeopleFill, theme } from '@dudoong/ui';
+import styled from '@emotion/styled';
+
+const TicketRatio = ({
+  checked,
+  notChecked,
+}: {
+  checked: number;
+  notChecked: number;
+}) => {
+  return (
+    <BorderBox
+      shadow
+      padding={[38, 57, 25, 57]}
+      css={css`
+        width: 317px;
+        height: 271px;
+      `}
+    >
+      <FlexBox direction={'column'} align={'center'}>
+        <Ratio ratio={calcRatio(checked, notChecked)} />
+        <Spacing size={26} />
+        <FlexBox align={'center'} gap={27}>
+          <div>
+            <Text typo={'P_Text_16_SB'} color={'gray_500'}>
+              {checked}장<br />
+            </Text>
+            <Spacing size={2} />
+            <Text typo={'P_Text_12_R'} color={'gray_500'}>
+              입장 확인된 티켓
+            </Text>
+          </div>
+          <div>
+            <Text typo={'P_Text_16_SB'} color={'gray_500'}>
+              {notChecked}장<br />
+            </Text>
+            <Spacing size={2} />
+            <Text typo={'P_Text_12_R'} color={'gray_500'}>
+              입장 미확인 티켓
+            </Text>
+          </div>
+        </FlexBox>
+      </FlexBox>
+    </BorderBox>
+  );
+};
+
+export default TicketRatio;
+
+const calcRatio = (checked: number, notChecked: number) => {
+  if (!checked && !notChecked) return 0;
+  return checked / (checked + notChecked);
+};
+
+const Ratio = ({ ratio }: { ratio: number }) => {
+  return (
+    <CircularGraph deg={ratio * 360}>
+      <CenterCircle align={'center'} justify={'center'}>
+        <PeopleFill fill={theme.palette.main_500} size={25} />
+      </CenterCircle>
+    </CircularGraph>
+  );
+};
+
+interface CircularGraphProps {
+  deg: number;
+}
+
+const CircularGraph = styled.div<CircularGraphProps>`
+  ${({ theme, deg }) =>
+    css`
+      background: conic-gradient(
+        ${theme.palette.main_500} ${deg}deg,
+        ${theme.palette.gray_200} ${deg}deg
+      );
+    `};
+  border-radius: 70px;
+  box-sizing: border-box;
+  width: 140px;
+  height: 140px;
+  padding: 33px;
+`;
+
+const CenterCircle = styled(FlexBox)`
+  width: 74px;
+  height: 74px;
+  background-color: ${({ theme }) => theme.palette.white};
+  border-radius: 37px;
+`;

apps/admin/src/components/events/dashboard/TotalBox.tsx

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import { FlexBox, Text } from '@dudoong/ui';
+import BorderBox from '@dudoong/ui/src/layout/BorderBox';
+
+const TotalBox = ({ total }: { total: string }) => {
+  return (
+    <BorderBox
+      shadow
+      padding={[32, 48]}
+      css={css`
+        width: 546px;
+        height: 86px;
+      `}
+    >
+      <FlexBox align={'center'} justify={'space-between'}>
+        <Text typo={'P_Text_14_R'} color={'gray_500'}>
+          판매금액
+        </Text>
+        <Text typo={'P_Header_20_B'} color={'main_500'}>
+          {total}
+        </Text>
+      </FlexBox>
+    </BorderBox>
+  );
+};
+
+export default TotalBox;