Fe dev -> main merge (#277)

* refactor: Chip 컴포넌트 추가 * refactor: Text 컴포넌트에 alias 추가 * refactor: Icon 컴포넌트 생성 * feat: 딕셔너리 체크하는 유틸 함수 추가 * refactor: fetch 로직 apis로 옮김 * refactor: useUserCode 함수를 인자로 받아서 쓸 수 있도록 변경 * fix: 상태 값 변경 * refactor: 타입 가드 추가 * refactor: useUser 훅 사용하도록 변경 * chore: 필요없는 주석 삭제 * refactor: Error 네이밍 변경 * refactor: type 가드 추가 * feat: gap 추가 * refactor: 공통되는 style 분리 * refactor: 유틸함수 통합 getOrigin => getTarget * refactor: 함수 return문 수정 * refactor: 유틸함수 사용하도록 수정, 스코어가 테이블 뒤에 출력되도록 수정 * feat: dashboardPage 레이아웃 반영- 아톰 컴포넌트 사용 * reafactor: eslint활성화 * chore: if else 문 if 문으로 변경해서 가독성 올림 * refactor: 필요 없는 주석 삭제 * refactor: 불명확한 함수 제거, types 디렉토리 생성 * refactor: 대시보드 보기 버튼 텍스트 수정 * refactor: 스타일 중복 제거, 레이아웃 적용 * refactor: 테스트용 코드 제거 * refactor: 안내문구 수정 * refactor: 필요없는 분기 제거 * feat: 대회 종료 후 5분 이내에는 대시보드 페이지에서 로딩 페이지를 출력 * feat: surface.light 추가 * refactor: type title에 대한 오타 수정 * refactor: 중복 제거, common컴포넌트 사용, pandacss 변수 사용하도록 수정 * refactor: PageLayout을 사용하도록 코드 수정 * dashboardTable에서 socket과 api별로 처리를 하도록 분리 * refactor: 모달창이 dashboardTable에게 props로 데이터를 주도록 수정 * refactor: 데이터를 props로 받도록 수정 * feat: 시간에 따라 socket 혹은 api로 데이터를 받도록 코드 작성 * refactor: consolelog코드 삭제 * chore: 메인 페이지 디자인 수정 * chore: 대회 생성 버튼 디자인 수정 * chore: 페이지 설명 상수 변경 * feat: CheckCircle 컴포넌트 생성 * chore: Header 디자인 수정 * chore: 대회 정보 리스트 디자인 변경 * chore: 필요없는 주석 삭제 * feat: alert에 success와 danger에 light추가 * refactor: 레이아웃 컴포넌트 활용 및 스타일 적용 * refactor: 깃허브 URL을 환경변수로 분리 * refactor: CheckCircle => 공통 디자인으로 변경 * refactor: VStack 컴포넌트 폴더로 이동 * update: VStack에 placeItem center를 default로 추가 * update: CompetitionHeader 요소 중앙 배치 및 gap 설정 * update: BreadCrumb 모양 업데이트 * update: 대회 화면에 로고 추가 * fix: 에디터가 화면을 벗어나는 문제 해결 * update: 문제 해더 레이아웃 변경 * fix: react의 unique props key 문제 해결" * refactor: HStack 폴더로 이동 * update: 문제 선택 aside 레이아웃 조정 * update: footer 레이아웃 개선 * update: 에디터 크기를 전체 50% 사용하도록 수정 * refactor: ProblemSolveContainer 분리 * refactor: ProblemSolveContainer에 실제 대회 정보 주입 * refactor: 불필요한 라인 제거 * refactor: Stack 컴포넌트에서 중앙정렬 로직 제거 * refactor: 일부 100% -> full 로 스타일 토큰 이름 변경 * update: 에디터 사이즈 조절을 자유롭게 할 수 있게 확장 * update: 시뮬레이션 결과 디자인 적용 * update: 실행중인 경우 시뮬레이션에 스피너 추가 * update: 에디터, 결과화면 비율 50:50으로 수정 * fix: 변경된 코드 저장이 동작하지 않는 버그 수정 * refactor: 린트 제거 * refactor: 미사용 코드 제거 * chore: 공통 컴포넌트 적용, 대회 리스트 페이지 css 수정 * fix: ts-ignore 빌드시에 에러 발생해서AuthContext 타입 지정 * refactor: api요청과 socket요청 훅 결합 * refactor: 필요 없는 컴포넌트 삭제 * refactor: DashboardTable에 필요한 props를 넘겨주도록 수정 * refactor: DashboardModal에 필요한 props를 넘겨주도록 수정 * chore: merge * refactor: common의 Loading컴포넌트 활용 * refactor: useParticipantDashboard의 api로직 분류 * refactor: flex 속성=> table로 변경 * refactor: 대회 만드는 버튼에 Link 태그 추가 * chore: 컴포넌트 이름 변경 * refactor: html 태그, css 변경 * fix: 대회 상세보기 페이지가 상태에 따라 출력되지 않던 버그 수정 * fix: 배경색이 잘리던 버그 수정 * refactor: Header 컴포넌트 css 수정 * chore: 대회 테이블 css 수정 * refactor: Chip이 의도대로 출력되지 않던 오류 수정 * chore: chip text 크기 지정 * refactor: 대시보드 페이지에서 데이터를 읽어오도록 코드 수정 * chore: 대회 테이블 디자인 수정 * fix: 화면 확대시 배경화면이 잘리는 오류 수정 * refactor: useAuth커스텀 훅 사용 * refactor: 명시적인 선언 사용 * refactor: css코드 변수 사용하도록 수정 * refactor: 중복 제거 * chore: 메인 페이지 디자인 수정 * fix: 머지 후 빌드 안 되던 것 수정 * fix: key 값 빠진 부분 추가 * fix: Logo path 바뀐거 적용 * fix: Header 디자인 수정 * fix": merge 과정에서 빠진 code 추가 및 로그인 버튼 디자인 수정 * refactor: PageLayout컴포넌트 사용하도록 수정 * refactor: 헤더 요소명 변경 및 css요소 이름 변경 * refactor: DashboardTable의 text요소가 중앙 정렬이 되지 않도록 수정 * refactor: 대시보드 테이블 width 수정 * refactor: DashboardPage의 상태를 나타내는 부분 컴포넌트화 * fix: import 경로 수정 * refactor: 문제가 9개일 경우 텍스트가 뭉개지는 오류 수정 * refactor: Header의 로고 혹은 텍스트를 클릭하면 메인 페이지로 이동 * refactor: MainPage에서 대회가 시작 전일 경우 시작 전 상태를 표시 * refactor: 대회 화면에서 로고 혹은 Algo With Me 누르면 홈으로 이동 * refactor: 필요없는 코드 삭제 * refactor: 틀린 문제시 '-'빨간배경, 미제출시 '-'배경없음 * refactor: css 요소 이름 변경 * refactor: 모달 사이즈 고정 * refactor: 페이지 확대시 dashboardTable이 동적으로 바뀌도록 수정 * refactor: 페이지 새로고침 코드 제거 * feat: 제출 시 결과 화면 스위칭 * update: 문제 탭 변경시 제출 결과 초기화 * update: 실패한 케이스는 x버튼 나오게 함 * feat: 서버에서 내려받은 데이터로 testcase 변경 * feat: 테스트 결과창에 예상값 추가 * feat: 실제 서버 시간으로 동기화 * fix: type 에러 수정 * refactor: type 수정 * refactor: window.location.reload 대신 navigate사용, 버튼 컴포넌트 위치 변경 * refactor: navigate 인자값 수정 * refactor: navigate 인자값 경로로 수정 * refactor: 동일한 경로로의 navigate코드 삭제 * refactor: 탭 인덱스 상수화 * update: 테스트케이스가 기대값과 일치하면 체크,아니면 x표시를 함 * update: 탭 이동시에도 테스트케이스 임시 저장 * feat: 대회 페이지 내에서 검증 실패가 되면 메인 페이지로 이동 * chore: alert 창 추가 * chore: 대시보드 집계 후 보여지기 때문에 main 페이지로 * fix: build 에러 수정 * fix: 대회 생성 버튼 클릭시 동작 안하는 버그 대회 생성 버튼 안의 텍스트만 클릭됨 텍스트를 링크로 감싸고 있어서 생긴 문제 버튼 전체를 링크로 감싸도록해서 해결 Co-authored-by: youseock <[email protected]> Co-authored-by: 이우찬 <[email protected]> * update: 디테일 페이지 레이아웃 변경 & 시간정보 추가 * refactor: Card 컴포넌트 Common으로 분리 * fix: 문제 상세보기 페이지 안나오는 버그 수정 * fix: alog with me 문구 algo with me로 수정 * feat: 대회 상세 페이지에서 참여 가능 인원, 총 참여자 표시 * fix: 칩 border 색상 변경 * feat: Console.log 추가 * refactor: 주석 제거 * update: Pretendard 폰트 적용 * feat: 대회 시작 시간 및 종료 시간에 따라 대회 상세정보 보기 페이지가 넘어가도록 작성 * refactor: Modal이 클래스를 외부에서 주입받을 수 있게 함 * refactor: Icon 컴포넌트에 minus 아이콘 추가 * update: 모달 디자인 개선 * update: 테스트케이스가 많으면 스크롤 생성 * fix: 대회 페이지용 레이아웃 생성 및 적용 * update: 메인 페이지 하단에 빈 공간 삽입 * refactor: navigate 인자 0으로 수정 * refactor: 테스트용 console 추가 * chore: netlify redirect 옵션 추가 * refactor: navigate 인자 replace true 추가 * refactor: navigate path 수정 * refactor: navigate 인자 0으로 수정 * refactor: 필요 없는 코드 삭제 * fix: websocket 관련 버그 제거 * chore: 필요없는 로직 삭제 * chore: isNil 유틸함수 사용 * fix: 메인페이지의 대시보드 링크가 대회페이지로 이동하는 버그 수정 * update: contest -> competition으로 경로 수정 * fix: 대시보드 링크로 이동하지 않는 버그 수정 * update: 대회 목록 아이템 하단에 border 추가 * update: 메인페이지 테이블 날짜 형식 yyyy. mm. dd. hh:mm 형식으로 통일 * fix: 대회 참여를 신청하지 않은 사람은 대회에 입장할 수 없게 막음 * update: 대회 내의 대시보드 모달에 borderRadius 추가 * update: 서비스 안내 문구 변경 * update: 대시보드 패딩, 마이랭크 하이라이트 * refactor: 스트릭트 모드 제한 해제 * fix: 대회 입장 가능 여부 확인에 토큰을 사용하도록 함 * feat: 유저의 대시보드 row는 하이라이트 * update: 대회가 종료되면 대회 상세 페이지로 이동 * feat: 채점 중에는 다시 제출이 불가능하도록 막음 * refactor: strict mode 켬 * fix: Syntax에러를 만나면 터지는 문제 해결 * fix:일부 푼 문제 가 대시보드에서 보이지 않는 버그 수정 * fix: 모달 밖으로 테이블이 삐져나오는 버그 수정 * feat: 코드 초기화 버튼 추가 * update: aside 문제 구분 잘 안가는 문제 해결 * update: 로그인페이지 레이아웃 개선 * update: 메인페이지, header 버튼 크기 살짝 줄임 * update: ProblemPage에 문제 중앙 배치 * update: 대회 완료시 집계중 화면에 header 추가 * fix: Loading 참조 에러 수정 * refactor: 필요 없는 코드 삭제 * refactor: endsAt에 따라 대시보드 화면이 넘어가도록 수정 * feat: 대시보드 로딩 화면에 남은 시간이 출력되도록 수정 * refactor: 로딩 페이지 ui개선 및 로딩 페이지 정상출력되도록 수정 * refactor: hook 이름 변경 * refactor: 숫자 상수화 * chore: 파피콘 추가, meta 정보 추가 * fix: meta 태그 수정 * refactor: 렌더링 조건문 수정 및 버퍼타임 추가 * refactor: Plus 아이콘 추가 * update: 대회 생성하기 페이지 레이아웃 개 * refactor: 디버깅코드 제거 * update: 대회 생성 조건 강화 - 대회 기간이 5분보다 짧으면 대회를 생성하지 않음 - 대회 시작 시간이 현재 시간 + 5분과 같으면 생성할 수 있음 * refactor: Form 태그 적용 * update: stdOut -> stdout으로 변경 * feat: 실행 결과 시간과 메모리 출력 * update: 제출 결과 확인 로직에 problemResult 적용 * refactor: strict mode 해제 * refactor: 불필요한 문자열 처리 제거 * fix: alignItems가 flexStart를 default로 하며 생기는 버그 수정 * fix: Loading Page의 시간 변경 -> 남은 시간 출력되도록 수정 --------- Co-authored-by: youseock <[email protected]> Co-authored-by: 이우찬 <[email protected]> Co-authored-by: youseock <[email protected]> Co-authored-by: youseock <[email protected]> Co-authored-by: 이우찬 <[email protected]>
boostcampwm2023 · Dec 13, 2023 · 1ed88c8 · 1ed88c8
1 parent 1712e92
commit 1ed88c8
Show file tree

Hide file tree

Showing 54 changed files with 801 additions and 314 deletions.
diff --git a/frontend/_redirects b/frontend/_redirects
@@ -0,0 +1 @@
+/*  /index.html  200
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,8 +2,9 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/algo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="누구나 만들고 참여할 수 있는 알고리즘 대회" />
     <title>Algo With Me</title>
   </head>
   <body>

diff --git a/frontend/netlify.toml b/frontend/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/frontend/public/algo.ico b/frontend/public/algo.ico
diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg
diff --git a/frontend/src/apis/joinCompetition/index.ts b/frontend/src/apis/joinCompetition/index.ts
@@ -1,3 +1,4 @@
+import { CompetitionId } from '@/apis/competitions';
 import api from '@/utils/api';
 
 import type { CompetitionApiData } from './types';
@@ -42,3 +43,20 @@ export async function joinCompetition(data: CompetitionApiData) {
     }
   }
 }
+
+export async function fetchIsJoinableCompetition(
+  competitionId: CompetitionId,
+  token: string,
+): Promise<boolean> {
+  try {
+    const { data } = await api.get(`/competitions/validation/${competitionId}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    return data.isJoinable;
+  } catch (err) {
+    return false;
+  }
+}
diff --git a/frontend/src/apis/joinCompetition/types.ts b/frontend/src/apis/joinCompetition/types.ts
@@ -2,3 +2,8 @@ export type CompetitionApiData = {
   id: number;
   token: string | null;
 };
+
+export type FetchIsCompetitionJoinableResponse = {
+  isJoinable: boolean;
+  message: string;
+};
diff --git a/frontend/src/components/Common/Button.tsx b/frontend/src/components/Common/Button.tsx
@@ -1,24 +1,28 @@
 import { cva, cx } from '@style/css';
 
-import type { HTMLAttributes, MouseEvent } from 'react';
+import type { HTMLAttributes, MouseEvent, ReactElement } from 'react';
 
 import { isNil } from '@/utils/type';
 
-type Theme = 'brand' | 'danger' | 'success' | 'warning' | 'none';
+type Theme = 'brand' | 'danger' | 'success' | 'warning' | 'transparent' | 'none';
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {
   theme?: Theme;
   selected?: boolean;
   disabled?: boolean;
+  leading?: ReactElement;
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export function Button({
   className,
   children,
   theme = 'none',
   onClick,
+  leading,
   selected = false,
   disabled = false,
+  type = 'button',
   ...props
 }: Props) {
   const handleClick = (evt: MouseEvent<HTMLButtonElement>) => {
@@ -28,13 +32,20 @@ export function Button({
     onClick(evt);
   };
 
+  const hasLeading = !isNil(leading);
+
   return (
     <button
-      className={cx(className, style({ disabled }), themeStyle({ theme, selected, disabled }))}
-      type="button"
+      className={cx(
+        className,
+        style({ disabled, hasLeading }),
+        themeStyle({ theme, selected, disabled }),
+      )}
+      type={type}
       onClick={isNil(onClick) ? undefined : handleClick}
       {...props}
     >
+      {leading}
       {children}
     </button>
   );
@@ -43,6 +54,7 @@ export function Button({
 const style = cva({
   base: {
     display: 'flex',
+    gap: '0.25rem',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '0.5rem',
@@ -58,6 +70,11 @@ const style = cva({
         cursor: 'not-allowed',
       },
     },
+    hasLeading: {
+      true: {
+        paddingLeft: '0.5rem',
+      },
+    },
   },
 });
 
@@ -85,10 +102,14 @@ const themeStyle = cva({
       warning: {
         background: 'alert.warning',
       },
+      transparent: {
+        background: 'transparent',
+      },
     },
     selected: {
       true: {
-        filter: 'brightness(1.2)',
+        outline: '2px solid',
+        outlineColor: 'brand',
       },
     },
     disabled: {
@@ -100,4 +121,13 @@ const themeStyle = cva({
       },
     },
   },
+  compoundVariants: [
+    {
+      selected: true,
+      theme: 'transparent',
+      css: {
+        background: 'surface',
+      },
+    },
+  ],
 });
diff --git a/frontend/src/components/Common/Icon.tsx b/frontend/src/components/Common/Icon.tsx
@@ -12,6 +12,7 @@ const ICON_NAMES = [
   'spinner',
   'cancel',
   'minus',
+  'plus',
 ] as const;
 type IconName = (typeof ICON_NAMES)[number];
 
@@ -56,6 +57,7 @@ Icon.CancelRound = ({ ...props }: Omit<Props, 'name'>) => (
 Icon.Spinner = ({ ...props }: Omit<Props, 'name'>) => <Icon name="spinner" {...props}></Icon>;
 Icon.Cancel = ({ ...props }: Omit<Props, 'name'>) => <Icon name="cancel" {...props}></Icon>;
 Icon.Minus = ({ ...props }: Omit<Props, 'name'>) => <Icon name="minus" {...props}></Icon>;
+Icon.Plus = ({ ...props }: Omit<Props, 'name'>) => <Icon name="plus" {...props}></Icon>;
 
 const style = css({
   display: 'inline-block',

diff --git a/frontend/src/components/Common/Input.tsx b/frontend/src/components/Common/Input.tsx
@@ -10,25 +10,46 @@ import type {
 } from 'react';
 import { Children, cloneElement, forwardRef } from 'react';
 
+import { Text } from '@/components/Common';
+
 interface Props extends HTMLAttributes<HTMLDivElement> {
   label?: ReactNode;
+  comment?: string;
   children: ReactElement;
 }
 
-export function Input({ id, label, children, ...props }: Props) {
+export function Input({ id, label, comment, children, ...props }: Props) {
   const child = Children.only(children);
 
   return (
     <div {...props}>
-      <label htmlFor={id}>{label}</label>
+      <label htmlFor={id} className={labelStyle}>
+        {label}
+      </label>
       {cloneElement(child, {
         id,
         ...child.props,
       })}
+      <Text.Label size="md" className={commentStyle}>
+        {comment}
+      </Text.Label>
     </div>
   );
 }
 
+const labelStyle = css({
+  display: 'block',
+  marginLeft: '0.25rem',
+  marginBottom: '0.5rem',
+});
+
+const commentStyle = css({
+  display: 'block',
+  marginTop: '0.25rem',
+  marginLeft: '0.25rem',
+  color: 'text.light',
+});
+
 interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   error?: boolean;
 }

diff --git a/frontend/src/components/Common/Loading.tsx b/frontend/src/components/Common/Loading.tsx
@@ -3,7 +3,7 @@ interface Props {
   color: string;
 }
 
-export default function Loading({ size, color }: Props) {
+export function Loading({ size, color }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/components/Common/Socket/SocketProvider.tsx b/frontend/src/components/Common/Socket/SocketProvider.tsx
@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 
-import { connect } from '@/utils/socket';
+import { connect, disconnect } from '@/utils/socket';
+import { isNil } from '@/utils/type';
 
 import { SocketContext } from './SocketContext';
 
@@ -47,6 +48,13 @@ export function SocketProvider({
     }
   }, [socket.current]);
 
+  useEffect(() => {
+    if (isNil(socket.current)) return;
+    return () => {
+      disconnect(`/${namespace}`);
+    };
+  }, [socket]);
+
   return (
     <SocketContext.Provider
       value={{

diff --git a/frontend/src/components/Common/VStack/VStack.tsx b/frontend/src/components/Common/VStack/VStack.tsx
@@ -1,16 +1,23 @@
-import { css, cx } from '@style/css';
+import { css, cva, cx } from '@style/css';
 
 import { HTMLAttributes } from 'react';
 
 export interface Props extends HTMLAttributes<HTMLElement> {
   as?: React.ElementType;
+  alignItems?: 'flexStart' | 'flexEnd' | 'baseline' | 'stretch' | 'center';
 }
 
-export function VStack({ children, className, as = 'div', ...props }: Props) {
+export function VStack({
+  children,
+  className,
+  as = 'div',
+  alignItems = 'flexStart',
+  ...props
+}: Props) {
   const As = as;
 
   return (
-    <As className={cx(className, rowListStyle)} {...props}>
+    <As className={cx(className, rowListStyle, alignItemStyle({ alignItems }))} {...props}>
       {children}
     </As>
   );
@@ -19,3 +26,28 @@ export function VStack({ children, className, as = 'div', ...props }: Props) {
 const rowListStyle = css({
   display: 'flex',
 });
+
+const alignItemStyle = cva({
+  defaultVariants: {
+    alignItems: 'flexStart',
+  },
+  variants: {
+    alignItems: {
+      flexStart: {
+        alignItems: 'flex-start',
+      },
+      flexEnd: {
+        alignItems: 'flex-end',
+      },
+      baseline: {
+        alignItems: 'baseline',
+      },
+      stretch: {
+        alignItems: 'stretch',
+      },
+      center: {
+        alignItems: 'center',
+      },
+    },
+  },
+});
diff --git a/frontend/src/components/Common/index.ts b/frontend/src/components/Common/index.ts
@@ -11,3 +11,4 @@ export * from './Icon';
 export * from './BreadCrumb';
 export * from './Logo';
 export * from './Card';
+export * from './Loading';
diff --git a/frontend/src/components/Competition/CompetitionHeader.tsx b/frontend/src/components/Competition/CompetitionHeader.tsx
@@ -6,7 +6,7 @@ interface Props extends VStackProps {}
 
 export default function CompetitionHeader({ className, children, ...props }: Props) {
   return (
-    <VStack className={cx(className, headerStyle)} as="header" {...props}>
+    <VStack alignItems="center" className={cx(className, headerStyle)} as="header" {...props}>
       {children}
     </VStack>
   );

diff --git a/frontend/src/components/CompetitionDetail/Buttons/EnterCompetitionButton.tsx b/frontend/src/components/CompetitionDetail/Buttons/EnterCompetitionButton.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
+import { fetchIsJoinableCompetition } from '@/apis/joinCompetition';
 import { Button } from '@/components/Common';
 import useAuth from '@/hooks/login/useAuth';
 
@@ -10,25 +11,43 @@ interface Props {
 }
 
 export default function EnterCompetitionButton({ id, startsAt, endsAt }: Props) {
-  const competitionLink = `/contest/${id}`;
+  const competitionLink = `/competition/${id}`;
   const { isLoggedin } = useAuth();
   const navigate = useNavigate();
 
-  const handleNavigate = () => {
+  const handleNavigate = async () => {
     const currentTime = new Date();
 
     if (!isLoggedin) {
       alert('로그인이 필요합니다.');
       navigate('/login');
-    } else if (currentTime < startsAt) {
+
+      return;
+    }
+
+    if (currentTime < startsAt) {
       alert('아직 대회가 시작되지 않았습니다. 다시 시도해주세요');
-      window.location.reload();
-    } else if (currentTime >= endsAt) {
+      navigate(0);
+
+      return;
+    }
+
+    if (currentTime >= endsAt) {
       alert('해당 대회는 종료되었습니다.');
-      window.location.reload();
-    } else {
-      navigate(competitionLink);
+      navigate(0);
+
+      return;
     }
+
+    const accessToken = localStorage.getItem('accessToken') ?? '';
+
+    const isJoinable = await fetchIsJoinableCompetition(id, accessToken);
+    if (!isJoinable) {
+      alert('대회에 참여할 수 없습니다.\n다음부터는 늦지 않게 대회 신청을 해주세요 :)');
+      return;
+    }
+
+    navigate(competitionLink);
   };
 
   return (