메인페이지 구현

client/package.json

@@ -20,6 +20,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-router-dom": "^6.4.3",
         "react-scripts": "5.0.1",
+        "react-slick": "^0.29.0",
         "recoil": "^0.7.6",
         "styled-components": "^5.3.6",
         "web-vitals": "^2.1.4"
@@ -72,6 +73,7 @@
         "@storybook/preset-create-react-app": "^4.1.2",
         "@storybook/react": "^6.5.13",
         "@storybook/testing-library": "^0.0.13",
+        "@types/react-slick": "^0.23.10",
         "@types/styled-components": "^5.1.26",
         "@typescript-eslint/eslint-plugin": "^5.42.1",
         "babel-plugin-named-exports-order": "^0.0.2",

client/public/index.html

@@ -9,6 +9,10 @@
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="stylesheet" type="text/css" charset="UTF-8"
+    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+  <link rel="stylesheet" type="text/css"
+    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
   <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_APP_KEY%"></script>
   <title>React App</title>
 </head>

client/src/App.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import SignUp from "#pages/SignUp/SignUp";
 import Login from "#pages/Login/Login";
-import MainPage from "#pages/MainPage/MainPage";
+import MenuPage from "#pages/Menu/MenuPage";
+import MainPage from "#pages/Main/MainPage";
 import Courses from "#pages/Courses/Courses";
 import { Route, Routes } from "react-router-dom";
 import NewCourse from "#pages/NewCourse/NewCourse";
@@ -17,6 +18,7 @@ function App() {
     return (
         <Routes>
             <Route path="/" element={<MainPage />} />
+            <Route path="menu" element={<MenuPage />} />
             <Route path="signup" element={<SignUp />} />
             <Route path="login" element={<Login />} />
             <Route path="courses" element={<Courses />} />

client/src/components/Card/RecruitTextCard/RecruitTextCard.tsx

@@ -0,0 +1,32 @@
+import DetailLabel from "#components/DetailLabel/DetailLabel";
+import { Recruit } from "#types/Recruit";
+import { getDisplayPaceString } from "#utils/stringUtils";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const Card = styled.div`
+    padding: 12px 16px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    div:not(:last-child) {
+        margin-bottom: 30px;
+    }
+`;
+
+interface RecruitTextCardProps {
+    data: Recruit;
+}
+
+const RecruitTextCard = ({ data }: RecruitTextCardProps) => {
+    const navigate = useNavigate();
+    return (
+        <Card onClick={() => navigate(`/recruit/${data.id}`)}>
+            <DetailLabel title="출발점" value={data.course.hDong.name || ""} />
+            <DetailLabel title="총거리" value={`${(data.course.pathLength / 1000).toFixed(1)}km`} />
+            <DetailLabel title="페이스" value={getDisplayPaceString(data.pace)} />
+            <DetailLabel title="참가 현황" value={`${data.currentPpl}/${data.maxPpl}`} />
+            <DetailLabel title="집합 일시" value={data.startTime.toLocaleString()} />
+        </Card>
+    );
+};
+export default RecruitTextCard;

client/src/components/Header/Header.tsx

@@ -16,7 +16,6 @@ const HeaderWrapper = styled.div`
     img {
         width: 24px;
         height: 24px;
-        cursor: pointer;
     }
     div {
         width: 24px;
@@ -26,14 +25,16 @@ const HeaderWrapper = styled.div`
 
 interface HeaderProps {
     text: string;
+    isMain?: boolean;
 }
 
-const Header = ({ text }: HeaderProps) => {
+const Header = ({ text, isMain = false }: HeaderProps) => {
     const navigate = useNavigate();
     const userInfo = useRecoilValue(userState);
     return (
         <HeaderWrapper>
-            <img src={ARROW_LEFT_ICON} onClick={() => navigate(-1)} />
+            {isMain ? <div /> : <img src={ARROW_LEFT_ICON} onClick={() => navigate(-1)} />}
+
             <p>{text}</p>
             <img src={USER_CIRCLE_ICON} onClick={() => navigate(userInfo.accessToken ? "/mypage" : "/login")} />
         </HeaderWrapper>

client/src/hooks/queries/useCoursesQuery.ts

@@ -0,0 +1,11 @@
+import useHttpGet from "#hooks/http/useHttpGet";
+import { Course } from "#types/Course";
+import HttpResponse from "#types/dto/HttpResponse";
+import { useQuery } from "@tanstack/react-query";
+
+const useCoursesQuery = () => {
+    const { get } = useHttpGet<HttpResponse<Course[]>>();
+    return useQuery<HttpResponse<Course[]>>(["course"], async () => get(`/course`).then((res) => res || {}));
+};
+
+export default useCoursesQuery;

client/src/hooks/queries/useRecruitDetailQuery.ts

@@ -1,12 +1,10 @@
 import useHttpGet from "#hooks/http/useHttpGet";
 import HttpResponse from "#types/dto/HttpResponse";
-import { Recruit } from "#types/Recruit";
+import { RecruitDetail } from "#types/RecruitDetail";
 import { useQuery } from "@tanstack/react-query";
 
 const useRecruitDetailQuery = (id: number) => {
-    const { get } = useHttpGet<HttpResponse<Recruit>>();
-    return useQuery<Recruit>(["recruit", id], async () => get(`/recruit/${id}`).then((res) => res.data), {
-        refetchInterval: 2000,
-    });
+    const { get } = useHttpGet<HttpResponse<RecruitDetail>>();
+    return useQuery<RecruitDetail>(["recruit", id], async () => get(`/recruit/${id}`).then((res) => res.data));
 };
 export default useRecruitDetailQuery;

client/src/hooks/queries/useRecruitsQuery.ts

@@ -0,0 +1,11 @@
+import useHttpGet from "#hooks/http/useHttpGet";
+import HttpResponse from "#types/dto/HttpResponse";
+import { Recruit } from "#types/Recruit";
+import { useQuery } from "@tanstack/react-query";
+
+const useRecruitsQuery = () => {
+    const { get } = useHttpGet<HttpResponse<Recruit[]>>();
+    return useQuery<HttpResponse<Recruit[]>>(["recruit"], async () => get(`/recruit`).then((res) => res || {}));
+};
+
+export default useRecruitsQuery;