diff --git a/public/svg/3dicons.svg b/public/svg/3dicons.svg
new file mode 100644
index 00000000..5a46f30c
--- /dev/null
+++ b/public/svg/3dicons.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/svg/3Dicons.tsx b/src/assets/svg/3Dicons.tsx
new file mode 100644
index 00000000..514f4090
--- /dev/null
+++ b/src/assets/svg/3Dicons.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const Svg3Dicons = (props: SVGProps) => (
+
+);
+export default Svg3Dicons;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
index 42c38beb..d2259af8 100644
--- a/src/assets/svg/index.ts
+++ b/src/assets/svg/index.ts
@@ -1,3 +1,4 @@
+export { default as Svg3Dicons } from './3Dicons';
export { default as Favicon } from './Favicon';
export { default as IcAdd } from './IcAdd';
export { default as IcAlertCircle } from './IcAlertCircle';
diff --git a/src/components/.keep b/src/components/.keep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/tournament/intro/TournamentContainer.tsx b/src/components/tournament/intro/TournamentContainer.tsx
new file mode 100644
index 00000000..b9fed45b
--- /dev/null
+++ b/src/components/tournament/intro/TournamentContainer.tsx
@@ -0,0 +1,23 @@
+import TournamentStartText from './tournamentStartText/TournamentStartText';
+import TournamentItemCount from './tournamentItemCount/TournamentItemCount';
+import styled from 'styled-components';
+import { Svg3Dicons } from '../../../assets/svg';
+
+export default function TournamentConatainer() {
+ return (
+ <>
+
+
+
+
+
+ {/* 공통버튼 btn_cta_fill 들어갈 예정*/}
+
+ );
+}
+
+const TournamentImg = styled.div`
+ width: 20rem;
+ height: 20rem;
+ margin: 0 auto;
+`;
diff --git a/src/components/tournament/intro/tournamentItemCount/TournamentItemCount.style.ts b/src/components/tournament/intro/tournamentItemCount/TournamentItemCount.style.ts
new file mode 100644
index 00000000..177c2ca5
--- /dev/null
+++ b/src/components/tournament/intro/tournamentItemCount/TournamentItemCount.style.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const TournamentItemCountWrapper = styled.article`
+ margin-bottom: 5.5rem;
+`;
+
+export const TotalItems = styled.p`
+ ${({ theme }) => theme.fonts.body_09};
+ color: ${({ theme }) => theme.colors.G_09};
+`;
diff --git a/src/components/tournament/intro/tournamentItemCount/TournamentItemCount.tsx b/src/components/tournament/intro/tournamentItemCount/TournamentItemCount.tsx
new file mode 100644
index 00000000..716aaa31
--- /dev/null
+++ b/src/components/tournament/intro/tournamentItemCount/TournamentItemCount.tsx
@@ -0,0 +1,10 @@
+import * as S from './TournamentItemCount.style';
+
+export default function TournamentItemCount() {
+ const count = 16;
+ return (
+
+ 총 등록된 선물 {count}개
+
+ );
+}
diff --git a/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx b/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
new file mode 100644
index 00000000..8c5c3710
--- /dev/null
+++ b/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
@@ -0,0 +1,7 @@
+export default function TournamentStartButton() {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/tournament/intro/tournamentStartText/TournamentStartText.style.ts b/src/components/tournament/intro/tournamentStartText/TournamentStartText.style.ts
new file mode 100644
index 00000000..f7427702
--- /dev/null
+++ b/src/components/tournament/intro/tournamentStartText/TournamentStartText.style.ts
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const TournamentStartTextWrapper = styled.article`
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+ margin-bottom: 2rem;
+
+ text-align: left;
+`;
+
+export const Title = styled.p`
+ ${({ theme }) => theme.fonts.Title};
+`;
+
+export const SubTitle = styled.p`
+ ${({ theme }) => theme.fonts.body_07};
+`;
+
+export const UserName = styled.span`
+ color: ${({ theme }) => theme.colors.P_06};
+`;
diff --git a/src/components/tournament/intro/tournamentStartText/TournamentStartText.tsx b/src/components/tournament/intro/tournamentStartText/TournamentStartText.tsx
new file mode 100644
index 00000000..9e0efaa6
--- /dev/null
+++ b/src/components/tournament/intro/tournamentStartText/TournamentStartText.tsx
@@ -0,0 +1,17 @@
+import { useRecoilValue } from 'recoil';
+import { userNameState } from '../../../../recoil/atoms';
+import * as S from './TournamentStartText.style';
+
+export default function TournamentStartText() {
+ const userName = useRecoilValue(userNameState);
+
+ return (
+
+ 선물 등록이 마감되어
+
+ {userName}님을 위한
+ 선물 토너먼트를 시작합니다
+
+
+ );
+}
diff --git a/src/pages/TournamentPage.tsx b/src/pages/TournamentPage.tsx
new file mode 100644
index 00000000..6205f0a4
--- /dev/null
+++ b/src/pages/TournamentPage.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import TournamentConatainer from '../components/tournament/intro/TournamentContainer';
+
+const TournamentPage = () => {
+ return (
+
+
+
+ );
+};
+
+export default TournamentPage;
+
+const TournamentPageWrapper = styled.section`
+ margin: 0 2rem;
+`;
diff --git a/src/recoil/atoms.ts b/src/recoil/atoms.ts
index fc1ef11e..f214f740 100644
--- a/src/recoil/atoms.ts
+++ b/src/recoil/atoms.ts
@@ -1,8 +1,6 @@
-//이런 식으로 작성
+import { atom } from 'recoil';
-//import { atom } from "recoil";
-
-// export const SweetState = atom({
-// key: "sweet",
-// default: {},
-// });
+export const userNameState = atom({
+ key: '',
+ default: '시동훈',
+});
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 63feca2d..2f7e3723 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -5,6 +5,7 @@ import Layout from '../layouts/Layout';
import GiftHomeDetailFriends from '../pages/GiftHomeDetail/GiftHomeDetailFriends';
import GiftHomeDetail2030 from '../pages/GiftHomeDetail/GiftHomeDetail2030';
import OnBoardingPage from '../pages/OnBoardingPage';
+import TournamentPage from '../pages/TournamentPage';
const router = createBrowserRouter([
{
@@ -33,6 +34,10 @@ const router = createBrowserRouter([
path: '/onboarding',
element: ,
},
+ {
+ path: '/tournament',
+ element: ,
+ },
],
},
]);