[토너먼트] 토너먼트 인트로 화면 퍼블리싱 (#54)

* feat: 토너먼트 인트로 - 시작말 컴포넌트 구현

* feat: 토너먼트 등록 선물 개수 컴포넌트 구현

* feat: 토너먼트 인트로 컨테이너 컴포넌트 구현

* feat: 토너먼트 인트로 시작하기 버튼 컴포넌트 구현

* chore: 아이콘 이미지 추가

* chore: 아이콘 3d  토너먼트 추가

* feat: router 토너먼트 페이지 추가

* feat: 토너먼트 인트로 컨테이너 컴포넌트 구현

* feat: 총 등록 아이템 컴포넌트 구현

* docs: 폴더구조 변경

* chore: 아이템 개수 변수명 변경

* style: gap 설정

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';

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 (
+    <>
+      <TournamentStartText />
+      <TournamentItemCount />
+      <TournamentImg>
+        <Svg3Dicons />
+      </TournamentImg>
+      {/* 공통버튼 btn_cta_fill 들어갈 예정*/}
+    </>
+  );
+}
+
+const TournamentImg = styled.div`
+  width: 20rem;
+  height: 20rem;
+  margin: 0 auto;
+`;

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};
+`;

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 (
+    <S.TournamentItemCountWrapper>
+      <S.TotalItems>총 등록된 선물 {count}개</S.TotalItems>
+    </S.TournamentItemCountWrapper>
+  );
+}

src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx

@@ -0,0 +1,7 @@
+export default function TournamentStartButton() {
+  return (
+    <div>
+      <button>시작하기</button>
+    </div>
+  );
+}

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};
+`;

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 (
+    <S.TournamentStartTextWrapper>
+      <S.SubTitle>선물 등록이 마감되어</S.SubTitle>
+      <S.Title>
+        <S.UserName>{userName}</S.UserName>님을 위한 <br />
+        선물 토너먼트를 시작합니다
+      </S.Title>
+    </S.TournamentStartTextWrapper>
+  );
+}

src/pages/TournamentPage.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import TournamentConatainer from '../components/tournament/intro/TournamentContainer';
+
+const TournamentPage = () => {
+  return (
+    <TournamentPageWrapper>
+      <TournamentConatainer />
+    </TournamentPageWrapper>
+  );
+};
+
+export default TournamentPage;
+
+const TournamentPageWrapper = styled.section`
+  margin: 0 2rem;
+`;

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: '시동훈',
+});

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: <OnBoardingPage />,
       },
+      {
+        path: '/tournament',
+        element: <TournamentPage />,
+      },
     ],
   },
 ]);