[FE] Refactor : 리플로우 최적화

Author: sang-gyeong

frontend/src/components/Common/BoxItem/index.tsx

@@ -23,7 +23,9 @@ function BoxItem({ trackData, imgUrl, target, next, id }: IBoxItemProps) {
 
         <ButtonsWrapper className="buttons-wrapper">
           <BoxPlayButton />
-          <BsThreeDots size={24} />
+          <DotsButtonWrapper>
+            <BsThreeDots size={24} />
+          </DotsButtonWrapper>
         </ButtonsWrapper>
         <BoxDropdown trackData={trackData} type={next} id={id} />
       </Wrapper>
@@ -44,12 +46,15 @@ const ButtonsWrapper = styled.div`
   height: 18%;
   display: flex;
   align-items: flex-end;
-  justify-content: space-between;
-  transition: 0.5s all;
   opacity: 0;
   background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15));
 `;
 
+const DotsButtonWrapper = styled.div`
+  position: absolute;
+  right: 12px;
+`;
+
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;

frontend/src/components/Common/Button/BoxPlayButton.tsx

@@ -29,6 +29,8 @@ const ButtonWrapper = styled.button`
   align-items: center;
   box-sizing: border-box;
   border: none;
+  position: absolute;
+  will-change: transform;
   &:hover {
     opacity: 100%;
     transform: scale(1.1);

frontend/src/components/Common/MagTopItem/index.tsx

@@ -77,7 +77,6 @@ const MagContent = styled.p`
   font-size: 14px;
   line-height: 20px;
   color: #939393;
-  will-change: transform;
 `;
 
 const Wrapper = styled.div`

frontend/src/components/MagList/index.tsx

@@ -6,12 +6,13 @@ import MagLargeCard from '@components/Common/Card/MagLargeCard';
 const MagList = ({ magList }) => {
   return (
     <ListContainer>
-      {magList && magList?.map((track, index) => (
-        <>
-          {index > 0 && (<DivdieContainer />)}
-          <MagLargeCard key={track.id} data={track}/>
-        </>
-      ))}
+      {magList &&
+        magList?.map((track, index) => (
+          <>
+            {index > 0 && <DivdieContainer />}
+            <MagLargeCard key={track.id} data={track} />
+          </>
+        ))}
     </ListContainer>
   );
 };

frontend/src/pages/Detail/Magazine/index.tsx

@@ -32,11 +32,7 @@ function MagazineDetail({ magazineInfo: magazine }: IMagazineInfoProps) {
             <MagTitle>{magazine?.title}</MagTitle>
             <MagContent>{magazine?.content}</MagContent>
             <MagPlayList>
-              <MagPlayListInfo>
-                총{magazine?.tracks?.length}
-                곡
-{' '}
-              </MagPlayListInfo>
+              <MagPlayListInfo>총{magazine?.tracks?.length}곡 </MagPlayListInfo>
               <MagPlayListLink>플레이리스트 보기</MagPlayListLink>
             </MagPlayList>
             <MagPlayButtonList>
@@ -157,7 +153,6 @@ const MagContent = styled.h5`
   line-height: 26px;
   color: hsla(0, 0%, 100%, 0.5);
   white-space: pre-line;
-
   ::after {
     content: '';
     display: block;