style :: team manage page publish

team-xquare · May 5, 2024 · 14f9a3d · 14f9a3d
1 parent b1833b0
commit 14f9a3d
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 26 deletions.
diff --git a/src/components/Team/TeamManage/MemberAddModal.tsx b/src/components/Team/TeamManage/MemberAddModal.tsx
@@ -0,0 +1,68 @@
+import { theme } from '@/style/theme';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
+  height: 100%;
+  & ::-webkit-scrollbar {
+    width: 4px;
+  }
+  & ::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+    border-radius: 4px;
+  }
+`;
+
+export const TopContainer = styled.div`
+  width: 480px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 34px;
+  > div:first-of-type {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+    font-weight: 600;
+  }
+`;
+
+export const MiddleContainer = styled.div`
+  width: 480px;
+  height: 340px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const MemberBox = styled.div`
+  width: 100%;
+  height: 60px;
+  flex: none;
+  border-radius: 20px;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid ${theme.color.gray4};
+`;
+
+export const BottomContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: end;
+  width: 480px;
+  > div:first-child {
+    font-size: 18px;
+    font-weight: 500;
+  }
+`;
diff --git a/src/components/Team/TeamManage/MemberManageModal.tsx b/src/components/Team/TeamManage/MemberManageModal.tsx
@@ -0,0 +1,30 @@
+import { theme } from '@/style/theme';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  > div {
+    width: 478px;
+  }
+  > div:nth-of-type(1) {
+    font-size: 20px;
+    font-weight: 600;
+    color: ${theme.color.gray8};
+  }
+  > div:nth-of-type(2) {
+    font-size: 18px;
+    font-weight: 500;
+    color: ${theme.color.gray7};
+  }
+  > div:nth-of-type(3) {
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+  }
+`;
diff --git a/src/components/Team/TeamManage/ThreeDotMenu.tsx b/src/components/Team/TeamManage/ThreeDotMenu.tsx
@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { theme } from '@/style/theme';
+
+export const Wrapper = styled.div`
+  width: 134px;
+  padding: 0 12px;
+  border-radius: 4px;
+  border: 1px ${theme.color.gray5} solid;
+  background-color: ${theme.color.gray1};
+  position: absolute;
+  margin-top: 8px;
+  z-index: 10;
+  top: 16px;
+`;
+
+export const Box = styled.div<{ isLast: string }>`
+  width: 100%;
+  font-size: 12px;
+  font-weight: 400;
+  color: ${theme.color.gray7};
+  height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: 0.1s linear;
+  ${({ isLast }) => {
+    return (
+      isLast === 'false' &&
+      css`
+        border-bottom: 1px ${theme.color.gray5} solid;
+      `
+    );
+  }};
+  :hover {
+    color: ${theme.color.mainDark1};
+  }
+`;
diff --git a/src/pages/Team/Manage.tsx b/src/pages/Team/Manage.tsx
@@ -1,14 +1,16 @@
 import { useState } from 'react';
+import { useOutsideClick } from '@/hooks/useOutsideClick';
+import { useModal } from '@/hooks/useModal';
 import styled from '@emotion/styled';
 import { Sidebar } from '@/components/common/sidebar';
 import { theme } from '@/style/theme';
 import { SearchBar } from '@/components/common/SearchBar';
 import { XButton } from '@/components/common/XButton';
-import { useModal } from '@/hooks/useModal';
-import * as MemberAddModal from '@/components/Team/TeamManage/MemberAddModal';
 import { Icon } from '@iconify/react';
 import { Tag } from '@/components/Team/Tag';
-import { DropMenu } from '@/components/common/DropMenu';
+import * as MemberAddModal from '@/components/Team/TeamManage/MemberAddModal';
+import * as MemberManageModal from '@/components/Team/TeamManage/MemberManageModal';
+import * as ThreeDotMenu from '@/components/Team/TeamManage/ThreeDotMenu';
 
 const dummyMember: string[] = [
   '0000 테스트',
@@ -25,18 +27,18 @@ const dummyMember: string[] = [
   '0000 테스트',
 ];
 
-const array: string[] = ['담당자 지정', '팀원 삭제'];
-
 export const TeamManage = () => {
   const [isOpen, setIsOpen] = useState<number | boolean>(false);
-
+  const ref = useOutsideClick(() => {
+    setIsOpen(false);
+  });
   const { isVisible, onShow, ModalWrapper, onClose } = useModal({
     defaultVisible: 'memberDel',
   });
 
-  function setStudentIndex(index: number): void {
-    throw new Error('Function not implemented.');
-  }
+  const onOpen = (index: number) => {
+    if (!isOpen) setIsOpen(index);
+  };
 
   return (
     <>
@@ -71,14 +73,50 @@ export const TeamManage = () => {
           </MemberAddModal.Wrapper>
         </ModalWrapper>
       )}
-      {isVisible === 'memberDel' && (
+      {isVisible === 'managerChange' && (
         <ModalWrapper width={538} height={200}>
-          bye
+          <MemberManageModal.Wrapper>
+            <div>담당자 변경</div>
+            <div>담당자를 김은빈 학생에서 홍길동 학생으로 변경하시겠습니까?</div>
+            <div>
+              <XButton
+                width={58}
+                height={50}
+                buttonStyle="ghost"
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                취소
+              </XButton>
+              <XButton width={100} height={50} buttonStyle="solid">
+                담당자 변경
+              </XButton>
+            </div>
+          </MemberManageModal.Wrapper>
         </ModalWrapper>
       )}
-      {isVisible === 'managerChange' && (
+      {isVisible === 'memberDel' && (
         <ModalWrapper width={538} height={200}>
-          good
+          <MemberManageModal.Wrapper>
+            <div>팀원 삭제</div>
+            <div>김은빈 학생을 팀에서 삭제하시겠습니까?</div>
+            <div>
+              <XButton
+                width={58}
+                height={50}
+                buttonStyle="ghost"
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                취소
+              </XButton>
+              <XButton width={100} height={50} buttonStyle="solid">
+                팀원 삭제
+              </XButton>
+            </div>
+          </MemberManageModal.Wrapper>
         </ModalWrapper>
       )}
       <Wrapper>
@@ -123,19 +161,38 @@ export const TeamManage = () => {
                       <div>{member}</div>
                       <Tag tag="manage" />
                     </div>
-                    <Icon
-                      icon={'bi:three-dots-vertical'}
-                      color="#999999"
-                      width={20}
-                      height={20}
-                      cursor={'pointer'}
-                      onClick={() => {
-                        setIsOpen(index);
-                      }}
-                    />
-                    {isOpen && (
-                      <DropMenu values={array} onClose={setIsOpen} onSelect={setStudentIndex} selectedIndex={-1} />
-                    )}
+                    <MemberBoxInRightContainer ref={ref}>
+                      <Icon
+                        icon={'bi:three-dots-vertical'}
+                        color="#999999"
+                        width={20}
+                        height={20}
+                        cursor={'pointer'}
+                        onClick={() => {
+                          onOpen(index);
+                        }}
+                      />
+                      {isOpen === index && (
+                        <ThreeDotMenu.Wrapper>
+                          <ThreeDotMenu.Box
+                            isLast={'false'}
+                            onMouseDown={() => {
+                              onShow('managerChange');
+                            }}
+                          >
+                            담당자 지정
+                          </ThreeDotMenu.Box>
+                          <ThreeDotMenu.Box
+                            isLast={'true'}
+                            onMouseDown={() => {
+                              onShow('memberDel');
+                            }}
+                          >
+                            팀원 삭제
+                          </ThreeDotMenu.Box>
+                        </ThreeDotMenu.Wrapper>
+                      )}
+                    </MemberBoxInRightContainer>
                   </MemberBox>
                 ))}
               </MemberBoxContainer>
@@ -297,3 +354,9 @@ const MemberBox = styled.div`
     }
   }
 `;
+
+const MemberBoxInRightContainer = styled.div`
+  display: flex;
+  justify-content: end;
+  position: relative;
+`;