From a17473570f39f0a798d57cdab0ccb83841af975d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Wed, 10 Feb 2021 20:54:21 +0900
Subject: [PATCH] feat: transparent background for banner

---
 components/Footer.tsx |   9 +-
 pages/_app.tsx        |   7 +-
 pages/bots/[id].tsx   | 313 +++++++++++++++++++++---------------------
 3 files changed, 172 insertions(+), 157 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index f8d4175..28bab2c 100644
--- a/components/Footer.tsx
+++ b/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
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 36bef4d..b9452e1 100644
--- a/pages/_app.tsx
+++ b/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>
 	)
 }
diff --git a/pages/bots/[id].tsx b/pages/bots/[id].tsx
index 025a8fc..81ca5d3 100644
--- a/pages/bots/[id].tsx
+++ b/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,176 +27,181 @@ 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'>
-		<SEO
-			title={data.name}
-			description={data.intro}
-			image={
-				data.avatar
-					? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.png?size=1024`
-					: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
-			}
-		/>
-		<div className='lg:flex w-full'>
-			<div className='w-full text-center lg:w-1/4'>
-				<DiscordAvatar
-					userID={data.id}
-					className='w-full'
-				/>
-			</div>
-			<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
-				<div>
-					<Tag
-						circular
-						text={
-							<>
-								<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
-								{Status[data.status]?.text}
-							</>
-						}
+	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}
+				image={
+					data.avatar
+						? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.png?size=1024`
+						: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
+				}
+			/>
+			<div className='lg:flex w-full'>
+				<div className='w-full text-center lg:w-1/4'>
+					<DiscordAvatar
+						userID={data.id}
+						className='w-full'
 					/>
-					<h1 className='mb-2 mt-3 text-4xl font-bold'>
-						{data.name}{' '}
-						{checkBotFlag(data.flags, 'trusted') ? (
-							<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
-								<span className='text-koreanbots-blue text-3xl'>
-									<i className='fas fa-award' />
-								</span>
-							</Tooltip>
-						) : ''}
-					</h1>
 				</div>
-				<p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
-			</div>
-			<div className='w-full lg:w-1/4 lg:pt-10'>
-				<LongButton
-					newTab
-					href={
-						data.url ??
+				<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
+					<div>
+						<Tag
+							circular
+							text={
+								<>
+									<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
+									{Status[data.status]?.text}
+								</>
+							}
+						/>
+						<h1 className='mb-2 mt-3 text-4xl font-bold'>
+							{data.name}{' '}
+							{checkBotFlag(data.flags, 'trusted') ? (
+								<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
+									<span className='text-koreanbots-blue text-3xl'>
+										<i className='fas fa-award' />
+									</span>
+								</Tooltip>
+							) : ''}
+						</h1>
+					</div>
+					<p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
+				</div>
+				<div className='w-full lg:w-1/4 lg:pt-10'>
+					<LongButton
+						newTab
+						href={
+							data.url ??
 							`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
-					}
-				>
-					<h4 className='whitespace-nowrap'>
-						<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
-					</h4>
-				</LongButton>
-				<LongButton href={`/bots/${router.query.id}/vote`}>
-					<h4>
-						<i className='fas fa-heart text-red-600' /> 하트 추가
-					</h4>
-					<span className='ml-1 px-2 py-1 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
-						{formatNumber(data.votes)}
-					</span>
-				</LongButton>
-				{
-					((data.owners as User[]).find(el => el.id === user.id) || checkUserFlag(user.flags, 'staff')) && <LongButton href={`/manage/${data.id}`}>
-						<h4>
-							<i className='fas fa-cogs' /> 관리하기
+						}
+					>
+						<h4 className='whitespace-nowrap'>
+							<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
 						</h4>
 					</LongButton>
-				}
-			</div>
-		</div>
-		<Divider className='px-5' />
-		<div className='lg:flex lg:flex-row-reverse'>
-			<div className='mb-1 w-full lg:w-1/4'>
-				<h2 className='3xl mb-2 font-bold'>정보</h2>
-				<div className='grid gap-4 grid-cols-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
-					<div>
-						<i className='far fa-flag' /> 접두사
-					</div>
-					<div className='markdown-body text-black dark:text-gray-400'>
-						<code>{data.prefix}</code>
-					</div>
-					<div>
-						<i className='fas fa-users' /> 서버수
-					</div>
-					<div>{data.servers}</div>
-					<div>
-						<i className='fas fa-calendar-day' /> 봇 생성일
-					</div>
-					<div>{Day(date).fromNow(false)}</div>
+					<LongButton href={`/bots/${router.query.id}/vote`}>
+						<h4>
+							<i className='fas fa-heart text-red-600' /> 하트 추가
+						</h4>
+						<span className='ml-1 px-2 py-1 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
+							{formatNumber(data.votes)}
+						</span>
+					</LongButton>
 					{
-						checkBotFlag(data.flags, 'trusted') ?
-							<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
-								<div>
-									<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
-								</div>
-							</Tooltip>
-							: ''
+						((data.owners as User[]).find(el => el.id === user.id) || checkUserFlag(user.flags, 'staff')) && <LongButton href={`/manage/${data.id}`}>
+							<h4>
+								<i className='fas fa-cogs' /> 관리하기
+							</h4>
+						</LongButton>
 					}
 				</div>
-				<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
-				<div className='flex flex-wrap'>
-					{data.category.map(el => (
-						<Tag key={el} text={el} href={`/categories/${el}`} />
+			</div>
+			<Divider className='px-5' />
+			<div className='lg:flex lg:flex-row-reverse'>
+				<div className='mb-1 w-full lg:w-1/4'>
+					<h2 className='3xl mb-2 font-bold'>정보</h2>
+					<div className='grid gap-4 grid-cols-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
+						<div>
+							<i className='far fa-flag' /> 접두사
+						</div>
+						<div className='markdown-body text-black dark:text-gray-400'>
+							<code>{data.prefix}</code>
+						</div>
+						<div>
+							<i className='fas fa-users' /> 서버수
+						</div>
+						<div>{data.servers}</div>
+						<div>
+							<i className='fas fa-calendar-day' /> 봇 생성일
+						</div>
+						<div>{Day(date).fromNow(false)}</div>
+						{
+							checkBotFlag(data.flags, 'trusted') ?
+								<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
+									<div>
+										<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
+									</div>
+								</Tooltip>
+								: ''
+						}
+					</div>
+					<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
+					<div className='flex flex-wrap'>
+						{data.category.map(el => (
+							<Tag key={el} text={el} href={`/categories/${el}`} />
+						))}
+					</div>
+					<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
+					{(data.owners as User[]).map(el => (
+						<Owner
+							key={el.id}
+							id={el.id}
+							tag={el.tag}
+							username={el.username}
+						/>
 					))}
-				</div>
-				<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
-				{(data.owners as User[]).map(el => (
-					<Owner
-						key={el.id}
-						id={el.id}
-						tag={el.tag}
-						username={el.username}
-					/>
-				))}
-				<div className='list grid'>
-					<Link href={`/bots/${data.id}/report`}>
-						<a className='text-red-600 hover:underline'>
-							<i className='far fa-flag' />
+					<div className='list grid'>
+						<Link href={`/bots/${data.id}/report`}>
+							<a className='text-red-600 hover:underline'>
+								<i className='far fa-flag' />
 								신고하기
-						</a>
-					</Link>
-					{data.discord && (
-						<a
-							rel='noopener noreferrer'
-							target='_blank'
-							className='text-discord-blurple hover:underline'
-							href={`https://discord.gg/${data.discord}`}
-						>
-							<i className='fab fa-discord' />
+							</a>
+						</Link>
+						{data.discord && (
+							<a
+								rel='noopener noreferrer'
+								target='_blank'
+								className='text-discord-blurple hover:underline'
+								href={`https://discord.gg/${data.discord}`}
+							>
+								<i className='fab fa-discord' />
 								디스코드 서버
-						</a>
-					)}
-					{data.web && (
-						<a
-							rel='noopener noreferrer'
-							target='_blank'
-							className='text-blue-500 hover:underline'
-							href={data.web}
-						>
-							<i className='fas fa-globe' />
+							</a>
+						)}
+						{data.web && (
+							<a
+								rel='noopener noreferrer'
+								target='_blank'
+								className='text-blue-500 hover:underline'
+								href={data.web}
+							>
+								<i className='fas fa-globe' />
 								웹사이트
-						</a>
-					)}
-					{data.git && (
-						<a
-							rel='noopener noreferrer'
-							target='_blank'
-							className='hover:underline'
-							href={data.git}
-						>
-							<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
-							{git?.[new URL(data.git).hostname].text ?? 'Git'}
-						</a>
-					)}
+							</a>
+						)}
+						{data.git && (
+							<a
+								rel='noopener noreferrer'
+								target='_blank'
+								className='hover:underline'
+								href={data.git}
+							>
+								<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
+								{git?.[new URL(data.git).hostname].text ?? 'Git'}
+							</a>
+						)}
+					</div>
+					<Advertisement />
+				</div>
+				<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
+					<Advertisement />
+					<Segment>
+						<Markdown text={data.desc}/>
+					</Segment>
+					<Advertisement />
 				</div>
-				<Advertisement />
 			</div>
-			<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
-				<Advertisement />
-				<Segment>
-					<Markdown text={data.desc}/>
-				</Segment>
-				<Advertisement />
-			</div>
-		</div>
-	</Container>
+		</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