Merge pull request #19 from LikeLionHGU/#16/TeamManagementModal-최예라

#16/team management modal 최예라
LikeLionHGU · Apr 7, 2024 · c1a8400 · c1a8400
2 parents 74d28d4 + 4fadae6
commit c1a8400
Show file tree

Hide file tree

Showing 13 changed files with 282 additions and 66 deletions.
diff --git a/src/assets/Icons/TeamAddIcon.svg b/src/assets/Icons/TeamAddIcon.svg
diff --git a/src/assets/Icons/cancel.svg b/src/assets/Icons/cancel.svg
diff --git a/src/assets/Icons/copy.svg b/src/assets/Icons/copy.svg
diff --git a/src/components/CreateGroupPage/Background.jsx b/src/components/CreateGroupPage/Background.jsx
@@ -1,17 +1,17 @@
 import styled from "styled-components";
 
 export const BackgroundWrapper = styled.div`
-  background-image: url("data:image/svg+xml,%3Csvg width='1440' height='810' viewBox='0 0 1440 810' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1410_2222)'%3E%3Crect width='1440' height='810' fill='%2300051D'/%3E%3Cg filter='url(%23filter0_f_1410_2222)'%3E%3Cpath d='M1664 667C1664 887.914 1484.91 1067 1264 1067C1043.09 1067 864 887.914 864 667C864 446.086 1043.09 267 1264 267C1484.91 267 1664 446.086 1664 667Z' fill='%23000054' fill-opacity='0.5'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_1410_2222)'%3E%3Cpath d='M712 686C712 947.231 476.278 1159 185.5 1159C-105.278 1159 -341 947.231 -341 686C-341 424.769 -105.278 213 185.5 213C476.278 213 712 424.769 712 686Z' fill='%234F0923' fill-opacity='0.5'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_1410_2222' x='464' y='-133' width='1600' height='1600' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='200' result='effect1_foregroundBlur_1410_2222'/%3E%3C/filter%3E%3Cfilter id='filter1_f_1410_2222' x='-741' y='-187' width='1853' height='1746' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='200' result='effect1_foregroundBlur_1410_2222'/%3E%3C/filter%3E%3CclipPath id='clip0_1410_2222'%3E%3Crect width='1440' height='810' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+  /* background-image: url("data:image/svg+xml,%3Csvg width='1440' height='810' viewBox='0 0 1440 810' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1410_2222)'%3E%3Crect width='1440' height='810' fill='%2300051D'/%3E%3Cg filter='url(%23filter0_f_1410_2222)'%3E%3Cpath d='M1664 667C1664 887.914 1484.91 1067 1264 1067C1043.09 1067 864 887.914 864 667C864 446.086 1043.09 267 1264 267C1484.91 267 1664 446.086 1664 667Z' fill='%23000054' fill-opacity='0.5'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_1410_2222)'%3E%3Cpath d='M712 686C712 947.231 476.278 1159 185.5 1159C-105.278 1159 -341 947.231 -341 686C-341 424.769 -105.278 213 185.5 213C476.278 213 712 424.769 712 686Z' fill='%234F0923' fill-opacity='0.5'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_1410_2222' x='464' y='-133' width='1600' height='1600' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='200' result='effect1_foregroundBlur_1410_2222'/%3E%3C/filter%3E%3Cfilter id='filter1_f_1410_2222' x='-741' y='-187' width='1853' height='1746' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='200' result='effect1_foregroundBlur_1410_2222'/%3E%3C/filter%3E%3CclipPath id='clip0_1410_2222'%3E%3Crect width='1440' height='810' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
 
   margin: 0;
   padding: 0;
-  overflow: hidden;
+  overflow: hidden; */
 
   width: 100vw;
   height: 100vh;
   background-size: 400%;
 
-  animation: bgAnimation 3s ease-in-out infinite;
+  /* animation: bgAnimation 3s ease-in-out infinite;
 
   @keyframes bgAnimation {
     0% {
@@ -23,5 +23,5 @@ export const BackgroundWrapper = styled.div`
     100% {
       background-size: 100%;
     }
-  }
+  } */
 `;
diff --git a/src/components/CreateGroupPage/Button.jsx b/src/components/CreateGroupPage/Button.jsx
@@ -2,12 +2,12 @@ import styled, { css } from "styled-components";
 
 const ButtonBase = css`
   height: 53px;
-  width: 129px;
+  width: 114px;
 
   margin-top: ${(props) => props.$marginTop || "194px"};
   cursor: pointer;
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 11px;
+  border: 1px solid rgba(204, 223, 255, 0.8);
+  border-radius: 14px;
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease-in-out;
@@ -21,7 +21,7 @@ const ButtonBase = css`
   }
 
   &:hover {
-    border-color: rgba(111, 114, 136, 0.5);
+    border-color: #aec3de;
   }
 
   &::before,
@@ -38,7 +38,7 @@ const ButtonBase = css`
   }
 
   &::before {
-    background: rgba(111, 114, 136, 0.5);
+    background: #aec3de;
     z-index: -12;
     opacity: 1;
     transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
@@ -54,6 +54,7 @@ export const NextBtn = styled.button`
   ${ButtonBase}
   float: right;
   margin-right: 8%;
+  background-color: rgba(204, 223, 255, 0.8);
 
   img {
     top: 55%;
@@ -65,6 +66,7 @@ export const PrevBtn = styled.button`
   ${ButtonBase}
   float: left;
   margin-left: 8.5%;
+  background-color: rgba(204, 223, 255, 0.8);
 
   img {
     top: 55%;
@@ -76,50 +78,64 @@ export const StartBtn = styled.button`
   ${ButtonBase}
   height: 53px;
   width: 168px;
-
   float: right;
   margin-right: 8.6%;
+  background-color: rgba(204, 223, 255, 0.8);
 
   img {
-    height: 40px;
-    top: 54%;
-    left: 51%;
-  }
-
-  &:hover {
-    border-color: #734cde;
-  }
-
-  &::before {
-    background: #734cde;
-    z-index: -12;
-    opacity: 1;
-    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
-  }
-
-  &::after {
-    content: "";
-    width: 0%;
-    height: 100%;
-    display: block;
-    background: #80ffd3;
-    position: absolute;
-    -ms-transform: skewX(-20deg);
-    -webkit-transform: skewX(-20deg);
-    transform: skewX(-20deg);
-    left: -10%;
-    opacity: 0;
-    top: 0;
-    z-index: -15;
-    -webkit-transition: all 0.94s cubic-bezier(0.2, 0.95, 0.57, 0.99);
-    -moz-transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
-    -o-transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
-    transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
-    box-shadow: 2px 0px 14px rgba(0, 0, 0, 0.6);
-  }
-
-  &:hover::after {
-    opacity: 1;
-    width: 120%;
+    top: 55%;
+    left: 47%;
   }
 `;
+
+// export const StartBtn = styled.button`
+//   ${ButtonBase}
+//   height: 53px;
+//   width: 168px;
+
+//   float: right;
+//   margin-right: 8.6%;
+
+//   img {
+//     height: 40px;
+//     top: 54%;
+//     left: 51%;
+//   }
+
+//   &:hover {
+//     border-color: #734cde;
+//   }
+
+//   &::before {
+//     background: #734cde;
+//     z-index: -12;
+//     opacity: 1;
+//     transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
+//   }
+
+//   &::after {
+//     content: "";
+//     width: 0%;
+//     height: 100%;
+//     display: block;
+//     background: #80ffd3;
+//     position: absolute;
+//     -ms-transform: skewX(-20deg);
+//     -webkit-transform: skewX(-20deg);
+//     transform: skewX(-20deg);
+//     left: -10%;
+//     opacity: 0;
+//     top: 0;
+//     z-index: -15;
+//     -webkit-transition: all 0.94s cubic-bezier(0.2, 0.95, 0.57, 0.99);
+//     -moz-transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
+//     -o-transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
+//     transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
+//     box-shadow: 2px 0px 14px rgba(0, 0, 0, 0.6);
+//   }
+
+//   &:hover::after {
+//     opacity: 1;
+//     width: 120%;
+//   }
+// `;
diff --git a/src/components/CreateGroupPage/Text.jsx b/src/components/CreateGroupPage/Text.jsx
@@ -4,7 +4,11 @@ export const Text = styled.div`
   padding-left: 8.5%;
   padding-top: 183px;
   font-size: 40px;
-  color: white;
+  color: black;
+`;
+
+export const BlueText = styled.span`
+  color: #325692;
 `;
 
 export const TextBox = styled.div`
@@ -19,6 +23,7 @@ export const TextBox = styled.div`
     border-radius: 24px;
     border: none;
     outline: none;
+    font-family: "GmarketSansLight";
     font-size: 40px;
     caret-color: blue;
 

diff --git a/src/components/CreateGroupPage/TopCompleteBar.jsx b/src/components/CreateGroupPage/TopCompleteBar.jsx
@@ -18,7 +18,7 @@ const Bar = styled.div`
   ${(props) =>
     props.$now &&
     css`
-      background-color: #8248f2;
+      background-color: #aec3de;
     `}
 `;
 

diff --git a/src/components/MainPage/Header.jsx b/src/components/MainPage/Header.jsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import bellIcon from "../../assets/Icons/bell.svg";
 import userIcon from "../../assets/Icons/userIcon.svg";
+import TeamManagementModal from "./TeamManagementModal";
 
 const Wrapper = styled.div`
   height: 80px;
@@ -40,16 +41,30 @@ const Icons = styled.div`
 `;
 
 function Header() {
+  const [isTeamManagementModalOpen, setTeamManagementModalOpen] =
+    useState(false);
+
+  const toggleTeamManagementModal = () => {
+    setTeamManagementModalOpen((prevState) => !prevState);
+    document.body.style.overflow = isTeamManagementModalOpen
+      ? "auto"
+      : "hidden";
+  };
+
   return (
     <Wrapper>
       <Menu>일정표 관리</Menu>
-      <Menu>팀 관리</Menu>
+      <Menu onClick={toggleTeamManagementModal}>팀 관리</Menu>
       <Menu>악보 보관함</Menu>
       <Menu>콘티 보관함</Menu>
       <Icons>
         <img src={bellIcon} alt="벨아이콘"></img>
         <img src={userIcon} alt="벨아이콘"></img>
       </Icons>
+      <TeamManagementModal
+        isOpen={isTeamManagementModalOpen}
+        onClose={toggleTeamManagementModal}
+      />
     </Wrapper>
   );
 }