[토너먼트] 토너먼트 라운딩 카드 제작 완료 (#59)

* feat: 토너먼트 카드 스타일 퍼블리싱 구현

* chore: 문서 삭제 및 이미지 추가

* style: 타이틀 높이 지정

* feat: 숫자 천 단위 콤마 적용

* feat: 토너먼트 카드 클릭시 테두리 변경

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

* feat: router 구현

* feat: 토너먼트 타이틀 컴포넌트

src/assets/svg/Logo.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 51 42' {...props}>
+    <path
+      fill='#FF2176'
+      d='M19.148 28.529c2.39-5.442 3.541-13.521 3.294-18.008-.215-3.202-1.353-7.06-4.305-9.045C16.45.306 14.485-.106 12.517.022 8.411.225 5.526 3.808 4.666 7.4c-1.353 5.627.384 11.308 4.107 15.41.776.857 1.62 1.596 2.517 2.234-2.29 5.552-6.504 5.235-8.86 4.578L0 38.018c8.322 3.202 16.182-2.874 19.148-9.49M11.25 14.505c-.15-2.318-.12-3.829.472-5.175.592-1.35 1.627-1.356 2.132-.138.499 1.2.476 3.012.332 4.655a43.4 43.4 0 0 1-1.108 6.093c-1.038-1.552-1.684-3.384-1.828-5.435'
+    />
+    <path
+      fill='#FF2176'
+      d='M22.273 35.694c3 3.078 7.117 4.932 11.25 5.527 5.461.779 11.228-.047 15.89-3.459L44.21 30.85c-3.156 2.496-8.168 2.703-11.976 1.527-1.622-.562-3.382-1.624-4.47-2.958 5.85.174 12.498-1.1 17.88-5.55 3.574-2.96 6.019-7.64 5.197-12.591-.838-4.461-4.323-7.893-8.543-9.103-9.262-2.373-18.361 5.136-21.94 13.18-1.223 2.58-2.547 7.785-2.124 11.491.369 3.222 1.822 6.597 4.04 8.852zm7.024-19.138c2.138-3.184 6.096-6.409 9.9-6.225 1.188.117 2.075.424 2.744 1.42 1.353 2.015-.256 4.495-1.862 6.222-1.214 1.263-2.76 2.253-4.284 3.181-3.1 1.892-6.378 2.774-9.388 3.068.216-2.7 1.467-5.5 2.89-7.666'
+    />
+  </svg>
+);
+export default SvgLogo;

src/assets/svg/index.ts

@@ -32,5 +32,6 @@ export { default as IcSettings } from './IcSettings';
 export { default as IcUp } from './IcUp';
 export { default as IcUser } from './IcUser';
 export { default as Logotype } from './Logotype';
+export { default as Logo } from './Logo';
 export { default as LogoSweet } from './LogoSweet';
 export { default as Vite } from './Vite';

src/components/TournamentFlowContainer.tsx

@@ -0,0 +1,12 @@
+import TournamentCard from './tournament/tournamentFlow/tournamentCard/TournamentCard';
+import TournamentFooter from './tournament/tournamentFlow/tournamentFooter/TournamentFooter';
+const TournamentFlowContainer = () => {
+  return (
+    <>
+      <TournamentCard />
+      <TournamentFooter />
+    </>
+  );
+};
+
+export default TournamentFlowContainer;

src/components/tournament/tournamentFlow/tournamentCard/TournamentCard.style.ts

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+interface TournamentCardWrapperProps {
+  isClicked: boolean;
+}
+
+export const SelectWrapper = styled.div<{ isClicked: boolean }>`
+  display: ${({ isClicked }) => (isClicked ? 'flex' : 'none')};
+  width: 5rem;
+  position: absolute;
+  top: -12%;
+  left: 50%;
+  justify-content: center;
+  align-items: center;
+  transform: translateX(-50%);
+`;
+
+export const TournamentCardWrapper = styled.div<TournamentCardWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  width: 16rem;
+  position: relative;
+  border-radius: 12px;
+  border: ${({ isClicked }) =>
+    isClicked ? '3px solid var(--Pink-P-06, #FF2176)' : '3px solid var(--Gray-G-02, #ebe9ea)'};
+  background: ${({ theme }) => theme.colors.white};
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    border-radius: 9px 9px 0 0;
+  }
+`;
+
+export const ItemInfo = styled.div`
+  padding: 0 1.2rem;
+`;
+
+export const Title = styled.p`
+  height: 4.2rem;
+  word-break: keep-all;
+  ${({ theme }) => theme.fonts.body_09};
+`;
+
+export const Price = styled.p`
+  margin-bottom: 1.2rem;
+`;
+
+export const TournamentImgWrapper = styled.div`
+  margin-bottom: 1.2rem;
+`;

src/components/tournament/tournamentFlow/tournamentCard/TournamentCard.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import exampleItemImg from '../../../../assets/img/Rectangle.png';
+import * as S from './TournamentCard.style';
+import { Logo } from '../../../../assets/svg';
+
+const TournamentCard = () => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const formatPrice = (price: number) => {
+    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  return (
+    <>
+      <S.TournamentCardWrapper isClicked={isClicked} onClick={handleClick}>
+        <S.SelectWrapper isClicked={isClicked}>
+          <Logo />
+        </S.SelectWrapper>
+        <S.TournamentImgWrapper>
+          <img src={exampleItemImg} alt='제품이미지' />
+        </S.TournamentImgWrapper>
+
+        <S.ItemInfo>
+          <S.Title>임영웅 콘서트 Gold열</S.Title>
+          <S.Price>{formatPrice(8130000)}원</S.Price>
+          {/* 보러가기 컴포넌트 분리할까 말까 링크있는 
+    아이템이면 생성 조건 렌더링 */}
+        </S.ItemInfo>
+      </S.TournamentCardWrapper>
+    </>
+  );
+};
+
+export default TournamentCard;
+
+

src/components/tournament/tournamentFlow/tournamentFooter/TournamentFooter.tsx

@@ -0,0 +1,9 @@
+const TournamentFooter = () => {
+  return (
+    <div>
+      <></>
+    </div>
+  );
+};
+
+export default TournamentFooter;

src/components/tournament/tournamentFlow/tournamentTitle/TournamentTitle.tsx

@@ -0,0 +1,5 @@
+const TournamentTitle = () => {
+  return <div></div>;
+};
+
+export default TournamentTitle;

src/pages/TournamentOngoing.tsx

@@ -0,0 +1,11 @@
+import TournamentFlowContainer from '../components/TournamentFlowContainer';
+
+const TournamentOngoing = () => {
+  return (
+    <>
+      <TournamentFlowContainer />
+    </>
+  );
+};
+
+export default TournamentOngoing;

src/router/Router.tsx

@@ -5,8 +5,10 @@ import Layout from '../layouts/Layout';
 import GiftHomeDetailFriends from '../pages/GiftHomeDetail/GiftHomeDetailFriends';
 import GiftHomeDetail2030 from '../pages/GiftHomeDetail/GiftHomeDetail2030';
 import OnBoardingPage from '../pages/OnBoardingPage';
+import TournamentOngoing from '../pages/TournamentOngoing';
 import TournamentPage from '../pages/TournamentPage';
 
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -34,6 +36,11 @@ const router = createBrowserRouter([
         path: '/onboarding',
         element: <OnBoardingPage />,
       },
+      {
+
+        path: '/tournamentPro',
+        element: <TournamentOngoing />,
+        },
       {
         path: '/tournament',
         element: <TournamentPage />,