Merge pull request TEAM-BEAT#140 from TEAM-BEAT/feat/TEAM-BEAT#134/To…

…ggleAnimation [Feat/TEAM-BEAT#134] 토글 버튼 애니메이션, ManagerCard 애니메이션
imddoy · Jul 15, 2024 · 08cda9e · 08cda9e
2 parents 16c3c76 + 18c6313
commit 08cda9e
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 8 deletions.
diff --git a/src/pages/ticketholderlist/TicketHolderList.styled.ts b/src/pages/ticketholderlist/TicketHolderList.styled.ts
@@ -44,6 +44,35 @@ export const ToggleText = styled.span`
   ${({ theme }) => theme.fonts["body2-normal-medi"]};
 `;
 
+export const ToggleButton = styled.button<{ $detail: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 5.6rem;
+  height: 3.3rem;
+
+  background-color: ${({ theme, $detail }) =>
+    $detail ? theme.colors.pink_500 : theme.colors.gray_700};
+  cursor: pointer;
+  border: none;
+  border-radius: 36px;
+`;
+
+export const Circle = styled.span<{ $detail: boolean }>`
+  position: absolute;
+  top: 50%;
+  left: ${({ $detail }) => ($detail ? "4rem" : "1.6rem")};
+  width: 2.7rem;
+  height: 2.7rem;
+
+  background-color: ${({ theme }) => theme.colors.white};
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+
+  transition: left 0.25s ease-in-out; /* left 속성은 변하게 된다면 이 애니메이션 적용 */
+`;
+
 export const ToggleOnIcon = styled(IconToggleOn)<{ $width: string; $height: string }>`
   width: ${({ $width }) => $width};
   height: ${({ $height }) => $height};

diff --git a/src/pages/ticketholderlist/TicketHolderList.tsx b/src/pages/ticketholderlist/TicketHolderList.tsx
@@ -177,7 +177,11 @@ const TicketHolderList = () => {
               </NarrowDropDown>
             </S.LayoutFilterBox>
             <S.ToggleWrapper>
-              {detail ? (
+              {detail ? <S.ToggleText>자세히</S.ToggleText> : <S.ToggleText>간략히</S.ToggleText>}
+              <S.ToggleButton $detail={detail} onClick={handleToggleButton}>
+                <S.Circle $detail={detail} />
+              </S.ToggleButton>
+              {/*detail ? (
                 <>
                   <S.ToggleText>자세히</S.ToggleText>
                   <S.ToggleOnIcon
@@ -195,7 +199,7 @@ const TicketHolderList = () => {
                     $height={"3.3rem"}
                   />
                 </>
-              )}
+              )*/}
             </S.ToggleWrapper>
           </S.LayoutHeaderBox>
           {filteredData.map((obj, index) => (

diff --git a/src/pages/ticketholderlist/components/managercard/ManagerCard.styled.ts b/src/pages/ticketholderlist/components/managercard/ManagerCard.styled.ts
@@ -1,13 +1,57 @@
 import { IconCheckboxSelectedOn, IconCheckboxUnselectedOn } from "@assets/svgs";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+
+const expandAnimation = keyframes`
+  0% {
+    height: 7.4rem;
+  }
+
+  100% {
+    height: 14.6rem;
+  }
+`;
+
+const unexpandAnimation = keyframes`
+  0% {
+    height: 14.6rem;
+  }
+
+  100% {
+    height: 7.4rem;
+  }
+`;
+
+const revealAnimation = keyframes`
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+`;
+
+const unrevealAnimation = keyframes`
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+`;
 
 export const ManagerCardWrapper = styled.article<{ $isDetail: boolean }>`
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 32.6rem;
-  height: ${({ $isDetail }) => ($isDetail ? "14.6rem" : "7.4rem")};
+  max-height: ${({ $isDetail }) => ($isDetail ? "14.6rem" : "7.4rem")};
   padding-left: 0.4rem;
 `;
 
@@ -24,6 +68,8 @@ export const ManagerCardLayout = styled.div<{ $isDetail: boolean; $isDeleteMode:
   background-color: ${({ theme }) => theme.colors.gray_800};
   border-right: 1px solid ${({ theme }) => theme.colors.black};
   border-radius: 6px;
+
+  transition: max-height 0.5s ease;
 `;
 
 export const ManagerCardBox = styled.div`
@@ -34,6 +80,36 @@ export const ManagerCardBox = styled.div`
   align-self: stretch;
 `;
 
+export const ManagerCardDetailBox = styled.div<{ $isDetail: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background-color: ${({ theme, $isDetail }) => $isDetail && theme.colors.gray_800};
+  opacity: ${({ $isDetail }) => ($isDetail ? "1" : "0")};
+
+  transition: background-color 0.25s ease;
+  animation: ${({ $isDetail }) => ($isDetail ? revealAnimation : unrevealAnimation)} 0.7s ease;
+`;
+
+export const ManagerCardDetailLayout = styled.div<{ $isDetail: boolean; $isDeleteMode: boolean }>`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 1.6rem;
+  align-items: flex-start;
+  width: ${({ $isDeleteMode }) => ($isDeleteMode ? "22.2rem" : "25.2rem")};
+  height: ${({ $isDetail }) => ($isDetail ? "14.6rem" : "7.4rem")};
+  padding: 1.6rem;
+
+  background-color: ${({ theme }) => theme.colors.gray_800};
+  opacity: ${({ $isDetail }) => ($isDetail ? "1" : "0")};
+  border-right: 1px solid ${({ theme }) => theme.colors.black};
+  border-radius: 6px;
+`;
+
 export const ManagerCardTextBox = styled.div`
   display: flex;
   gap: 2.2rem;

diff --git a/src/pages/ticketholderlist/components/managercard/ManagerCard.tsx b/src/pages/ticketholderlist/components/managercard/ManagerCard.tsx
@@ -81,8 +81,8 @@ const ManagerCard = ({
             <S.ManagerCardTextTitle>매수</S.ManagerCardTextTitle>
             <S.ManagerCardTextContent>{`${purchaseTicketeCount}매`}</S.ManagerCardTextContent>
           </S.ManagerCardTextBox>
-          {isDetail && (
-            <>
+          {
+            <S.ManagerCardDetailBox $isDetail={isDetail}>
               <S.ManagerCardTextBox>
                 <S.ManagerCardTextTitle>회차</S.ManagerCardTextTitle>
                 <S.ManagerCardTextContent>{`${convertingNumber(scheduleNumber)}회차`}</S.ManagerCardTextContent>
@@ -95,8 +95,8 @@ const ManagerCard = ({
                 <S.ManagerCardTextTitle>예매일</S.ManagerCardTextTitle>
                 <S.ManagerCardTextContent>{formattedDate}</S.ManagerCardTextContent>
               </S.ManagerCardTextBox>
-            </>
-          )}
+            </S.ManagerCardDetailBox>
+          }
         </S.ManagerCardBox>
       </S.ManagerCardLayout>
       <S.ManagerCardRadioLayout $isDetail={isDetail} $isPaid={isPaid}>