조금 수정

component/Button/Button.styled.ts

@@ -4,6 +4,8 @@ import { ButtonProps } from './Button.types';
 
 const getSize = ({ size }: Pick<ButtonProps, 'size'>) => {
  switch (size) {
+ case 'None':
+ return '';
  case 'XS':
  return css`
  width: 72px;
@@ -19,6 +21,11 @@ const getSize = ({ size }: Pick<ButtonProps, 'size'>) => {
  width: 320px;
  height: 54px;
  `;
+ case 'XL':
+ return css`
+ width: 100%;
+ height: 100%;
+ `;
  }
 };
 

component/Button/Button.tsx

@@ -1,39 +1,46 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { ButtonProps } from './Button.types';
 import { ButtonWrapper } from './Button.styled';
 import { SerializedStyles, css } from '@emotion/react';
 
-export const Button = ({
- type = 'button',
- className,
- size,
- disabled = false,
- radius = true,
- backgroundColor,
- onClick,
- style,
- children,
-}: ButtonProps) => {
- return (
- <>
- <ButtonWrapper
- type={type}
- className={classNames(className)}
- size={size}
- disabled={disabled}
- radius={radius}
- onClick={(e) => {
- if (onClick) {
- onClick(e);
- }
- }}
- backgroundColor={backgroundColor}
- css={style as SerializedStyles}
- >
- {children}
- </ButtonWrapper>
- </>
- );
-};
+// eslint-disable-next-line react/display-name
+export const Button = forwardRef(
+ (
+ {
+ type = 'button',
+ className,
+ size,
+ disabled = false,
+ radius = true,
+ backgroundColor,
+ onClick,
+ style,
+ children,
+ }: ButtonProps,
+ ref,
+ ) => {
+ return (
+ <>
+ <ButtonWrapper
+ type={type}
+ className={className}
+ size={size}
+ disabled={disabled}
+ radius={radius}
+ onClick={(e) => {
+ if (onClick) {
+ onClick(e);
+ }
+ }}
+ backgroundColor={backgroundColor}
+ css={style as SerializedStyles}
+ ref={ref}
+ >
+ {children}
+ </ButtonWrapper>
+ </>
+ );
+ },
+);

component/Button/Button.types.ts

@@ -4,7 +4,7 @@ import { Property } from 'csstype';
 export interface ButtonProps {
  type?: 'submit' | 'reset' | 'button' | undefined;
  className?: string;
- size: 'XS' | 'S' | 'L';
+ size: 'None' | 'XS' | 'S' | 'L' | 'XL';
  disabled?: boolean;
  radius?: boolean;
  backgroundColor: Property.BackgroundColor;

pages/404.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Image from 'next/image';
+
+import { BodyMedium, Spacing } from '@/component';
+import { Button } from '@/component/Button';
+
+import yello_question_svg from '@/component/Icon/asset/yello-question.svg';
+import { pallete } from '@/styles/Color';
+import Link from 'next/link';
+
+export default function Custom404() {
+ return (
+ <section className='w-screen h-screen flex flex-col justify-center items-center text-white'>
+ <div className='unbounded-600 text-2xl'>{'404 ERROR'}</div>
+ <Spacing size={20} />
+ <Image
+ src={yello_question_svg}
+ alt='yello_question'
+ width={128}
+ height={128}
+ />
+ <Spacing size={32} />
+ <BodyMedium className='text-center text-white'>
+ {'다시 접속하거나,\n인터넷 연결을 다시 확인해주세요'}
+ </BodyMedium>
+ <Spacing size={64} />
+ <Link href={'/school-attack'}>
+ <Button
+ className='text-black'
+ size='L'
+ backgroundColor={pallete['yello-main-500']}
+ >
+ {'홈으로 돌아가기'}
+ </Button>
+ </Link>
+ </section>
+ );
+}

pages/school-attack/[groupId].tsx

@@ -1,8 +1,8 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 import Image from 'next/image';
 import { css } from '@emotion/react';
 import { useRouter } from 'next/router';
-import { TextInput } from '@primer/react';
+import { Dialog, TextInput } from '@primer/react';
 
 import {
  BodyMedium,
@@ -30,6 +30,7 @@ import ranking_2_svg from '@/component/Icon/asset/ranking-2.svg';
 import ranking_3_svg from '@/component/Icon/asset/ranking-3.svg';
 import ranking_up_svg from '@/component/Icon/asset/ranking-up.svg';
 import ranking_down_svg from '@/component/Icon/asset/ranking-down.svg';
+import share_svg from '@/component/Icon/asset/share.svg';
 
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { QUERY_KEY } from '@/util/string';
@@ -38,6 +39,8 @@ import {
  getSchoolAttackStatisticsDetail,
  getSchoolAttackStatisticsLikeGroupName,
 } from '@/repository/statistics';
+import Script from 'next/script';
+import Link from 'next/link';
 
 const maxWidth = 425;
 
@@ -77,10 +80,58 @@ export default function SchoolAttack() {
  const firstRankingGroup =
  statisticsQuery.data?.pages[0].data.data.statisticsList[0];
 
+ const observer = useRef<IntersectionObserver>();
+ const lastItemRef = useCallback(
+ (node: HTMLDivElement) => {
+ if (observer.current) observer.current.disconnect();
+ observer.current = new IntersectionObserver((entries) => {
+ if (entries[0].isIntersecting) {
+ searchQuery.hasNextPage && searchQuery.fetchNextPage();
+ }
+ });
+ if (node) observer.current.observe(node);
+ },
+ [searchQuery],
+ );
+
  return (
  <>
+ <Script
+ async
+ src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8374722078438476'
+ ></Script>
  <SystemLayout>
  <MainLayout maxWidth={maxWidth}>
+ <div
+ className='sticky z-10 flex flex-row w-full h-20'
+ style={{
+ maxWidth: maxWidth,
+ top: 'calc(100vh - 5rem)',
+ background:
+ 'linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, #191919 100%)',
+ }}
+ >
+ <Button
+ className='flex flex-row w-2/6 h-14 mr-2 rounded-3xl justify-center items-center text-white'
+ size='None'
+ backgroundColor={pallete['grayscales-700']}
+ onClick={async () => {
+ await navigator.clipboard.writeText(window.location.href);
+ alert('링크가 복사되었습니다!');
+ }}
+ >
+ <Image className='mr-2' src={share_svg} alt='share' />
+ {'공유'}
+ </Button>
+ <Button
+ className='w-4/6 h-14 rounded-3xl'
+ size='None'
+ backgroundColor={pallete['yello-main-500']}
+ onClick={() => router.push('/event/university/Booth')}
+ >
+ {'나도 대항전 참여하기'}
+ </Button>
+ </div>
  <section className='px-5'>
  <div
  css={css`
@@ -270,29 +321,33 @@ export default function SchoolAttack() {
  }
  />
  {searchKey && (
- <div className='flex flex-col gap-2 w-full h-60 my-2 overflow-y-scroll'>
+ <div className='gap-2 w-full h-60 my-2 overflow-y-scroll'>
  {searchQuery.data?.pages.map((page, index) => (
  <Fragment key={index}>
  {page.data.data.statisticsList.map((statistics, index) => {
  return (
- <ListItem
- key={index}
- groupName={statistics.userGroupName}
- rank={statistics.rankNumber}
- diffRank={
- statistics.prevRankNumber - statistics.rankNumber
- }
- title={statistics.userGroupName}
- score={statistics.score}
- />
+ <>
+ <ListItem
+ key={index}
+ groupName={statistics.userGroupName}
+ rank={statistics.rankNumber}
+ diffRank={
+ statistics.prevRankNumber - statistics.rankNumber
+ }
+ title={statistics.userGroupName}
+ score={statistics.score}
+ />
+ <Spacing size={10} />
+ </>
  );
  })}
  </Fragment>
  ))}
+ <div ref={lastItemRef} />
  </div>
  )}
  </section>
- <section className='px-5 flex flex-col items-center my-3 mb-10'>
+ <section className='px-5 flex flex-col items-center my-3 mb-28'>
  <Subtitle_01 className='text-white'>
  {'전국 중/고등학교 TOP 10'}
  </Subtitle_01>
@@ -372,7 +427,7 @@ const ListItem = ({
  <Subtitle_02 className='text-yello-sub-500 font-bold'>
  {rank}
  </Subtitle_02>
- {diffRank && (
+ {diffRank && diffRank > 0 && (
  <div className='flex'>
  <Image
  src={diffRank > 0 ? ranking_up_svg : ranking_down_svg}

styles/SchoolAttack.styled.ts

@@ -3,11 +3,13 @@ import emotionStyled from '@emotion/styled';
 export const SystemLayout = emotionStyled.div`
  width: 100vw;
  height: content-fit;
-
+ 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
+
+ position: relative;
 `;
 
 export const MainLayout = emotionStyled.main<{ maxWidth: number }>`
@@ -16,4 +18,5 @@ export const MainLayout = emotionStyled.main<{ maxWidth: number }>`
  
  max-width: ${(props) => props.maxWidth}px;
  width: 100vw;
+ min-height: 100vh;
 `;

styles/globals.css

@@ -1,4 +1,5 @@
 @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -12,3 +13,64 @@ div {
 body {
  background-color: black;
 }
+
+a {
+ width: fit-content;
+ height: fit-content;
+}
+
+.unbounded-200 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 200;
+ font-style: normal;
+}
+
+.unbounded-300 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 300;
+ font-style: normal;
+}
+
+.unbounded-400 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.unbounded-500 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+}
+
+.unbounded-600 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 600;
+ font-style: normal;
+}
+
+.unbounded-700 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 700;
+ font-style: normal;
+}
+
+.unbounded-800 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 800;
+ font-style: normal;
+}
+
+.unbounded-900 {
+ font-family: 'Unbounded', sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 900;
+ font-style: normal;
+}