Skip to content

Commit

Permalink
Design, Refactor: 관리자 페이지 디자인 변경 및 리팩토링
Browse files Browse the repository at this point in the history
  • Loading branch information
@navyjeongs
navyjeongs committed Jan 20, 2024
1 parent 3970d1f commit 47d3a35
Showing 1 changed file with 101 additions and 87 deletions.
188 changes: 101 additions & 87 deletions src/pages/contents/[channelLink]/admin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,9 @@ import { parse } from 'cookie';
import { useEffect, useState } from 'react';
import { connectToStomp } from '@config/stomp';
import { Client, StompSubscription } from '@stomp/stompjs';
import { useQuery } from '@tanstack/react-query';
import RoundAlarmHeader from '@components/RoundAlarm/RoundAlarmHeader';
import RoundAlarmBody from '@components/RoundAlarm/RoundAlarmBody';

import { CallAdmin } from '@type/admin';
import { fetchRoundInfo } from '@apis/roundInfo';
import RoundAlarm from '@components/RoundAlarm/RoundAlarm';
interface Props {
role: string;
}
Expand All @@ -27,24 +25,10 @@ const Admin = ({ role }: Props) => {
const router = useRouter();
const [client, setClient] = useState<Client>();

const [curRound, setCurRound] = useState<number>();

const [alramInfo, setAlramInfo] = useState<CallAdmin>();

const { openModal, closeModal } = useModals();

const { data, isSuccess } = useQuery({
queryKey: ['adminRoundList', router.query.channelLink as string],
queryFn: () => {
setCurRound(1);
return fetchRoundInfo(router.query.channelLink as string);
},
});

if (!role) {
router.push('/');
}

useEffect(() => {
const tmpClient = connectToStomp();
tmpClient.activate();
Expand All @@ -56,7 +40,6 @@ const Admin = ({ role }: Props) => {
checkInSubscription = tmpClient.subscribe(
`/match/${router.query.channelLink as string}`,
(data) => {
console.log(data, '소켓');
setAlramInfo(JSON.parse(data.body));
},
);
Expand All @@ -69,58 +52,75 @@ const Admin = ({ role }: Props) => {
}, [router.query.channelLink as string]);

return (
<div>
{' '}
<Container>
<Header>대회 설정</Header>
<BracketContainer>
<AdminButton
onClick={() =>
openModal(Modal, {
onClose: () => closeModal(Modal),
children: <ModifyBracket onClose={() => closeModal(Modal)} />,
})
}
>
대회 관리하기
</AdminButton>
<AdminButton
onClick={() =>
openModal(Modal, {
onClose: () => closeModal(Modal),
children: (
<ModifyChannel
channelLink={router.query.channelLink as string}
onClose={() => closeModal(Modal)}
/>
),
})
}
>
채널 정보 수정하기
</AdminButton>
</BracketContainer>
<Header>대회 알림</Header>
<BracketContainer>
<RoundList>
{data?.roundList.map((ele) => {
return <RoundAlarmHeader liveRound={data.liveRound} curRound={ele} key={ele} />;
})}
</RoundList>
</BracketContainer>
{curRound && <RoundAlarmBody curRound={curRound} alramInfo={alramInfo} />}
</Container>
</div>
<Container>
<BoardSection>
<BoardTitle>대회 설정</BoardTitle>
<BoardContent>
<ChannelSettingContainer>
<ChannelSettingButton
onClick={() =>
openModal(Modal, {
onClose: () => closeModal(Modal),
children: <ModifyBracket onClose={() => closeModal(Modal)} />,
})
}
>
<svg
width='1.5rem'
height='1.5rem'
version='1.1'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 32 32'
>
<path d='M29 4h-9c0-2.209-1.791-4-4-4s-4 1.791-4 4h-9c-0.552 0-1 0.448-1 1v26c0 0.552 0.448 1 1 1h26c0.552 0 1-0.448 1-1v-26c0-0.552-0.448-1-1-1zM16 2c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM28 30h-24v-24h4v3c0 0.552 0.448 1 1 1h14c0.552 0 1-0.448 1-1v-3h4v24z'></path>
<path d='M14 26.828l-6.414-7.414 1.828-1.828 4.586 3.586 8.586-7.586 1.829 1.828z'></path>
</svg>
대회 관리하기
</ChannelSettingButton>
<ChannelSettingButton
onClick={() =>
openModal(Modal, {
onClose: () => closeModal(Modal),
children: (
<ModifyChannel
channelLink={router.query.channelLink as string}
onClose={() => closeModal(Modal)}
/>
),
})
}
>
<svg
width='1.5rem'
height='1.5rem'
version='1.1'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
>
<path d='M16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM20.315 15.404c0.046-0.105 0.112-0.191 0.192-0.257 0.112-0.092 0.251-0.146 0.403-0.147h0.090c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.58-0.879-2.121-1.293-0.879-2.121-0.879h-0.159c-0.11-0.001-0.215-0.028-0.308-0.076-0.127-0.066-0.23-0.172-0.292-0.312-0.003-0.029-0.004-0.059-0.004-0.089-0.024-0.055-0.040-0.111-0.049-0.168 0.020-0.334 0.077-0.454 0.168-0.547l0.062-0.062c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.881-2.122c-0.586-0.585-1.356-0.878-2.122-0.877s-1.536 0.294-2.12 0.879l-0.046 0.046c-0.083 0.080-0.183 0.136-0.288 0.166-0.14 0.039-0.291 0.032-0.438-0.033-0.101-0.044-0.187-0.11-0.253-0.19-0.092-0.112-0.146-0.251-0.147-0.403v-0.090c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879-1.58 0.337-2.121 0.879-0.879 1.293-0.879 2.121v0.159c-0.001 0.11-0.028 0.215-0.076 0.308-0.066 0.127-0.172 0.23-0.312 0.292-0.029 0.003-0.059 0.004-0.089 0.004-0.055 0.024-0.111 0.040-0.168 0.049-0.335-0.021-0.455-0.078-0.548-0.169l-0.062-0.062c-0.586-0.585-1.355-0.878-2.122-0.878s-1.535 0.294-2.122 0.882c-0.585 0.586-0.878 1.355-0.878 2.122s0.294 1.536 0.879 2.12l0.048 0.047c0.080 0.083 0.136 0.183 0.166 0.288 0.039 0.14 0.032 0.291-0.031 0.434-0.006 0.016-0.013 0.034-0.021 0.052-0.041 0.109-0.108 0.203-0.191 0.275-0.11 0.095-0.25 0.153-0.383 0.156h-0.090c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.294-0.879 2.122 0.337 1.58 0.879 2.121 1.293 0.879 2.121 0.879h0.159c0.11 0.001 0.215 0.028 0.308 0.076 0.128 0.067 0.233 0.174 0.296 0.321 0.024 0.055 0.040 0.111 0.049 0.168-0.020 0.334-0.077 0.454-0.168 0.547l-0.062 0.062c-0.585 0.586-0.878 1.356-0.877 2.122s0.294 1.536 0.881 2.122c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.12-0.879l0.047-0.048c0.083-0.080 0.183-0.136 0.288-0.166 0.14-0.039 0.291-0.032 0.434 0.031 0.016 0.006 0.034 0.013 0.052 0.021 0.109 0.041 0.203 0.108 0.275 0.191 0.095 0.11 0.153 0.25 0.156 0.383v0.092c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879 1.58-0.337 2.121-0.879 0.879-1.293 0.879-2.121v-0.159c0.001-0.11 0.028-0.215 0.076-0.308 0.067-0.128 0.174-0.233 0.321-0.296 0.055-0.024 0.111-0.040 0.168-0.049 0.334 0.020 0.454 0.077 0.547 0.168l0.062 0.062c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.122-0.881c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.879-2.12l-0.048-0.047c-0.080-0.083-0.136-0.183-0.166-0.288-0.039-0.14-0.032-0.291 0.031-0.434zM18.396 9.302c-0.012-0.201-0.038-0.297-0.076-0.382v0.080c0 0.043 0.003 0.084 0.008 0.125 0.021 0.060 0.043 0.119 0.068 0.177 0.004 0.090 0.005 0.091 0.005 0.092 0.249 0.581 0.684 1.030 1.208 1.303 0.371 0.193 0.785 0.298 1.211 0.303h0.18c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707-0.111 0.525-0.293 0.707-0.431 0.293-0.707 0.293h-0.090c-0.637 0.003-1.22 0.228-1.675 0.603-0.323 0.266-0.581 0.607-0.75 0.993-0.257 0.582-0.288 1.21-0.127 1.782 0.119 0.423 0.341 0.814 0.652 1.136l0.072 0.073c0.196 0.196 0.294 0.45 0.294 0.707s-0.097 0.512-0.292 0.707c-0.197 0.197-0.451 0.295-0.709 0.295s-0.512-0.097-0.707-0.292l-0.061-0.061c-0.463-0.453-1.040-0.702-1.632-0.752-0.437-0.037-0.882 0.034-1.293 0.212-0.578 0.248-1.027 0.683-1.3 1.206-0.193 0.371-0.298 0.785-0.303 1.211v0.181c0 0.276-0.111 0.525-0.293 0.707s-0.43 0.292-0.706 0.292-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707v-0.090c-0.015-0.66-0.255-1.242-0.644-1.692-0.284-0.328-0.646-0.585-1.058-0.744-0.575-0.247-1.193-0.274-1.756-0.116-0.423 0.119-0.814 0.341-1.136 0.652l-0.073 0.072c-0.196 0.196-0.45 0.294-0.707 0.294s-0.512-0.097-0.707-0.292c-0.197-0.197-0.295-0.451-0.295-0.709s0.097-0.512 0.292-0.707l0.061-0.061c0.453-0.463 0.702-1.040 0.752-1.632 0.037-0.437-0.034-0.882-0.212-1.293-0.248-0.578-0.683-1.027-1.206-1.3-0.371-0.193-0.785-0.298-1.211-0.303l-0.18 0.001c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293h0.090c0.66-0.015 1.242-0.255 1.692-0.644 0.328-0.284 0.585-0.646 0.744-1.058 0.247-0.575 0.274-1.193 0.116-1.756-0.119-0.423-0.341-0.814-0.652-1.136l-0.073-0.073c-0.196-0.196-0.294-0.45-0.294-0.707s0.097-0.512 0.292-0.707c0.197-0.197 0.451-0.295 0.709-0.295s0.512 0.097 0.707 0.292l0.061 0.061c0.463 0.453 1.040 0.702 1.632 0.752 0.37 0.032 0.745-0.014 1.101-0.137 0.096-0.012 0.186-0.036 0.266-0.072-0.031 0.001-0.061 0.003-0.089 0.004-0.201 0.012-0.297 0.038-0.382 0.076h0.080c0.043 0 0.084-0.003 0.125-0.008 0.060-0.021 0.119-0.043 0.177-0.068 0.090-0.004 0.091-0.005 0.092-0.005 0.581-0.249 1.030-0.684 1.303-1.208 0.193-0.37 0.298-0.785 0.303-1.21v-0.181c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707v0.090c0.003 0.637 0.228 1.22 0.603 1.675 0.266 0.323 0.607 0.581 0.996 0.751 0.578 0.255 1.206 0.286 1.778 0.125 0.423-0.119 0.814-0.341 1.136-0.652l0.073-0.072c0.196-0.196 0.45-0.294 0.707-0.294s0.512 0.097 0.707 0.292c0.197 0.197 0.295 0.451 0.295 0.709s-0.097 0.512-0.292 0.707l-0.061 0.061c-0.453 0.463-0.702 1.040-0.752 1.632-0.032 0.37 0.014 0.745 0.137 1.101 0.012 0.095 0.037 0.185 0.072 0.266-0.001-0.032-0.002-0.062-0.004-0.089z'></path>
</svg>
채널 정보 수정하기
</ChannelSettingButton>
</ChannelSettingContainer>
</BoardContent>
</BoardSection>
<BoardSection>
<BoardTitle>대화 알림</BoardTitle>
<BoardContent>
<RoundAlarm alarmInfo={alramInfo} />
</BoardContent>
</BoardSection>
</Container>
);
};

export default Admin;

const Container = styled.div`
margin-left: 2rem;
height: calc(100vh - 5.5rem);
overflow-y: auto;
height: inherit;
padding: 2rem;
background-color: ${({ theme }) => theme['bg-100']};
overflow-y: auto;
border-radius: 1rem;
::-webkit-scrollbar {
width: 1rem;
}
Expand All @@ -134,36 +134,48 @@ const Container = styled.div`
}
`;

const Header = styled.div`
font-size: 3rem;
font-weight: 900;
margin: 2rem 0;
`;
const BoardSection = styled.section`
width: 100%;
margin-bottom: 2rem;
const AdminButton = styled.button`
background-color: #f2f2f2;
width: 15rem;
height: 6rem;
color: ${({ theme }) => theme.text};
`;

border-radius: 2rem;
const BoardTitle = styled.div`
font-size: 2rem;
font-weight: bold;
`;

cursor: pointer;
&:hover {
background-color: #ff4655;
color: #f2f2f2;
}
const BoardContent = styled.div`
margin-top: 1rem;
`;

const BracketContainer = styled.div`
display: flex;
align-items: center;
column-gap: 3rem;
const ChannelSettingContainer = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
font-size: 1.4rem;
`;

const RoundList = styled.div`
const ChannelSettingButton = styled.button`
height: 4rem;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
column-gap: 2rem;
justify-content: center;
column-gap: 1rem;
border: ${({ theme }) => `0.2rem solid ${theme['bg-60']}`};
background-color: ${({ theme }) => theme['bg-75']};
border-radius: 1rem;
color: ${({ theme }) => theme.text};
cursor: pointer;
> svg {
fill: ${({ theme }) => theme.text};
}
`;

export const getServerSideProps: GetServerSideProps = async (context) => {
Expand Down Expand Up @@ -193,3 +205,5 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
}
};

export default Admin;

0 comments on commit 47d3a35

Please sign in to comment.