[FE] Admin Page 구현

src/components/Admin/MemberAdmin/index.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import * as S from "./index.styled";
+
+function ProductAdmin({ user_id, name, email }) {
+  // 더미데이터
+  const data = [
+    {
+      "user_id": 1,
+      "name": "홍길동",
+      "email": "project0109@gmail.com",
+      },
+      {
+        "user_id": 2,
+        "name": "김기자",
+        "email": "project02@gmail.com",
+        },
+        {
+          "user_id": 3,
+          "name": "이기자",
+          "email": "project03@gmail.com",
+          }
+  ];
+  const [members, setMembers] = useState(data);
+
+  return (
+    <div>
+      <S.Text>회원 현황</S.Text>
+      <S.MemberContainer>
+        <S.MemberTable>
+      <thead>
+    <tr>
+    <S.StyledTh>신규 회원</S.StyledTh>  
+    <S.StyledTh>방문 회원</S.StyledTh>
+    <S.StyledTh>전체 회원 수</S.StyledTh>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+    <S.MemberTd>회원</S.MemberTd>
+      <S.MemberTd>회원</S.MemberTd>
+      <S.MemberTd>회원</S.MemberTd>
+    </tr>
+    </tbody>
+    </S.MemberTable>
+      </S.MemberContainer>
+        <S.Info>
+      신규 회원: 해당 날짜 회원가입 횟수 카운트<br/>
+      방문 회원: 해당 날짜 로그인 횟수 카운트<br/>
+      전체 회원 수: 등록된 회원 수 카운트
+      </S.Info>
+
+          <S.Text>회원 리스트</S.Text>
+    <S.MemberlistContainer>
+      <S.MemberlistTable>
+        <thead>
+        <tr>
+          <S.StyledTh>회원 ID</S.StyledTh>
+          <S.StyledTh>회원 이름</S.StyledTh>
+          <S.StyledTh>회원 이메일</S.StyledTh>
+          <S.StyledTh>회원 관리</S.StyledTh>
+        </tr>
+        </thead>
+        <tbody>
+        {data.map((data, index) => (
+              <tr key={index}>
+                <S.MemberlistTd>{data.user_id}</S.MemberlistTd>
+                <S.MemberlistTd>{data.name}</S.MemberlistTd>
+                <S.MemberlistTd>{data.email}</S.MemberlistTd>
+                <S.MemberlistTd>
+                  <input type="checkbox" />
+                </S.MemberlistTd>
+              </tr>
+            ))}
+        <tr>
+        <td colSpan={3}>
+        </td>
+        <S.Footer><S.Button>삭제</S.Button></S.Footer>
+        </tr>
+        </tbody>
+      </S.MemberlistTable>
+    </S.MemberlistContainer>
+    </div>
+  );
+}
+
+export default ProductAdmin;

src/components/Admin/MemberAdmin/index.styled.js

@@ -0,0 +1,101 @@
+import styled from "@emotion/styled";
+
+const Text = styled.div`
+  margin: 30px;
+  text-align: center;
+  padding: 10px;
+  border-collapse: collapse;
+  font-size: 21px;
+  // background: #ede3d7;
+  border-bottom: 1px solid #ede3d7;
+`;
+const Info = styled.div`
+  margin: -30px 0 0 500px;
+  font-size: 12px;
+  text-align: left;
+`;
+
+const MemberTable = styled.table`
+  margin: 10px;
+  width: 50%;
+  height: 40%;
+  text-align: center;
+  border-collapse: collapse;
+  border: 1px solid #0f010d;
+`;
+
+const MemberContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 40px;
+`;
+const StyledTh = styled.th`
+  text-align: center;
+  background: #ede3d7;
+  border: 1px solid #0f010d;
+  font-size: 18px;
+`;
+const MemberTd = styled.td`
+  width: 33%;
+  text-align: center;
+  border: 1px solid #0f010d;
+`;
+
+const MemberlistTable = styled.table`
+  margin: 30px 0;
+  // height: 200px;
+  width: 50%;
+  text-align: center;
+  border-collapse: collapse;
+  border: 1px solid #0f010d;
+`;
+
+const MemberlistContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 30px;
+`;
+
+const MemberlistTh = styled.th`
+  width: 25%;
+  text-align: center;
+  // border-collapse: collapse;
+  border: 1px solid #0f010d;
+`;
+
+const MemberlistTd = styled.td`
+  width: 25%;
+  text-align: center;
+  border: 1px solid #0f010d;
+`;
+
+const Footer = styled.td`
+  text-align: center;
+  border: 1px solid #0f010d;
+`;
+
+const Button = styled.button`
+  background: #0f010d;
+  color: white;
+
+  &:hover {
+    background: #ede3d7;
+    color: #0f010d;
+    font-weight: bold;
+  }
+`;
+
+export {
+  Text,
+  Info,
+  MemberTable,
+  MemberContainer,
+  StyledTh,
+  MemberTd,
+  MemberlistTable,
+  MemberlistContainer,
+  MemberlistTh,
+  MemberlistTd,
+  Footer,
+  Button,
+};

src/components/Admin/MenuTabs/index.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import * as S from "./index.styled";
+import MemberAdmin from "../MemberAdmin";
+import ProductAdmin from "../ProductAdmin";
+
+function MenuTabs() {
+  const location = useLocation();
+  const path = location.pathname;
+  const member = path.includes("member");
+  const product = path.includes("product");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!member && !product) {
+      navigate("/admin/member", { replace: true });
+    }
+  }, [member, product, navigate]);
+
+  var element;
+  if (member) {
+    element = <MemberAdmin />;
+  } 
+  if (product) {
+    element = <ProductAdmin />;
+  }
+
+  return (
+    <>
+      <S.Container>
+        <S.StyledLink to="/admin/member">
+          <S.Text>회원 관리</S.Text>
+        </S.StyledLink>
+        <S.StyledLink to="/admin/product">
+          <S.Text>상품 관리</S.Text>
+        </S.StyledLink>
+      </S.Container>
+      {element}
+    </>
+  );
+}
+
+export default MenuTabs;

src/components/Admin/MenuTabs/index.styled.js

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+import { Link } from "react-router-dom";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  // flex-direction: row;
+  border-bottom: medium solid #807675;
+  border-width: 1px;
+`;
+
+const Text = styled.div`
+  color: #807675;
+  font-size: 24px;
+  margin: 10px 50px;
+  padding: 5px 50px;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: #807675;
+
+  &:hover {
+    color: #0f010d;
+    font-weight: bold;
+  }
+`;
+
+export { Text, Container, StyledLink };