Merge branch 'main' into feat/관리자-토너먼트-페이지-레이아웃#1075

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-record.tsx

@@ -0,0 +1,24 @@
+import styles from 'styles/tournament-record/TournamentRecord.module.scss';
+
+export default function TournamentRecord() {
+  return (
+    <div className={styles.pageWrap}>
+      <h1 className={styles.title}>명예의 전당</h1>
+      <div className={styles.leagueButtonWrapper}>
+        <button>Rookie</button>
+        <button>Master</button>
+        <button>Custom</button>
+      </div>
+      <div className={styles.winnerImageContainer}>우승자 이미지들</div>
+      <div className={styles.winnerInfoContainer}>
+        <p className={styles.userId}>cadet2147</p>
+        <p className={styles.gameInfo}>
+          제 5회 정기 토너먼트 루키리그{' '}
+          <span className={styles.highlighted}>우승자</span>
+        </p>
+        <p className={styles.date}>2023.11.11</p>
+      </div>
+      <div className={styles.bracketContainer}></div>
+    </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-record/TournamentRecord.module.scss

@@ -0,0 +1,69 @@
+@import 'styles/common.scss';
+
+.pageWrap {
+  @include pageWrap;
+}
+
+.title {
+  @include pageTitle;
+  display: flex;
+  justify-content: center;
+}
+
+.leagueButtonWrapper {
+  display: flex;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  margin-top: 1.4rem;
+  justify-content: space-between;
+
+  button {
+    font-size: 1rem;
+    font-weight: 400;
+    color: #cbcbcb;
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+.winnerImageContainer {
+  height: 10rem;
+  margin-top: 1.8rem;
+  background-color: rgb(88, 88, 88);
+}
+
+.winnerInfoContainer {
+  font-weight: 500;
+  color: #d591ff;
+  text-align: center;
+
+  p {
+    margin: 0.4rem 0 0;
+  }
+
+  .userId {
+    font-weight: 700;
+    color: white;
+  }
+
+  .gameInfo {
+    font-size: 1rem;
+
+    .highlighted {
+      color: #ffc700;
+    }
+  }
+
+  .date {
+    font-size: 0.8rem;
+  }
+}
+
+.bracketContainer {
+  width: 100%;
+  height: 21.5rem;
+  margin-top: 1rem;
+  background-color: rgba(112, 0, 255, 0.17);
+  border: 1px solid #c67dff;
+  border-radius: 26px;
+}

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