[Feat] 토너먼트 페이지 #1083

[Feat] 토너먼트 페이지 api#1083
42organization · Nov 15, 2023 · 65cdde0 · 65cdde0
2 parents 929e2db + 18291c6
commit 65cdde0
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 30 deletions.
diff --git a/components/modal/ModalButton.tsx b/components/modal/ModalButton.tsx
@@ -2,7 +2,7 @@ import LoadingButton from 'components/modal/LoadingButton';
 import styles from 'styles/modal/Modal.module.scss';
 
 type ButtonProps = {
-  style: 'positive' | 'negative';
+  style: 'positive' | 'negative' | 'close';
   value: string;
   form?: string;
   isLoading?: boolean;

diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx
@@ -7,7 +7,7 @@ import {
   ModalButtonContainer,
   ModalButton,
 } from 'components/modal/ModalButton';
-import styles from 'styles/modal/event/AnnouncementModal.module.scss';
+import styles from 'styles/modal/event/TournamentRegistryModal.module.scss';
 import 'react-quill/dist/quill.bubble.css';
 
 const Quill = dynamic(() => import('react-quill'), {
@@ -24,6 +24,7 @@ export default function TournamentRegistryModal({
   endTime,
 }: TournamentInfo) {
   const setModal = useSetRecoilState(modalState);
+  const Date = startTime.toString().split(':').slice(0, 2).join(':');
 
   const registTournament = () => {
     console.log('토너먼트에 등록하시겠습니까.');
@@ -35,8 +36,20 @@ export default function TournamentRegistryModal({
 
   return (
     <div className={styles.container}>
+      <div className={styles.closeButtonContainer}>
+        <ModalButtonContainer>
+          <ModalButton
+            onClick={closeModalButtonHandler}
+            value='X'
+            style='close'
+          />
+        </ModalButtonContainer>
+      </div>
       <div className={styles.title}>{title}</div>
-      <div className={styles.title}>{startTime.toString()}</div>
+      <div className={styles.tournamentInfo}>
+        <div className={styles.startTime}>{Date}</div>
+        <div className={styles.participants}>현재인원 / 최대인원</div>
+      </div>
       <Quill
         className={styles.quillViewer}
         readOnly={true}
@@ -45,13 +58,6 @@ export default function TournamentRegistryModal({
         theme='bubble'
       />
       <div>
-        <ModalButtonContainer>
-          <ModalButton
-            onClick={closeModalButtonHandler}
-            value='나가기'
-            style='positive'
-          />
-        </ModalButtonContainer>
         <ModalButtonContainer>
           <ModalButton
             onClick={registTournament}

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -1,4 +1,7 @@
+import { useSetRecoilState } from 'recoil';
+import { Modal } from 'types/modalTypes';
 import { TournamentInfo } from 'types/tournamentTypes';
+import { modalState } from 'utils/recoil/modal';
 import styles from 'styles/tournament/TournamentCard.module.scss';
 
 export default function TournamentCard({
@@ -11,8 +14,28 @@ export default function TournamentCard({
   startTime,
   endTime,
 }: TournamentInfo) {
+  const setModal = useSetRecoilState<Modal>(modalState);
+
+  const openTournamentInfoModal = () => {
+    setModal({
+      modalName: 'TOURNAMENT-REGISTRY',
+      tournamentInfo: {
+        tournamentId: tournamentId,
+        title: title,
+        contents: contents,
+        startTime: startTime,
+        status: status,
+        type: type,
+        endTime: endTime,
+      },
+    });
+  };
+
   return (
-    <div className={styles.tournamentCardContainer}>
+    <div
+      className={styles.tournamentCardContainer}
+      onClick={openTournamentInfoModal}
+    >
       <div className={styles.text}>{title}</div>
     </div>
   );

diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -86,27 +86,27 @@ const tempData: TempData = {
 export default function Tournament() {
   const setError = useSetRecoilState(errorState);
 
-  const openTorunamentInfo = useQuery<TournamentInfo>(
-    'openTorunamentInfo',
-    () =>
-      instance
-        .get('pingpong/tournaments?page=*&type=*&status=진행중')
-        .then((res) => res.data),
-    { retry: 1, staleTime: 60000 /* 60초 */ }
-  );
+  // const openTorunamentInfo = useQuery<TournamentInfo>(
+  //   'openTorunamentInfo',
+  //   () =>
+  //     instance
+  //       .get('pingpong/tournaments?page=*&type=*&status=진행중')
+  //       .then((res) => res.data),
+  //   { retry: 1, staleTime: 60000 /* 60초 */ }
+  // );
 
-  const waitTournamentInfo = useQuery<TournamentInfo>(
-    'waitTournamentInfo',
-    () =>
-      instance
-        .get('pingpong/tournaments?page=*&type=*&status=예정')
-        .then((res) => res.data),
-    { retry: 1, staleTime: 60000 /* 60초 */ }
-  );
+  // const waitTournamentInfo = useQuery<TournamentInfo>(
+  //   'waitTournamentInfo',
+  //   () =>
+  //     instance
+  //       .get('pingpong/tournaments?page=*&type=*&status=예정')
+  //       .then((res) => res.data),
+  //   { retry: 1, staleTime: 60000 /* 60초 */ }
+  // );
 
-  if (openTorunamentInfo.isError || waitTournamentInfo.isError) {
-    setError('junhjeon');
-  }
+  // if (openTorunamentInfo.isError || waitTournamentInfo.isError) {
+  //   setError('junhjeon');
+  // }
 
   return (
     <div className={styles.pageWrap}>

diff --git a/styles/common.scss b/styles/common.scss
@@ -331,6 +331,7 @@ $vip-background: linear-gradient(
     justify-content: center;
     align-items: center;
   }
+
   .negative {
     input {
       margin-right: 1rem;
@@ -352,6 +353,20 @@ $vip-background: linear-gradient(
       );
     }
   }
+  .close {
+    input {
+      padding: 0.5rem 1rem;
+      color: rgba(255, 255, 255, 1);
+      cursor: pointer;
+      background: linear-gradient(
+          180deg,
+          #c66bf2 0%,
+          rgba(96, 6, 138, 0.52) 100%
+      );
+      border: 0;
+      border-radius: 0.625rem;
+    }
+  }
 }
 
 @mixin txtColor($color: black) {

diff --git a/styles/modal/event/TournamentRegistryModal.module.scss b/styles/modal/event/TournamentRegistryModal.module.scss
@@ -0,0 +1,68 @@
+@import 'styles/common.scss';
+
+.container {
+  @include modalContainer('SKYPINK');
+  width: 80vw;
+  max-width: 22rem;
+}
+
+.title {
+  @include modalTitle;
+  padding-bottom: 1rem;
+  color: rgba(18, 23, 37, 1);
+}
+
+.startTime {
+  font-size: 0.7rem;
+  color: rgba(18, 23, 37, 1);
+}
+
+.quillViewer {
+  width: 100%;
+  min-width: 10rem;
+  max-width: 15rem;
+  height: 100%;
+  max-height: 19rem;
+  padding-bottom: 1rem;
+  overflow-y: scroll;
+  color: rgba(18, 23, 37, 1);
+}
+
+.quillViewer::-webkit-scrollbar {
+  display: inherit;
+  width: 5px;
+  height: 1rem;
+}
+
+.quillViewer::-webkit-scrollbar-thumb {
+  background: white;
+  border-radius: 10px;
+}
+
+.checkBox {
+  margin-bottom: 0.5rem;
+  input {
+    position: relative;
+    top: 2px;
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin: 0 0.5rem 0 0;
+    cursor: pointer;
+  }
+  label {
+    display: inline-block;
+    color: white;
+    cursor: pointer;
+  }
+}
+
+.closeButtonContainer {
+  display: flex;
+  margin-left: auto;
+}
+
+.tournamentInfo {
+  justify-content: center;
+  align-items: center;
+}