feat: transparent background for banner

components/Footer.tsx

@@ -2,10 +2,10 @@ import Link from 'next/link'
 import Container from './Container'
 import Wave from './Wave'
 
-const Footer = (): JSX.Element => {
+const Footer = ({ color }:FooterProps): JSX.Element => {
 	return (
 		<div className='releative'>
-			<Wave color='currentColor' className='dark:text-discord-dark text-white bg-discord-black hidden md:block' />
+			<Wave color='currentColor' className={`${color ?? 'dark:text-discord-dark text-white bg-discord-black'} hidden md:block`} />
 			<div className='bottom-0 text-white bg-discord-black'>
 				<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-4/5' ignoreColor>
 					<div className='w-full md:w-2/5'>
@@ -78,4 +78,9 @@ const Footer = (): JSX.Element => {
 		</div>
 	)
 }
+
+interface FooterProps {
+	color?: string
+}
+
 export default Footer

pages/_app.tsx

@@ -22,6 +22,7 @@ init()
 
 export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX.Element {
 	const [ betaKey, setBetaKey ] = useState('')
+	const [ footer, footerControl ] = useState(true)
 	const [ theme, setDefaultTheme ] = useState<string|undefined>(undefined)
 	let systemColor:string
 
@@ -66,13 +67,15 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
 			<Navbar />
 			<div className='iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
 				{
-					process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ? <Component {...pageProps} err={err} /> : <div className='text-center py-40 px-10'>
+					process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ? <Component {...pageProps} err={err} footerControl={footerControl} /> : <div className='text-center py-40 px-10'>
 						<h1 className='text-3xl font-bold'>주어진 테스터키를 입력해주세요.</h1><br/>
 						<input value={betaKey} name='field_name' className='text-black border outline-none px-4 py-2 rounded-2xl' type='text' placeholder='테스터 키' onChange={(e)=> { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} />
 					</div>
 				}
 			</div>
-			<Footer />
+			{
+				footer && <Footer />
+			}
 		</ThemeProvider>
 	)
 }

pages/bots/[id].tsx

@@ -13,6 +13,7 @@ import Day from '@utils/Day'
 import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
 
 import NotFound from '../404'
+import Footer from '@components/Footer'
 
 const Container = dynamic(() => import('@components/Container'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
@@ -26,11 +27,13 @@ const Advertisement = dynamic(() => import('@components/Advertisement'))
 const Tooltip = dynamic(() => import('@components/Tooltip'))
 const Markdown = dynamic(() => import ('@components/Markdown'))
 
-const Bots: NextPage<BotsProps> = ({ data, date, user }) => {
+const Bots: NextPage<BotsProps> = ({ data, date, user, footerControl }) => {
 	const router = useRouter()
 	if (!data || !data.id) return <NotFound />
 	if(data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}`)
-	return <Container paddingTop className='py-10'>
+	else footerControl(false)
+	return <div style={checkBotFlag(data.flags, 'trusted') && data.banner ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed` } : {}}>
+		<Container paddingTop className='py-10'>
 			<SEO
 				title={data.name}
 				description={data.intro}
@@ -196,6 +199,9 @@ const Bots: NextPage<BotsProps> = ({ data, date, user }) => {
 				</div>
 			</div>
 		</Container>
+
+		<Footer color='bg-transparent dark:text-discord-black text-white hidden md:block transform rotate-180'/>
+	</div>
 }
 
 export const getServerSideProps = async (ctx: Context) => {
@@ -217,6 +223,7 @@ interface BotsProps {
 	data: Bot
 	date: Date
 	user: User
+	footerControl(val: boolean): void
 }
 interface Context extends NextPageContext {
 	query: URLQuery