feat: #51 clear lint error

boostcampwm-2022 · Nov 24, 2022 · 245f00c · 245f00c
2 parents 86f75c1 + 2bfc476
commit 245f00c
Show file tree

Hide file tree

Showing 21 changed files with 173 additions and 75 deletions.
diff --git a/client/src/assets/icons/index.ts b/client/src/assets/icons/index.ts
@@ -13,6 +13,7 @@ import RULER_ICON from "./ruler_icon.svg";
 import LOCATION_ICON from "./location_icon.svg";
 import RUNNING_ICON from "./running_icon.svg";
 import DELETE_ICON from "./delete_icon.svg";
+import USER_ICON from "./user_icon.svg";
 export {
     USER_CIRCLE_ICON,
     ARROW_LEFT_ICON,
@@ -29,4 +30,5 @@ export {
     RUNNING_ICON,
     SEARCH_ICON,
     DELETE_ICON,
+    USER_ICON,
 };
diff --git a/client/src/assets/icons/ruler_icon.svg b/client/src/assets/icons/ruler_icon.svg
diff --git a/client/src/assets/icons/running_icon.svg b/client/src/assets/icons/running_icon.svg
diff --git a/client/src/assets/icons/user_icon.svg b/client/src/assets/icons/user_icon.svg
diff --git a/client/src/components/Card/Card.styles.ts b/client/src/components/Card/Card.styles.ts
@@ -24,6 +24,7 @@ export const CardTitle = styled.p`
 
 export const SummaryBody = styled.div`
     ${flexRowSpaceBetween};
+    align-items: center;
     div {
         ${flexRowSpaceBetween};
         margin-top: 4px;
@@ -43,3 +44,17 @@ export const SummaryBody = styled.div`
 export const UserIdLabel = styled.span`
     color: ${COLOR.LIGHT_GRAY} !important;
 `;
+
+export const PeopleWrapper = styled.div`
+    img {
+        width: 10px;
+        margin-right: 4px;
+    }
+    span {
+        ${fontSmall(COLOR.BLACK, 400)};
+    }
+`;
+
+export const SummaryHead = styled.div`
+    ${flexRowSpaceBetween};
+`;
diff --git a/client/src/components/Card/CourseCard/CourseCard.stories.tsx b/client/src/components/Card/CourseCard/CourseCard.stories.tsx
@@ -18,19 +18,21 @@ export const _CourseCard: ComponentStory<typeof CourseCard> = (args) => (
 );
 _CourseCard.args = {
     data: {
-        title: "황새울공원 한 바퀴 도는 코스입니다.",
-        courseId: 5,
-        path: [
+        id: 1,
+        title: "Dirty Ho (Lan tou He)",
+        img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
+        path: JSON.stringify([
             { lat: 126.57091836134346, lng: 33.45090000378721 },
             { lat: 126.57004847387998, lng: 33.450635526049844 },
             { lat: 126.56931524544794, lng: 33.45101165404891 },
             { lat: 126.56932224193068, lng: 33.44959616387136 },
             { lat: 126.5700747443057, lng: 33.449670903389 },
             { lat: 126.570502727405, lng: 33.450123187413496 },
-        ],
-        pathLength: 3355,
-        userId: "gchoi96",
-        img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
-        hCode: "신림동",
+        ]),
+        pathLength: 60,
+        hDong: {
+            name: "",
+        },
+        createdAt: "2022-11-21T08:55:33.162Z",
     },
 };
diff --git a/client/src/components/Card/CourseCard/CourseCard.tsx b/client/src/components/Card/CourseCard/CourseCard.tsx
@@ -9,12 +9,12 @@ interface CourseCardProps {
 
 const CourseCard = ({ data }: CourseCardProps) => {
     return (
-        <Card img={data.img} to={`/course/${data.courseId}`}>
+        <Card img={data.img} to={`/course/${data.id}`}>
             <CardTitle>{data.title}</CardTitle>
             <SummaryBody>
                 <div>
                     <img src={LOCATION_ICON} />
-                    <span>{data.hCode}</span>
+                    <span>{data.hDong.name}</span>
                     <img src={RULER_ICON} />
                     <span>{`${(data.pathLength / 1000).toFixed(1)}km`}</span>
                 </div>

diff --git a/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx b/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx
@@ -17,27 +17,24 @@ export const _RecruitCard: ComponentStory<typeof RecruitCard> = (args) => (
 );
 _RecruitCard.args = {
     data: {
-        title: "달려~ 달려~",
-        recruitId: 5,
+        id: 125,
+        title: "gustas",
+        startTime: "2022-11-25T14:50:00.000Z",
+        maxPpl: 4,
+        currentPpl: 1,
+        userId: "guss95",
+        createdAt: "2022-11-24T15:04:46.095Z",
+        pace: 330,
         course: {
-            title: "황새울공원 한 바퀴 도는 코스입니다.",
-            courseId: 5,
-            path: [
-                { lat: 126.57091836134346, lng: 33.45090000378721 },
-                { lat: 126.57004847387998, lng: 33.450635526049844 },
-                { lat: 126.56931524544794, lng: 33.45101165404891 },
-                { lat: 126.56932224193068, lng: 33.44959616387136 },
-                { lat: 126.5700747443057, lng: 33.449670903389 },
-                { lat: 126.570502727405, lng: 33.450123187413496 },
-            ],
-            pathLength: 3355,
-            userId: "gchoi96",
+            id: 1,
+            title: "Dirty Ho (Lan tou He)",
             img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
-            hCode: "신림동",
+            path: "",
+            pathLength: 60,
+            hDong: {
+                name: "잠실동",
+            },
+            createdAt: "2022-11-21T08:55:33.162Z",
         },
-        startTime: new Date(),
-        maxPpl: 4,
-        pace: 210,
-        authorId: "gchoi96",
     },
 };
diff --git a/client/src/components/Card/RecruitCard/RecruitCard.tsx b/client/src/components/Card/RecruitCard/RecruitCard.tsx
@@ -1,27 +1,33 @@
 import { Recruit } from "#types/Recruit";
 import { getDisplayPaceString } from "#utils/stringtils";
 import Card from "../Card";
-import { LOCATION_ICON, RULER_ICON, RUNNING_ICON } from "#assets/icons";
-import { CardTitle, SummaryBody, UserIdLabel } from "../Card.styles";
+import { LOCATION_ICON, RULER_ICON, RUNNING_ICON, USER_ICON } from "#assets/icons";
+import { CardTitle, PeopleWrapper, SummaryBody, SummaryHead, UserIdLabel } from "../Card.styles";
 
 interface RecruitCardProps {
     data: Recruit;
 }
 
 const RecruitCard = ({ data }: RecruitCardProps) => {
     return (
-        <Card img={data.course.img} to={`/recruid/${data.recruitId}`}>
-            <CardTitle>{data.title}</CardTitle>
+        <Card img={data.course.img} to={`/recruid/${data.id}`}>
+            <SummaryHead>
+                <CardTitle>{data.title}</CardTitle>
+                <PeopleWrapper>
+                    <img src={USER_ICON} />
+                    <span>{`${data.currentPpl}/${data.maxPpl}`}</span>
+                </PeopleWrapper>
+            </SummaryHead>
             <SummaryBody>
                 <div>
                     <img src={LOCATION_ICON} />
-                    <span>{data.course.hCode}</span>
+                    <span>{data.course.hDong.name}</span>
                     <img src={RULER_ICON} />
                     <span>{`${(data.course.pathLength / 1000).toFixed(1)}km`}</span>
                     <img src={RUNNING_ICON} />
                     <span>{getDisplayPaceString(data.pace)}</span>
                 </div>
-                <UserIdLabel>{data.authorId}</UserIdLabel>
+                <UserIdLabel>{data.userId}</UserIdLabel>
             </SummaryBody>
         </Card>
     );

diff --git a/client/src/hooks/http/useHttpPost.ts b/client/src/hooks/http/useHttpPost.ts
@@ -9,6 +9,10 @@ const useGet = () => {
             .post(url, data)
             .then((res) => {
                 setIsLoading(false);
+                const data = res.data;
+                if (data.statusCode >= 400) {
+                    throw new Error(data.message);
+                }
                 return res.data;
             })
             .catch((error) => {

diff --git a/client/src/pages/RecruitDetail.tsx b/client/src/pages/RecruitDetail.tsx
@@ -1,57 +1,96 @@
 import Header from "#components/Header/Header";
 import Button from "#components/Button/Button";
-import useMap from "#hooks/useMap";
 import { Content, Title } from "./RecruitDetail.styles";
 import { useParams } from "react-router-dom";
 import { userState } from "#atoms/userState";
 import { useRecoilValue } from "recoil";
 import useHttpPost from "#hooks/http/useHttpPost";
+import useHttpGet from "#hooks/http/useHttpGet";
+import { useEffect, useState, useCallback } from "react";
+import ViewMap from "#components/Map/ViewMap/ViewMap";
 
 const RecruitDetail = () => {
     const { id } = useParams();
     const userInfo = useRecoilValue(userState);
     const { post } = useHttpPost();
-    const { renderMap } = useMap({
-        height: `${window.innerHeight - 400}px`,
-        center: { lat: 33.450701, lng: 126.570667 },
-    });
+    const { get } = useHttpGet();
+    const [title, setTitle] = useState("제목");
+    const [startPoint, setStartPoint] = useState("출발점");
+    const [pace, setPace] = useState("페이스ㄴ");
+    const [startTime, setStartTime] = useState("집합 일시");
+    const [author, setAuthor] = useState("게시자");
+    const [maxPpl, setMaxPpl] = useState("최대 인원");
+    const [currentPpl, setCurrentPpl] = useState("현재 인원");
 
+    const getPaceFormat = (sec: number): string => {
+        return `${parseInt(String(sec / 60))}'${sec % 60}"`;
+    };
+
+    const getTimeFormat = (timeZone: string): string => {
+        const date = timeZone.split("T")[0].split("-");
+        const time = timeZone.split("T")[1].split(":");
+        return `${date[0]}년 ${date[1]}월 ${date[2]}일 ${Number(time[0]) >= 12 ? "오후" : "오전"} ${time[0]}시 ${
+            time[1]
+        }분`;
+    };
     const onSubmitJoin = async () => {
         try {
             await post("/recruit/join", {
-                recruit: id,
+                recruitId: id,
                 userId: userInfo.userIdx,
             });
             alert("참여 완료");
         } catch (error: any) {
             alert(error.message);
         }
     };
+
+    const getRecruitDetail = useCallback(async () => {
+        try {
+            const response = await get(`/recruit/${id}`);
+            setTitle(response.title);
+            setStartPoint(response.name);
+            setPace(getPaceFormat(response.pace));
+            setStartTime(getTimeFormat(response.startTime));
+            setAuthor(response.userId);
+            setMaxPpl(response.maxPpl);
+            setCurrentPpl(response.currentPpl);
+        } catch {}
+    }, []);
+
+    useEffect(() => {
+        if (!userInfo.accessToken) {
+            return;
+        }
+        getRecruitDetail();
+    }, [userInfo]);
     return (
         <>
             <Header loggedIn={true} text="모집 상세"></Header>
-            {renderMap()}
-            <Title>달려~달려~</Title>
+            <ViewMap />
+            <Title>{title}</Title>
             <Content>
                 <div>
                     <span>출발점</span>
-                    <p>잠실동 33-3</p>
+                    <p>{startPoint}</p>
                 </div>
                 <div>
                     <span>페이스</span>
-                    <p>3'30"/km</p>
+                    <p>{pace}/km</p>
                 </div>
                 <div>
                     <span>집합 일시</span>
-                    <p>2022년 11월 11일 오후 07시</p>
+                    <p>{startTime}</p>
                 </div>
                 <div>
                     <span>게시자</span>
-                    <p>gchoi96</p>
+                    <p>{author}</p>
                 </div>
                 <div>
                     <span>참가 현황</span>
-                    <p>1 / 5</p>
+                    <p>
+                        {currentPpl} / {maxPpl}
+                    </p>
                 </div>
                 <Button width="fit" onClick={onSubmitJoin}>
                     참여하기

diff --git a/client/src/types/Course.ts b/client/src/types/Course.ts
@@ -1,11 +1,12 @@
-import { LatLng } from "./LatLng";
+import { hDong } from "./hDong";
 
 export interface Course {
+    id: number;
     title: string;
-    courseId: number;
-    path: LatLng[];
-    pathLength: number;
-    hCode: string;
-    userId: string;
     img: string;
+    path: string;
+    pathLength: number;
+    hDong: hDong;
+    createdAt: string;
+    userId?: string;
 }
diff --git a/client/src/types/Recruit.ts b/client/src/types/Recruit.ts
@@ -1,11 +1,13 @@
 import { Course } from "./Course";
 
 export interface Recruit {
+    id: number;
     title: string;
-    recruitId: number;
-    course: Course;
-    startTime: Date;
+    startTime: string;
     maxPpl: number;
+    currentPpl: number;
+    userId: string;
+    createdAt: string;
+    course: Course;
     pace: number;
-    authorId: string;
 }
diff --git a/client/src/types/hDong.ts b/client/src/types/hDong.ts
@@ -0,0 +1,4 @@
+export interface hDong {
+    name?: string;
+    code?: string;
+}
diff --git a/server/src/common/type/raw-recruit-data.ts b/server/src/common/type/raw-recruit-data.ts
@@ -13,4 +13,5 @@ export interface RawRecruitData {
     currentPpl: string;
     userId: number;
     createdAt: Date;
+    pace: number;
 }
diff --git a/server/src/common/utils/plainToGetRecruitDto.ts b/server/src/common/utils/plainToGetRecruitDto.ts
@@ -9,6 +9,7 @@ export const plainToGetRecruitDto = (plainRecruitData: RawRecruitData) => {
         currentPpl,
         createdAt,
         userId,
+        pace,
         course_id,
         course_title,
         course_img,
@@ -25,6 +26,7 @@ export const plainToGetRecruitDto = (plainRecruitData: RawRecruitData) => {
         maxPpl,
         currentPpl: parseInt(currentPpl),
         userId,
+        pace,
         createdAt,
         course: {
             id: course_id,

diff --git a/server/src/recruit/dto/get-recruit.dto.ts b/server/src/recruit/dto/get-recruit.dto.ts
@@ -1,11 +1,9 @@
 import { Transform, Type } from "class-transformer";
 import { IsBoolean, IsNumber, IsString, IsOptional } from "class-validator";
-import { runInThisContext } from "vm";
-
 export class GetRecruitDto {
     @IsOptional()
     @IsString()
-    private query?: string;
+    private query?: string | undefined;
 
     @IsOptional()
     @Type(() => Number)
@@ -64,15 +62,15 @@ export class GetRecruitDto {
     @IsNumber()
     private pageSize?: number;
 
-    getQuery(): string | null {
+    getQuery(): string | undefined {
         return this.query;
     }
 
-    getTime(): number | null {
+    getTime(): number | undefined {
         return this.time;
     }
 
-    getDist(): number | null {
+    getDist(): number | undefined {
         return this.dist;
     }