From 45ad34c1d0927a0cbf6de32d0113ede40681d698 Mon Sep 17 00:00:00 2001
From: Park Jinwoo <wlsdndml213@naver.com>
Date: Thu, 9 Nov 2023 21:54:26 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EA=B3=B5=EB=AA=A8=EC=A0=84=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20(=EB=AA=A8?=
 =?UTF-8?q?=EC=A7=91=EC=A4=91=EC=9D=B8=20=ED=8C=80)=20=EC=A0=9C=EC=9E=91?=
 =?UTF-8?q?=20=EC=99=84=EB=A3=8C=20(#20)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(#18) : 라우팅, Contest.tsx 제작

* feat(#18) : 공모전 세부정보페이지 완료

* feat(#18) : 팀장, 팀원박스 및 팀원정보 노출 완료

* feat(#18) : 리더infobox 컴포넌트 완료

* feat(#18) : 팀원infobox 컴포넌트 및 스크롤 커스텀 완료

* feat(#18) : 팀 생성버튼 라우팅 및 navigate추가
---
 src/Router.tsx                             |   3 +
 src/components/contest/ContestInfo.tsx     |  76 ++++++++++
 src/components/contest/LeaderInfoBox.tsx   |  43 ++++++
 src/components/contest/MemberInfoBox.tsx   |  49 +++++++
 src/components/contest/RecruitTeamItem.tsx | 143 ++++++++++++++++++
 src/components/contest/RecruitTeamList.tsx |  58 ++++++++
 src/constants/Contest.ts                   | 161 +++++++++++++++++++++
 src/pages/contest/Contest.tsx              |  20 +++
 8 files changed, 553 insertions(+)
 create mode 100644 src/components/contest/ContestInfo.tsx
 create mode 100644 src/components/contest/LeaderInfoBox.tsx
 create mode 100644 src/components/contest/MemberInfoBox.tsx
 create mode 100644 src/components/contest/RecruitTeamItem.tsx
 create mode 100644 src/components/contest/RecruitTeamList.tsx
 create mode 100644 src/constants/Contest.ts
 create mode 100644 src/pages/contest/Contest.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 99c1bf3..86c9428 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -8,6 +8,7 @@ import Profile from './pages/profile/Profile';
 import Recommendation from './pages/recommendation/Recommendation';
 import MultipleChoice from './pages/recommendation/MultipleChoice';
 import Subjective from './pages/recommendation/Subjective';
+import Contest from './pages/contest/Contest';
 import CompetitionList from './pages/competitionList/CompetitionList';
 
 function Router() {
@@ -24,6 +25,8 @@ function Router() {
           <Route path="multipleChoice" element={<MultipleChoice />} />
         </Route>
         <Route path="/profile/:userId" element={<Profile />} />
+        <Route path='/list/:postId' element={<Contest/>}/>
+        <Route path='/list/:postId/:teamId' element={<div>팀 생성페이지입니다</div>}/>
         <Route path="/list" element={<CompetitionList />} />
       </Routes>
       <Footer />
diff --git a/src/components/contest/ContestInfo.tsx b/src/components/contest/ContestInfo.tsx
new file mode 100644
index 0000000..bf4c63e
--- /dev/null
+++ b/src/components/contest/ContestInfo.tsx
@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import { CONTEST_DATA } from '../../constants/Contest';
+
+const ContestInfo = () => {
+  return (
+    <ContestInfoLayout>
+      <ContestInfoTitle>{CONTEST_DATA.title}</ContestInfoTitle>
+      <ContestContainer>
+        <ContestImg src={CONTEST_DATA.images[0]} />
+        <ContestTextBox>
+          <Dday>D-{CONTEST_DATA.remainDay}</Dday>
+          {CONTEST_DATA.data}
+        </ContestTextBox>
+      </ContestContainer>
+    </ContestInfoLayout>
+  );
+};
+const ContestInfoLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  max-width: 122.4rem;
+  margin: auto;
+`;
+const ContestInfoTitle = styled.div`
+  ${(props) => props.theme.fonts.heading2_1};
+  color: ${(props) => props.theme.colors.gray90};
+
+  margin-top: 3rem;
+`;
+const ContestContainer = styled.div`
+  display: flex;
+  gap: 2rem;
+  margin: 2rem 0;
+`;
+const ContestImg = styled.img`
+  width: 36.8rem;
+  height: 45.4rem;
+  border-radius: 1.2rem;
+`;
+
+const ContestTextBox = styled.div`
+  ${(props) => props.theme.fonts.subtitleM};
+  background-color: ${(props) => props.theme.colors.gray5};
+
+  border: 1px solid ${(props) => props.theme.colors.primary20};
+  border-radius: 1.2rem;
+
+  height: 45.4rem;
+  width: 100%;
+  /* display: flex; */
+
+  padding: 1.9rem 3.6rem;
+
+  white-space: break-spaces;
+
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.4);
+  }
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.colors.gray20};
+    border-radius: 6px;
+  }
+`;
+const Dday = styled.div`
+  ${(props) => props.theme.fonts.heading5};
+  color: ${(props) => props.theme.colors.error90};
+
+  margin-bottom: 2rem;
+`;
+export default ContestInfo;
diff --git a/src/components/contest/LeaderInfoBox.tsx b/src/components/contest/LeaderInfoBox.tsx
new file mode 100644
index 0000000..80ade1f
--- /dev/null
+++ b/src/components/contest/LeaderInfoBox.tsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+const LeaderInfoBox = ({ infoData }: { infoData: any }) => {
+  return (
+    <Container>
+      <LeaderImg src={infoData.image} />{' '}
+      <hr style={{ width: '100%', margin: '1rem 0', borderColor: '#898BF8' }} />
+      <Name>{infoData.name}</Name>
+      <Part>{infoData.part}</Part>
+      <Part>{infoData.major}</Part>
+    </Container>
+  );
+};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  justify-content: center;
+  align-items: center;
+
+  padding: 3rem 4.5rem 2rem 4.5rem;
+
+  color: ${(props) => props.theme.colors.primary40};
+`;
+const LeaderImg = styled.img`
+  width: 8rem;
+  height: 8rem;
+
+  border: 1px solid ${(props) => props.theme.colors.primary20};
+  border-radius: 4rem;
+
+  object-fit: cover;
+`;
+const Name = styled.div`
+  ${(props) => props.theme.fonts.heading5};
+  color: ${(props) => props.theme.colors.gray90};
+  /* margin: 1rem 0; */
+`;
+const Part = styled.div`
+  ${(props) => props.theme.fonts.bodyS};
+  color: ${(props) => props.theme.colors.gray70};
+`;
+export default LeaderInfoBox;
diff --git a/src/components/contest/MemberInfoBox.tsx b/src/components/contest/MemberInfoBox.tsx
new file mode 100644
index 0000000..7c13971
--- /dev/null
+++ b/src/components/contest/MemberInfoBox.tsx
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+const MemberInfoBox = ({ infoData }: { infoData: any }) => {
+  return (
+    <Container>
+      <MemberImg src={infoData.image} /> <Name>{infoData.name}</Name>
+      <Part>{infoData.part}</Part>
+      <Part>{infoData.major}</Part>
+    </Container>
+  );
+};
+const Container = styled.div`
+  max-width: 13.9rem;
+
+  display: flex;
+  flex-direction: column;
+
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid ${(props) => props.theme.colors.gray20};
+  border-radius: 0.8rem;
+  background-color: ${(props) => props.theme.colors.primary20};
+
+  padding: 2rem 3rem 2rem 3rem;
+`;
+const MemberImg = styled.img`
+  width: 8rem;
+  height: 8rem;
+
+  border: 1px solid ${(props) => props.theme.colors.primary20};
+  border-radius: 4rem;
+
+  object-fit: cover;
+`;
+const Name = styled.div`
+  ${(props) => props.theme.fonts.subtitleS};
+  color: ${(props) => props.theme.colors.gray90};
+  /* margin: 1rem 0; */
+`;
+const Part = styled.div`
+  ${(props) => props.theme.fonts.bodyXS};
+  color: ${(props) => props.theme.colors.gray70};
+
+  text-align: center;
+
+  white-space: nowrap;
+`;
+export default MemberInfoBox;
diff --git a/src/components/contest/RecruitTeamItem.tsx b/src/components/contest/RecruitTeamItem.tsx
new file mode 100644
index 0000000..8495560
--- /dev/null
+++ b/src/components/contest/RecruitTeamItem.tsx
@@ -0,0 +1,143 @@
+import styled from 'styled-components';
+import LeaderInfoBox from './LeaderInfoBox';
+import MemberInfoBox from './MemberInfoBox';
+
+const RecruitTeamItem = ({ data }: { data: any }) => {
+  return (
+    <ItemLayout>
+      <LeaderBox>
+        <Role>팀장</Role>
+        <LeaderInfoBox infoData={data.leader} />
+      </LeaderBox>
+      <MemberBox>
+        <Role>팀원</Role>
+        <TeamInfoBox>
+          <TO>
+            모집 현황 : {data.cur}/{data.max}
+          </TO>
+          <IntroduceTitle>팀장의 한 마디</IntroduceTitle>
+          <IntroduceContent>{data.talk}</IntroduceContent>
+          <GoTeamButton>팀 자세히 보러가기</GoTeamButton>
+        </TeamInfoBox>
+        <MemberInfoContainer>
+          {data.members.map((member: any, index: any) => (
+            <MemberInfoBox infoData={member} key={index} />
+          ))}
+        </MemberInfoContainer>
+      </MemberBox>
+    </ItemLayout>
+  );
+};
+const ItemLayout = styled.div`
+  display: flex;
+  gap: 2.4rem;
+`;
+const Role = styled.div`
+  position: absolute;
+  left: -1px;
+  top: -1.5rem;
+
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.primary40};
+
+  border-radius: 0.8rem;
+
+  width: 4.1rem;
+  height: 3rem;
+  padding: 0.4rem 0.8rem;
+`;
+const LeaderBox = styled.div`
+  position: relative;
+
+  ${(props) => props.theme.fonts.subtitleS};
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.primary10};
+
+  border: 1px solid ${(props) => props.theme.colors.primary40};
+  border-radius: 0.8rem;
+
+  width: 17.1rem;
+  /* height: 23rem; */
+`;
+const MemberBox = styled.div`
+  position: relative;
+  display: flex;
+
+  ${(props) => props.theme.fonts.subtitleS};
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.primary10};
+
+  border: 1px solid ${(props) => props.theme.colors.primary40};
+  border-radius: 0.8rem;
+
+  width: 100%;
+  /* height: 23rem; */
+`;
+const TeamInfoBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+
+  width: 25rem;
+
+  padding: 2rem;
+`;
+const TO = styled.div`
+  ${(props) => props.theme.fonts.subtitleXS};
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.primary40};
+
+  width: 100%;
+`;
+const IntroduceTitle = styled.div`
+  ${(props) => props.theme.fonts.subtitleS};
+  color: ${(props) => props.theme.colors.gray90};
+`;
+const IntroduceContent = styled.div`
+  ${(props) => props.theme.fonts.subtitleM};
+  color: ${(props) => props.theme.colors.primary90};
+  background-color: ${(props) => props.theme.colors.white};
+
+  border: 1px solid ${(props) => props.theme.colors.primary40};
+  border-radius: 0.8rem;
+
+  width: 100%;
+  padding: 3.5rem;
+
+  text-align: center;
+`;
+const GoTeamButton = styled.button`
+  ${(props) => props.theme.fonts.subtitleXS};
+  color: rgba(255, 255, 255, 0.8);
+  background-color: ${(props) => props.theme.colors.primary40};
+
+  border: 1px solid ${(props) => props.theme.colors.primary40};
+  border-radius: 0.8rem;
+
+  width: 100%;
+  padding: 0.5rem;
+`;
+const MemberInfoContainer = styled.div`
+  display: flex;
+  gap: 1.2rem;
+  overflow-x: scroll;
+
+  max-width: 72rem;
+  /* max-width: 100%; */
+
+  padding: 2.8rem;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.4);
+  }
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.colors.primary60};
+    border-radius: 6px;
+  }
+`;
+export default RecruitTeamItem;
diff --git a/src/components/contest/RecruitTeamList.tsx b/src/components/contest/RecruitTeamList.tsx
new file mode 100644
index 0000000..fd99795
--- /dev/null
+++ b/src/components/contest/RecruitTeamList.tsx
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { TEAMS_DATA } from '../../constants/Contest';
+import RecruitTeamItem from './RecruitTeamItem';
+import { useNavigate } from 'react-router-dom';
+
+const RecruitTeamList = () => {
+  const navigate = useNavigate();
+  const handleBtnClicked = () => {
+    navigate('3');
+  };
+  return (
+    <RecruitTeamListLayout>
+      <RecruitTeamListTopContainer>
+        <RecruitTeamListTitle>모집 중인 팀</RecruitTeamListTitle>
+        <RecruitTeamButton onClick={handleBtnClicked}>
+          +팀 오픈하러 가기
+        </RecruitTeamButton>
+      </RecruitTeamListTopContainer>{' '}
+      <RecruitTeamContainer>
+        {TEAMS_DATA.map((data, index) => {
+          return <RecruitTeamItem data={data} key={index} />;
+        })}
+      </RecruitTeamContainer>
+    </RecruitTeamListLayout>
+  );
+};
+
+const RecruitTeamListLayout = styled.div`
+  margin-left: 3rem;
+`;
+const RecruitTeamListTopContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 3rem 0 4.5rem 0;
+`;
+
+const RecruitTeamListTitle = styled.div`
+  ${(props) => props.theme.fonts.heading3};
+  color: ${(props) => props.theme.colors.gray100};
+`;
+const RecruitTeamButton = styled.button`
+  ${(props) => props.theme.fonts.buttonL};
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.primary60};
+
+  display: inline-block;
+
+  width: 20.8rem;
+  height: 6.4rem;
+  border-radius: 3.2rem;
+`;
+const RecruitTeamContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+`;
+export default RecruitTeamList;
diff --git a/src/constants/Contest.ts b/src/constants/Contest.ts
new file mode 100644
index 0000000..997e1f4
--- /dev/null
+++ b/src/constants/Contest.ts
@@ -0,0 +1,161 @@
+export const CONTEST_DATA = {
+  title: '제 5회 대학(원)생 아이디어 소논문 공모전',
+  images: [
+    'https://thumb.mt.co.kr/06/2017/10/2017101714471864350_1.jpg/dims/optimize/',
+    'https://thumb.mt.co.kr/06/2017/10/2017101714471864350_1.jpg/dims/optimize/',
+  ],
+  data: '더미데이터더미데이터더미데이\n터더미데이터더\n미데이터\n더미데이터더미데이터더\n미데이터더미데이터더\n미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이\n터더미데이터더\n미데이터\n더미데이터더미데이터더\n미데이터더미데이터더\n미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이\n터더미데이터더\n미데이터\n더미데이터더미데이터더\n미데이터더미데이터더\n미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이\n터더미데이터더\n미데이터\n더미데이터더미데이터더\n미데이터더미데이터더\n미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터더미데이터',
+  remainDay: 8,
+};
+export const TEAMS_DATA = [
+  {
+    max: 7,
+    cur: 4,
+    talk: '봄 감자가 맛있단다.\n얼마나 맛있게요',
+    leader: {
+      name: '박형준',
+      image:
+        'https://i.namu.wiki/i/ZnBMAAGJaiFKqDmASXCt-977Xuq6gLA-G8AsD4K1BKCVBEzrjISoW9QyfcSKPnacwuBpCGSSyBtCJv8E-UocNQ.webp',
+      part: '중재하기',
+      major: '체육학과',
+    },
+    members: [
+      {
+        name: '채영대',
+        image:
+          'https://news.nateimg.co.kr/orgImg/jt/2021/12/30/ac963887-1bd3-4169-b98a-ab59f5bcc777.jpg',
+        part: '혜린 갈구기',
+        major: '의예과',
+      },
+      {
+        name: '민혜린',
+        image: 'https://cdn.theproof.co.kr/news/photo/202308/592_830_2319.jpg',
+        part: '영대 갈구기',
+        major: '언어학과',
+      },
+      {
+        name: '이재영',
+        image:
+          'https://image.ytn.co.kr/general/jpg/2022/1118/202211181457199274_d.jpg',
+        part: '우리팀디자이너최고',
+        major: '토목공학과',
+      },
+      {
+        name: '오진영',
+        image:
+          'https://mblogthumb-phinf.pstatic.net/MjAxNzA0MTRfMjUz/MDAxNDkyMTc2ODU0ODYz.rXc4wFsIK1QCEtUNhyhA61JkhWI2gpnAEmBFdEMvKkIg.Gd0-Vrcg8t2VNZsTTTzvYoJzP16ciIS6NZSlRH9CjZcg.JPEG.sinjeongcc/%EB%A7%8C%EB%93%A4%EC%96%B4%EC%A7%84_%EC%8B%A0_02.jpg?type=w420',
+        part: 'chatgpt',
+        major: '신',
+      },
+    ],
+  },
+  {
+    max: 7,
+    cur: 4,
+    talk: '봄 감자가 맛있단다',
+    leader: {
+      name: '박형준',
+      image:
+        'https://i.namu.wiki/i/ZnBMAAGJaiFKqDmASXCt-977Xuq6gLA-G8AsD4K1BKCVBEzrjISoW9QyfcSKPnacwuBpCGSSyBtCJv8E-UocNQ.webp',
+      part: '중재하기',
+      major: '체육학과',
+    },
+    members: [
+      {
+        name: '이민정',
+        image:
+          'https://thumb.mtstarnews.com/06/2023/06/2023062215005684112_1.jpg/dims/optimize',
+        part: '귀요미',
+        major: '귀여움학과',
+      },
+      {
+        name: '채영대',
+        image:
+          'https://news.nateimg.co.kr/orgImg/jt/2021/12/30/ac963887-1bd3-4169-b98a-ab59f5bcc777.jpg',
+        part: '혜린 갈구기',
+        major: '의예과',
+      },
+      {
+        name: '박예진',
+        image: 'https://cdn.iusm.co.kr/news/photo/201106/216370_60801_1153.jpg',
+        part: '술먹기',
+        major: '주류학과',
+      },
+      {
+        name: '민혜린',
+        image: 'https://cdn.theproof.co.kr/news/photo/202308/592_830_2319.jpg',
+        part: '영대 갈구기',
+        major: '언어학과',
+      },
+      {
+        name: '이재영',
+        image:
+          'https://image.ytn.co.kr/general/jpg/2022/1118/202211181457199274_d.jpg',
+        part: '우리팀디자이너최고',
+        major: '토목공학과',
+      },
+
+      {
+        name: '오진영',
+        image:
+          'https://mblogthumb-phinf.pstatic.net/MjAxNzA0MTRfMjUz/MDAxNDkyMTc2ODU0ODYz.rXc4wFsIK1QCEtUNhyhA61JkhWI2gpnAEmBFdEMvKkIg.Gd0-Vrcg8t2VNZsTTTzvYoJzP16ciIS6NZSlRH9CjZcg.JPEG.sinjeongcc/%EB%A7%8C%EB%93%A4%EC%96%B4%EC%A7%84_%EC%8B%A0_02.jpg?type=w420',
+        part: 'chatgpt',
+        major: '자퇴생',
+      },
+    ],
+  },
+  {
+    max: 7,
+    cur: 4,
+    talk: '봄 감자가 맛있단다',
+    leader: {
+      name: '박형준',
+      image:
+        'https://i.namu.wiki/i/ZnBMAAGJaiFKqDmASXCt-977Xuq6gLA-G8AsD4K1BKCVBEzrjISoW9QyfcSKPnacwuBpCGSSyBtCJv8E-UocNQ.webp',
+      part: '중재하기',
+      major: '체육학과',
+    },
+    members: [
+      {
+        name: '채영대',
+        image:
+          'https://news.nateimg.co.kr/orgImg/jt/2021/12/30/ac963887-1bd3-4169-b98a-ab59f5bcc777.jpg',
+        part: '혜린 갈구기',
+        major: '의예과',
+      },
+      {
+        name: '민혜린',
+        image: 'https://cdn.theproof.co.kr/news/photo/202308/592_830_2319.jpg',
+        part: '영대 갈구기',
+        major: '언어학과',
+      },
+      {
+        name: '이재영',
+        image:
+          'https://image.ytn.co.kr/general/jpg/2022/1118/202211181457199274_d.jpg',
+        part: '우리팀디자이너최고',
+        major: '토목공학과',
+      },
+      {
+        name: '오진영',
+        image:
+          'https://mblogthumb-phinf.pstatic.net/MjAxNzA0MTRfMjUz/MDAxNDkyMTc2ODU0ODYz.rXc4wFsIK1QCEtUNhyhA61JkhWI2gpnAEmBFdEMvKkIg.Gd0-Vrcg8t2VNZsTTTzvYoJzP16ciIS6NZSlRH9CjZcg.JPEG.sinjeongcc/%EB%A7%8C%EB%93%A4%EC%96%B4%EC%A7%84_%EC%8B%A0_02.jpg?type=w420',
+        part: 'chatgpt',
+        major: '자퇴생',
+      },
+    ],
+  },
+  {
+    max: 7,
+    cur: 4,
+    talk: '봄 감자가 맛있단다',
+    leader: {
+      name: '박형준',
+      image:
+        'https://i.namu.wiki/i/ZnBMAAGJaiFKqDmASXCt-977Xuq6gLA-G8AsD4K1BKCVBEzrjISoW9QyfcSKPnacwuBpCGSSyBtCJv8E-UocNQ.webp',
+      part: '중재하기',
+      major: '체육학과',
+    },
+    members: [],
+  },
+];
diff --git a/src/pages/contest/Contest.tsx b/src/pages/contest/Contest.tsx
new file mode 100644
index 0000000..5c25ae0
--- /dev/null
+++ b/src/pages/contest/Contest.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import ContestInfo from '../../components/contest/ContestInfo';
+import RecruitTeamList from '../../components/contest/RecruitTeamList';
+
+const Contest = () => {
+  return (
+    <ContestLayout>
+      <ContestInfo />
+      <hr />
+      <RecruitTeamList />
+    </ContestLayout>
+  );
+};
+const ContestLayout = styled.div`
+  max-width: 122.4rem;
+  margin: auto;
+
+
+`;
+export default Contest;