[토너먼트] 토너먼트 플로우 화면 퍼블리싱

src/assets/svg/IcExternalGray.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgIcExternalGray = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' {...props}>
+    <path
+      stroke='#ACA7A9'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      d='M7.25 2h-3A2.25 2.25 0 0 0 2 4.25v7.5A2.25 2.25 0 0 0 4.25 14h7.5A2.25 2.25 0 0 0 14 11.75v-3M10.25 2H14m0 0v3.375M14 2 7.624 8.375'
+    />
+  </svg>
+);
+export default SvgIcExternalGray;

src/assets/svg/IcRefreshGray.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcRefreshGray = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <path
+      stroke='#ACA7A9'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      d='M18.869 16a8.01 8.01 0 0 1-6.94 4 8.01 8.01 0 0 1-7.428-5m11.494 0H20v4M5.073 8a8.01 8.01 0 0 1 6.939-4 8.01 8.01 0 0 1 7.428 5M8.005 9H4V5'
+    />
+  </svg>
+);
+export default SvgIcRefreshGray;

src/assets/svg/index.ts

@@ -17,6 +17,7 @@ export { default as IcDown } from './IcDown';
 export { default as IcEdit2 } from './IcEdit2';
 export { default as IcEdit } from './IcEdit';
 export { default as IcExternal } from './IcExternal';
+export { default as IcExternalGray } from './IcExternalGray';
 export { default as IcGift } from './IcGift';
 export { default as IcGroup } from './IcGroup';
 export { default as IcImg } from './IcImg';
@@ -30,13 +31,14 @@ export { default as IcPlus } from './IcPlus';
 export { default as IcPlusImage } from './IcPlusImage';
 export { default as IcPlusImageFinal } from './IcPlusImageFinal';
 export { default as IcRefresh } from './IcRefresh';
+export { default as IcRefreshGray } from './IcRefreshGray';
 export { default as IcRight } from './IcRight';
 export { default as IcSettings } from './IcSettings';
 export { default as IcUnselectedCalender } from './IcUnselectedCalender';
 export { default as IcUnselectedClock } from './IcUnselectedClock';
 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 Logotype } from './Logotype';
 export { default as Vite } from './Vite';

src/components/common/Button/Next/BtnNext.style.ts

@@ -9,7 +9,8 @@ export const Wrapper = styled.button`
 
   background-color: ${({ theme: { colors } }) => colors.G_02};
   color: ${({ theme: { colors } }) => colors.G_07};
-  border-color: ${({ theme: { colors } }) => colors.G_07};
+  border: none;
+  /* border-color: ${({ theme: { colors } }) => colors.G_07}; */
 
   ${({ theme: { fonts } }) => fonts.body_09}
 

src/components/common/Header.tsx

@@ -1,5 +1,10 @@
+import styled from 'styled-components';
+
 function Header() {
-  return <div>Header</div>;
+  return <HeaderWrapper>Header</HeaderWrapper>;
 }
 
 export default Header;
+const HeaderWrapper = styled.div`
+  height: 5.6rem;
+`;

src/components/tournament/intro/TournamentContainer.tsx

@@ -4,9 +4,11 @@ import * as S from './TournamentContatiner.style';
 import { Svg3Dicons } from '../../../assets/svg';
 import TournamentStartButton from './tournamentStartButton/TournamentStartButton';
 import { useState } from 'react';
+
 import TournamentFlowContainer from '../TournamentFlowContainer';
 
 const TournamentContainer = () => {
+
   const [showTournamentContainer, setShowTournamentContainer] = useState(true);
 
   const handleStartClick = () => {
@@ -28,6 +30,8 @@ const TournamentContainer = () => {
       {!showTournamentContainer && <TournamentFlowContainer />}
     </>
   );
+
 };
 
 export default TournamentContainer;
+

src/components/tournament/tournamentFlow/TournamentFlowContainer.style.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const TournamentCardWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+`;

src/components/tournament/tournamentFlow/TournamentFlowContainer.tsx

@@ -0,0 +1,18 @@
+import TournamentCard from './TournamentCard/TournamentCard';
+import TournamentFooter from './tournamentFooter/TournamentFooter';
+import TournamentTitle from './tournamentTitle/TournamentTitle';
+import { TournamentCardWrapper } from './TournamentFlowContainer.style';
+
+const TournamentFlowContainer = () => {
+  return (
+    <>
+      <TournamentTitle />
+      <TournamentCardWrapper>
+        <TournamentCard /> <TournamentCard />
+      </TournamentCardWrapper>
+      <TournamentFooter />
+    </>
+  );
+};
+
+export default TournamentFlowContainer;

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

@@ -3,26 +3,39 @@ import styled from 'styled-components';
 interface TournamentCardWrapperProps {
   isClicked: boolean;
 }
+export const Wrapper = styled.div``;
+export const LinkIconWrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })}
+
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 9.9rem;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.white};
+`;
 
 export const SelectWrapper = styled.div<{ isClicked: boolean }>`
   display: ${({ isClicked }) => (isClicked ? 'flex' : 'none')};
-  width: 5rem;
+  justify-content: center;
+  align-items: center;
   position: absolute;
+
+  width: 5rem;
   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;
+
+  width: 16rem;
   border: ${({ isClicked }) =>
     isClicked ? '3px solid var(--Pink-P-06, #FF2176)' : '3px solid var(--Gray-G-02, #ebe9ea)'};
+  border-radius: 12px;
   background: ${({ theme }) => theme.colors.white};
   cursor: pointer;
 
@@ -44,6 +57,8 @@ export const Title = styled.p`
 
 export const Price = styled.p`
   margin-bottom: 1.2rem;
+  ${({ theme }) => theme.fonts.caption_02};
+  color: ${({ theme }) => theme.colors.G_09};
 `;
 
 export const TournamentImgWrapper = styled.div`

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import exampleItemImg from '../../../../assets/img/Rectangle.png';
 import * as S from './TournamentCard.style';
-import { Logo } from '../../../../assets/svg';
+import { IcExternalGray, IcRefreshGray, Logo } from '../../../../assets/svg';
 
 const TournamentCard = () => {
   const [isClicked, setIsClicked] = useState(false);
@@ -15,7 +15,7 @@ const TournamentCard = () => {
   };
 
   return (
-    <>
+    <S.Wrapper>
       <S.TournamentCardWrapper isClicked={isClicked} onClick={handleClick}>
         <S.SelectWrapper isClicked={isClicked}>
           <Logo />
@@ -25,16 +25,18 @@ const TournamentCard = () => {
         </S.TournamentImgWrapper>
 
         <S.ItemInfo>
-          <S.Title>임영웅 콘서트 Gold열</S.Title>
+          <S.Title>CHANEL 22 MINI 핸드백</S.Title>
           <S.Price>{formatPrice(8130000)}원</S.Price>
           {/* 보러가기 컴포넌트 분리할까 말까 링크있는 
     아이템이면 생성 조건 렌더링 */}
         </S.ItemInfo>
       </S.TournamentCardWrapper>
-    </>
+      <S.LinkIconWrapper>
+        <IcExternalGray style={{ width: '1.6rem' }} />
+        더보기
+      </S.LinkIconWrapper>
+    </S.Wrapper>
   );
 };
 
 export default TournamentCard;
-
-

src/components/tournament/tournamentFlow/tournamentFooter/TournamentFooter.style.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const TournamentFooterWrapper = styled.footer`
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  align-items: center;
+
+  width: 37.5rem;
+  bottom: 0;
+  padding: 2rem;
+  left: 50%;
+  transform: translate(-50%);
+`;
+
+export const Btnpre = styled.button`
+  ${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })}
+
+  height: 4.4rem;
+  padding: 1rem 1.1rem 1rem 0rem;
+
+  border: none;
+  border-radius: 9.9rem;
+  background-color: ${({ theme }) => theme.colors.white};
+`;

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

@@ -1,8 +1,18 @@
+import { IcLeft } from '../../../../assets/svg';
+import BtnNext from '../../../common/Button/Next/BtnNext';
+import * as S from './TournamentFooter.style';
+
 const TournamentFooter = () => {
   return (
-    <div>
-      <></>
-    </div>
+    <>
+      <S.TournamentFooterWrapper>
+        <S.Btnpre>
+          <IcLeft style={{ width: '2.4rem', height: '2.4rem' }} />
+          이전
+        </S.Btnpre>
+        <BtnNext>다음</BtnNext>
+      </S.TournamentFooterWrapper>
+    </>
   );
 };
 

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

@@ -1,5 +1,19 @@
+import { IcRefreshGray } from '../../../../assets/svg';
+import * as S from './TournamernTitle.style';
+
 const TournamentTitle = () => {
-  return <div></div>;
+  const round = 1;
+  return (
+    <>
+      {/* 라운드 컴포넌트 */}
+      <S.Title>Round {round}</S.Title>
+      <S.SetCount>1/6</S.SetCount>
+      {/* 세트 수 현재 상황 */}
+      <S.RefreshWrapper>
+        <IcRefreshGray />
+      </S.RefreshWrapper>
+    </>
+  );
 };
 
 export default TournamentTitle;

src/components/tournament/tournamentFlow/tournamentTitle/TournamernTitle.style.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Title = styled.p`
+  ${({ theme }) => theme.fonts.suit};
+  font-size: 3.4rem;
+  color: ${({ theme }) => theme.colors.P_06};
+`;
+
+export const SetCount = styled.p`
+  margin-bottom: 4rem;
+  font-size: 1.8rem;
+  color: ${({ theme }) => theme.colors.G_05};
+  ${({ theme }) => theme.fonts.body_02};
+`;
+
+export const RefreshWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  width: 2.4rem;
+`;

src/pages/TournamentOngoing.tsx

@@ -1,5 +1,7 @@
+
 import TournamentFlowContainer from '../components/tournament/TournamentFlowContainer';
 
+
 const TournamentOngoing = () => {
   return (
     <>

src/style/theme.ts

@@ -166,6 +166,13 @@ const fonts = {
     font-weight: 400;
     line-height: 150%;
   `,
+  suit: css`
+    font-family: 'SUIT';
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 150%;
+  `,
 };
 
 const theme = { mixin, colors, fonts };