diff --git a/components/modal/ModalButton.tsx b/components/modal/ModalButton.tsx index c248c8e0f..39a6a0250 100644 --- 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 index 6485a6c45..50595047c 100644 --- 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 (
+
+ + + +
{title}
-
{startTime.toString()}
+
+
{Date}
+
현재인원 / 최대인원
+
- - - (modalState); + + const openTournamentInfoModal = () => { + setModal({ + modalName: 'TOURNAMENT-REGISTRY', + tournamentInfo: { + tournamentId: tournamentId, + title: title, + contents: contents, + startTime: startTime, + status: status, + type: type, + endTime: endTime, + }, + }); + }; + return ( -
+
{title}
); diff --git a/pages/tournament.tsx b/pages/tournament.tsx index 1cecb53b2..afa0a6735 100644 --- 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( - 'openTorunamentInfo', - () => - instance - .get('pingpong/tournaments?page=*&type=*&status=진행중') - .then((res) => res.data), - { retry: 1, staleTime: 60000 /* 60초 */ } - ); + // const openTorunamentInfo = useQuery( + // 'openTorunamentInfo', + // () => + // instance + // .get('pingpong/tournaments?page=*&type=*&status=진행중') + // .then((res) => res.data), + // { retry: 1, staleTime: 60000 /* 60초 */ } + // ); - const waitTournamentInfo = useQuery( - 'waitTournamentInfo', - () => - instance - .get('pingpong/tournaments?page=*&type=*&status=예정') - .then((res) => res.data), - { retry: 1, staleTime: 60000 /* 60초 */ } - ); + // const waitTournamentInfo = useQuery( + // '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 (
diff --git a/styles/common.scss b/styles/common.scss index f2f27944d..ee80234fd 100644 --- 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 new file mode 100644 index 000000000..92f9fe936 --- /dev/null +++ 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; +}