diff --git a/components/ArchiveButton/ArchiveButton.js b/components/ArchiveButton/ArchiveButton.js index fef7bd1..24a9df3 100644 --- a/components/ArchiveButton/ArchiveButton.js +++ b/components/ArchiveButton/ArchiveButton.js @@ -1,4 +1,5 @@ -import styled from "styled-components"; +import { useRef } from "react"; +import styled, { css } from "styled-components"; const CustomButton = styled.div` border: 2px solid #009d3e; @@ -9,13 +10,38 @@ const CustomButton = styled.div` font-weight: 700; color: #009d3e; + ${(props) => + props.disabled && + css` + cursor: not-allowed; + background-color: #eeeeee; + color: #aaaaaa; + border: none; + `} + @media (max-width: 633px) { border: none; padding: 0.2rem 0; } `; -const ATag = styled.a` +const ArchiveButton = styled( + ({ className, href, children, disabled, disabledText }) => { + const customButtonRef = useRef(null); + if (disabled) { + return ( + + {children} + + ); + } + return ( + + {children} + + ); + }, +)` margin-left: 1.2rem; &:first-child { @@ -31,12 +57,4 @@ const ATag = styled.a` } `; -const ArchiveButton = ({ href, children }) => { - return ( - - {children} - - ); -}; - export default ArchiveButton; diff --git a/pages/suapc.page.js b/pages/suapc.page.js index 64f2eec..4540774 100644 --- a/pages/suapc.page.js +++ b/pages/suapc.page.js @@ -146,6 +146,7 @@ const Suapc = () => { {currentSeasonData.fileNames ? ( { 문제 PDF 해설 PDF - + 스코어보드 { 12/05부터 */}