diff --git a/public/svg/tournament01.svg b/public/svg/tournament01.svg
new file mode 100644
index 00000000..30e6d838
--- /dev/null
+++ b/public/svg/tournament01.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/public/svg/tournament02.svg b/public/svg/tournament02.svg
new file mode 100644
index 00000000..d816633c
--- /dev/null
+++ b/public/svg/tournament02.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/public/svg/tournament03.svg b/public/svg/tournament03.svg
new file mode 100644
index 00000000..5d36edb4
--- /dev/null
+++ b/public/svg/tournament03.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/public/svg/tournament04.svg b/public/svg/tournament04.svg
new file mode 100644
index 00000000..ebd557be
--- /dev/null
+++ b/public/svg/tournament04.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/assets/svg/Tournament01.tsx b/src/assets/svg/Tournament01.tsx
new file mode 100644
index 00000000..a877ab41
--- /dev/null
+++ b/src/assets/svg/Tournament01.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react';
+const SvgTournament01 = (props: SVGProps) => (
+
+);
+export default SvgTournament01;
diff --git a/src/assets/svg/Tournament02.tsx b/src/assets/svg/Tournament02.tsx
new file mode 100644
index 00000000..1ba48ab7
--- /dev/null
+++ b/src/assets/svg/Tournament02.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+const SvgTournament02 = (props: SVGProps) => (
+
+);
+export default SvgTournament02;
diff --git a/src/assets/svg/Tournament03.tsx b/src/assets/svg/Tournament03.tsx
new file mode 100644
index 00000000..d12a7f25
--- /dev/null
+++ b/src/assets/svg/Tournament03.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+const SvgTournament03 = (props: SVGProps) => (
+
+);
+export default SvgTournament03;
diff --git a/src/assets/svg/Tournament04.tsx b/src/assets/svg/Tournament04.tsx
new file mode 100644
index 00000000..0f3bdf1f
--- /dev/null
+++ b/src/assets/svg/Tournament04.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+const SvgTournament04 = (props: SVGProps) => (
+
+);
+export default SvgTournament04;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
index d1748a1f..630afb84 100644
--- a/src/assets/svg/index.ts
+++ b/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';
diff --git a/src/components/CardRoom/CardRoom.style.ts b/src/components/CardRoom/CardRoom.style.ts
index 5632a49f..a4f40fde 100644
--- a/src/components/CardRoom/CardRoom.style.ts
+++ b/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;
+`;
diff --git a/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.style.ts b/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.style.ts
index 9386a741..bf8a240b 100644
--- a/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.style.ts
+++ b/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`
diff --git a/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx b/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx
index 1082c9de..a4d6968a 100644
--- a/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx
+++ b/src/pages/MyPage/Detail/DetailDoneRoom/DetailDoneRoom.tsx
@@ -24,9 +24,11 @@ const DetailDoneRoom = () => {
return (
-
+ <>
{Array.isArray(data) && data.length > 0 ? (
- data.map(renderDoneRoomCard)
+
+ {data.map((item, index) => renderDoneRoomCard(item, index))}
+
) : (
@@ -34,7 +36,7 @@ const DetailDoneRoom = () => {
새로운 선물 준비하기
)}
-
+
);
};
diff --git a/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgress.style.ts b/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgress.style.ts
index 5234c12b..d63acf19 100644
--- a/src/pages/MyPage/Detail/DetailProgressRoom/DetailProgress.style.ts
+++ b/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`
diff --git a/src/pages/Start/StartAnimation/TournamentAnimation/StartTournamentAnimation.style.ts b/src/pages/Start/StartAnimation/TournamentAnimation/StartTournamentAnimation.style.ts
new file mode 100644
index 00000000..28c35bbe
--- /dev/null
+++ b/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};
+`;
diff --git a/src/pages/Start/StartAnimation/TournamentAnimation/StartTournamentAnimation.tsx b/src/pages/Start/StartAnimation/TournamentAnimation/StartTournamentAnimation.tsx
new file mode 100644
index 00000000..33f6b5d7
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StartTournamentAnimation;