feat/토너먼트-페이지#1073

<!--
  PR 작성 가이드
  1. 겸손한 어조를 사용하여 상대방이 기분나쁘지 않도록 노력할 것.
  2. 명확하게 질문하고 명확하게 답변할 것.
  3. 새로운 모듈 설치시 PR message에 기재할 것.
  4. PR 올리기전에 branch 반드시 확인할 것.
 -->
 ## 📌 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
  -  토너먼트 페이지와 토너먼트 모달샘플을 만들었습니다.

 ## 💻 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
  - /tournament 페이지 생성
  - 메인페이지의 /tournament로 가는 section 생성
  - tournament의 정보를 보여주고 신청을 할 수 있는 모달 생성

components/main/Section.tsx

@@ -17,6 +17,7 @@ export default function Section({ sectionTitle, path }: SectionProps) {
   const pathCheck: pathType = {
     game: <GameResult />,
     rank: <RankListMain isMain={true} season={0} />,
+    tournament: <></>,
   };
 
   return (

components/modal/ModalProvider.tsx

@@ -6,6 +6,7 @@ import AdminModal from 'components/modal/modalType/AdminModal';
 import NormalModal from 'components/modal/modalType/NormalModal';
 import StoreModal from 'components/modal/modalType/StoreModal';
 import styles from 'styles/modal/Modal.module.scss';
+import TournamentModal from './modalType/TournamentModal';
 
 export default function ModalProvider() {
   const [{ modalName }, setModal] = useRecoilState(modalState);
@@ -43,6 +44,8 @@ export default function ModalProvider() {
           <StoreModal />
         ) : modalType === 'ADMIN' ? (
           <AdminModal />
+        ) : modalType === 'TOURNAMENT' ? (
+          <TournamentModal />
         ) : null}
       </div>
     )

components/modal/modalType/TournamentModal.tsx

@@ -0,0 +1,16 @@
+import { useRecoilValue } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
+import TournamentRegistryModal from '../tournament/TournamentRegistryModal';
+
+export default function TournamentModal() {
+  const { modalName, tournamentInfo } = useRecoilValue(modalState);
+
+  const content: { [key: string]: JSX.Element | null } = {
+    'TOURNAMENT-REGISTRY': tournamentInfo ? (
+      <TournamentRegistryModal {...tournamentInfo} />
+    ) : null,
+  };
+
+  if (!modalName) return null;
+  return content[modalName];
+}

components/modal/tournament/TournamentRegistryModal.tsx

@@ -0,0 +1,67 @@
+import dynamic from 'next/dynamic';
+import { useSetRecoilState } from 'recoil';
+import { TournamentInfo } from 'types/modalTypes';
+import { QUILL_FORMATS } from 'types/quillTypes';
+import { modalState } from 'utils/recoil/modal';
+import {
+  ModalButtonContainer,
+  ModalButton,
+} from 'components/modal/ModalButton';
+import styles from 'styles/modal/event/AnnouncementModal.module.scss';
+import 'react-quill/dist/quill.bubble.css';
+
+const Quill = dynamic(() => import('react-quill'), {
+  ssr: false,
+  loading: () => <p>Loading ...</p>,
+});
+
+export default function TournamentRegistryModal({
+  title,
+  contents,
+  startDate,
+  status,
+  type,
+  winnerId,
+  winnerImage,
+  endDate,
+}: TournamentInfo) {
+  const setModal = useSetRecoilState(modalState);
+
+  const registTournament = () => {
+    console.log('토너먼트에 등록하시겠습니까.');
+  };
+
+  const closeModalButtonHandler = () => {
+    setModal({ modalName: null });
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.title}>{startDate}</div>
+      <Quill
+        className={styles.quillViewer}
+        readOnly={true}
+        formats={QUILL_FORMATS}
+        value={contents}
+        theme='bubble'
+      />
+      <div>
+        <ModalButtonContainer>
+          <ModalButton
+            onClick={closeModalButtonHandler}
+            value='나가기'
+            style='positive'
+          />
+        </ModalButtonContainer>
+        <ModalButtonContainer>
+          <ModalButton
+            onClick={registTournament}
+            value='등록'
+            style='positive'
+          />
+        </ModalButtonContainer>
+      </div>
+    </div>
+  );
+}

components/rank/topRank/RankListMain.tsx

@@ -53,8 +53,10 @@ export default function RankListMain({ isMain, season }: RankListMainProps) {
   ));
 
   return (
-    <div>
-      <div className={`${styles.bangContainer}`}>{bangElements}</div>
+    <>
+      {!isMain && (
+        <div className={`${styles.bangContainer}`}>{bangElements}</div>
+      )}
       <div className={`${styles.mainContainer} ${isMain && styles.isMain}`}>
         {rank !== undefined &&
           rank.map((item: userImages, index: number) => (
@@ -65,7 +67,7 @@ export default function RankListMain({ isMain, season }: RankListMainProps) {
             />
           ))}
       </div>
-    </div>
+    </>
   );
 }
 

components/tournament/TournamentCard.tsx

@@ -0,0 +1,20 @@
+import { TournamentInfo } from 'types/modalTypes';
+import styles from 'styles/tournament/TournamentCard.module.scss';
+
+export default function TournamentCard({
+  tournametId,
+  title,
+  contents,
+  startDate,
+  status,
+  type,
+  winnerId,
+  winnerImage,
+  endDate,
+}: TournamentInfo) {
+  return (
+    <div className={styles.tournamentCardContainer}>
+      <div className={styles.text}>{title}</div>
+    </div>
+  );
+}

pages/index.tsx

@@ -9,6 +9,9 @@ const Home: NextPage = () => {
       <div className={styles.search}>
         <SearchBar />
       </div>
+      <div className={styles.tournament}>
+        <Section path='tournament' sectionTitle={'Tournament'} />
+      </div>
       <div className={styles.rank}>
         <Section path='rank' sectionTitle={'Ranking'} />
       </div>

pages/tournament.tsx

@@ -0,0 +1,73 @@
+import { useSetRecoilState } from 'recoil';
+import { Modal } from 'types/modalTypes';
+import { modalState } from 'utils/recoil/modal';
+import TournamentCard from 'components/tournament/TournamentCard';
+import styles from 'styles/tournament/TournamentContainer.module.scss';
+
+// 내부의 토너먼트 보여주는 부분만 Component화 하면될까? 다른곳에서도 쓰일까?
+// 진행중인 토너먼트의 Bracket을 보여주는 부분도 다른곳에서도 쓸수있지않나?
+const tempData = {
+  tournaments: [
+    {
+      tournametId: 5,
+      title: '5회 루키 토너먼트',
+      contents: '블라블라',
+      startDate: '2023-11-11',
+      status: '종료',
+      type: 'rookie',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-11',
+    },
+    {
+      tournametId: 6,
+      title: '6회 마스터 토너먼트',
+      contents: '블라블라 하이하이',
+      startDate: '2023-11-12',
+      status: '진행중',
+      type: 'master',
+      winnerId: 'hannkim',
+      winnerImage: '',
+      endDate: '2023-11-12',
+    },
+  ],
+  totalPage: 100,
+};
+
+export default function Tournament() {
+  const setModal = useSetRecoilState<Modal>(modalState);
+
+  const handleTournament = () => {
+    setModal({
+      modalName: 'TOURNAMENT-REGISTRY',
+      tournamentInfo: {
+        tournametId: 5,
+        title: '5회 루키 토너먼트',
+        contents: '블라블라',
+        startDate: '2023-11-11',
+        status: '종료',
+        type: 'rookie',
+        winnerId: 'hannkim',
+        winnerImage: '',
+        endDate: '2023-11-11',
+      },
+    });
+  };
+  return (
+    <div className={styles.pageWrap}>
+      <h1 className={styles.title}>Tournament</h1>
+      <div className={styles.tournamentContainer}>
+        <div className={styles.tournamentTextWait}> 대기중인 토너먼트 </div>
+        <div className={styles.waitTournamentBox}>
+          {tempData.tournaments.map((tournament, index) => (
+            <TournamentCard key={index} {...tournament} />
+          ))}
+        </div>
+        <div className={styles.tournamentTextOpen}> 진행중인 토너먼트 </div>
+        <div className={styles.openTournamentBox}>
+          <div className={styles.tournamentText}> 무언가 토너먼트의 사진 </div>
+        </div>
+      </div>
+    </div>
+  );
+}

styles/main/Section.module.scss

@@ -2,7 +2,6 @@
 
 .sectionWrap {
   position: relative;
-  z-index: 1;
   margin-top: 2.5rem;
   &.mainRank {
     margin-top: 1rem;
@@ -23,6 +22,7 @@
       align-items: center;
     }
     > button {
+      z-index: 10;
       width: 1.563rem;
       height: 1.563rem;
       color: #ffffff;

styles/rank/RankListMain.module.scss

@@ -1,5 +1,9 @@
 @import 'styles/common.scss';
 
+.RankContainer {
+  z-index: 0;
+}
+
 .mainContainer {
   position: relative;
   top: 1.5rem;
@@ -11,7 +15,6 @@
   align-items: end;
   &.isMain {
     height: 15.5rem;
-    margin-top: 7.5rem;
   }
 }
 
@@ -82,8 +85,9 @@
 
 .bangContainer {
   display: flex;
-  justify-content: space-around;
   margin-top: -7.5rem;
+  pointer-events: none;
+  justify-content: space-around;
 }
 
 .bang {

styles/tournament/TournamentCard.module.scss

@@ -0,0 +1,16 @@
+.tournamentCardContainer {
+  display: flex;
+  width: 100%;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: black;
+  border: 2px solid black;
+  border-radius: 0.3rem;
+
+  .text {
+    overflow: hidden;
+    color: white;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

styles/tournament/TournamentContainer.module.scss

@@ -0,0 +1,67 @@
+@import 'styles/common.scss';
+
+.pageWrap {
+  @include pageWrap;
+}
+
+.title {
+  @include pageTitle;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.tournamentContainer {
+  display: flex;
+  height: 60vh;
+  flex-direction: column;
+  padding: 1rem 1rem 0rem;
+  overflow-y: scroll;
+  background: #d4b8f2;
+  border-radius: $small-radius;
+}
+
+.waitTournamentBox {
+  display: flex;
+  width: 100%;
+  flex: 5;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem 1rem 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  background: rgba(112, 0, 255, 0.17);
+  border: 2px solid #c67dff;
+  border-radius: 0.3rem;
+}
+
+.openTournamentBox {
+  display: flex;
+  width: 100%;
+  flex: 15;
+  flex-direction: column;
+  padding: 0.2rem 0 0.2rem 0.2rem;
+  margin-bottom: 1rem;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  background: rgba(112, 0, 255, 0.17);
+  border: 2px solid #c67dff;
+  border-radius: 0.3rem;
+}
+
+.tournamentTextWait {
+  display: flex;
+  flex: 1;
+  font-weight: 700;
+  color: black;
+  text-align: center; /* 텍스트를 가로로 중앙에 정렬 */
+}
+
+.tournamentTextOpen {
+  display: flex;
+  flex: 1;
+  padding-top: 1rem;
+  font-weight: 700;
+  color: black;
+  text-align: center; /* 텍스트를 가로로 중앙에 정렬 */
+}