feat: 모집 상세 페이지 퍼블리싱

client/package.json

@@ -10,6 +10,7 @@
         "@types/node": "^16.18.3",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.8",
+        "@types/recoil": "^0.0.9",
         "axios": "^1.1.3",
         "concurrently": "^7.5.0",
         "react": "^18.2.0",

client/src/App.tsx

@@ -8,6 +8,7 @@ import { Route, Routes } from "react-router-dom";
 import axios, { AxiosResponse } from "axios";
 import { TIME } from "#constants/time";
 import NewCourse from "#pages/NewCourse/NewCourse";
+import RecruitDetail from "#pages/RecruitDetail";
 
 function App() {
     const [userInfo, setUserInfo] = useRecoilState(userState);
@@ -52,6 +53,9 @@ function App() {
             <Route path="course">
                 <Route path="new" element={<NewCourse />} />
             </Route>
+            <Route path="recruit">
+                <Route path="detail" element={<RecruitDetail />} />
+            </Route>
         </Routes>
     );
 }

client/src/pages/MainPage.tsx

@@ -12,11 +12,19 @@ const MainPage = () => {
     const handleSignUpClick = () => {
         navigate("/signup");
     };
+    const handleCourseNewClick = () => {
+        navigate("/course/new");
+    };
+    const handleRecruitDetailClick = () => {
+        navigate("/recruit/detail");
+    };
 
     return (
         <>
             <button onClick={handleLoginClick}>로그인</button>
             <button onClick={handleSignUpClick}>회원가입 </button>
+            <button onClick={handleCourseNewClick}>코스등록 </button>
+            <button onClick={handleRecruitDetailClick}>코스상세 </button>
         </>
     );
 };

client/src/pages/RecruitDetail.styles.ts

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { flexColumn } from "styles/flex";
+import { COLOR } from "styles/color";
+
+export const Title = styled.div`
+    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25);
+    font-size: 2rem;
+    font-weight: bold;
+    padding: 16px 10px 0px 10px;
+`;
+
+export const Content = styled.div`
+    ${flexColumn};
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 380px;
+    padding: 15px 19px;
+    div {
+        margin-bottom: 10px;
+        width: 100%;
+        color: ${COLOR.DARK_GRAY};
+        display: flex;
+        justify-content: space-between;
+        p {
+            font-weight: 500;
+            color: ${COLOR.BLACK};
+        }
+    }
+`;

client/src/pages/RecruitDetail.tsx

@@ -0,0 +1,45 @@
+import Header from "#components/Header/Header";
+import Button from "#components/Button/Button";
+import useMap from "#hooks/useMap";
+import { Content, Title } from "./RecruitDetail.styles";
+
+const RecruitDetail = () => {
+    const { renderMap } = useMap({
+        height: `${window.innerHeight - 500}px`,
+        center: { lat: 33.450701, lng: 126.570667 },
+    });
+    return (
+        <>
+            <Header loggedIn={true} text="모집 상세"></Header>
+            {renderMap()}
+            <Title>달려~달려~</Title>
+            <Content>
+                <div>
+                    <span>출발점</span>
+                    <p>잠실동 33-3</p>
+                </div>
+                <div>
+                    <span>페이스</span>
+                    <p>3'30"/km</p>
+                </div>
+                <div>
+                    <span>집합 일시</span>
+                    <p>2022년 11월 11일 오후 07시</p>
+                </div>
+                <div>
+                    <span>게시자</span>
+                    <p>gchoi96</p>
+                </div>
+                <div>
+                    <span>참가 현황</span>
+                    <p>1 / 5</p>
+                </div>
+                <Button width="fit" onClick={() => alert("참여 API 날림~")}>
+                    참여하기
+                </Button>
+            </Content>
+        </>
+    );
+};
+
+export default RecruitDetail;