[마이페이지,시작페이지] 최종 QA 반영입니다 !

src/assets/svg/Tournament01.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react';
+const SvgTournament01 = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 375 50' {...props}>
+    <path
+      d='M271.5 42v-6h-168v6'
+      data-name='2-line'
+      style={{
+        fill: 'none',
+        stroke: '#ffbad5',
+      }}
+    />
+  </svg>
+);
+export default SvgTournament01;

src/assets/svg/Tournament02.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+const SvgTournament02 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    id='tournament02_svg__Layer_1'
+    data-name='Layer 1'
+    viewBox='0 0 375 32'
+    {...props}
+  >
+    <defs>
+      <style>
+        {
+          '.tournament02_svg__cls-1{fill:none;stroke:#ff6aa3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
+        }
+      </style>
+    </defs>
+    <g id='tournament02_svg___2-gift' data-name='2-gift'>
+      <path
+        d='M93.9 18.1v-5.3c0-1.3 1.1-2.4 2.4-2.4h14.4c1.3 0 2.4 1.1 2.4 2.4v5.3m-19.2 0h19.2m-19.2 0v5.5c0 1.3 1.1 2.4 2.4 2.4h14.4c1.3 0 2.4-1.1 2.4-2.4v-5.5m-9.4 7.9V10.4m-1.2-.5c.2 0 .3-.1.4-.3s.1-.3 0-.5c-.3-.6-1.4-2.5-2.2-2.9-.9-.5-2.1-.2-2.6.7s-.2 2.1.7 2.6c.8.4 3 .4 3.7.4m1.6-.7c-.1.2-.1.4 0 .5.1.2.3.2.4.3.7 0 2.9 0 3.6-.4.9-.5 1.2-1.7.7-2.6s-1.7-1.2-2.6-.7c-.6.4-1.7 2.3-2.1 2.9M261.9 18.1v-5.3c0-1.3 1.1-2.4 2.4-2.4h14.4c1.3 0 2.4 1.1 2.4 2.4v5.3m-19.2 0h19.2m-19.2 0v5.5c0 1.3 1.1 2.4 2.4 2.4h14.4c1.3 0 2.4-1.1 2.4-2.4v-5.5m-9.4 7.9V10.4m-1.2-.5c.2 0 .3-.1.4-.3s.1-.3 0-.5c-.3-.6-1.4-2.5-2.2-2.9-.9-.5-2.1-.2-2.6.7s-.2 2.1.7 2.6c.8.4 3 .4 3.7.4m1.6-.7c-.1.2-.1.4 0 .5.1.2.3.2.4.3.7 0 2.9 0 3.6-.4.9-.5 1.2-1.7.7-2.6s-1.7-1.2-2.6-.7c-.6.4-1.7 2.3-2.1 2.9'
+        className='tournament02_svg__cls-1'
+      />
+    </g>
+  </svg>
+);
+export default SvgTournament02;

src/assets/svg/Tournament03.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+const SvgTournament03 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    id='tournament03_svg__Layer_1'
+    data-name='Layer 1'
+    viewBox='0 0 375 24'
+    {...props}
+  >
+    <defs>
+      <style>{'.tournament03_svg__cls-1{fill:none;stroke:#ffbad5}'}</style>
+    </defs>
+    <g id='tournament03_svg___1-line' data-name='1-line'>
+      <path d='M145.5 14V8h-84v6M313.5 14V8h-84v6' className='tournament03_svg__cls-1' />
+    </g>
+  </svg>
+);
+export default SvgTournament03;

src/assets/svg/Tournament04.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+const SvgTournament04 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    id='tournament04_svg__Layer_1'
+    data-name='Layer 1'
+    viewBox='0 0 375 40'
+    {...props}
+  >
+    <defs>
+      <style>
+        {
+          '.tournament04_svg__cls-1{fill:none;stroke:#ff6aa3;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
+        }
+      </style>
+    </defs>
+    <path
+      d='M51.9 16.1v-5.3c0-1.3 1.1-2.4 2.4-2.4h14.4c1.3 0 2.4 1.1 2.4 2.4v5.3m-19.2 0h19.2m-19.2 0v5.5c0 1.3 1.1 2.4 2.4 2.4h14.4c1.3 0 2.4-1.1 2.4-2.4v-5.5M61.7 24V8.4m-1.2-.5c.2 0 .3-.1.4-.3s.1-.3 0-.5c-.3-.6-1.4-2.5-2.2-2.9-.9-.5-2.1-.2-2.6.7s-.2 2.1.7 2.6c.8.4 3 .4 3.7.4m1.6-.7c-.1.2-.1.3 0 .5s.3.2.4.3c.7 0 2.9 0 3.6-.4.9-.5 1.2-1.7.7-2.6s-1.7-1.2-2.6-.7c-.6.4-1.7 2.3-2.1 2.9M135.9 16.1v-5.3c0-1.3 1.1-2.4 2.4-2.4h14.4c1.3 0 2.4 1.1 2.4 2.4v5.3m-19.2 0h19.2m-19.2 0v5.5c0 1.3 1.1 2.4 2.4 2.4h14.4c1.3 0 2.4-1.1 2.4-2.4v-5.5m-9.4 7.9V8.4m-1.2-.5c.2 0 .3-.1.4-.3s.1-.3 0-.5c-.3-.6-1.4-2.5-2.2-2.9-.9-.5-2.1-.2-2.6.7s-.2 2.1.7 2.6c.8.4 3 .4 3.7.4m1.6-.7c-.1.2-.1.3 0 .5s.3.2.4.3c.7 0 2.9 0 3.6-.4.9-.5 1.2-1.7.7-2.6s-1.7-1.2-2.6-.7c-.6.4-1.7 2.3-2.1 2.9M219.9 16.1v-5.3c0-1.3 1.1-2.4 2.4-2.4h14.4c1.3 0 2.4 1.1 2.4 2.4v5.3m-19.2 0h19.2m-19.2 0v5.5c0 1.3 1.1 2.4 2.4 2.4h14.4c1.3 0 2.4-1.1 2.4-2.4v-5.5m-9.4 7.9V8.4m-1.2-.5c.2 0 .3-.1.4-.3s.1-.3 0-.5c-.3-.6-1.4-2.5-2.2-2.9-.9-.5-2.1-.2-2.6.7s-.2 2.1.7 2.6c.8.4 3 .4 3.7.4m1.6-.7c-.1.2-.1.3 0 .5s.3.2.4.3c.7 0 2.9 0 3.6-.4.9-.5 1.2-1.7.7-2.6s-1.7-1.2-2.6-.7c-.6.4-1.7 2.3-2.1 2.9M303.9 16.1v-5.3c0-1.3 1.1-2.4 2.4-2.4h14.4c1.3 0 2.4 1.1 2.4 2.4v5.3m-19.2 0h19.2m-19.2 0v5.5c0 1.3 1.1 2.4 2.4 2.4h14.4c1.3 0 2.4-1.1 2.4-2.4v-5.5m-9.4 7.9V8.4m-1.2-.5c.2 0 .3-.1.4-.3s.1-.3 0-.5c-.3-.6-1.4-2.5-2.2-2.9-.9-.5-2.1-.2-2.6.7s-.2 2.1.7 2.6c.8.4 3 .4 3.7.4m1.6-.7c-.1.2-.1.3 0 .5s.3.2.4.3c.7 0 2.9 0 3.6-.4.9-.5 1.2-1.7.7-2.6s-1.7-1.2-2.6-.7c-.6.4-1.7 2.3-2.1 2.9'
+      className='tournament04_svg__cls-1'
+    />
+  </svg>
+);
+export default SvgTournament04;

src/assets/svg/index.ts

@@ -85,11 +85,16 @@ export { default as IcPoint } from './IcPoint';
 export { default as IcOnboardingFinal } from './IcOnboardingFinal';
 export { default as IcAfterTournamentProgressLine } from './IcAfterTournamentProgressLine';
 export { default as IcBeforeTournamentProgressLine } from './IcBeforeTournamentProgressLine';
-export { default as Vite } from './Vite';
 export { default as IcShare } from './IcShare';
 export { default as Ranking04 } from './Ranking04';
 export { default as Ranking1 } from './Ranking1';
 export { default as Ranking2 } from './Ranking2';
 export { default as Ranking3 } from './Ranking3';
 export { default as IcEmptyThumbnailFinal } from './IcEmptyThumbnailFinal';
+export { default as Tournament01 } from './Tournament01';
+export { default as Tournament02 } from './Tournament02';
+export { default as Tournament03 } from './Tournament03';
+export { default as Tournament04 } from './Tournament04';
+export { default as Vite } from './Vite';
+export { default as ImgBg } from './ImgBg';
 export { default as GiftHomeBackground } from './GiftHomeBackground';

src/components/CardRoom/CardRoom.style.ts

@@ -48,12 +48,14 @@ export const CountUser = styled.div`
   color: ${({ theme: { colors } }) => colors.G_07};
   margin: 0 1.2rem;
   margin-top: 0.4rem;
+  gap: 0.2rem;
 `;
 
 export const TagWrapper = styled.div`
   display: flex;
   margin: 0 1.2rem;
   margin-top: 1rem;
+  margin-bottom: 0.5rem;
   gap: 0.4rem;
 `;
 
@@ -67,3 +69,8 @@ export const SettingWrapper = styled.div`
   margin-top: 0.8rem;
   cursor: pointer;
 `;
+
+export const IcUserWrapper = styled.div`
+  ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })};
+  gap: 0.2rem;
+`;

src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.style.ts

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const DetailDoneRoomWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter({})};
   width: 100%;
+  height: 100vh;
   padding: 0 2rem;
 `;
 
@@ -22,7 +23,6 @@ export const EmptyWrapper = styled.div`
   height: 100%;
   gap: 1.2rem;
   margin: 0 2rem;
-  margin-top: 15.9rem;
 `;
 
 export const EmptyText = styled.div`

src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx

@@ -24,17 +24,19 @@ const DetailDoneRoom = () => {
   return (
     <S.DetailDoneRoomWrapper>
       <LeftIconHeader title='종료된 선물방' />
-      <S.RoomWrapper>
+      <>
         {Array.isArray(data) && data.length > 0 ? (
-          data.map(renderDoneRoomCard)
+          <S.RoomWrapper>
+            {data.map((item, index) => renderDoneRoomCard(item, index))}
+          </S.RoomWrapper>
         ) : (
           <S.EmptyWrapper title='종료된 선물방'>
             <IcLogoEmpty style={{ width: '8rem', height: '6.4rem' }} />
             <S.EmptyText>준비했던 선물이 없어요</S.EmptyText>
             <BtnSmallStroke customStyle={{ margin: '1.6rem' }}>새로운 선물 준비하기</BtnSmallStroke>
           </S.EmptyWrapper>
         )}
-      </S.RoomWrapper>
+      </>
     </S.DetailDoneRoomWrapper>
   );
 };

src/pages/MyPage/Detail/DetailProgressRoom/DetailProgress.style.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const DetailProgressRoomWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter({})};
   width: 100%;
-  height: 100%;
+  height: 100vh;
   padding: 0 2rem;
 `;
 
@@ -23,7 +23,6 @@ export const EmptyWrapper = styled.div`
   height: 100%;
   gap: 1.2rem;
   margin: 0 2rem;
-  margin-top: 15.9rem;
 `;
 
 export const EmptyText = styled.div`

src/pages/Start/StartAnimation/TournamentAnimation/StartTournamentAnimation.style.ts

@@ -0,0 +1,26 @@
+import styled, { keyframes } from 'styled-components';
+
+const slideIn = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+export const TournamentWrapper = styled.div`
+  display: flex;
+  position: relative;
+  z-index: 999;
+  /* top: 36rem;
+  z-index: 50; */
+`;
+
+export const AnimatedTournament = styled.div<{ $animationDelay: string; $style: string }>`
+  position: relative;
+  top: ${(props) => props.$style};
+  animation: ${slideIn} 0.5s ease forwards;
+  animation-delay: ${(props) => props.$animationDelay};
+`;

src/pages/Start/StartAnimation/TournamentAnimation/StartTournamentAnimation.tsx

@@ -0,0 +1,23 @@
+import { Tournament01, Tournament02, Tournament03, Tournament04 } from '../../../../assets/svg';
+import * as S from './StartTournamentAnimation.style';
+
+const StartTournamentAnimation = () => {
+  return (
+    <S.TournamentWrapper>
+      <S.AnimatedTournament $animationDelay='0s' $style='0rem'>
+        <Tournament04 />
+      </S.AnimatedTournament>
+      <S.AnimatedTournament $animationDelay='0.25s' $style='20rem'>
+        <Tournament03 />
+      </S.AnimatedTournament>
+      <S.AnimatedTournament $animationDelay='0.5s' $style='40rem'>
+        <Tournament02 />
+      </S.AnimatedTournament>
+      <S.AnimatedTournament $animationDelay='0.75s' $style='60rem'>
+        <Tournament01 />
+      </S.AnimatedTournament>
+    </S.TournamentWrapper>
+  );
+};
+
+export default StartTournamentAnimation;