Merge pull request #9 from Dear-project/refactor/View-#8

Refactor/view #8

src/app/approve/page.tsx

@@ -0,0 +1,8 @@
+import Approve from "@/components/home/approve";
+import React from "react";
+
+const ApprovePage = () => {
+  return <Approve />;
+};
+
+export default ApprovePage;

src/components/common/sidbar/index.tsx

@@ -10,11 +10,11 @@ import chat2 from "@/assets/img/home/chat.png";
 import banner2 from "@/assets/img/home/page_info.png";
 import defaultImg from "@/assets/img/home/Avatar1.png";
 import Logout from "../../Home/profile/index";
-import {  usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import * as S from "./style";
 import { useGetProfileInfo } from "@/queries/Profile/Profile.query";
 const Sidebar = () => {
-const {data}=useGetProfileInfo();
+  const { data } = useGetProfileInfo();
   const { ...sidebar } = Usesidebar();
   const pathname = usePathname();
 
@@ -33,34 +33,33 @@ const {data}=useGetProfileInfo();
           </Link>
           <Link href={"/declaration/"}>
             <S.sideblock $isSelect={"/declaration/" == pathname ? true : false}>
-              <Image
-                src={"/declaration/" == pathname ? chat : chat2}
-                alt="문의"
-              />
+              <Image src={"/declaration/" == pathname ? chat : chat2} alt="문의" />
               <span>신고문의</span>
             </S.sideblock>
           </Link>
           <Link href={"/banner/"}>
             <S.sideblock $isSelect={"/banner/" == pathname ? true : false}>
-              <Image
-                src={"/banner/" == pathname ? banner : banner2}
-                alt="문의"
-              />
+              <Image src={"/banner/" == pathname ? banner : banner2} alt="문의" />
               <span>배너</span>
             </S.sideblock>
           </Link>
+          <Link href={"/approve/"}>
+            <S.sideblock $isSelect={"/approve/" === pathname ? true : false}>
+              <Image src={"/approve/" === pathname ? banner : banner2} alt="승인" />
+              <span>승인</span>
+            </S.sideblock>
+          </Link>
         </S.navigation>
       </S.sidecontext>
       <S.sideprofile onClick={sidebar.OpenProfileSetting}>
         <S.profileInfo>
-          {" "}
           <Image src={defaultImg} alt="profile"></Image>
         </S.profileInfo>
         <S.profileInfo>
           <span>{data?.data.name}</span>
         </S.profileInfo>
       </S.sideprofile>
-      {sidebar.isProfileModel && <Logout onClose={sidebar.OpenProfileSetting}  />}
+      {sidebar.isProfileModel && <Logout onClose={sidebar.OpenProfileSetting} />}
     </S.sidebar>
   );
 };

src/components/home/approve/approveTable/index.tsx

@@ -0,0 +1,33 @@
+"use client";
+import Image from "next/image";
+import * as S from "./style";
+import MoreImage from "@/assets/img/home/ic_round-more-horiz.svg";
+
+const ApproveTable = () => {
+  return (
+    <>
+      <S.TBody>
+        <S.TR>
+          <S.TD>신민호</S.TD>
+          <S.TD>신민호</S.TD>
+          <S.TD>신민호</S.TD>
+          <Image src={MoreImage} alt="더보기" />
+        </S.TR>
+        <S.TR>
+          <S.TD>신민호</S.TD>
+          <S.TD>신민호</S.TD>
+          <S.TD>신민호</S.TD>
+          <Image src={MoreImage} alt="더보기" />
+        </S.TR>
+        <S.TR>
+          <S.TD>신민호</S.TD>
+          <S.TD>신민호</S.TD>
+          <S.TD>신민호</S.TD>
+          <Image src={MoreImage} alt="더보기" />
+        </S.TR>
+      </S.TBody>
+    </>
+  );
+};
+
+export default ApproveTable;

src/components/home/approve/approveTable/style.ts

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const TBody = styled.tbody`
+  width: 100%;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  white-space: normal;
+`;
+
+export const TR = styled.tr`
+  width: 100%;
+  height: 80px;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgb(217, 217, 217);
+  border-bottom: 1px solid rgb(217, 217, 217);
+`;
+
+export const TD = styled.td`
+  text-align: start;
+  padding: 12px;
+  vertical-align: middle;
+  display: flex;
+  justify-content: space-around;
+
+  width: 14%;
+  font-size: 16px;
+  line-height: 20px;
+  overflow-x: hidden;
+  width: 115px;
+  text-overflow: ellipsis;
+`;

src/components/home/approve/index.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { SearchBar } from "../searchBar/searchBar";
+import Table from "../table";
+import ApproveTable from "./approveTable";
+import * as S from "./style";
+import { APPROVE_MEMBER_TABLE_ITEM } from "@/constant/approve/approve.constants";
+const Approve = () => {
+  return (
+    <S.Main>
+      <S.PendingMember>
+        <S.SearchBox>{/* <SearchBar /> */}</S.SearchBox>
+        <table>
+          <Table constant={APPROVE_MEMBER_TABLE_ITEM} style={{ width: "75%" }} />
+        </table>
+        <S.PendingMemberMain>
+          <S.PendingMemberList>
+            <ApproveTable />
+          </S.PendingMemberList>
+        </S.PendingMemberMain>
+      </S.PendingMember>
+    </S.Main>
+  );
+};
+
+export default Approve;

src/components/home/approve/style.ts

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const Main = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 600px;
+  width: 100%;
+  height: 100%;
+`;
+
+export const PendingMember = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 95%;
+  height: 100%;
+`;
+
+export const SearchBox = styled.div`
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  height: 200px;
+`;
+
+export const PendingMemberMain = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  border-bottom: 1px rgb(217, 217, 217);
+`;
+
+export const PendingMemberList = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+`;

src/components/home/main/index.tsx

@@ -4,8 +4,8 @@ import MemberTable from "./memberTable/index";
 import { SearchBar } from "../searchBar/searchBar";
 import { MEMBER_TABLE_ITEMS } from "@/constant/member/Member.constant";
 import { useMemberSearchStore } from "@/store/member";
-import SkeletonComponent from "@/Components/common/skleton/index";
-import ErrorBoundary from "@/Components/common/error";
+import SkeletonComponent from "@/components/common/skleton/index";
+import ErrorBoundary from "@/components/common/error";
 import { Suspense, useState } from "react";
 const Main = () => {
   const { memberSearch, setMemberSearch } = useMemberSearchStore();
@@ -23,8 +23,8 @@ const Main = () => {
           <S.memberList>
             {/* <ErrorBoundary>
               <Suspense fallback={<SkeletonComponent height={500} />}> */}
-                <MemberTable />
-              {/* </Suspense>
+            <MemberTable />
+            {/* </Suspense>
             </ErrorBoundary> */}
           </S.memberList>
         </S.memberMain>

src/components/home/main/memberTable/index.tsx

@@ -6,6 +6,9 @@ import { FilterMember } from "@/utils/member/FilterMember";
 import { useMemberSearchStore } from "@/store/member/index";
 import { useGetMemberList } from "@/queries/Member/Member.query";
 import UseMember from "@/hooks/Home/member/useMember";
+import convertText from "@/utils/textSplit/comvertText";
+import MoreImage from "@/assets/img/home/ic_round-more-horiz.svg";
+import MoreButton from "../../moreaction";
 
 const MemberTable = () => {
   const memberListQuery = useGetMemberList();
@@ -23,23 +26,34 @@ const MemberTable = () => {
     <>
       <S.Tbody>
         {FilterMember(searchValue, data ?? []).map((member: MemberType, idx) => (
-          <S.TR key={member.UserId}>
+          <S.TR key={member.userId}>
             <S.TD>
               <Image src={defaultImg} alt="프로필사진" />
             </S.TD>
             <S.TD>{member.name}</S.TD>
-            <S.TD>{member.role === "STUDENT" ? "학생" : "교수"}</S.TD>
-            <S.TD>{member.email}</S.TD>
-            <S.TD>{member.schoolName}</S.TD>
-            <S.TD>{member.userStatus === "REJECT" ? "정지" : "활성화"}</S.TD>
+            <S.TD>{convertText.omissionText(member.email)}</S.TD>
+            <S.TD>
+              {convertText.omissionText(member.schoolName)
+                ? convertText.omissionText(member.schoolName)
+                : "학교 정보 없음"}
+            </S.TD>
+            <Image
+              src={MoreImage}
+              alt="더보기"
+              style={{ cursor: "pointer" }}
+              onClick={() => {
+                const params = {
+                  idx: idx,
+                  member: member,
+                };
+                console.log(idx);
+
+                useMember.memberBanSetting(params);
+              }}
+            />
           </S.TR>
         ))}
-        {/* {useMember.moreButton && (
-          <MoreButton
-            Id={useMember.buttonId}
-            onClose={useMember.MemberSettingDenial}
-          />
-        )} */}
+        {useMember.moreButton && <MoreButton Id={useMember.buttonId} onClose={useMember.MemberSettingDenial} />}
       </S.Tbody>
     </>
   );

src/components/home/main/memberTable/style.ts

@@ -6,7 +6,6 @@ export const Tbody = styled.tbody`
   display: flex;
   flex-direction: column;
   white-space: normal;
-
 `;
 export const TR = styled.tr`
   width: 100%;
@@ -23,12 +22,14 @@ export const TD = styled.td`
   text-align: start;
   padding: 12px;
   vertical-align: middle;
+  display: flex;
+  justify-content: space-around;
   width: 14%;
   font-size: 16px;
   line-height: 20px;
   overflow-x: hidden;
   width: 115px;
-  text-overflow:ellipsis;
+  text-overflow: ellipsis;
   img {
     width: 40px;
     height: 40px;

src/components/home/main/style.ts

@@ -34,5 +34,4 @@ export const memberList = styled.div`
   display: flex;
   width: 100%;
   height: 100%;
-  
-`;
+`;

src/components/home/moreaction/index.tsx

@@ -1,19 +1,20 @@
 import * as S from "./style";
 import UseMember from "@/hooks/Home/member/useMember";
 interface MoreButtonProps {
-    Id: number;
-    onClose:() => void;
-  };
+  Id: number;
+  onClose: () => void;
+}
+
+const MoreButton = ({ Id, onClose }: MoreButtonProps) => {
+  const {} = UseMember();
+  console.log(Id);
 
-const MoreButton = ({Id , onClose}:MoreButtonProps) => {
-    const {}= UseMember();
-    console.log(Id);
-
-
   return (
     <S.Main onClick={onClose}>
       <S.MoreButtonMain idx={Id}>
-        <S.suspensionButton >계정정지</S.suspensionButton>
+        <S.suspensionButton>계정정지</S.suspensionButton>
+        <hr />
+        <S.suspensionButton>계정 삭제</S.suspensionButton>
       </S.MoreButtonMain>
     </S.Main>
   );

src/components/home/moreaction/style.ts

@@ -1,9 +1,8 @@
 import styled from "styled-components";
 
-export const MoreButtonMain = styled.div<{idx : number}>`
+export const MoreButtonMain = styled.div<{ idx: number }>`
   position: absolute;
-  top: ${({idx})=>(idx > 9 ? (idx-9)*73
-   : idx*73 )}px;
+  top: ${({ idx }) => (idx > 9 ? (idx - 9) * 73 : idx * 73)}px;
   right: 10px;
   display: flex;
   align-items: center;
@@ -15,8 +14,8 @@ export const MoreButtonMain = styled.div<{idx : number}>`
   box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.08);
 `;
 export const Main = styled.div`
-position: absolute;
-z-index: 5;
+  position: absolute;
+  z-index: 5;
   width: 75%;
   height: 70%;
 `;